:root{color-scheme:light;--shell:#dce8f3;--shell-border:#c8d7e4;--navy:#07192b;--navy-2:#0d2f52;--cyan:#59d8e8;--gold:#f1b53d;--ink:#233548;--muted:#64778a;--white:#fff}
html,body{min-height:100%}body{margin:0;background:#f6f8fb;color:var(--ink);font-family:Arial,Helvetica,sans-serif;overflow:hidden}button{font:inherit}
.course-layout{height:100vh;display:grid;grid-template-columns:352px minmax(0,1fr);background:#f6f8fb;transition:grid-template-columns 180ms ease}.course-layout.nav-collapsed{grid-template-columns:56px minmax(0,1fr)}
.curriculum-panel{position:relative;width:auto;height:100vh;min-height:0;display:flex;flex-direction:column;background:#f4f8fb;color:var(--ink);border-right:1px solid #c7d6e3;box-shadow:10px 0 28px rgba(35,53,72,.1);z-index:20}
.curriculum-toggle{position:absolute;top:18px;right:-15px;z-index:25;width:32px;height:32px;display:grid;place-items:center;padding:0;border:2px solid #c7d6e3;border-radius:50%;background:#fff;color:var(--navy-2);cursor:pointer;box-shadow:0 5px 14px rgba(7,25,43,.24)}
.curriculum-toggle:hover{background:#e5eef6}.curriculum-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms ease}.course-layout.nav-collapsed .curriculum-toggle{right:12px}.course-layout.nav-collapsed .curriculum-toggle svg{transform:rotate(180deg)}.course-layout.nav-collapsed .curriculum-heading,.course-layout.nav-collapsed .lesson-navigation-panel{display:none}
.curriculum-heading{padding:24px 22px 15px;background:#e5eef6;border-bottom:1px solid #cfdee9}.curriculum-back{display:inline-flex;align-items:center;width:calc(100% - 38px);margin:0 38px 16px 0;padding-bottom:12px;border-bottom:1px solid #c7d6e3;color:#47677f;font-size:.66rem;font-weight:800;letter-spacing:.035em;text-decoration:none;text-transform:uppercase}.curriculum-back:hover{color:var(--navy-2);text-decoration:underline}.curriculum-nav-title{margin:0 44px 0 0;color:var(--navy-2);font-size:1rem;line-height:1.2;letter-spacing:.05em;text-transform:uppercase}
.lesson-navigation-panel{flex:1;min-height:0;overflow-y:auto;display:grid;align-content:start;gap:4px;padding:9px 10px 14px;scrollbar-width:thin;scrollbar-color:#8db2c7 transparent}.lesson-navigation-panel::-webkit-scrollbar{width:7px}.lesson-navigation-panel::-webkit-scrollbar-thumb{border-radius:999px;background:#8db2c7}
.lesson-item{width:100%;min-height:42px;display:grid;grid-template-columns:20px minmax(0,1fr) 20px;align-items:center;gap:8px;padding:5px 9px;border:1px solid #dce6ed;border-radius:8px;background:rgba(255,255,255,.38);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;transition:background 140ms ease,border-color 140ms ease,color 140ms ease}.lesson-item:hover:not(:disabled){background:#e9f2f7}.lesson-item.is-current{background:#dff3f6;border-color:#79c8d3;color:var(--navy-2)}.lesson-item.is-available{background:#fff;border-color:#d4e0e9;color:var(--navy-2)}.lesson-item.is-complete{color:var(--navy-2)}.lesson-item:disabled{color:#7b8d9d;cursor:not-allowed;opacity:.76}
.lesson-item.is-current{background:#cceef2;border-color:#168da0;color:var(--navy-2)}
.lesson-number{width:18px;height:18px;display:grid;place-items:center;border:1px solid #b7c8d5;border-radius:50%;color:#63798c;font-size:.58rem;font-weight:800}.lesson-copy{min-width:0;display:flex;align-items:baseline;gap:7px;white-space:nowrap}.lesson-copy strong{min-width:0;overflow:hidden;flex:1 1 auto;font-size:.76rem;line-height:1.2;letter-spacing:.005em;text-overflow:ellipsis;white-space:nowrap}.lesson-copy small{flex:0 0 auto;color:#708497;font-size:.66rem;line-height:1.2;font-weight:400}.lesson-status{position:relative;width:18px;height:18px;display:grid;place-items:center;justify-self:end;border-radius:50%}.lesson-status.is-checked{background:#2fa7b8;color:#fff}.lesson-status.is-checked:before{content:"✓";font-size:.58rem;font-weight:900}.lesson-status.is-play{border:1px solid #7fb4c2;background:#e7f6f8}.lesson-status.is-play:before{content:"";position:absolute;left:50%;top:50%;width:7px;height:9px;background:var(--navy-2);clip-path:polygon(0 0,100% 50%,0 100%);transform:translate(-42%,-50%)}.lesson-status.is-locked:before{content:"";position:absolute;left:5px;top:8px;width:9px;height:8px;border-radius:2px;background:#8b9ead}.lesson-status.is-locked:after{content:"";position:absolute;left:7px;top:3px;width:5px;height:6px;border:1.5px solid #8b9ead;border-bottom:0;border-radius:8px 8px 0 0}
.course-shell{height:100vh;min-height:0;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--shell);border:1px solid var(--shell-border)}
.course-header{height:auto;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 26px;border-bottom:1px solid rgba(35,53,72,.1);background:transparent;color:var(--ink)}.course-identity{display:flex;align-items:center;gap:12px;min-width:0}.course-mark{width:40px;height:40px;display:grid;place-items:center;text-decoration:none;flex:0 0 auto;border-radius:10px;background:var(--navy-2);color:var(--cyan);font-weight:800;letter-spacing:.04em}.course-name,.module-name,.slide-count{margin:0}.course-name{font-size:1rem;font-weight:700;color:var(--navy)}.module-name{margin-top:3px;font-size:.82rem;color:var(--muted)}
.header-progress-block{width:clamp(180px,20vw,310px);margin-left:auto}.header-progress-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.header-progress-copy output{color:var(--navy-2);font-variant-numeric:tabular-nums}.header-progress-track{height:6px;overflow:hidden;border-radius:999px;background:rgba(35,53,72,.18)}.header-progress-fill{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cyan),#2d6cdf 62%,var(--navy-2));transition:width 240ms ease}
.stage-shell{min-height:0;display:grid;place-items:center;padding:clamp(16px,2.4vw,34px);overflow:hidden;background:transparent}.media-stack{width:min(100%,calc((100vh - 248px)*16/9))}.video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#fff;box-shadow:0 18px 46px rgba(7,25,43,.24)}.scene-stage{position:absolute;inset:0;width:auto;height:auto;padding:28px 5.2%;overflow:hidden;background:linear-gradient(155deg,#fff 60%,#eef8fb)}.scene-stage:has(.embedded-lesson-frame){padding:0;background:#fff}.embedded-lesson-frame{display:block;width:100%;height:100%;border:0;background:#fff}
.caption-display{min-height:54px;display:grid;place-items:center;padding:8px 24px;background:var(--shell);color:var(--ink);font-size:1.12rem;line-height:1.3;font-weight:600;text-align:center;white-space:normal;overflow:visible}
.caption-display>span{display:block;max-width:100%;overflow-wrap:anywhere}
.scene-stage.preview .reveal{opacity:1;transform:none;animation:none}
.center-play{position:absolute;inset:0;margin:auto;width:82px;height:82px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(7,25,43,.76);color:#fff;cursor:pointer;transition:transform 160ms ease,background 160ms ease;z-index:4}.center-play:hover{transform:scale(1.05);background:rgba(13,47,82,.92)}.center-play[hidden]{display:none}.center-play svg{width:36px;height:36px;fill:currentColor;transform:translateX(.5px)}
.completion-next{min-width:148px;min-height:50px;margin-top:8px;padding:0 28px;border:0;border-radius:8px;background:var(--gold);color:var(--navy);font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.controls{height:auto;min-height:70px;display:grid;grid-template-columns:auto minmax(80px,1fr) auto auto auto;align-items:center;gap:12px;padding:10px 20px;border-top:1px solid rgba(35,53,72,.13);background:transparent}.icon-button,.text-button,.nav-button{min-width:44px;min-height:44px;border:0;border-radius:8px;background:transparent;color:#40566a;cursor:pointer}.icon-button,.text-button{display:grid;place-items:center}.icon-button svg{width:25px;height:25px;fill:currentColor}.primary-control{color:var(--navy)}.pause-icon{display:none}.is-playing .play-icon{display:none}.is-playing .pause-icon{display:block}.text-button{font-size:.78rem;font-weight:800;letter-spacing:.06em}.text-button.is-active{background:var(--navy-2);color:#fff}.icon-button:hover:not(:disabled),.nav-button:hover:not(:disabled){background:rgba(13,47,82,.09);color:var(--navy)}.icon-button:disabled,.text-button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.progress-wrap{display:flex;align-items:center;gap:12px;min-width:0;padding:0 4px}.lesson-progress-summary{min-width:136px;color:#38546a;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}.timeline{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:80px;height:8px;margin:0;border:0;border-radius:999px;background:linear-gradient(90deg,#58d7e8 0%,#2d6cdf var(--timeline-mid,0%),var(--navy-2) var(--timeline-progress,0%),#c8d7e1 var(--timeline-progress,0%),#c8d7e1 100%);box-shadow:inset 0 1px 2px rgba(13,47,82,.18);cursor:pointer}.timeline::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0;border:0;background:transparent;box-shadow:none}.timeline::-moz-range-thumb{width:0;height:0;border:0;background:transparent;box-shadow:none}.time-counter{min-width:104px;color:var(--ink);font-size:.82rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1;text-align:right;white-space:nowrap}.lesson-navigation{display:flex;align-items:center;gap:4px}.nav-button{display:inline-flex;align-items:center;justify-content:center;gap:2px;padding:0 10px;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.nav-button svg{width:20px;height:20px;fill:currentColor}.nav-button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:720px){body{overflow:auto}.course-layout{display:block;height:auto}.curriculum-panel{height:46vh;min-height:280px}.course-layout.nav-collapsed .curriculum-panel{height:56px;min-height:56px}.course-shell{height:auto;min-height:100vh}.curriculum-heading{padding:16px}.lesson-navigation-panel{max-height:250px}.course-header{padding:10px 14px}.header-progress-block{width:150px}.stage-shell{padding:10px}.controls{grid-template-columns:auto minmax(50px,1fr) auto auto;gap:5px;padding:8px}.lesson-navigation{grid-column:1/-1;justify-content:flex-end}.center-play{width:62px;height:62px}}
@media(min-width:721px) and (max-width:1100px){.course-layout{grid-template-columns:300px minmax(0,1fr)}.course-layout.nav-collapsed{grid-template-columns:56px minmax(0,1fr)}.curriculum-heading{padding-inline:17px}.lesson-navigation-panel{padding-inline:8px}.header-progress-block{width:180px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}