/* ===== shared screen pieces ===== */
.page-head{margin-bottom:clamp(36px,6vh,64px)}
.page-head .eyebrow{margin-bottom:16px}
.page-head .lede{margin-top:18px}
.sec{margin-top:clamp(56px,9vh,104px)}
.sec-h{margin-bottom:22px}
.kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.glowbed{position:relative;isolation:isolate}
.glowbed::before{content:"";position:absolute;z-index:-1;inset:-12% -8% -18% -8%;background:radial-gradient(50% 55% at 40% 55%,rgba(143,176,255,.32),transparent 70%),radial-gradient(30% 35% at 72% 80%,rgba(242,194,123,.14),transparent 70%);filter:blur(10px);pointer-events:none}
html[data-theme="dark"] .glowbed::before{background:radial-gradient(50% 55% at 40% 55%,rgba(61,107,224,.30),transparent 70%),radial-gradient(30% 35% at 72% 80%,rgba(242,194,123,.10),transparent 70%)}
html[data-theme="contrast"] .glowbed::before{display:none}

/* poster frame (video placeholder): the one allowed tonal surface besides inputs */
.poster{position:relative;display:block;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:radial-gradient(70% 90% at 50% 100%,#1E3A78 0%,#0B1A3A 55%,#070F24 100%);color:var(--paper);text-decoration:none;box-shadow:0 2px 4px rgba(7,15,36,.12),0 24px 60px -24px rgba(11,26,58,.55),0 60px 120px -50px rgba(61,107,224,.45)}
html[data-theme="contrast"] .poster{box-shadow:0 0 0 3px #000814}
.poster .p-arch{position:absolute;left:50%;bottom:-6%;height:96%;width:auto;aspect-ratio:112/172;transform:translateX(-50%)}
.poster .p-arch use{stroke:#CFE0FF;stroke-width:.7}
.poster .p-arch .glow{stroke:var(--blue-300);stroke-width:3.4;opacity:.6}
.poster .p-arch .groove{stroke:rgba(207,224,255,.85)}
.poster .p-arch .inner{opacity:1}
.poster .p-meta{position:absolute;left:0;right:0;top:50%;transform:translateY(-46%);text-align:center;padding:0 18%}
.poster .p-n{font-family:var(--serif);font-weight:330;font-size:clamp(2.6rem,6vw,5.2rem);line-height:1;letter-spacing:-.03em;font-variation-settings:"opsz" 144;color:#fff}
.poster .p-t{margin-top:10px;font-family:var(--serif);font-size:clamp(.95rem,1.3vw,1.2rem);color:var(--paper-2);font-variation-settings:"opsz" 24;text-wrap:balance}
.poster .p-tag{position:absolute;left:18px;top:18px}
.poster .p-tag .ph{background:rgba(252,235,208,.92);color:#5C3700}
.poster .p-play{position:absolute;right:20px;bottom:24px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;transition:transform .25s var(--ease-out)}
.poster .p-play svg{width:22px;height:22px;fill:currentColor}
.poster:hover .p-play{transform:scale(1.05)}
.poster .p-line{position:absolute;left:24px;right:96px;bottom:50px;height:3px;border-radius:3px;background:rgba(255,255,255,.22)}
.poster .p-line i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#fff;transform-origin:left}

/* item rows (module contents, progress lists): row rhythm, no dividers */
.items{display:grid;gap:4px}
.item{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;min-height:76px;padding:12px 18px 12px 14px;margin:0 -18px 0 -14px;border-radius:22px;text-decoration:none;transition:background-color .2s var(--ease-out)}
.item:hover{background:var(--tonal)}
.item .ty{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tonal-2);color:var(--accent-ink)}
.item .ty svg{width:20px;height:20px}
.item .k{display:block;font:600 .8125rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);margin-bottom:4px}
.item .tt{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:430;font-variation-settings:"opsz" 30;line-height:1.25;letter-spacing:-.008em}
.item.next{background:var(--bg-2);box-shadow:var(--raise)}
html[data-theme="dark"] .item.next{background:rgba(255,255,255,.07)}
html[data-theme="contrast"] .item.next{box-shadow:inset 0 0 0 2px #000814}
.item.next .ty{background:var(--accent);color:#fff}
.item.next .k{color:var(--accent-ink)}
.item.isdone .ty{background:var(--success-bg);color:var(--success)}
.item .lit-arch{position:absolute;left:-28px;top:50%;width:14px;height:22px;transform:translateY(-50%)}
@media (max-width:640px){.item{grid-template-columns:40px minmax(0,1fr);gap:14px;margin:0 -12px;padding:12px}.item .status{grid-column:2}.item .ty{width:40px;height:40px}.item .lit-arch{display:none}}

/* ===== HOME ===== */
.home-hi{margin-bottom:clamp(28px,5vh,52px)}
.home-hi .eyebrow{margin-bottom:14px}
.resume{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media (min-width:1024px){.resume{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.resume-txt .eyebrow{margin-bottom:14px}
.resume-txt h2{margin-bottom:16px}
.resume-txt .q-serif{font-size:clamp(1.125rem,1.4vw,1.3rem);color:var(--fg-2);max-width:34ch}
.resume-txt .where{margin-top:20px;color:var(--fg-2)}
.resume-txt .btn{margin-top:30px}
.resume-txt .also{margin-top:14px}
.home-low{display:grid;gap:56px;margin-top:clamp(64px,11vh,120px)}
@media (min-width:1024px){.home-low{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,80px)}}
.journey .t-s{max-width:28ch;font-size:clamp(1.3rem,1.8vw,1.6rem)}
.journey .archrow{margin-top:26px}
.journey .archrow .arch{width:clamp(40px,3.6vw,52px)}
.side-list>*+*{margin-top:44px}
.upnext .next-link{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;min-height:56px;text-decoration:none;margin-top:12px;padding:8px 12px;margin-left:-12px;border-radius:18px}
.upnext a.next-link:hover{background:var(--tonal)}
.upnext .k{grid-column:2;font:600 .8125rem/1.3 var(--sans);color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase}
.upnext .tt{grid-column:2;font-family:var(--serif);font-size:1.2rem;font-weight:430;line-height:1.25}
.upnext .ty{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tonal-2);color:var(--accent-ink)}
.upnext .ty svg{width:18px;height:18px}
.done-hero{text-align:center;max-width:880px;margin:0 auto;padding:clamp(24px,6vh,64px) 0}
.done-hero .big-arch{width:clamp(140px,14vw,200px);height:auto;margin:0 auto 34px}
.done-hero .lede{margin:22px auto 0}
.done-hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:34px;align-items:center}
.poster .p-line{position:absolute;left:24px;right:96px;bottom:50px;width:calc(100% - 120px);height:3px;background:none}
.poster .p-n,.poster .p-t{display:block}

/* ===== COURSE OVERVIEW (table of contents) ===== */
.course-grid{display:grid;gap:56px}
@media (min-width:1100px){.course-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(56px,6vw,112px)}.course-intro{position:sticky;top:112px;align-self:start}}
.course-intro .eyebrow{margin-bottom:18px}
.course-intro .by{margin-top:18px;font-size:1.0625rem;color:var(--fg-2)}
.course-intro .lede{margin-top:22px}
.course-intro .btn{margin-top:32px}
.course-intro .more{margin-top:28px;display:grid;gap:4px;max-width:46ch}
.fmt li{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.fmt svg{width:20px;height:20px;margin-top:3px;color:var(--accent-ink)}
.toc-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.toc{display:grid;gap:6px}
.door{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:26px;padding:22px 22px 22px 18px;margin:0 -22px 0 -18px;border-radius:28px;transition:background-color .2s}
.door>a.cover{position:absolute;inset:0;border-radius:28px;z-index:1}
.door:hover{background:var(--tonal)}
.door .d-arch{position:relative;width:76px}
.door .d-arch .arch{width:76px;height:auto}
.door .d-arch .num{position:absolute;left:0;right:0;top:46%;text-align:center;font-family:var(--serif);font-weight:340;font-size:2.1rem;line-height:1;color:var(--accent-ink);font-variation-settings:"opsz" 144}
.door .eyebrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.door h3{margin-bottom:8px}
.door .sum{color:var(--fg-2);max-width:54ch}
.door .meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:14px}
.door .gate{font-size:.875rem;color:var(--fg-2)}
.door.cur{background:var(--bg-2);box-shadow:var(--raise)}
html[data-theme="dark"] .door.cur{background:rgba(255,255,255,.06)}
html[data-theme="contrast"] .door.cur{box-shadow:inset 0 0 0 2px #000814}
.door .sub{position:relative;z-index:2;margin-top:18px;display:grid;gap:2px}
.door .sub a{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:46px;padding:4px 12px;margin:0 -12px;border-radius:14px;text-decoration:none;font-size:.9688rem}
.door .sub a:hover{background:var(--tonal)}
.door .sub svg{width:18px;height:18px;color:var(--fg-2)}
.door .sub .isdone svg{color:var(--success)}
.door .sub .isnext{font-weight:650}
.door .sub .isnext svg{color:var(--accent-ink)}
.door .sub .st{font-size:.8125rem;color:var(--fg-2);font-weight:550}
@media (max-width:640px){.door{grid-template-columns:52px minmax(0,1fr);gap:16px;padding:18px 14px;margin:0 -14px}.door .d-arch,.door .d-arch .arch{width:52px}.door .d-arch .num{font-size:1.5rem}}
.bertha-sheet .portrait{width:150px;margin:6px 0 22px;position:relative}
.bertha-sheet .pmask{aspect-ratio:100/160;clip-path:url(#arch-clip);background:linear-gradient(180deg,#DCE6FF,#B9CCF7);display:grid;place-items:end center}
.bertha-sheet .pmask svg{width:70%;fill:#8FA6DB}
.door .d-arch{align-self:start}
/* ===== MODULE ===== */
.mod-head{display:grid;gap:32px;align-items:end;margin-bottom:clamp(40px,7vh,72px)}
@media (min-width:900px){.mod-head{grid-template-columns:minmax(0,1fr) auto}}
.mod-head .crumbs{margin-bottom:18px}
.mod-head .eyebrow{margin-bottom:14px}
.mod-head .lede{margin-top:20px}
.mod-head .cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.mod-arch{position:relative;width:clamp(120px,11vw,168px)}
.mod-arch .arch{width:100%;height:auto}
.mod-arch .num{position:absolute;inset:auto 0 26% 0;text-align:center;font-family:var(--serif);font-weight:320;font-size:clamp(3.6rem,5vw,5rem);line-height:1;color:var(--accent-ink);font-variation-settings:"opsz" 144}
.mod-arch .of{display:block;text-align:center;margin-top:12px;font-size:.875rem;color:var(--fg-2);font-weight:550}
@media (max-width:899px){.mod-arch{display:none}}
.grp-h{display:flex;align-items:baseline;gap:14px;margin:44px 0 10px}
.grp-h:first-child{margin-top:0}
.terms{display:grid;gap:26px 48px;margin-top:8px}
@media (min-width:900px){.terms{grid-template-columns:1fr 1fr}}
.terms dt{font-family:var(--serif);font-size:1.25rem;font-weight:450;font-variation-settings:"opsz" 30;letter-spacing:-.006em}
.terms dd{margin-top:6px;color:var(--fg-2);max-width:48ch;line-height:1.55}
.pn{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(56px,9vh,96px)}
.pn a{display:grid;gap:4px;min-height:56px;padding:10px 14px;margin:0 -14px;border-radius:18px;text-decoration:none;max-width:46%}
.pn a:hover{background:var(--tonal)}
.pn a.nx{text-align:right;margin-left:auto}
.pn .k{font:600 .8125rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);display:flex;gap:6px;align-items:center}
.pn a.nx .k{justify-content:flex-end}
.pn .k svg{width:16px;height:16px}
.pn .tt{font-family:var(--serif);font-size:1.1875rem;line-height:1.25}
.mod-done{display:flex;gap:22px;align-items:center;margin-top:24px}
.mod-done .arch{width:44px;height:auto}
.rail-sheet{display:block!important;position:static!important;max-height:none!important;margin-top:16px}
/* ===== LESSON PLAYER ===== */
.lesson-top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.lesson-top h1{margin-top:6px;max-width:24ch}
.lesson-top .eyebrow{margin-top:4px}
.focuslbl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.focuslbl .small{color:var(--fg-2);font-weight:550}
.stage{position:relative;border-radius:36px;padding:clamp(10px,1.4vw,22px);background:radial-gradient(80% 120% at 50% 110%,#1C3466 0%,#0B1A3A 50%,#070F24 100%);box-shadow:0 30px 80px -40px rgba(7,15,36,.7);isolation:isolate;overflow:hidden}
html[data-theme="contrast"] .stage{background:#000814}
.stage .st-arch{position:absolute;z-index:-1;left:50%;top:-12%;height:150%;width:auto;aspect-ratio:112/172;transform:translateX(-50%);opacity:.5}
.stage .st-arch use{stroke:var(--blue-300);stroke-width:.35}
.stage .st-arch .glow{stroke-width:2;opacity:.5}
.vid{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#050B1C;color:var(--paper);cursor:pointer;max-height:calc(100vh - 260px);margin:0 auto}
.vid .poster{position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.vid .poster .p-play,.vid .poster .p-line{display:none}
.vid .drift{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(30% 30% at 40% 60%,rgba(143,176,255,.22),transparent 70%),radial-gradient(25% 25% at 65% 40%,rgba(242,194,123,.10),transparent 70%);opacity:0;transition:opacity .5s}
.vid.playing .drift{opacity:1;animation:vdrift 14s var(--ease-io) infinite alternate}
@keyframes vdrift{from{transform:translate3d(-4%,2%,0)}to{transform:translate3d(4%,-2%,0)}}
.vid .bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:84px;height:84px;border-radius:50%;transition:opacity .3s,transform .3s var(--ease-out)}
.vid .bigplay svg{width:30px;height:30px;fill:currentColor;margin-left:4px}
.vid.playing .bigplay{opacity:0;transform:translate(-50%,-50%) scale(.92);pointer-events:none}
.vid .cap{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);max-width:80%;text-align:center;padding:.3em .7em;border-radius:10px;font-weight:550;line-height:1.35;color:#fff;transition:opacity .2s}
.vid .cap.bg-solid{background:rgba(5,11,28,.88)}.vid .cap.bg-soft{background:rgba(5,11,28,.55)}.vid .cap.bg-none{background:none;text-shadow:0 1px 3px #000,0 0 8px #000}
.vid .cap.s-s{font-size:clamp(.9rem,1.2vw,1.05rem)}.vid .cap.s-m{font-size:clamp(1.05rem,1.6vw,1.35rem)}.vid .cap.s-l{font-size:clamp(1.3rem,2.1vw,1.75rem)}
.vid .state-in{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:rgba(5,11,28,.72)}
.vid .state-in p{max-width:40ch;margin:0 auto 18px;font-size:1.125rem}
.vid .loader{width:46px;height:74px}
.vid .loader use{stroke:var(--blue-300);stroke-width:4;fill:none;stroke-dasharray:.25 .75;animation:orbit 1.6s linear infinite}
@keyframes orbit{to{stroke-dashoffset:-1}}
html[data-motion="reduce"] .vid .loader use{animation:none;stroke-dasharray:none;opacity:.6}
.ctrls{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:2px;padding:6px 10px;border-radius:999px;z-index:3}
.ctrls .icon-btn{color:#fff}
.ctrls .icon-btn:hover{background:rgba(255,255,255,.14)}
.ctrls .icon-btn[aria-pressed="true"]{background:rgba(255,255,255,.2)}
.ctrls .icon-btn svg.ic{width:22px;height:22px}
.ctrls .play svg{fill:currentColor}
.ctrls .spd{width:auto;padding:0 12px;font-weight:650;font-size:.9375rem;font-variant-numeric:tabular-nums}
.scrub{flex:1;min-width:60px;margin:0 10px;height:44px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.scrub::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,#fff 0 var(--p,0%),rgba(255,255,255,.3) var(--p,0%))}
.scrub::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.3)}
.scrub::-moz-range-progress{height:5px;border-radius:5px;background:#fff}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4);border:0}
.scrub::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:0}
.scrub:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px;border-radius:999px}
.chap{position:absolute;left:0;right:0;top:50%;pointer-events:none}
.pop{position:absolute;bottom:72px;right:14px;z-index:5;min-width:240px;padding:14px;border-radius:22px;color:var(--paper);animation:pop .2s var(--ease-out)}
.pop h3{font:600 .8125rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--paper-2);margin:6px 6px 8px}
.pop .opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border-radius:12px;font-weight:550}
.pop .opt:hover{background:rgba(255,255,255,.12)}
.pop .opt[aria-checked="true"]::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--blue-300)}
@media (max-width:760px){.ctrls{left:6px;right:6px;bottom:6px;padding:4px}.ctrls .hide-s{display:none}.vid .cap{bottom:66px}.stage{border-radius:24px;padding:6px;margin:0 calc(-1*var(--gutter) + 8px)}.vid{border-radius:18px}}
.lesson-body{display:grid;gap:44px;margin-top:clamp(36px,5vh,56px)}
@media (min-width:1180px){.lesson-body{grid-template-columns:minmax(0,7fr) minmax(320px,4fr);gap:clamp(48px,5vw,88px)}}
.search{position:relative;flex:1;min-width:200px;max-width:380px}
.search .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fg-2)}
.search .input{padding-left:44px;min-height:48px}
.ai-note{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:.875rem;color:var(--fg-2)}
.ai-note svg{width:16px;height:16px}
.aside-l>*+*{margin-top:40px}
.aside-l .q-serif{font-size:1.3rem;margin-top:10px}
.try li{display:flex;gap:12px;margin-top:12px;line-height:1.5}
.try svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--accent-ink)}
.nextbox .k{display:block;margin-top:10px;color:var(--fg-2);font-size:.9375rem}
.nextbox .btn{margin-top:18px}
.nextbox .row{margin-top:14px}
.mini{position:fixed;z-index:110;left:10px;right:10px;top:10px;display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:22px;transform:translateY(-140%);transition:transform .3s var(--ease-out)}
.mini.on{transform:none}
.mini .icon-btn{color:#fff}
.mini .icon-btn svg{fill:currentColor}
.mini .mt{flex:1;min-width:0;font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini svg.ln{position:absolute;left:18px;right:18px;bottom:4px;width:calc(100% - 36px);height:2px}
@media (min-width:900px){.mini{display:none}}
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-top:16px}
.kbd-list kbd{font:650 .875rem/1 var(--sans);padding:7px 10px;border-radius:8px;background:var(--tonal-2);text-align:center;min-width:44px}
.stage .st-arch{display:none}
.vid .bigplay{top:auto;bottom:24%;transform:translateX(-50%)}
.vid.playing .bigplay{transform:translateX(-50%) scale(.92)}
.vid .poster .p-meta{transform:translateY(-78%)}
/* ===== HIDDEN GEM KNOWLEDGE CHECK ===== */
.qwrap{max-width:860px;margin:0 auto}
.qtop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(28px,5vh,52px)}
.gems{display:flex;align-items:center;gap:14px}
.gems ol{display:flex;gap:6px}
.gems li svg{width:20px;height:20px;color:var(--groove)}
.gems li.got svg{color:var(--accent);fill:var(--lit)}
.gems li.cur svg{color:var(--accent-ink)}
.gems .small{font-weight:600;color:var(--fg-2)}
.qtopic{margin-bottom:14px}
legend.qprompt{font-family:var(--serif);font-size:clamp(1.5rem,2.3vw,2.1rem);font-weight:400;font-variation-settings:"opsz" 60,"SOFT" 40;line-height:1.22;letter-spacing:-.014em;text-wrap:pretty;padding:0;margin-bottom:30px}
.qhint{color:var(--fg-2);margin:-14px 0 22px}
.opts{display:grid;gap:10px}
.opt-row{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 24px;gap:16px;align-items:center;min-height:64px;padding:16px 20px;border-radius:22px;background:var(--tonal);cursor:pointer;font-size:1.0625rem;line-height:1.5;transition:background-color .2s,box-shadow .25s var(--ease-out),transform .2s var(--ease-out)}
.opt-row:hover{background:var(--tonal-2)}
.opt-row input{position:absolute;opacity:0;width:1px;height:1px}
.opt-row .mk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--edge);transition:background-color .2s,box-shadow .2s}
.opt-row.multi .mk{border-radius:8px}
.opt-row .mk svg{width:16px;height:16px;color:#fff;opacity:0}
.opt-row .tick{width:22px;height:22px;opacity:0;color:var(--accent-ink)}
.opt-row:has(input:checked){background:var(--bg-2);box-shadow:var(--raise)}
html[data-theme="dark"] .opt-row:has(input:checked){background:rgba(255,255,255,.1)}
html[data-theme="contrast"] .opt-row{background:#fff;box-shadow:inset 0 0 0 2px #6B7896}
html[data-theme="contrast"] .opt-row:has(input:checked){box-shadow:inset 0 0 0 3px #000814}
.opt-row:has(input:checked) .mk{background:var(--accent);box-shadow:none}
.opt-row:has(input:checked) .mk svg,.opt-row:has(input:checked) .tick{opacity:1}
.opt-row:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.opt-row.right{background:var(--success-bg);box-shadow:none}
.opt-row.right .mk{background:var(--success)}
.opt-row.right .tick{color:var(--success);opacity:1}
.opt-row.notq{background:var(--tonal)}
.opt-row.locked{cursor:default}
.opt-row .tag{grid-column:2;font:650 .8125rem/1.2 var(--sans);letter-spacing:.04em;margin-top:-4px}
.opt-row.right .tag{color:var(--success)}
.glint{position:absolute;inset:0;border-radius:22px;overflow:hidden;pointer-events:none}
.glint::after{content:"";position:absolute;top:-20%;bottom:-20%;width:22%;left:-30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg);animation:glint 1.1s var(--ease-io) .1s 1 both}
@keyframes glint{to{left:120%}}
html[data-theme="contrast"] .glint{display:none}
.fb{margin-top:28px;padding:4px 0}
.fb h3{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.6rem;font-weight:420;letter-spacing:-.01em;margin-bottom:10px}
.fb h3 svg{width:26px;height:26px}
.fb.ok h3{color:var(--success)}
.fb.no h3{color:var(--attn)}
.fb p{max-width:62ch;font-size:var(--read);line-height:var(--lh)}
.qact{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:32px}
.qend{text-align:center;max-width:760px;margin:0 auto}
.qend .big-arch{width:120px;height:auto;margin:0 auto 30px}
.qend .lede{margin:20px auto 0}
.qend ul{margin:28px auto 0;display:grid;gap:4px;max-width:560px;text-align:left}
.qend li a{display:flex;gap:12px;align-items:center;min-height:52px;padding:8px 14px;border-radius:16px;text-decoration:none}
.qend li a:hover{background:var(--tonal)}
.qend .qact{justify-content:center}
.qintro{max-width:760px}
.qintro .lede{margin-top:20px}
.qintro ul{margin-top:24px}
/* ===== REFLECTION WORKSHEET ===== */
.ws{max-width:780px;margin:0 auto}
.ws .page-head h1{margin-top:6px}
.ws .tools{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:24px}
.ws .priv{display:flex;gap:10px;align-items:center;margin-top:22px;color:var(--fg-2);font-size:.9375rem}
.ws .priv svg{width:18px;height:18px}
.prompts{display:grid;gap:clamp(44px,7vh,64px);margin-top:clamp(44px,7vh,72px)}
.prompt .pn-n{font-family:var(--serif);font-size:1rem;color:var(--accent-ink);font-variation-settings:"opsz" 24;margin-bottom:10px;display:block}
.prompt label.pq{display:block;font-family:var(--serif);font-size:clamp(1.4rem,2vw,1.85rem);font-weight:400;font-variation-settings:"opsz" 48,"SOFT" 40;line-height:1.25;letter-spacing:-.012em;margin-bottom:18px;text-wrap:pretty}
.prompt .row{margin-top:10px}
.prompt.skipped .textarea{opacity:.55}
.ws-end{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:clamp(48px,8vh,80px)}
.ws-status{position:sticky;bottom:18px;z-index:5;display:flex;justify-content:center;pointer-events:none;margin-top:24px}
.ws-status .saved{pointer-events:auto;padding:6px 16px;border-radius:999px;background:var(--bg-2);box-shadow:var(--raise-sm)}
@media (max-width:899px){.ws-status{bottom:20px}}
@media print{.ws .tools,.ws-end,.ws-status,.prompt .row,.crumbs,.back{display:none!important}.textarea{background:none!important;box-shadow:none!important;min-height:120px;border-bottom:1px solid #999!important}.prompt label.pq{font-size:16pt}}
/* ===== PROGRESS ===== */
.prog-hero{display:grid;gap:36px;align-items:end;margin-bottom:clamp(48px,8vh,88px)}
@media (min-width:1024px){.prog-hero{grid-template-columns:minmax(0,1fr) auto}}
.prog-hero .archrow .arch{width:clamp(44px,4.4vw,64px)}
.prog-hero .btn{margin-top:30px}
.prog-grid{display:grid;gap:64px}
@media (min-width:1100px){.prog-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(56px,6vw,104px)}}
.pmod{margin-top:6px}
.pmod>summary{min-height:72px!important}
.pmod>summary .arch{width:26px;height:auto}
.pmod>summary .mt{display:grid;gap:2px}
.pmod>summary .mt small{font:600 .75rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.pmod>summary .mt span{font-family:var(--serif);font-size:1.2rem;font-weight:430}
.pmod>summary .status{margin-left:auto}
.pmod>summary .pm{margin-left:16px!important}
.pmod .items .item{min-height:60px}
.pmod .items .tt{font-size:1.0625rem}
.nsearch{margin:16px 0 8px;max-width:none}
.ngroup{margin-top:24px}
.ngroup h3{font:600 .8125rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);margin-bottom:4px}
.refl a{display:flex;gap:12px;align-items:center;min-height:56px;padding:8px 14px;margin:0 -14px;border-radius:16px;text-decoration:none}
.refl a:hover{background:var(--tonal)}
.refl svg{color:var(--accent-ink)}
.rules{margin-top:18px;color:var(--fg-2);font-size:.9375rem;max-width:48ch}
/* ===== CERTIFICATE ===== */
body[data-screen="certificate"]{--bg:var(--navy-950);--fg:var(--paper);--fg-2:var(--paper-2);--accent-ink:#A9C2FF;--tonal:rgba(255,255,255,.05);--tonal-2:rgba(255,255,255,.08);--tonal-3:rgba(255,255,255,.13);--groove:rgba(185,198,228,.22);--focus:var(--blue-300);--glass-bg:rgba(255,255,255,.07);--glass-sh:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 .5px rgba(255,255,255,.08),0 10px 30px -12px rgba(0,0,0,.5);--bg-2:#13254F;--ph-fg:#F6D3A0;--ph-bg:rgba(242,194,123,.14);--success:#7ED6A6;--edge:rgba(185,198,228,.6);background:radial-gradient(70% 60% at 50% 70%,#14295A 0%,#0B1A3A 45%,#070F24 100%) fixed var(--navy-950);color:var(--paper)}
html[data-theme="contrast"] body[data-screen="certificate"]{--bg:#000814;--fg:#fff;--fg-2:#E3E9F7;--accent-ink:#C9D8FF;--focus:#FFD84D;background:#000814}
body[data-screen="certificate"] .field{display:none}
.cert-stage{position:relative;display:grid;place-items:center;min-height:min(86vh,980px);text-align:center;padding:40px 0}
.cert-arch{position:absolute;left:50%;top:50%;height:min(84vh,940px);width:auto;aspect-ratio:112/172;transform:translate(-50%,-50%);pointer-events:none}
.cert-arch use{stroke:#CFE0FF;stroke-width:.45}
.cert-arch .glow{stroke:var(--blue-300);stroke-width:2.6;opacity:.55}
.cert-arch .inner{opacity:1}
html[data-motion="ok"] .cert-arch.draw use{stroke-dasharray:1 1.2;stroke-dashoffset:1;animation:certdraw 1.6s var(--ease-out) .2s forwards}
@keyframes certdraw{to{stroke-dashoffset:0}}
.cert{position:relative;max-width:min(560px,86vw)}
.cert .eyebrow{color:var(--paper-2)}
.cert .name{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.6rem);font-weight:340;letter-spacing:-.025em;line-height:1;margin:22px 0 18px;font-variation-settings:"opsz" 144,"SOFT" 60}
.cert .for{color:var(--paper-2)}
.cert .course{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.2rem);margin:8px 0 6px;font-variation-settings:"opsz" 60,"SOFT" 100}
.cert .sig{margin-top:36px;display:grid;gap:4px;justify-items:center}
.cert .sig .ph{background:rgba(252,235,208,.92);color:#5C3700}
.cert .date{margin-top:26px;font-size:.9375rem;color:var(--paper-2)}
.cert-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;align-items:center;margin-top:12px}
.cert-note{text-align:center;margin-top:26px;color:var(--paper-2);font-size:.9375rem}
@media print{body[data-screen="certificate"]{background:#fff!important;color:#0B1530!important}.cert-stage{min-height:auto}.cert-arch use{stroke:#2949AE!important}.cert-arch .glow,.cert-arch .inner{display:none}.cert .eyebrow,.cert .for,.cert .date{color:#3E4A66!important}.cert-actions,.cert-note .link{display:none!important}@page{size:landscape;margin:12mm}}
.cert-stage{min-height:min(74vh,860px);overflow:hidden;padding:20px 0 0}
.cert-arch{top:auto;bottom:-2px;transform:translateX(-50%);height:min(70vh,820px)}
.cert-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,#08122B);pointer-events:none}
html[data-theme="contrast"] .cert-stage::after{display:none}
.cert{padding-top:clamp(40px,10vh,120px)}
/* ===== SIGN IN + ONBOARDING ===== */
.auth{position:relative;display:grid;place-items:center;min-height:calc(100vh - 220px);padding:20px 0}
.auth-arch{position:absolute;left:50%;top:50%;height:min(88vh,860px);width:auto;aspect-ratio:112/172;transform:translate(-50%,-46%);pointer-events:none}
.auth-arch use{stroke:var(--accent);stroke-width:.5;opacity:.5}
.auth-arch .glow{stroke:var(--blue-300);stroke-width:3;opacity:.55}
.auth-arch .inner{opacity:1}
html[data-motion="ok"] .auth-arch use{stroke-dasharray:1 1.2;stroke-dashoffset:1;animation:certdraw 1.4s var(--ease-out) .1s forwards}
.auth-card{position:relative;width:min(100%,420px);text-align:center}
.auth-card .eyebrow{margin-bottom:16px}
.auth-card .lede{margin:16px auto 0}
.auth-card form{margin-top:32px;text-align:left}
.auth-card .btn-primary{width:100%;margin-top:20px}
.auth-links{display:grid;justify-items:center;gap:0;margin-top:20px}
.auth-card .fine{margin-top:22px;font-size:.875rem;color:var(--fg-2)}
.ob{max-width:760px;margin:0 auto}
.steps3{display:flex;align-items:center;gap:12px;margin-bottom:clamp(32px,6vh,56px)}
.steps3 ol{display:flex;gap:8px}
.steps3 .arch{width:20px;height:auto}
.steps3 .small{font-weight:600;color:var(--fg-2)}
.ob h1{margin-bottom:14px}
.ob .lede{margin-bottom:34px}
.ob .prefs{display:grid;gap:6px;max-width:560px}
.preview{margin-top:28px;padding:22px 26px;border-radius:24px;background:var(--bg-2);box-shadow:var(--raise)}
html[data-theme="contrast"] .preview{box-shadow:inset 0 0 0 2px #000814}
.preview .eyebrow{margin-bottom:10px}
.preview p.read{font-size:var(--read)}
.ob-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:40px}
.ob .welcome{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.35;font-variation-settings:"opsz" 48,"SOFT" 80;font-style:italic;max-width:30ch;margin-top:10px}
.ob .welcome .ph{font-style:normal}
/* ===== SETTINGS ===== */
.set-grid{display:grid;gap:48px}
@media (min-width:1024px){.set-grid{grid-template-columns:240px minmax(0,1fr);gap:clamp(48px,6vw,104px)}.set-nav{position:sticky;top:112px;align-self:start}}
.set-nav a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:14px;text-decoration:none;color:var(--fg-2);font-weight:550}
.set-nav a:hover{background:var(--tonal);color:var(--fg)}
.set-nav a[aria-current]{background:var(--tonal-2);color:var(--fg)}
@media (max-width:1023px){.set-nav ul{display:flex;flex-wrap:wrap;gap:4px}}
.set-sec{scroll-margin-top:110px;max-width:720px}
.set-sec+.set-sec{margin-top:clamp(64px,10vh,104px)}
.set-sec h2{margin-bottom:8px}
.set-sec>p.muted{margin-bottom:24px}
.set-row{padding:14px 0}
.set-row .lbl{font-weight:600;display:block;margin-bottom:10px}
.set-row .hint{display:block;color:var(--fg-2);font-size:.9375rem;margin:-6px 0 12px}
.live-prev{margin-top:12px;font-size:.9375rem;color:var(--fg-2)}
.live-prev b{color:var(--fg)}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:12px 0}
.danger{color:var(--error)}
.btn-danger{background:var(--error-bg);color:var(--error)}
.btn-danger:hover{background:color-mix(in srgb,var(--error) 16%,transparent)}
/* ===== STATES GALLERY + INDEX ===== */
.gal-sec{margin-top:72px}
.gal{display:grid;gap:40px}
@media (min-width:1100px){.gal{grid-template-columns:1fr 1fr}}
.gal figure{display:grid;gap:12px}
.gal figcaption{font-weight:600}
.gal figcaption small{display:block;font-weight:500;color:var(--fg-2)}
.frame{border-radius:20px;overflow:hidden;background:var(--bg);box-shadow:var(--raise)}
.frame.mobile{width:300px}
.frame iframe{display:block;width:1440px;height:900px;border:0;transform:scale(.36);transform-origin:0 0}
.frame.desk{width:518px;height:324px}
.frame.mobile iframe{width:390px;height:844px;transform:scale(.62)}
.frame.mobile{width:242px;height:523px}
.gal .pair{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.demo{padding:28px;border-radius:24px;background:var(--bg);box-shadow:var(--raise)}
.idx h2{margin:56px 0 14px}
.idx ul{display:grid;gap:2px}
@media (min-width:900px){.idx ul{grid-template-columns:1fr 1fr}}
.idx li a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:12px 14px;margin:0 -14px;border-radius:16px;text-decoration:none;min-height:56px;align-items:center}
.idx li a:hover{background:var(--tonal)}
.idx li a b{font-family:var(--serif);font-weight:450;font-size:1.15rem}
.idx li a small{grid-column:2;color:var(--fg-2)}
.idx li a .n{grid-row:1/3;font:650 .8125rem/1 var(--sans);color:var(--accent-ink);width:34px}
.ob-act+.small{margin-top:16px}
.auth{overflow:hidden}
.auth::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(color-mix(in srgb,var(--bg) 0%,transparent),var(--bg));pointer-events:none}
.auth-card{z-index:1}
.fld .input+.hint{margin:8px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--tonal);color:var(--fg);text-decoration:none;font-size:.875rem;font-weight:550}
.chip:hover{background:var(--tonal-2)}
.idx .idx-list{display:grid;gap:22px}
.idx .idx-list>li .chips{margin-left:48px}
@media (min-width:900px){.idx .idx-list{grid-template-columns:1fr 1fr;gap:28px 56px}}
.read-col{max-width:760px}
code{font:500 .875em/1 ui-monospace,monospace;background:var(--tonal);padding:2px 6px;border-radius:6px}
.frame.desk img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.frame.desk{display:block;max-width:100%;aspect-ratio:16/10;height:auto}
.frame.desk:hover{box-shadow:var(--raise),0 0 0 3px var(--tonal-3)}
.cert-stage::after,.auth::after{display:none}
.cert-arch,.auth-arch{-webkit-mask-image:linear-gradient(#000 62%,transparent 98%);mask-image:linear-gradient(#000 62%,transparent 98%)}
.cert-stage{min-height:min(84vh,900px)}
.cert-arch{height:min(82vh,880px)}
.cert{max-width:min(440px,80vw)}
.cert .lede{margin-left:auto;margin-right:auto}
@media (max-width:600px){.cert-arch{height:auto;width:96vw}.cert-stage{min-height:auto;padding-bottom:40px}}
.idx li a.chip{display:inline-flex;grid-template-columns:none;min-height:44px;padding:0 16px;margin:0;border-radius:999px;background:var(--tonal)}
.idx li a.chip:hover{background:var(--tonal-2)}
.cert-arch,.auth-arch{overflow:visible}
@media (min-width:601px){.cert-stage{min-height:min(76vh,860px)}.cert-arch{height:min(72vh,820px)}.cert{padding-top:clamp(30px,8vh,100px)}}
.cert-arch,.auth-arch{padding:48px;box-sizing:content-box;-webkit-mask-image:linear-gradient(#000 60%,transparent 94%);mask-image:linear-gradient(#000 60%,transparent 94%)}
.cert-arch{bottom:-50px}
.dev-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px}.dev-note svg{flex:none;width:16px;height:16px;margin-top:3px}
.gate-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;color:var(--fg-2);max-width:56ch}
.gate-note svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--accent-ink)}
.item.notyet{cursor:default}
.item.notyet .tt{color:var(--fg-2)}
.rail .sub .notyet{display:flex;gap:10px;padding:6px 10px;color:var(--fg-2);font-size:.875rem}
.ann{margin:26px 0 8px}.ann .eyebrow{margin-bottom:6px}.res .item{min-height:64px}
@media (max-width:600px){.auth-arch{padding:0;width:calc(100vw - 20px);height:auto;top:0;transform:translateX(-50%)}.auth{align-items:start;padding-top:56px}}
@media (max-width:420px){.poster .p-t{display:none}.poster .ph{top:10px;left:10px;font-size:.625rem}}
/* QA fixes: decorative glows never create sideways scroll; reflow at 320–640 */
main{overflow-x:clip}
.ph{white-space:normal;max-width:100%;overflow-wrap:anywhere}
@media (max-width:700px){.prog-hero .archrow{gap:10px;flex-wrap:wrap}.prog-hero .archrow .arch{width:36px}}
.gal{grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.gal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.gal figure{min-width:0}.frame.desk{width:100%;max-width:518px}
.term{display:inline-flex;align-items:center;min-height:24px;padding:0 2px}
.toast .icon-btn{min-width:44px;min-height:44px}
button.term{display:inline-flex;align-items:center;min-height:24px;padding:0 2px;vertical-align:middle}
.home-low>*,.prog-grid>*,.side-list>*,.journey{min-width:0}
@media (max-width:480px){.archrow{flex-wrap:wrap;gap:8px}.archrow .arch{width:34px!important}.pmod>summary{gap:10px}.pmod>summary .status{font-size:.8125rem}.pmod>summary .status svg{display:none}}
/* polish: rhythm */
h1.display+.lede{margin-top:14px}
.auth-card .fld+.fld{margin-top:18px}
.sec>h2.title+p,.set-sec>h2.title+p{margin-top:8px}
.toast .btn-quiet{color:var(--paper);background:rgba(255,255,255,.14);box-shadow:none}.toast .btn-quiet:hover{background:rgba(255,255,255,.22)}.toast .icon-btn{color:var(--paper)}
.toast>span{flex:1 1 auto;min-width:0}.toast .btn{white-space:nowrap;flex:none}
.toast{width:max-content;max-width:min(640px,calc(100vw - 24px))}
@media (max-width:599px){.toast{width:calc(100vw - 24px);border-radius:22px;padding:10px 6px 10px 18px;line-height:1.4}}
/* strict sequence: calm locked rows with a plain reason (no lock icons) */
.door .sub .notyet{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:46px;padding:4px 12px;margin:0 -12px;font-size:.9688rem;color:var(--fg-2)}
.door .sub .notyet .st{font-size:.8125rem;color:var(--fg-2)}
.lockwhy{display:block;font-family:var(--sans,inherit);font-size:.8125rem;line-height:1.4;color:var(--fg-2);margin-top:2px;font-style:normal;letter-spacing:0}
.rail .sub .notyet .lockwhy{font-size:.75rem}
.item.notyet .lockwhy{margin-top:4px}
.upnext .next-link.notyet{color:var(--fg-2)}.upnext .next-link.notyet .tt{color:var(--fg-2)}

/* lesson: About + Download transcript (no synced transcript panel, no notes) */
.les-about .read{margin-top:12px}
.tr-dl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px}
.tr-dl .small{max-width:44ch}
@media (max-width:599px){.door .sub .notyet{grid-template-columns:22px minmax(0,1fr)}.door .sub .notyet .st{display:none}}
/* lesson watch status (calm, no percentage) */
.watch-st{margin-top:10px;font-size:.9375rem;color:var(--fg-2)}
.watch-st.ok{color:var(--success)}
.nextbox [aria-disabled="true"]{opacity:.62;cursor:not-allowed}
.nextbox .cant{margin-top:12px}
@media (min-width:1180px){.lesson-body>.aside-l{grid-column:2;grid-row:1}.lesson-body>div{grid-column:1;grid-row:1}}

/* prototype-only shortcuts to the teacher (admin) side */
.idx-teacher{margin:36px 0 8px;padding:22px 24px;margin-left:-24px;margin-right:-24px;border-radius:24px;background:var(--tonal)}
.idx-teacher h2{margin:0 0 6px}
.idx-teacher .chip{background:var(--bg);font-weight:600}
.proto-tag{font:650 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);background:var(--tonal-2);padding:.35em .6em;border-radius:999px;white-space:nowrap}
.proto-path{margin-top:18px}
.proto-path .link{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:599px){.idx-teacher{margin-left:-12px;margin-right:-12px;padding:18px 16px}}