:root{color-scheme:light;--color-navy-900: #151C32;--color-navy-800: #202842;--color-primary-700: #3026D9;--color-primary-600: #4338E5;--color-primary-500: #574BEF;--color-primary-100: #EEEFFD;--color-primary-050: #F6F6FF;--color-surface: #FFFFFF;--color-background: #F5F6FA;--color-background-soft: #FAFAFC;--color-text-primary: #202433;--color-text-secondary: #626879;--color-text-muted: #8A90A0;--color-border: #E1E4EC;--color-border-strong: #C8CDD9;--color-success: #2E8B68;--color-warning: #C8872F;--color-error: #C64B55;font-family:PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;overflow:hidden}body{margin:0;background:var(--color-background);color:var(--color-text-primary)}[hidden]{display:none!important}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.course-shell{height:100%;max-height:100dvh;min-height:0;display:grid;grid-template-rows:58px minmax(0,1fr) 58px;overflow:hidden;background:linear-gradient(180deg,var(--color-background-soft),var(--color-background))}.topbar{position:relative;z-index:20;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:14px;padding:8px 16px 11px;background:#fffffff5;border-bottom:1px solid var(--color-border);box-shadow:0 8px 24px #151c320d}.top-title{min-width:0;justify-self:center;text-align:center;max-width:min(720px,72vw)}.top-title{grid-column:2}.more-btn{grid-column:3}.top-title strong{display:block;font-size:16px;line-height:1.2;color:var(--color-navy-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-title span,.eyebrow{color:var(--color-text-secondary);font-size:13px}.top-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--color-border);overflow:hidden}.top-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary-700),var(--color-primary-500))}.icon-btn,.nav-btn,.primary,.secondary,.cc-btn{border:1px solid var(--color-border-strong);border-radius:8px;min-height:44px;padding:8px 14px;background:var(--color-surface);color:var(--color-navy-800)}.icon-btn{display:inline-grid;place-items:center;width:44px;padding:0;font-size:21px;line-height:1}.primary,.primary-nav{background:var(--color-primary-600);border-color:var(--color-primary-600);color:#fff}.secondary{color:var(--color-primary-700);border-color:var(--color-primary-100);background:var(--color-primary-050)}.nav-btn{min-width:104px;font-weight:700}.nav-btn:disabled,.primary:disabled,.icon-btn:disabled{opacity:.45;cursor:not-allowed}.more-btn{border-color:var(--color-border);color:var(--color-primary-700)}.topbar .more-btn{border-color:transparent;background:transparent;color:var(--color-primary-700)}.topbar .more-btn:hover{background:var(--color-primary-050)}.more-menu{position:absolute;top:calc(100% + 8px);right:14px;min-width:176px;padding:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 18px 42px #151c3229}.more-menu button{display:block;width:100%;min-height:42px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--color-text-primary);padding:8px 10px}.more-menu button:hover,.more-menu button:focus-visible{background:var(--color-primary-050)}.stage{width:min(1280px,94vw);height:calc(100% - 20px);max-height:720px;margin:10px auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;overflow:hidden;position:relative;outline:none;box-shadow:0 12px 28px #151c320f}.stage-scroll{height:100%;overflow:auto;position:relative;outline:none}.slide-card{min-height:100%;display:grid;grid-template-columns:minmax(360px,.95fr) minmax(420px,1.12fr);gap:28px;align-items:center;padding:42px 48px 96px}.slide-card.cover{grid-template-columns:.82fr 1.28fr}.slide-card h1,.quiz-wrap h1,.results-screen h1{margin:0 0 18px;font-size:clamp(30px,3.1vw,46px);line-height:1.15;letter-spacing:0;text-wrap:balance;color:var(--color-navy-900)}.slide-card p{font-size:clamp(18px,1.75vw,22px);line-height:1.52;margin:12px 0;max-width:35em;color:var(--color-text-primary)}figure{margin:0}.slide-card img{width:100%;max-height:520px;object-fit:contain;border-radius:8px;display:block;background:var(--color-primary-050)}.slide-card.cover img{object-fit:cover;aspect-ratio:16 / 9;max-height:560px}.activity{margin:0 48px 76px;padding:22px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-background-soft)}.activity h2,.question h2,.results-screen h2{margin:0 0 14px;font-size:22px;color:var(--color-navy-800)}.activity h3{margin:10px 0;font-size:20px;color:var(--color-navy-800)}.option-list,.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.option-list button,.match-list label,.answer-option,.branch-card{border:1px solid var(--color-border);background:var(--color-surface);border-radius:8px;padding:14px;text-align:left}.option-list button:hover,.option-list button:focus-visible{border-color:var(--color-primary-500);background:var(--color-primary-050)}.selected{outline:3px solid rgba(87,75,239,.22);border-color:var(--color-primary-600)!important}.match-list{display:grid;gap:10px}.match-list label{display:grid;grid-template-columns:1fr minmax(180px,260px);gap:12px;align-items:center}select{min-height:40px;border:1px solid var(--color-border-strong);border-radius:8px;padding:6px 10px;background:var(--color-surface);color:var(--color-text-primary)}.feedback.show,.review{margin-top:14px;padding:13px 14px;border-radius:8px}.okbox{background:#eef8f4;color:var(--color-success)}.badbox{background:#fff0f2;color:var(--color-error)}.stage-media-layer{position:absolute;left:0;right:0;bottom:0;height:118px;z-index:14;pointer-events:none}.media-control-zone{position:absolute;left:0;right:0;bottom:0;height:112px;pointer-events:none}.captions{position:absolute;left:50%;bottom:18px;z-index:16;transform:translate(-50%);width:min(74%,860px);max-width:860px;min-height:52px;max-height:4.15em;overflow:hidden;display:grid;place-items:center;padding:10px 22px;background:#151c32ad;color:#fffffff5;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;font-size:clamp(20px,1.55vw,23px);line-height:1.5;text-align:center;box-shadow:0 8px 22px #151c321f;transition:bottom .2s ease,opacity .16s ease}.caption-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.stage.media-open .captions{bottom:78px}.bottombar{position:relative;z-index:20;min-height:54px;padding:0 18px;background:#e0e2e8f5;border-top:1px solid var(--color-border);box-shadow:0 -8px 18px #151c320d}.bottom-main{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.1fr) minmax(150px,1fr);align-items:center;gap:10px;height:100%;max-width:1040px;margin:0 auto}.bottom-status{min-width:0;text-align:center;line-height:1.2}.bottom-status strong{display:block;color:var(--color-text-primary);font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bottom-status span{display:block;margin-top:1px;color:var(--color-text-secondary);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-link{min-height:54px;border:0;background:transparent;color:var(--color-text-primary);font-size:15px;padding:0 10px;text-decoration:underline;text-underline-offset:3px}.nav-link span{font-size:28px;line-height:0;vertical-align:-2px;text-decoration:none;display:inline-block}.prev-link{justify-self:start}.next-link{justify-self:end}.nav-link:hover,.nav-link:focus-visible{color:var(--color-primary-700);background:#eeeffd8f;font-weight:700}.nav-link:disabled{opacity:.38;text-decoration:none;cursor:not-allowed}.media-controls{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;display:flex;align-items:center;gap:8px;width:min(920px,calc(100% - 64px));min-height:44px;padding:4px 10px;background:#e6e8f1f0;border:1px solid rgba(161,167,214,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:4px;box-shadow:0 6px 14px #151c321a;z-index:15}.stage.media-open .media-controls,.media-controls:focus-within{opacity:1;pointer-events:auto;transform:translate(-50%)}.media-controls input[type=range]{accent-color:var(--color-primary-600)}#seekRange{flex:1;min-width:120px}#seekRange,.volume-control input{appearance:none;-webkit-appearance:none;background:transparent;height:18px}#seekRange::-webkit-slider-runnable-track,.volume-control input::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:#62687938}#seekRange::-webkit-slider-thumb,.volume-control input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;margin-top:-4.5px;border:0;border-radius:50%;background:var(--color-primary-600)}#seekRange::-moz-range-track,.volume-control input::-moz-range-track{height:4px;border-radius:999px;background:#62687938}#seekRange::-moz-range-thumb,.volume-control input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--color-primary-600)}.time-readout{min-width:40px;color:var(--color-text-secondary);font-size:13px;text-align:center}.volume-control{display:flex;align-items:center;gap:8px;color:var(--color-text-secondary);font-size:13px;white-space:nowrap}.volume-control input{width:96px}.media-controls .icon-btn,.media-controls .cc-btn{width:36px;min-height:36px;border:0;border-radius:3px;background:transparent;color:var(--color-navy-800);font-size:18px;padding:0}.media-controls .text-control,.media-controls .cc-btn{width:auto;min-width:42px;padding:0 8px;font-size:13px}.media-controls #playBtn{width:50px;margin:-4px 2px -4px -10px;min-height:44px;background:#574befb8;color:#fff;border-radius:4px 0 0 4px}.media-controls .icon-btn:hover,.media-controls .cc-btn:hover,.media-controls .icon-btn:focus-visible,.media-controls .cc-btn:focus-visible{background:#ffffff6b}.media-controls #playBtn:hover,.media-controls #playBtn:focus-visible{background:var(--color-primary-600)}.cc-btn[aria-pressed=true]{background:#ffffff85;color:var(--color-primary-700);font-weight:800}.missing-audio{color:var(--color-warning);font-size:13px;white-space:nowrap}.drawer-edge-toggle{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:42;width:42px;height:92px;border:0;border-radius:0 5px 5px 0;background:var(--color-primary-700);color:#fff;font-size:42px;line-height:1;box-shadow:2px 4px 10px #151c3238}.drawer-edge-toggle:hover,.drawer-edge-toggle:focus-visible{background:var(--color-primary-500)}.drawer-backdrop,.dialog-backdrop{position:fixed;inset:0;z-index:30;background:#151c3257}.course-drawer{position:fixed;top:0;bottom:0;left:0;z-index:40;width:min(300px,78vw);display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#f4f5f8;border-right:1px solid var(--color-border);box-shadow:18px 0 52px #151c322e}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;border-bottom:1px solid var(--color-border);background:#e2e4ea}.drawer-head h2{margin:0;color:var(--color-navy-900);font-size:22px}.drawer-head p{margin:2px 0 0;color:var(--color-text-secondary);font-size:14px}.drawer-list{overflow:auto;padding:0}.drawer-item{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:48px;border:0;border-bottom:1px solid rgba(255,255,255,.8);border-left:4px solid transparent;border-radius:0;background:transparent;padding:7px 10px 7px 8px;text-align:left}.drawer-item:hover,.drawer-item:focus-visible{background:#ffffffb8}.drawer-item.active{background:#fff;border-left-color:var(--color-primary-700)}.drawer-item.active .drawer-text strong{color:var(--color-primary-700)}.drawer-index{color:var(--color-text-muted);font-weight:800;font-size:14px}.drawer-text{min-width:0}.drawer-text strong{display:block;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;line-height:1.2}.drawer-text small{display:block;margin-top:2px;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.drawer-item.complete .drawer-index{color:var(--color-success)}.drawer-foot{padding:10px 14px;border-top:1px solid var(--color-border)}.drawer-foot button{width:100%}.sound-gate{position:fixed;right:18px;bottom:76px;z-index:45}.sound-gate button{min-height:44px;border:0;border-radius:8px;background:var(--color-primary-600);color:#fff;padding:10px 14px;box-shadow:0 14px 34px #3026d947}.exit-dialog{position:fixed;z-index:50;top:50%;left:50%;width:min(420px,calc(100vw - 32px));transform:translate(-50%,-50%);padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 22px 70px #151c3238}.exit-dialog h2{margin:0 0 8px;color:var(--color-navy-900)}.exit-dialog p{color:var(--color-text-secondary)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}.exit-screen{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:var(--color-background)}.exit-screen>div{width:min(560px,100%);padding:34px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 22px 70px #151c321f}.exit-screen h1{margin:0 0 10px;color:var(--color-navy-900)}.quiz-wrap{padding:42px 56px 98px}.quiz-instruction{color:var(--color-text-secondary);font-size:18px;line-height:1.45}.question{padding:18px 0;border-bottom:1px solid var(--color-border)}.question-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.question-type{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border-radius:999px;background:var(--color-primary-100);color:var(--color-primary-700);font-weight:700;font-size:15px}.question-hint{margin:0 0 8px;color:var(--color-primary-700);font-weight:700}.answers{display:grid;gap:10px}.answer-option{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.answer-option input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--color-primary-600)}.answer-option.is-selected{border-color:var(--color-primary-600);background:var(--color-primary-050)}.answer-option.is-correct{border-color:var(--color-success);background:#eef8f4}.answer-option.is-wrong{border-color:var(--color-error);background:#fff0f2}.results-screen{min-height:100%;padding:56px;display:grid;align-content:center;max-width:780px;margin:0 auto}.results-screen p,.results-screen li{font-size:18px;line-height:1.5}.result-actions{display:flex;gap:12px;flex-wrap:wrap}.branch-wrap{display:grid;gap:14px}.branch-note{color:var(--color-text-secondary)}button:hover,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid rgba(87,75,239,.24);outline-offset:2px}@media(max-width:980px){.slide-card,.slide-card.cover{grid-template-columns:1fr;padding:30px 28px 96px}.slide-card img{max-height:360px}.activity{margin:0 28px 76px}.option-list,.match-list label{grid-template-columns:1fr}.results-screen{padding:36px 28px 96px}}@media(max-width:760px){.course-shell{grid-template-rows:56px minmax(0,1fr) 56px}.topbar{grid-template-columns:34px minmax(0,1fr) 44px;padding:7px 10px 10px;gap:8px}.top-title strong{font-size:15px}.top-title span{font-size:12px}.stage{width:100%;height:100%;max-height:none;margin:0;border-left:0;border-right:0;border-radius:0}.slide-card{padding:22px 20px 88px;gap:18px}.slide-card p{font-size:18px}.slide-card img{max-height:260px}.activity{margin:0 18px 76px;padding:18px}.bottombar{height:54px;min-height:54px;padding:0 8px}.bottom-main{grid-template-columns:72px minmax(0,1fr) 72px;gap:6px}.nav-link{min-height:54px;padding:0 4px;font-size:13px}.nav-link span{font-size:22px}.bottom-status strong{font-size:13px}.bottom-status span{font-size:12px}.stage-media-layer{height:110px}.media-control-zone{height:104px}.media-controls{bottom:8px;gap:6px;padding:4px 8px;overflow-x:auto;width:calc(100% - 16px);min-height:42px}.media-controls #playBtn{min-height:42px;width:44px}.volume-control{display:none}#seekRange{min-width:150px}.captions{width:calc(100% - 32px);min-height:46px;max-height:4.4em;font-size:18px;padding:8px 14px;bottom:16px}.stage.media-open .captions{bottom:70px}.course-drawer{width:min(82vw,300px)}.sound-gate{right:12px;bottom:70px;left:12px}.sound-gate button{width:100%}.drawer-edge-toggle{width:30px;height:70px;font-size:30px}}@media(prefers-reduced-motion:no-preference){.slide-card,.activity,.quiz-wrap,.results-screen{animation:fade .2s ease-out}@keyframes fade{0%{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}}@media(prefers-reduced-motion:reduce){.captions,.media-controls{transition:none}}