:root{--bg:#f5f1e8;--ink:#20251e;--soft:#5e665b;--line:#d8d2c6;--orange:#e96837;--orange-dark:#b9431c;--green:#174b42;--paper:#fffdf8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}button{font:inherit}button:focus-visible{outline:3px solid #ebb24e;outline-offset:3px}main{max-width:1440px;margin:auto;padding:24px}.hero{background:var(--green);color:#f8f2e8;padding:38px 42px 30px;border-radius:22px}.copy,.overview,.player-head,.player-footer,.path-head,.module-head,.controls{display:flex;align-items:center}.copy{margin:0 0 30px}.lesson-label,.path-head>div>span,.module-head span{color:#eeb77d;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;margin:0 0 12px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.3rem,4.4vw,4.4rem);line-height:1;letter-spacing:-.06em;margin:0 0 12px}.desc{margin:0;color:#d8e0d2;font-size:1rem}.overview{gap:14px;border-top:1px solid #52736a;padding-top:19px}.ring{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#f7a64c var(--progress,0deg),#4b7167 0);position:relative}.ring:before{content:"";position:absolute;inset:6px;border-radius:inherit;background:var(--green)}.ring span{position:relative;font-size:.8rem;font-weight:700}.overview strong{font-size:1.2rem}.overview p{margin:2px 0 0;color:#b9cabc;font-size:.82rem}.line{width:min(290px,30vw);height:5px;margin-left:auto;border-radius:99px;background:#47695f;overflow:hidden}.line span{display:block;height:100%;background:#f7a64c}.link-button{border:0;background:transparent;color:#dbe6d9;text-decoration:underline;cursor:pointer;font-size:.84rem}.learning-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:24px;margin-top:24px;align-items:start}.player,.path{background:var(--paper);border:1px solid var(--line);border-radius:18px}.player{padding:30px}.player-head{justify-content:space-between;gap:20px}.lesson-label{color:var(--orange-dark);display:block;margin-bottom:5px}.player-head h2{margin:5px 0 3px;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.04em}.player-head p{color:var(--soft);margin-bottom:0;font-size:.9rem}.complete{border:1px solid #c8c8bb;border-radius:99px;padding:10px 14px;background:#fffdf8;cursor:pointer;white-space:nowrap}.complete.done{color:#f9f5e9;border-color:var(--green);background:var(--green)}.video-shell{display:grid;place-items:center;aspect-ratio:16/9;background:#1e2927;border-radius:13px;overflow:hidden;margin:28px 0 16px}.video-shell video{width:100%;height:100%;background:#000}.media-setup{color:#ebeee8;text-align:center;padding:30px}.play{width:52px;height:52px;margin:0 auto 15px;display:grid;place-items:center;border-radius:50%;padding-left:3px;background:var(--orange)}.media-setup h3{margin-bottom:7px}.media-setup p{margin-bottom:15px;color:#c8d0c5}.media-setup code{background:#344642;border-radius:5px;padding:5px 7px;font-size:.75rem}.player-footer{justify-content:space-between;color:var(--soft);font-size:.84rem}.controls{gap:8px}.controls button{background:none;border:1px solid #cfd0c4;border-radius:7px;padding:8px 10px;cursor:pointer;color:var(--ink)}.controls button:disabled{opacity:.35;cursor:not-allowed}.path{padding:24px 18px;max-height:calc(100vh - 48px);overflow:auto}.path-head{justify-content:space-between;padding:0 7px 18px;border-bottom:1px solid var(--line)}.path-head h2{margin:5px 0 0;font-size:1.4rem}.path-head>span{color:var(--soft);font-size:.85rem}.module{padding:21px 7px 3px;border-bottom:1px solid var(--line)}.module:last-child{border:0}.module-head{justify-content:space-between}.module-head span{color:var(--orange-dark);font-size:.68rem;margin:0}.module-head h3{margin:4px 0 0;font-size:1.03rem}.module-head small,.module>p{color:var(--soft)}.module>p{font-size:.78rem;margin:7px 0 12px}.lesson{display:flex;width:100%;gap:10px;text-align:left;border:0;background:transparent;padding:8px 6px;border-radius:8px;cursor:pointer}.lesson:hover,.lesson.active{background:#f1ebe0}.state{flex:0 0 27px;height:27px;display:grid;place-items:center;border:1px solid #c7c7bb;border-radius:50%;color:var(--soft);font-size:.66rem}.state.done{border-color:var(--green);background:var(--green);color:#fff}.lesson strong,.lesson small{display:block}.lesson strong{font-size:.83rem;line-height:1.35}.lesson small{color:var(--soft);font-size:.7rem;line-height:1.35;margin-top:2px}@media(max-width:900px){main{padding:14px}.hero{padding:26px}.copy{margin:0 0 28px}.learning-grid{grid-template-columns:1fr}.path{max-height:none}.line{display:none}}@media(max-width:560px){.hero{border-radius:14px;padding:20px}h1{font-size:2.55rem}.player{padding:20px}.player-head{align-items:flex-start;flex-direction:column}.complete{align-self:stretch}.player-footer{align-items:flex-start;flex-direction:column;gap:14px}.controls{width:100%}.controls button{flex:1}}
:root{--bg:#f5f1e8;--ink:#20251e;--soft:#5e665b;--line:#d8d2c6;--orange:#e96837;--orange-dark:#b9431c;--green:#174b42;--paper:#fffdf8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}button{font:inherit}button:focus-visible{outline:3px solid #ebb24e;outline-offset:3px}main{max-width:1440px;margin:auto;padding:24px}.hero{background:var(--green);color:#f8f2e8;padding:38px 42px 30px;border-radius:22px}.copy,.overview,.player-head,.player-footer,.path-head,.module-head,.controls{display:flex;align-items:center}.copy{margin:0 0 30px}.lesson-label,.path-head>div>span,.module-head span{color:#eeb77d;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;margin:0 0 12px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.3rem,4.4vw,4.4rem);line-height:1;letter-spacing:-.06em;margin:0 0 12px}.desc{margin:0;color:#d8e0d2;font-size:1rem}.overview{gap:14px;border-top:1px solid #52736a;padding-top:19px}.ring{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#f7a64c var(--progress,0deg),#4b7167 0);position:relative}.ring:before{content:"";position:absolute;inset:6px;border-radius:inherit;background:var(--green)}.ring span{position:relative;font-size:.8rem;font-weight:700}.overview strong{font-size:1.2rem}.overview p{margin:2px 0 0;color:#b9cabc;font-size:.82rem}.line{width:min(290px,30vw);height:5px;margin-left:auto;border-radius:99px;background:#47695f;overflow:hidden}.line span{display:block;height:100%;background:#f7a64c}.link-button{border:0;background:transparent;color:#dbe6d9;text-decoration:underline;cursor:pointer;font-size:.84rem}.learning-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:24px;margin-top:24px;align-items:start}.player,.path{background:var(--paper);border:1px solid var(--line);border-radius:18px}.player{padding:30px}.player-head{justify-content:space-between;gap:20px}.lesson-label{color:var(--orange-dark);display:block;margin-bottom:5px}.player-head h2{margin:5px 0 3px;font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.04em}.player-head p{color:var(--soft);margin-bottom:0;font-size:.9rem}.complete{border:1px solid #c8c8bb;border-radius:99px;padding:10px 14px;background:#fffdf8;cursor:pointer;white-space:nowrap}.complete.done{color:#f9f5e9;border-color:var(--green);background:var(--green)}.video-shell{display:grid;place-items:center;aspect-ratio:16/9;background:#1e2927;border-radius:13px;overflow:hidden;margin:28px 0 16px}.video-shell video{width:100%;height:100%;background:#000}.video-shell video::cue{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(.78rem,1.65vw,1.05rem);font-weight:600;line-height:1.35;background:rgba(0,0,0,.72);color:#fff;text-shadow:none}.media-setup{color:#ebeee8;text-align:center;padding:30px}.play{width:52px;height:52px;margin:0 auto 15px;display:grid;place-items:center;border-radius:50%;padding-left:3px;background:var(--orange)}.media-setup h3{margin-bottom:7px}.media-setup p{margin-bottom:15px;color:#c8d0c5}.media-setup code{background:#344642;border-radius:5px;padding:5px 7px;font-size:.75rem}.player-footer{justify-content:space-between;color:var(--soft);font-size:.84rem}.controls{gap:8px}.controls button{background:none;border:1px solid #cfd0c4;border-radius:7px;padding:8px 10px;cursor:pointer;color:var(--ink)}.controls button:disabled{opacity:.35;cursor:not-allowed}.path{padding:24px 18px;max-height:calc(100vh - 48px);overflow:auto}.path-head{justify-content:space-between;padding:0 7px 18px;border-bottom:1px solid var(--line)}.path-head h2{margin:5px 0 0;font-size:1.4rem}.path-head>span{color:var(--soft);font-size:.85rem}.module{padding:21px 7px 3px;border-bottom:1px solid var(--line)}.module:last-child{border:0}.module-head{justify-content:space-between}.module-head span{color:var(--orange-dark);font-size:.68rem;margin:0}.module-head h3{margin:4px 0 0;font-size:1.03rem}.module-head small,.module>p{color:var(--soft)}.module>p{font-size:.78rem;margin:7px 0 12px}.lesson{display:flex;width:100%;gap:10px;text-align:left;border:0;background:transparent;padding:8px 6px;border-radius:8px;cursor:pointer}.lesson:hover,.lesson.active{background:#f1ebe0}.state{flex:0 0 27px;height:27px;display:grid;place-items:center;border:1px solid #c7c7bb;border-radius:50%;color:var(--soft);font-size:.66rem}.state.done{border-color:var(--green);background:var(--green);color:#fff}.lesson strong,.lesson small{display:block}.lesson strong{font-size:.83rem;line-height:1.35}.lesson small{color:var(--soft);font-size:.7rem;line-height:1.35;margin-top:2px}@media(max-width:900px){main{padding:14px}.hero{padding:26px}.copy{margin:0 0 28px}.learning-grid{grid-template-columns:1fr}.path{max-height:none}.line{display:none}}@media(max-width:560px){.hero{border-radius:14px;padding:20px}h1{font-size:2.55rem}.player{padding:20px}.player-head{align-items:flex-start;flex-direction:column}.complete{align-self:stretch}.player-footer{align-items:flex-start;flex-direction:column;gap:14px}.controls{width:100%}.controls button{flex:1}}