:root{--orange:#fa5b21;--ink:#24241f;--gray:#797a75;--cream:#fbf7ef}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;background:#fff}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}.wrap{max-width:1200px;margin:auto;padding:0 24px}header{height:88px;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #eee}.nav{height:100%;display:flex;align-items:center;gap:38px}.brand{font-size:27px;font-weight:850;display:flex;align-items:center;gap:9px;white-space:nowrap;position:relative;letter-spacing:-1px}.logo{display:grid;place-items:center;background:var(--orange);color:white;border-radius:10px;font-size:26px;width:42px;height:42px}.brand small{position:absolute;left:51px;top:34px;font-size:8px;letter-spacing:1px;color:#888}.nav nav{display:flex;gap:31px;margin-left:32px;font-size:14px;white-space:nowrap}.nav nav a:hover,.nav nav a.active{color:var(--orange)}nav span{margin-left:4px}#search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#f5f6f5;border-radius:24px;padding:10px 14px}#search input{border:0;outline:none;background:transparent;width:145px;font-size:12px}#search button{border:0;background:transparent;color:#999}.nav-cta{font-size:13px;color:var(--orange);white-space:nowrap}.hero{background:#f9f3e8;overflow:hidden;position:relative}.hero-inner{display:grid;grid-template-columns:220px 1fr 430px;min-height:505px;align-items:center;gap:40px}.categories{background:rgba(255,255,255,.85);border-radius:14px;padding:24px 20px;align-self:center}.categories h3{font-size:14px;margin:0 0 23px}.cat{display:block;padding:17px 0;border-top:1px solid #eee}.cat b{font-size:14px;display:flex;justify-content:space-between}.cat p{font-size:11px;color:#92918b;margin:8px 0 0}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--orange);font-weight:700}.hero h1{font-size:49px;line-height:1.3;letter-spacing:-2px;margin:21px 0}.hero h1 em{font-style:normal;color:var(--orange)}.hero-copy>p{font-size:14px;line-height:1.9;color:#7c776e}.btn{display:inline-flex;justify-content:center;align-items:center;gap:25px;border:1px solid var(--orange);background:var(--orange);color:white;border-radius:5px;padding:14px 23px;font-size:13px}.hero .btn{margin-top:19px}.hero-note{font-size:10px;color:#a39b8d;margin-top:22px;letter-spacing:1px}.hero-art{height:435px;position:relative;display:grid;place-items:center}.orbit{width:350px;height:350px;border:1px solid #e6c7a1;border-radius:50%;position:absolute}.orbit:after{content:'';inset:27px;border:1px dashed #e6c7a1;border-radius:50%;position:absolute}.sun{position:absolute;width:270px;height:270px;background:#fbd5a4;border-radius:50%;right:10px;top:30px}.big-star{color:var(--orange);font-size:230px;line-height:1;position:absolute;top:49px;left:80px;transform:rotate(-12deg);text-shadow:8px 11px 0 #dc4414}.art-card{position:absolute;background:#fffefa;border:1px solid #e8dfd0;border-radius:12px;box-shadow:0 15px 28px #8d6c3920;padding:19px;width:235px;transform:rotate(-8deg);left:12px;bottom:52px}.art-card small{font-size:9px;letter-spacing:2px;color:#a69a83}.art-card b{display:block;font-size:22px;margin:10px 0}.bars{height:65px;display:flex;align-items:end;gap:9px}.bars i{background:#ffba69;width:28px;border-radius:4px 4px 0 0}.bars i:last-child{background:var(--orange)}.art-tag{position:absolute;right:-5px;top:81px;background:var(--orange);color:white;padding:15px 20px;border-radius:30px;transform:rotate(9deg);font-size:12px}.art-label{position:absolute;bottom:44px;right:0;border:1px solid #d8c3a4;border-radius:40px;padding:13px;background:#fff9ed;font-size:12px}.value-strip{display:flex;justify-content:space-between;padding-top:23px;padding-bottom:23px;font-size:12px;color:#7c7c75;border-bottom:1px solid #eee}.value-strip b{color:#3a3a34;margin-right:10px}.section{padding:73px 0}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.section h2{font-size:30px;letter-spacing:-1px;margin:10px 0}.section-top p,.intro{font-size:13px;color:var(--gray);line-height:1.8}.section-index{font-family:Georgia,serif;color:#ccc;font-size:13px}.filters{display:flex;gap:10px;margin:26px 0}.filter{border:1px solid #e8e8e4;background:white;border-radius:30px;padding:10px 22px;font-size:12px;color:#777}.filter.active{background:var(--ink);color:white;border-color:var(--ink)}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.course{border:1px solid #e8e8e4;border-radius:12px;overflow:hidden;transition:transform .25s,box-shadow .25s;background:#fff}.course:hover{transform:translateY(-6px);box-shadow:0 16px 35px #2221}.cover{height:225px;padding:25px;position:relative;overflow:hidden;background:#ffede0}.cover.green{background:#e9eee6}.cover.dark{background:#272e2a;color:#fff}.cover small{font-size:9px;letter-spacing:2px;opacity:.6}.cover h3{font-size:28px;line-height:1.35;margin:16px 0;position:relative;z-index:2}.cover .issue{position:absolute;right:21px;top:20px;font-size:10px;border:1px solid currentColor;border-radius:20px;padding:5px 9px;opacity:.65}.cover-art{position:absolute;right:18px;bottom:-20px;color:var(--orange);font-size:150px;line-height:1;transform:rotate(-12deg)}.green .cover-art{color:#718461}.dark .cover-art{color:#c8e6a1}.cover-label{position:absolute;bottom:23px;left:25px;font-size:10px;border-bottom:1px solid currentColor;padding-bottom:5px;opacity:.7}.course-info{padding:24px}.badge{font-size:10px;color:var(--orange);background:#fff1e9;padding:5px 9px;border-radius:3px}.course-info h3{font-size:18px;margin:17px 0 10px}.course-info p{font-size:12px;line-height:1.8;color:#888;margin-bottom:20px}.tags{font-size:10px;color:#777;display:flex;gap:8px}.tags span{border:1px solid #eee;padding:5px 7px}.course-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:17px;border-top:1px solid #eee;font-size:12px}.course-bottom b{color:var(--orange);font-size:13px}.course-bottom i{font-style:normal;font-size:19px}.path-section{background:#f8f9f5}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:42px}.step{border-top:1px solid #d6d9cf;padding-top:20px}.step-number{font:italic 35px Georgia;color:#a4b096}.step h3{font-size:19px;margin:17px 0 10px}.step p{font-size:12px;line-height:1.9;color:#7b8074}.step a{font-size:12px;display:inline-block;margin-top:13px;color:#687754}.about{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.about h2{font-size:37px;line-height:1.5}.about p{color:#777;font-size:13px;line-height:2}.about-points{display:grid;grid-template-columns:1fr 1fr;gap:25px}.about-points div{border-top:1px solid #ddd;padding-top:19px}.about-points b{font-size:15px}.about-points span{display:block;font-size:11px;color:#999;margin-top:10px}.banner{margin-bottom:70px;background:#fb5c26;border-radius:12px;color:#fff;padding:36px 42px;display:flex;justify-content:space-between;align-items:center}.banner h2{font-size:26px;margin:0 0 12px}.banner p{font-size:12px;opacity:.8;margin:0}.banner .btn{background:#fff;color:var(--orange);border-color:#fff}footer{background:#f7f7f4;padding:45px 0 20px}.foot{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:40px}.foot p,.foot a:not(.brand){font-size:11px;color:#888;line-height:1.9}.foot>div>span{font-size:12px;display:block;margin-bottom:15px}.foot>div>a:not(.brand){display:block}.copyright{font-size:10px;color:#aaa;border-top:1px solid #e5e5df;margin-top:35px;padding-top:20px;display:flex;justify-content:space-between}.float-top{position:fixed;bottom:24px;right:25px;border:1px solid #e7e7e2;background:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}.breadcrumb{font-size:11px;color:#999;padding-top:26px;padding-bottom:26px}.detail-hero{background:var(--cream);padding:36px 0 45px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.detail-grid .cover{height:310px;border-radius:10px;padding:36px}.detail-grid .cover h3{font-size:43px}.detail-grid .cover-art{font-size:220px}.detail-summary h1{font-size:29px;line-height:1.5;margin:18px 0}.detail-summary p{font-size:13px;color:#888;line-height:1.9}.detail-meta{display:flex;gap:25px;border-top:1px solid #e7dfd3;padding-top:18px;font-size:12px;margin:20px 0}.detail-main{display:grid;grid-template-columns:1fr 280px;gap:30px;padding-top:40px;padding-bottom:70px;background:#fff}.detail-body{border:1px solid #eee;border-radius:8px;overflow:hidden}.tabs{display:flex;border-bottom:1px solid #eee;position:sticky;top:88px;background:#fff}.tabs button{flex:1;border:0;background:none;padding:20px 8px;font-size:13px}.tabs button.active{color:var(--orange);box-shadow:inset 0 -2px var(--orange)}.tab-content{padding:36px}.tab-content h2{font-size:25px;margin:8px 0 20px}.tab-content p,.tab-content li{font-size:13px;line-height:2;color:#777}.detail-poster{padding:30px;background:#fff4e9;border-radius:8px;margin-bottom:28px}.detail-poster h2{font-size:36px;line-height:1.5}.detail-poster em{font-style:normal;color:var(--orange)}.module{padding:22px 0;border-bottom:1px solid #eee;display:flex;gap:20px}.module>b{color:var(--orange);font-family:Georgia;font-size:23px}.module h3{font-size:15px;margin:0 0 7px}.module p{margin:0}.side-box{border:1px solid #eee;border-radius:8px;padding:26px;height:max-content}.side-box h3{font-size:17px}.side-box ol{padding-left:20px}.side-box li{font-size:12px;color:#888;line-height:1.9;margin-bottom:20px}.side-box .btn{width:100%;margin-top:10px}.notice{background:#f7f7f2;padding:15px;font-size:11px!important}.empty{padding:40px;color:#888;grid-column:1/-1}.muted{color:#aaa!important}@media(min-width:1400px){.wrap{max-width:1250px}.hero-inner{grid-template-columns:220px 1fr 440px;gap:50px}}@media(max-width:1000px){.nav{gap:20px}.nav nav{margin-left:0;gap:20px}#search{display:none}.hero-inner{grid-template-columns:180px 1fr 300px;gap:25px}.hero h1{font-size:40px}.hero-art{transform:scale(.8);transform-origin:center}.course-info{padding:18px}.course-info h3{font-size:16px}}@media(max-width:720px){header{height:73px}.nav{justify-content:space-between}.nav nav{gap:15px;font-size:12px}.nav nav a:nth-child(n+3),.nav-cta,.brand small{display:none}.brand{font-size:22px}.logo{width:34px;height:34px;font-size:22px}.hero-inner{display:block;padding-top:45px;min-height:auto}.categories{display:none}.hero h1{font-size:43px}.hero-art{height:325px;max-width:380px;margin:auto}.hero-copy{position:relative;z-index:3}.value-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:10px}.section{padding:45px 0}.section h2{font-size:26px}.section-index{display:none}.course-grid{grid-template-columns:1fr}.cover{height:235px}.filters{flex-wrap:wrap}.filter{padding:9px 16px}.steps{grid-template-columns:1fr;gap:25px}.about{grid-template-columns:1fr;gap:25px}.about h2{font-size:31px}.banner{margin:0 24px 45px;padding:27px;display:block}.banner h2{font-size:23px}.banner .btn{margin-top:24px}.foot{grid-template-columns:1fr 1fr}.foot>div:last-child{grid-column:1/-1}.copyright span{display:none}.detail-grid{grid-template-columns:1fr;gap:26px}.detail-main{grid-template-columns:1fr}.detail-grid .cover{height:260px}.detail-grid .cover h3{font-size:33px}.detail-summary h1{font-size:25px}.tab-content{padding:24px}.detail-poster{padding:20px}.detail-poster h2{font-size:28px}.tabs{top:73px}}
.section.wrap{padding-left:24px;padding-right:24px}.cover>small{display:block;max-width:150px;line-height:1.6}.cover .issue{top:16px;right:16px}@media(min-width:721px) and (max-width:1000px){.hero-inner{grid-template-columns:1fr 300px}.categories{display:none}.hero-copy{padding:35px 0}.cover>small{max-width:85px}.cover .issue{font-size:8px;padding:4px 6px}.about{gap:40px}}@media(max-width:720px){.cover>small{max-width:170px}}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap}.btn.secondary{background:transparent;color:var(--orange)}.checkout-page{background:#f7f8f6;padding-bottom:70px;min-height:75vh}.checkout-heading{display:flex;justify-content:space-between;align-items:center;padding:12px 0 24px}.checkout-heading h1{font-size:30px;margin:12px 0}.checkout-heading p{font-size:13px;color:#888}.demo-badge{font-size:12px;padding:9px 14px;background:#fff0e6;border:1px solid #ffdbc5;border-radius:30px;color:#c85b21}.checkout-progress{display:flex;align-items:center;gap:28px;font-size:12px;color:#aaa;padding:20px 0 32px}.checkout-progress b{color:#c65b29;font-weight:500}.checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px}.order-panel{background:#fff;border:1px solid #e9e9e4;border-radius:12px;padding:27px;margin-bottom:24px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}.panel-title h2,.order-summary h2{font-size:18px;margin:0}.panel-title>span{font-size:11px;color:#999}.panel-title .order-status{color:#d47a3b;background:#fff5e9;border-radius:20px;padding:6px 10px}.order-course{display:flex;gap:24px;align-items:center;padding-bottom:25px;border-bottom:1px solid #eee}.order-course .cover{width:160px;height:125px;flex-shrink:0;padding:15px;border-radius:7px}.order-course .cover h3{font-size:18px;margin:9px 0}.order-course .cover-art{font-size:70px;right:3px;bottom:-8px}.order-course .cover small{font-size:6px;max-width:80px}.order-course .cover .issue,.order-course .cover-label{display:none}.order-course>div>h3{font-size:17px;line-height:1.6;margin:13px 0 7px}.order-course p{font-size:12px;color:#888;line-height:1.8}.order-quantity{font-size:11px;color:#999}.order-meta{font-size:12px;margin:22px 0 0}.order-meta>div{display:flex;gap:20px;margin-top:17px}.order-meta dt{color:#999;width:65px;flex-shrink:0}.order-meta dd{margin:0;overflow-wrap:anywhere;line-height:1.5}.payment-options{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.payment-option{display:flex;align-items:center;gap:12px;border:1px solid #e4e5e0;border-radius:8px;padding:18px;cursor:pointer;position:relative}.payment-option:has(input:checked){border-color:var(--orange);background:#fff9f5}.payment-option:has(input:focus-visible){outline:2px solid #333;outline-offset:3px}.payment-option input{position:absolute;opacity:0;width:1px;height:1px}.payment-icon{display:grid;place-items:center;width:36px;height:36px;color:white;border-radius:9px;font-size:22px;font-weight:bold}.alipay{background:#1689eb}.wechat{background:#22b75a}.payment-option b{font-size:14px}.payment-option small{display:block;font-size:10px;color:#999;margin-top:6px}.radio-check{margin-left:auto;width:16px;height:16px;border:1px solid #d8d9d2;border-radius:50%;flex-shrink:0}.payment-option input:checked~.radio-check{border:5px solid var(--orange)}.payment-note{font-size:11px;line-height:1.8;color:#999;margin:19px 0 0}.order-summary{height:max-content;position:sticky;top:110px}.order-summary h2{margin:14px 0 26px}.summary-line{display:flex;justify-content:space-between;font-size:12px;margin:19px 0;color:#888}.summary-line b{color:#555;font-weight:500}.summary-total{border-top:1px solid #eee;margin-top:23px;padding-top:23px}.summary-total>span{font-size:12px;color:#777}.summary-total strong{display:block;font-size:32px;color:var(--orange);margin:12px 0 7px}.summary-total small{font-size:18px}.summary-total p{font-size:10px;color:#aaa;margin-bottom:26px}.order-summary .btn{width:100%}.back-course{display:block;text-align:center;margin-top:22px;font-size:12px;color:#888}dialog{border:0;border-radius:16px;max-width:440px;width:calc(100% - 40px);padding:35px;text-align:center;box-shadow:0 20px 80px #0003}dialog::backdrop{background:#2229;backdrop-filter:blur(3px)}dialog h2{font-size:20px;line-height:1.5}dialog p{font-size:13px;color:#888;line-height:1.9}.result-icon{background:#fff1e6;border-radius:50%;width:55px;height:55px;display:grid;place-items:center;margin:0 auto 22px;color:var(--orange);font-size:30px}dialog .btn{width:100%;margin-top:18px}#result-method{font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:800px){.checkout-layout{grid-template-columns:1fr}.order-summary{position:static}.checkout-heading h1{font-size:25px}.checkout-progress{gap:14px}.order-course{gap:16px}.order-panel{padding:20px}.checkout-heading{gap:14px}.demo-badge{white-space:nowrap}}@media(max-width:480px){.order-course{align-items:flex-start}.order-course .cover{width:105px;height:115px;padding:12px}.order-course .cover h3{font-size:16px}.order-course>div>h3{font-size:15px}.payment-options{grid-template-columns:1fr}.checkout-heading{display:block}.demo-badge{display:inline-block;margin-top:8px}.checkout-progress{font-size:10px;gap:10px}.panel-title{flex-wrap:wrap}}
.user-area{position:relative;margin-left:auto;flex-shrink:0}.user-trigger{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0;color:#777;font-size:12px;white-space:nowrap}.user-avatar{height:40px;width:40px;border-radius:50%;background:#f1eee8;color:#c4b9a9;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 0 0 1px #e9e5df;overflow:hidden}.user-avatar svg{width:36px;height:36px}.signed-in .user-avatar{color:#f0986d;background:#fff0e7;box-shadow:0 0 0 1px #ffd6bd}.user-menu{position:absolute;right:0;top:53px;padding:18px;background:#fff;border:1px solid #eee;border-radius:9px;box-shadow:0 8px 25px #2221;min-width:165px}.user-menu>span{font-size:12px;color:#777;display:block;margin-bottom:13px}.user-menu>button{border:0;border-top:1px solid #eee;background:white;width:100%;text-align:left;color:var(--orange);font-size:12px;padding:13px 0 0}#login-dialog{padding:38px;width:420px;max-width:calc(100% - 36px);text-align:left}.login-close{position:absolute;right:17px;top:12px;border:0;background:none;color:#999;font-size:26px}.login-logo{margin:0 0 22px}.login-subtitle{margin:0 0 28px!important;font-size:12px!important}.login-field{display:block;font-size:12px;margin-top:18px}.login-field>input,.password-wrap{margin-top:9px}.login-field input{width:100%;padding:14px;border:1px solid #e3e3dd;border-radius:6px;background:#fafaf8;font-size:13px;outline:none}.login-field input:focus{border-color:var(--orange);background:white}.login-field input[aria-invalid=true]{border-color:#dc4428}.password-wrap{display:block;position:relative}.password-wrap input{padding-right:58px}.password-wrap button{position:absolute;right:12px;top:14px;border:0;background:transparent;color:#888;font-size:11px}.login-error{min-height:20px;font-size:11px!important;color:#d94f27!important;margin:10px 0 0!important}.login-submit{margin-top:10px!important}.price-pending{font-size:26px!important}.nav{gap:24px}#search{margin-left:auto}.user-trigger:focus-visible{outline:2px solid var(--orange);outline-offset:5px;border-radius:6px}@media(max-width:1100px){#search{display:none}.nav nav{margin-left:auto}.user-area{margin-left:8px}}@media(max-width:720px){.nav{gap:12px}.nav nav{gap:12px}.user-trigger{gap:5px}.user-avatar{width:32px;height:32px}.user-avatar svg{width:28px;height:28px}.signed-in #user-label{display:none}#login-dialog{padding:30px}.user-area{margin-left:0}}

/* 课程目录 */
.course-catalog{margin-top:38px;border-top:1px solid #eee;padding-top:30px}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.catalog-heading h2{margin:0}.catalog-heading>span{font-size:12px;color:#999;white-space:nowrap}.catalog-group{border:1px solid #ecece6;border-radius:8px;margin-bottom:16px;overflow:hidden}.catalog-group h3{margin:0}.catalog-group-title{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:17px 20px;border:0;background:#f8f8f4;text-align:left;color:var(--ink);font-size:15px;font-weight:600}.catalog-group-title small{font-size:11px;color:#999;font-weight:400}.catalog-lessons{list-style:none;margin:0;padding:0}.catalog-lessons li+li{border-top:1px solid #f0f0eb}.catalog-lesson{display:flex;align-items:center;gap:13px;width:100%;padding:17px 22px;background:white;border:0;text-align:left;color:#555;font-size:13px;line-height:1.5}.catalog-play{font-size:17px;color:#bbb}.catalog-lock{margin-left:auto;color:#aaa;font-size:19px}.catalog-lesson:hover,.catalog-group-title:hover{background:#fff5ee;color:var(--orange)}.catalog-lesson:hover .catalog-play,.catalog-lesson:hover .catalog-lock{color:var(--orange)}.catalog-lesson:focus-visible,.catalog-group-title:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}.course-catalog>.catalog-lessons{border:1px solid #ecece6;border-radius:8px;overflow:hidden}@media(max-width:480px){.catalog-heading{align-items:flex-start;flex-direction:column}.catalog-group-title{padding:15px 16px}.catalog-lesson{padding:15px 17px}}