/* Northlem Academy. All design tokens live in :root (see DESIGN_SPEC.json). */
:root{
 --navy-side:#0E2240;--navy:#0B1F3A;--navy-hover:#16305A;
 --nav-active:rgba(255,255,255,.08);--nav-text:rgba(255,255,255,.78);
 --paper:#F6F4EF;--card:#fff;--border:#E4DFD6;--row-hl:#EDF1F6;
 --text:#141B26;--muted:#5A6372;--faint:#656D7A;
 --accent:#3E6A9E;--accent-soft:#6B8CAE;--ok:#2F7D5B;--err:#B5413A;--err-bg:#FBEDEC;
 --explain:#F3F5F8;--dis-bg:#E3E1DC;--dis-text:#7A818C;--track:#E7E3DC;--skel:#EEEAE3;
 --ring:0 0 0 3px rgba(62,106,158,.35);
 --serif:'Source Serif 4',Georgia,serif;--sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
 --r-card:10px;--r-btn:6px;--r-row:8px;
 --shadow:0 1px 2px rgba(16,24,40,.04);
 --pad:48px;--side:248px;
 --ease:cubic-bezier(0.23,1,0.32,1);--t:120ms;
 /* motion tokens (premium-motion) */
 --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-in:cubic-bezier(0.55,0,1,1);--ease-std:cubic-bezier(0.2,0,0,1);
 --dur-micro:120ms;--dur-small:200ms;--dur-medium:260ms;--dur-large:480ms;
 --exit-factor:0.7;
 --dur-micro-out:85ms;--dur-small-out:140ms;--dur-medium-out:180ms;--dur-large-out:340ms;
 --move-s:4px;--move-m:8px;--move-l:16px;--press-scale:0.97;--stagger:40ms;--stagger-max:6;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
body.lock{overflow:hidden}
h1,h2,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1{font:600 40px/1.15 var(--serif);letter-spacing:-.01em;color:var(--navy-ink,#0B1F3A)}
h2{font:600 24px/1.25 var(--serif);color:#0B1F3A}
a{color:var(--accent);text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-btn)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic,.st-ic{flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st-ic.ok{fill:var(--accent)}.st-ic.no{fill:var(--err)}.st-ic.half{fill:var(--accent);stroke:var(--accent)}
.small{font-size:14px;line-height:1.45;color:var(--muted)}
.meta{font-size:14px;line-height:1.4;color:var(--faint)}
.lede{color:var(--muted);margin-top:8px}
.center{text-align:center}
.gap{margin-top:var(--gap,32px)}
.sk{background:var(--skel);border-radius:6px}

/* ---- shell ---- */
.shell{min-height:100vh;min-height:100dvh}
.side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--navy-side);display:flex;flex-direction:column;padding:24px 12px;z-index:5;overflow-y:auto}
.col{margin-left:var(--side);min-width:0}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:0 4px 0 12px}
.brand img{display:block;flex:none}
.bt{display:flex;flex-direction:column;line-height:1.15}
.bt b{font:600 20px/1.15 var(--serif);letter-spacing:0}
.bt small{font:400 13px/1.3 var(--sans);letter-spacing:.04em;opacity:.7}
.nav{display:flex;flex-direction:column;gap:4px;margin-top:40px}
.nav a,a.nav{position:relative;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:6px;color:var(--nav-text);text-decoration:none;font:500 15px/1 var(--sans);transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
@media (hover:hover){.nav a:hover,a.nav:hover{background:rgba(255,255,255,.05);color:#fff}}
.nav a.on,a.nav.on{background:var(--nav-active);color:#fff}
a.nav.help{margin-top:auto;flex-direction:row}
.side :focus-visible,.panel :focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.mtop{display:none}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad)}
.crumbs{min-width:0}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--faint)}
.crumbs li{display:flex;align-items:center}
.crumbs li a{color:var(--faint);text-decoration:none}
@media (hover:hover){.crumbs li a:hover{color:var(--text);text-decoration:underline}}
.crumbs li>span[aria-hidden]{margin:0 8px}
.crumbs li>span[aria-current]{color:var(--text)}
.crumbs .back{display:none}
.usr{position:relative;flex:none}
.chip{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 4px;background:none;border:0;border-radius:999px;font-size:15px;font-weight:500;color:var(--text);cursor:pointer;transition:background-color var(--t) var(--ease)}
@media (hover:hover){.chip:hover{background:rgba(14,34,64,.05)}}
.av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--navy-side);color:#fff;font:500 13px/1 var(--sans)}
.menu{position:absolute;right:0;top:42px;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-row);box-shadow:0 6px 20px rgba(16,24,40,.08);padding:6px;z-index:20}
.menu .mi{padding:8px 10px;display:flex;flex-direction:column;border-bottom:1px solid var(--border);margin-bottom:4px}
.menu .mi b{font-weight:600;font-size:13px}.menu .mi small{color:var(--muted);font-size:12px}
.menu button{width:100%;height:36px;text-align:left;padding:0 10px;background:none;border:0;border-radius:6px;font-size:13px;cursor:pointer}
@media (hover:hover){.menu button:hover{background:var(--row-hl)}}
.wrap{max-width:calc(860px + 2*var(--pad));padding:40px var(--pad) 64px;margin:0}
@media (min-width:1280px){.wrap{margin:0 auto}}
.wrap h1+.lede{margin-top:8px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;background:var(--navy);color:#fff;border:0;border-radius:var(--r-btn);font:500 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color var(--t) var(--ease)}
@media (hover:hover){.btn:hover{background:var(--navy-hover);color:#fff}}
.btn:disabled,.btn.disabled{background:var(--dis-bg);color:var(--dis-text);cursor:not-allowed}
.btn.sm{height:48px;padding:0 24px;font-size:15px}
.btn.block{width:100%}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;border-radius:var(--r-btn);color:inherit;cursor:pointer}

/* ---- forms / login ---- */
label{display:block;font-weight:500;font-size:14px;margin:16px 0 6px}
input[type=email],input[type=password],input[type=text]{width:100%;height:44px;padding:0 12px;background:#fff;border:1px solid #CFC9BE;border-radius:6px;font-size:15px;color:var(--text);transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.pwrap{position:relative}.pwrap input{padding-right:48px}
.eye{position:absolute;right:0;top:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted);cursor:pointer;border-radius:6px}
.err{margin:12px 0 0;color:var(--err);font-size:13px;font-weight:500}
.err:empty{display:none}
.login{position:relative;min-height:100vh;min-height:100dvh;background:var(--navy-side);display:flex;align-items:center;justify-content:center;padding:24px 20px;overflow:hidden}
.mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(46vh,360px);pointer-events:none}
.login-in{position:relative;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}
.login-name{font:500 28px/1.2 var(--serif);color:#fff;margin:12px 0 28px;letter-spacing:-.005em}
.login-card{width:100%;background:#fff;border-radius:var(--r-card);padding:32px;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.login-card h1{font:600 22px/1.25 var(--serif);text-align:center;letter-spacing:0}
.login-card .small{margin-top:6px}
.login-card form{margin-top:12px}
.login-card .btn{margin-top:20px;height:44px}
.login-card hr{border:0;border-top:1px solid var(--border);margin:24px 0 16px}
.login-card .small a{color:var(--text)}

/* ---- home ---- */
.cards{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.ccard{display:flex;gap:24px;align-items:stretch;min-height:160px;padding:12px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);color:var(--text);text-decoration:none;transition:border-color var(--t) var(--ease)}
@media (hover:hover){a.ccard:hover{border-color:#C8C1B3;color:var(--text)}}
.cthumb{flex:none;width:200px;height:136px;border-radius:8px;object-fit:cover;display:block}
.cthumb.ini{background:var(--navy-side);display:flex;align-items:center;justify-content:center;opacity:.85}
.cthumb.ini span{font:600 48px/1 var(--serif);color:#fff}
.cmain{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.cmain h2{font-size:24px}
.cmain .meta{margin-top:4px;display:flex;align-items:center;gap:6px}
.pg{margin-top:16px;max-width:none}
.bar{height:6px;background:var(--track);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.pg .small{margin-top:8px}
.caside{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;padding:4px 4px 4px 0}
.chev{color:var(--faint);display:flex}
.ccard.locked{background:var(--card)}
.ccard.locked .caside{justify-content:flex-start}
.ccard.locked h2{color:var(--muted)}

/* ---- course path ---- */
.panelc{margin-top:32px}
.steps{position:relative}
.steps{position:relative;display:flex;flex-direction:column;gap:10px}
.steps::before{content:"";position:absolute;left:16px;top:36px;bottom:36px;width:1px;background:var(--faint);opacity:.5}
.step{position:relative}
.step{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center}
.sc-card{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:14px;min-width:0;min-height:72px;padding:0 20px 0 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);color:var(--text);text-decoration:none}
.a.sc-card,.sc-card{transition:background-color var(--t) var(--ease)}
@media (hover:hover){a.sc-card:hover{border-color:#C8C1B3}}
.step.current>.sc-card{background:var(--row-hl);border-color:#D5DEE9}
.idx{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--card);border:1.5px solid var(--faint);color:var(--muted);font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.step.done .idx,.step.current .idx{background:var(--navy-side);border-color:var(--navy-side);color:#fff}
.ty{display:flex;color:var(--muted)}.ty .ic{stroke-width:1.5}
.stp{display:flex;flex-direction:column;min-width:0}
.stp b{font:500 17px/1.35 var(--sans)}
.stp small{font-size:14px;line-height:1.4;color:var(--faint)}
.step.locked .stp b{color:var(--muted)}
.step.locked .sc-card{background:#FBFAF7}
.rt{display:flex;align-items:center;gap:10px;color:var(--faint)}
.sc{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.lk{display:flex}
.done-note{display:inline-flex;align-items:center;gap:8px;font-weight:500}

/* ---- video ---- */
.lead-meta{margin-top:8px}
.player+.vfoot .small,.vfoot .small{font-size:14px}
.player{position:relative;margin-top:24px;max-width:920px;aspect-ratio:16/9;background:#000;border-radius:var(--r-card);overflow:hidden}
.player video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.bigplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:var(--navy-side);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity var(--t) var(--ease),background-color var(--t) var(--ease)}
.bigplay .ic{margin-left:3px}
@media (hover:hover){.bigplay:hover{background:#fff}}
.player.playing .bigplay{opacity:0;pointer-events:none}
.ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:28px 16px 12px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));transition:opacity var(--t) var(--ease)}
.player.playing:not(.show) .ctl{opacity:0}
.player.playing:hover .ctl,.player.playing:focus-within .ctl{opacity:1}
.ctl .cb{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-4px;background:none;border:0;color:#fff;cursor:pointer;border-radius:6px}
@media (hover:hover){.ctl .cb:hover{background:rgba(255,255,255,.14)}}
.ctl :focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.tm{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.scrub{position:relative;flex:1;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.scrub::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
.scrub .seen,.scrub .fill{position:absolute;left:0;height:3px;border-radius:2px}
.scrub .seen{background:rgba(255,255,255,.35)}
.scrub .fill{background:var(--accent-soft);background:#6F9BD0}
.scrub .knob{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.vol{width:64px;accent-color:#fff;cursor:pointer}
.vfoot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:16px;max-width:920px}
.qside{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qside .btn{min-width:148px}

/* ---- quiz ---- */
.q{border:0;padding:0;margin:32px 0 0;min-width:0}
.q:first-of-type{margin-top:24px}
.q legend{display:flex;gap:8px;padding:0;font:600 18px/1.45 var(--sans);margin-bottom:8px;width:100%}
.qn{flex:none;min-width:20px;font-variant-numeric:tabular-nums}
.opt{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;margin:2px 0;padding:8px 12px;font-weight:400;font-size:16px;cursor:pointer;border-radius:6px;transition:background-color var(--t) var(--ease)}
@media (hover:hover){.opt:hover{background:#F4F6F9}}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.rad,.dot{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--faint);background:#fff;position:relative}
.opt input:checked~.rad{border-color:var(--navy-side);box-shadow:0 0 0 1px var(--navy-side) inset}
.opt input:checked~.rad::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--navy-side)}
.opt:has(input:checked){background:var(--row-hl)}
.opt:has(input:focus-visible){box-shadow:var(--ring)}
.foot{margin-top:32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* ---- results ---- */
.h2r,.res{font:600 32px/1.2 var(--serif);color:#0B1F3A}
.res{margin-top:16px}
.rv{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.rcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow);padding:16px 20px}
.rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.rq{display:flex;gap:8px;font:500 17px/1.4 var(--sans)}
.ans{display:flex;align-items:center;gap:10px;margin:10px 0 0 28px;font-size:16px;color:var(--muted)}
.dot{width:12px;height:12px}
.dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--faint)}
.explain{margin:12px 0 0 28px;background:var(--explain);border-radius:6px;padding:16px;font-size:15px;line-height:1.5;color:var(--muted)}
.explain p+p{margin-top:6px}
.explain b{color:var(--text);font-weight:600}
.center-col{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:620px;margin:0 auto;padding-top:16px}
.seal{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.seal.bad{border-color:var(--err);color:var(--err);font:600 30px/1 var(--serif)}
.solo{margin-top:0}
.h2r{font-size:40px;line-height:1.15}
.display{font:600 112px/1 var(--serif);letter-spacing:-.02em;color:#0B1F3A;margin-top:24px;font-variant-numeric:tabular-nums}
.center-col .small{margin-top:8px;font-size:16px}
.pbar{position:relative;width:100%;max-width:440px;margin-top:32px;padding:28px 0 30px}
.pt{position:relative;height:10px;background:var(--track);border-radius:999px}
.pt i{position:absolute;left:0;top:0;height:100%;background:var(--accent);border-radius:999px}
.pbar.fail .pt i{background:#8C98A8}
.pt u{position:absolute;top:-9px;width:3px;height:28px;margin-left:-1.5px;background:var(--navy-side)}
.pl,.pl2{position:absolute;transform:translateX(-50%);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.pl{top:0;font-size:15px;font-weight:600;color:var(--text)}.pl2{bottom:0}
.great{font-weight:600;font-size:17px;margin-top:24px}
.muted{color:var(--muted);margin-top:4px}
.sec{font:600 16px/1.3 var(--sans);color:var(--text);align-self:flex-start;margin-top:40px;margin-bottom:12px}
.miss{width:100%;display:flex;flex-direction:column;gap:12px;text-align:left}
.miss .rcard{display:flex;justify-content:space-between;gap:20px}
.miss .rq{align-items:flex-start}
.miss .rq .st-ic{flex:none;margin-top:1px}
.miss .why{margin:6px 0 0 28px;font-size:14px;line-height:1.45;color:var(--muted)}
.rewatch{flex:none;display:flex;flex-direction:column;gap:6px;width:120px;text-decoration:none;color:var(--accent);font-size:14px;font-weight:500}
.rewatch .th{position:relative;display:block;width:120px;height:68px;border-radius:6px;overflow:hidden;background:#000}
.rewatch img{display:block;width:100%;height:100%;object-fit:cover}
.rewatch .pb{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px;border-radius:50%;background:rgba(255,255,255,.88);color:var(--navy-side);display:flex;align-items:center;justify-content:center}
.rewatch .pb .ic{margin-left:1px}
.rewatch .rl small{display:block;color:var(--faint);font-weight:400;font-variant-numeric:tabular-nums}
@media (hover:hover){.rewatch:hover .rl{text-decoration:underline}}

/* ---- team ---- */
.head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.head-row .meta{margin-top:8px}
.sel{position:relative;margin:0;display:flex;align-items:center}
.sel select{appearance:none;-webkit-appearance:none;height:40px;padding:0 32px 0 12px;background:#fff;border:1px solid #CFC9BE;border-radius:6px;font-size:15px;cursor:pointer}
.sel select:focus{outline:none;box-shadow:var(--ring);border-color:var(--accent)}
.sel .ic{position:absolute;right:10px;pointer-events:none;color:var(--muted)}
.tscroll{margin-top:24px;overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow)}
.tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:820px;font-size:15px}
.tbl th,.tbl td{height:60px;padding:0 16px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl thead th{height:auto;padding:14px 16px;font-size:14px;font-weight:500;color:var(--muted);white-space:normal;line-height:1.3}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl tbody th{font-weight:500;position:sticky;left:0;background:var(--card);z-index:1}
.tbl thead th:first-child{position:sticky;left:0;background:var(--card);z-index:1}
.who{display:flex;align-items:center;gap:12px}
.tbl td .st-ic{vertical-align:middle}
.dash{color:var(--faint)}
.num{font-variant-numeric:tabular-nums}
.when{color:var(--muted)}
.empty{text-align:center!important;color:var(--muted)}

/* ---- responsive ---- */
@media (max-width:1099px){
 :root{--pad:32px;--side:72px}
 .side{padding:24px 12px;align-items:center}
 .side .brand{padding:0}.side .bt{display:none}
 .side .nav{width:100%}
 .side .nav a,.side a.nav{justify-content:center;padding:0;width:48px;margin:0 auto}
 .side .nav a span,.side a.nav span{display:none}
 .side [data-tip]:hover::after,.side [data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:56px;top:50%;transform:translateY(-50%);background:#0B1830;color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;white-space:nowrap;z-index:10}
 .side a.nav.help{width:48px;margin:auto auto 0}
}
@media (max-width:767px){
 :root{--pad:20px;--side:0px}
 body{font-size:15px}
 h1{font-size:30px}
 .side{display:none}
 .col{margin-left:0}
 .mtop{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(var(--pad) + env(safe-area-inset-left));background:#fff;border-bottom:1px solid var(--border);color:var(--navy)}
 .mtop .brand{color:var(--navy);padding:0}
 .mtop .bt small{opacity:.7}
 .topbar{height:auto;min-height:0;padding:0 var(--pad)}
 .usr{display:none}
 .crumbs ol{display:none}
 .crumbs .back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-4px;color:var(--text);text-decoration:none;font-size:13px}
 .wrap{padding:24px var(--pad) calc(48px + env(safe-area-inset-bottom))}
 .display{font-size:72px}
 .ccard{flex-wrap:wrap;gap:16px}
 .cthumb{width:100%;height:auto;aspect-ratio:16/9}
 .cmain h2{font-size:22px}
 .cthumb.ini{height:104px;aspect-ratio:auto}
 .cmain{flex:1 1 100%}
 .pg{max-width:none}
 .caside{flex:1 1 100%;flex-direction:row-reverse;align-items:center;position:relative}
 .caside .chev{display:none}
 .caside .btn{width:100%}
 .panelc{padding:4px}
 .step{grid-template-columns:36px minmax(0,1fr)}
 .steps::before{left:14px;top:32px;bottom:32px}
 .sc-card{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:12px 14px;min-height:64px}
 .ty{display:none}
 .idx{width:28px;height:28px;font-size:13px}
 .ccard{padding:12px}
 .vfoot{flex-direction:column;align-items:stretch}
 .qside{align-items:stretch}
 .qside .meta{text-align:center}
 .qside .btn{width:100%}
 .vol{display:none}
 .ctl{gap:8px;padding:24px 12px 8px}
 .ctl .cb{width:44px;height:44px;margin:-8px}
 .bigplay{width:56px;height:56px;margin:-28px 0 0 -28px}
 .gap>.btn{width:100%}
 .foot .btn{width:100%}
 .opt{min-height:44px}
 .miss .rcard{flex-direction:column}
 .rewatch{flex-direction:row;align-items:center;width:auto;gap:12px;margin-left:28px}
 .head-row .sel,.head-row .sel select{width:100%}
 .tbl th:first-child,.tbl td:first-child{min-width:140px}
 .login-card{padding:24px}
 .center-col{padding-top:8px}
}
/* drawer */
.drawer{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:rgba(8,16,30,.5)}
.panel{position:absolute;left:0;top:0;bottom:0;width:min(300px,86vw);background:var(--navy-side);padding:calc(24px + env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto}
.panel .close{position:absolute;right:8px;top:calc(12px + env(safe-area-inset-top));color:#fff}
.panel .nav a,.panel a.nav{height:44px}
.signout{height:44px;margin-top:8px;background:none;border:0;border-radius:6px;color:var(--nav-text);text-align:left;padding:0 14px;font:500 15px/1 var(--sans);cursor:pointer}
@media (hover:hover){.signout:hover{background:rgba(255,255,255,.05);color:#fff}}
@media (min-width:768px){.drawer{display:none!important}}
.panelc+.gap .btn{min-width:176px}
.mtop .brand .bt b{font-size:18px}
.rt{justify-self:end}
.ty{width:32px;justify-content:center}
@media (max-width:767px){.ty{display:none}}
.st-ic.ok circle,.st-ic.no circle{stroke:none}

/* ---- motion ---- */
#app{position:relative}
.ghost{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;pointer-events:none}
/* press + hover */
.btn,.iconbtn,.chip,.signout,.nav a,a.nav,.menu button,.opt,.cb,.bigplay{transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out)}
.btn:active,.iconbtn:active,.chip:active,.signout:active,.nav a:active,a.nav:active,.bigplay:active{transform:scale(var(--press-scale))}
.ccard,.sc-card{transition:transform 160ms var(--ease-out),border-color 160ms var(--ease-out),background-color var(--dur-micro) var(--ease-out)}
@media (hover:hover){a.ccard:hover,a.sc-card:hover{transform:translateY(-1px)}}
a.ccard:active,a.sc-card:active{transform:scale(var(--press-scale))}
/* progress fills */
.bar i,.pt i{transform-origin:left center;animation:barfill 400ms var(--ease-out) 120ms backwards}
@keyframes barfill{from{transform:scaleX(0)}}
@keyframes barfade{from{opacity:0}}
/* quiz radio dot */
.opt input:checked~.rad::after{animation:dotin var(--dur-micro) var(--ease-out)}
@keyframes dotin{from{transform:scale(.6);opacity:0}}
/* drawer */
.drawer .scrim{opacity:0;transition:opacity var(--dur-medium-out) var(--ease-in)}
.drawer .panel{transform:translateX(-100%);transition:transform var(--dur-medium-out) var(--ease-in)}
.drawer.open .scrim{opacity:1;transition:opacity var(--dur-medium) var(--ease-out)}
.drawer.open .panel{transform:none;transition:transform var(--dur-medium) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
 .btn:active,.iconbtn:active,.chip:active,.signout:active,.nav a:active,a.nav:active,.bigplay:active,a.ccard:active,a.sc-card:active{transform:none;opacity:.85}
 a.ccard:hover,a.sc-card:hover{transform:none}
 .bar i,.pt i{animation:barfade 150ms linear 120ms backwards}
 .opt input:checked~.rad::after{animation:barfade 120ms linear}
 .drawer .panel,.drawer.open .panel{transform:none;opacity:0;transition:opacity 150ms linear}
 .drawer.open .panel{opacity:1}
 .drawer .scrim,.drawer.open .scrim{transition-duration:150ms}
}

/* ===== First-run welcome (ported from welcome-prototype.html), scoped under .welcome ===== */
.welcome{--navy:#0E2240;--navy-2:#132B4F;--ink:#141B26;--paper:#F6F4EF;--line:#E4DFD6;--off:#F4F1EA;--accent:#3E6A9E;--soft:#8FA9C7;--muted:#5A6372;--faint:#8A919C;--ease-io:cubic-bezier(.77,0,.175,1);
  position:fixed;inset:0;z-index:60;height:100dvh;background:var(--navy);color:var(--off);font:400 15px/1.55 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
.welcome *,.welcome *::before,.welcome *::after{box-sizing:border-box;margin:0}
.welcome button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.welcome :focus-visible{outline:2px solid var(--soft);outline-offset:3px;border-radius:6px}
.welcome .btn{font-family:var(--sans);line-height:1.55;justify-content:flex-start;width:auto;min-width:0;border:0;text-decoration:none}
.welcome .foot{margin-top:40px;gap:24px}
.welcome .lede{margin-top:24px}
.welcome .stage{position:fixed;inset:0;height:100dvh}
.welcome .scene{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px,5vw,72px);
  opacity:0;pointer-events:none;transition:opacity 260ms var(--ease-out)}
.welcome .scene.on{opacity:1;pointer-events:auto}
.welcome .scene.leaving{opacity:0;transition:opacity 180ms var(--ease-in)}
.welcome .ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:46vh;pointer-events:none}
.welcome .ridge path{fill:none;stroke-linecap:round}
.welcome .ridge .back{stroke:rgba(255,255,255,.07);stroke-width:1}
.welcome .ridge .fill{fill:rgba(255,255,255,.025);stroke:none}
.welcome .ridge .draw{stroke:rgba(244,241,234,.55);stroke-width:1.25;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1600ms var(--ease-io)}
.welcome .ridge.drawn .draw{stroke-dashoffset:0}
.welcome .ridge .peak{fill:var(--off);opacity:0;transition:opacity 400ms var(--ease-out) 1400ms}
.welcome .ridge.drawn .peak{opacity:1}
.welcome .arrive{max-width:760px;width:100%;text-align:left;transform:translateY(-6vh)}
.welcome .mark{width:34px;height:34px;display:block;margin-bottom:40px;opacity:0;transition:opacity 500ms var(--ease-out) 200ms}
.welcome .on .mark{opacity:1}
.welcome .hello{font:600 clamp(40px,6.4vw,76px)/1.04 var(--serif);letter-spacing:-.02em;color:#fff}
.welcome .hello .w{display:inline-block;opacity:0;transform:translateY(10px);filter:blur(3px);
  transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out),filter 500ms var(--ease-out);transition-delay:calc(700ms + var(--i)*70ms)}
.welcome .on .hello .w{opacity:1;transform:none;filter:none}
.welcome .hello em{font-style:italic;font-weight:400;color:var(--soft)}
.welcome .lede{margin-top:24px;max-width:520px;font-size:17px;color:rgba(244,241,234,.72);
  opacity:0;transition:opacity 500ms var(--ease-out) 1500ms}
.welcome .on .lede{opacity:1}
.welcome .note{margin-top:40px;display:grid;grid-template-columns:2px 1fr;gap:20px;max-width:540px;
  opacity:0;transform:translateY(6px);transition:opacity 500ms var(--ease-out) 1750ms,transform 600ms var(--ease-out) 1750ms}
.welcome .on .note{opacity:1;transform:none}
.welcome .note i{background:linear-gradient(var(--soft),transparent);border-radius:2px}
.welcome .note blockquote{font:400 italic 19px/1.5 var(--serif);color:rgba(244,241,234,.9)}
.welcome .note cite{display:block;margin-top:10px;font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--faint)}
.welcome .actions{margin-top:48px;display:flex;align-items:center;gap:28px;
  opacity:0;transition:opacity 500ms var(--ease-out) 2000ms}
.welcome .on .actions{opacity:1}
.welcome .btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 26px;border-radius:8px;
  background:var(--off);color:var(--navy);font-weight:600;font-size:15px;letter-spacing:.01em;
  transition:transform 120ms var(--ease-out),background 160ms var(--ease-out)}
.welcome .btn svg{transition:transform 200ms var(--ease-out)}
@media (hover:hover){.welcome .btn:hover{background:#fff}
.welcome .btn:hover svg{transform:translateX(3px)}}
.welcome .btn:active{transform:scale(.97)}
.welcome .btn.dark{background:var(--navy);color:#fff}
@media (hover:hover){.welcome .btn.dark:hover{background:#17325c}}
.welcome .skip{font-size:14px;color:rgba(244,241,234,.55);transition:color 120ms}
@media (hover:hover){.welcome .skip:hover{color:var(--off)}}
.welcome .art{background:#F1ECDF;place-items:start;padding-top:clamp(56px,9vh,110px)}
.welcome .hero{position:absolute;inset:0;overflow:hidden}
.welcome .hero img{width:100%;height:100%;object-fit:cover;object-position:60% 40%;transform:scale(1.12);opacity:0;
  transition:transform 6000ms var(--ease-out),opacity 1200ms var(--ease-out)}
.welcome .art.on .hero img{transform:scale(1.02);opacity:1}
.welcome .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(241,236,223,.97) 0%,rgba(241,236,223,.93) 42%,rgba(241,236,223,.55) 60%,rgba(241,236,223,0) 78%)}
.welcome .art .arrive{position:relative;max-width:600px;transform:none}
.welcome .art .hello{color:var(--navy)}
.welcome .art .hello em{color:var(--accent)}
.welcome .art .lede{color:#3d4a5c}
.welcome .art .note blockquote{color:var(--navy)}
.welcome .art .note i{background:linear-gradient(var(--accent),transparent)}
.welcome .art .btn{background:var(--navy);color:#fff}
.welcome .art .skip{color:#5a6372}
.welcome .art .mark{filter:none}
.welcome .art .arrive,.welcome .art .ask{text-shadow:0 0 18px rgba(241,236,223,.95),0 0 4px rgba(241,236,223,.9)}
.welcome .art .lede{color:#22314a;font-weight:500}
.welcome .art .note cite{color:#4a5568}
@media (max-height:820px){.welcome .art .hello{font-size:clamp(36px,5vw,60px)}
.welcome .art .mark{margin-bottom:24px}
.welcome .art .note{margin-top:24px}
.welcome .art .actions{margin-top:28px}
.welcome .art .lede{margin-top:16px}}
.welcome .ask{position:relative;max-width:520px}
.welcome .ask h1{font:600 clamp(36px,5vw,60px)/1.06 var(--serif);color:var(--navy);letter-spacing:-.02em;opacity:0;transform:translateY(10px);transition:opacity 500ms var(--ease-out) 500ms,transform 600ms var(--ease-out) 500ms}
.welcome .ask p{margin-top:14px;color:#22314a;font-size:17px;font-weight:500;opacity:0;transition:opacity 500ms var(--ease-out) 750ms}
.welcome .ask form{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;transition:opacity 500ms var(--ease-out) 950ms}
.welcome .on .ask h1,.welcome .on .ask p,.welcome .on .ask form{opacity:1;transform:none}
.welcome .ask input{flex:1;min-width:220px;height:52px;padding:0 18px;border-radius:8px;border:1px solid rgba(14,34,64,.25);background:rgba(255,255,255,.85);
  font:500 18px var(--serif);color:var(--navy);transition:border-color 160ms,box-shadow 160ms}
.welcome .ask input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(14,34,64,.1)}
.welcome .ask .btn{height:52px}
.welcome .ask .btn:disabled{opacity:.4;cursor:default}
.welcome:has(.art.on) .ridge{opacity:0}
.welcome .ridge{transition:opacity 600ms}
.welcome:has(.art.on) .dots i{background:rgba(14,34,64,.18)}
.welcome:has(.art.on) .dots i.a{background:var(--navy)}
@media (max-width:760px){.welcome .hero img{object-position:70% 50%}
.welcome .hero::after{background:linear-gradient(180deg,rgba(241,236,223,.97) 0%,rgba(241,236,223,.9) 55%,rgba(241,236,223,.2) 100%)}}
.welcome .path{width:min(1120px,100%)}
.welcome .kicker{font:500 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.welcome .path h2{margin-top:14px;font:600 clamp(32px,4.2vw,52px)/1.08 var(--serif);letter-spacing:-.015em;color:#fff;max-width:640px}
.welcome .path p.sub{margin-top:16px;max-width:520px;color:rgba(244,241,234,.7);font-size:16px}
.welcome .trail{position:relative;margin-top:56px;height:300px}
.welcome .trail svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.welcome .trail .t{fill:none;stroke:rgba(244,241,234,.5);stroke-width:1.25;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1800ms var(--ease-io) 200ms}
.welcome .on .trail .t{stroke-dashoffset:0}
.welcome .node{position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity 400ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:var(--d)}
.welcome .on .node{opacity:1}
.welcome .node.v{width:clamp(110px,15vw,176px)}
.welcome .node.v .frame{aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);background:#0a1a31}
.welcome .node.v img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 600ms var(--ease-out)}
@media (hover:hover){.welcome .node.v:hover img{transform:scale(1.09)}}
.welcome .node.v b{display:block;margin-top:10px;font:600 15px/1.3 var(--serif);color:#fff}
.welcome .node.v small{display:block;font-size:12px;color:var(--faint)}
.welcome .node.q{width:14px;height:14px;border-radius:50%;background:var(--navy);border:1.5px solid var(--soft)}
.welcome .node.q::after{content:attr(data-l);position:absolute;top:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:var(--faint)}
.welcome .node.f{text-align:center}
.welcome .node.f .flag{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto;
  border:1.5px solid var(--off);font:600 16px/1 var(--serif);color:#fff;background:var(--navy);position:relative}
.welcome .node.f .flag::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(244,241,234,.25);animation:breathe 3.2s var(--ease-io) infinite 3s}
.welcome @keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:0}}
.welcome .node.f b{display:block;margin-top:12px;font:600 15px/1.3 var(--serif);color:#fff}
.welcome .node.f small{font-size:12px;color:var(--faint)}
.welcome .path .foot{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.welcome .path .foot span{font-size:14px;color:rgba(244,241,234,.6)}
.welcome .hero2 img{object-position:50% 15%}
.welcome .hero2::after{background:linear-gradient(180deg,rgba(241,236,223,.97) 0%,rgba(241,236,223,.92) 55%,rgba(241,236,223,.6) 100%)}
.welcome #s2 .path{position:relative}
.welcome #s2 .kicker{color:#3E6A9E}
.welcome #s2 .path h2{color:#0E2240}
.welcome #s2 .path p.sub{color:#22314a;font-weight:500}
.welcome #s2 .path .foot span{color:#4a5568}
.welcome #s2 .trail .t{stroke:#0E2240;opacity:.55;stroke-width:1.5}
.welcome #s2 .trail .t2{fill:none;stroke:#0E2240;opacity:.12;stroke-width:6;stroke-linecap:round}
.welcome #s2 .node.v .frame{border:1px solid rgba(14,34,64,.18);background:#fff;padding:4px;border-radius:6px;box-shadow:0 14px 30px -18px rgba(14,34,64,.45)}
.welcome #s2 .node.v .frame{box-sizing:border-box}
.welcome #s2 .node.v img{border-radius:3px}
.welcome #s2 .node.v b,.welcome #s2 .node.f b{color:#0E2240}
.welcome #s2 .node.v small,.welcome #s2 .node.f small{color:#5A6372}
.welcome #s2 .node.q{background:#F1ECDF;border:1.5px solid #0E2240;color:#5A6372;font-size:0}
.welcome #s2 .node.q::after{font-size:11px}
.welcome #s2 .node.q::after{color:#5A6372}
.welcome #s2 .node.f .flag{background:#0E2240;color:#fff;border:none}
.welcome #s2 .node.f .flag::before{border-color:rgba(14,34,64,.3)}
.welcome #s2 .path{text-shadow:0 0 16px rgba(241,236,223,.95),0 0 3px rgba(241,236,223,.9)}
.welcome #s2 .kicker{color:#2f5687}
.welcome #s2 .foot span{color:#22314a;font-weight:500}
.welcome #s2 .trail{height:clamp(210px,34vh,300px);margin-top:clamp(24px,5vh,56px)}
.welcome #s2 .path h2{margin-top:10px}
.welcome #s2 .node.v{width:clamp(120px,14vw,176px)}
.welcome #s2 .node.v b,.welcome #s2 .node.f b{font-size:14px;white-space:nowrap}
.welcome #s2 .node.v small,.welcome #s2 .node.f small{white-space:nowrap}
.welcome #s2 .node.f{left:93%!important;top:6%!important}
.welcome #s2 .node.f .flag{width:52px;height:52px;font-size:15px}
@media (max-height:760px){.welcome #s2 .path p.sub{margin-top:10px}
.welcome #s2 .foot{margin-top:20px}}
.welcome .pledge{width:min(620px,100%);text-align:center}
.welcome .pledge h2{margin-top:14px;font:600 clamp(30px,4vw,46px)/1.1 var(--serif);color:#fff;letter-spacing:-.015em}
.welcome .rules{margin:40px 0 0;padding:0;list-style:none;text-align:left;border-top:1px solid rgba(255,255,255,.1)}
.welcome .rules li{display:grid;grid-template-columns:40px 1fr;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(6px);transition:opacity 400ms var(--ease-out),transform 500ms var(--ease-out);transition-delay:calc(250ms + var(--i)*90ms)}
.welcome .on .rules li{opacity:1;transform:none}
.welcome .rules span{font:600 15px/1.5 var(--serif);color:var(--soft)}
.welcome .rules p{font-size:16px;color:rgba(244,241,234,.88)}
.welcome .rules p small{display:block;font-size:13px;color:var(--faint);margin-top:2px}
.welcome .hold{margin:44px auto 0;position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  touch-action:none;user-select:none;-webkit-user-select:none}
.welcome .hold svg{position:absolute;inset:0;transform:rotate(-90deg)}
.welcome .hold .track{fill:none;stroke:rgba(255,255,255,.14);stroke-width:2}
.welcome .hold .ring{fill:none;stroke:var(--off);stroke-width:2;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289}
.welcome .hold .core{width:72px;height:72px;border-radius:50%;background:var(--off);color:var(--navy);display:grid;place-items:center;
  font:600 14px/1.1 var(--sans);transition:transform 160ms var(--ease-out),background 200ms}
.welcome .hold.pressing .core{transform:scale(.94)}
.welcome .hold.done .core{background:#fff;transform:scale(1)}
.welcome .hold-hint{margin-top:16px;font-size:13px;color:var(--faint);min-height:20px}
.welcome #s3{place-items:center;padding-top:clamp(20px,5vw,72px)}
.welcome #s3 .hero3 img{object-position:62% 0%}
.welcome #s3 .hero3::after{background:radial-gradient(ellipse 60% 75% at 50% 50%,rgba(241,236,223,.97) 0%,rgba(241,236,223,.9) 55%,rgba(241,236,223,.45) 100%)}
.welcome #s3 .pledge{position:relative;text-shadow:0 0 16px rgba(241,236,223,.95),0 0 3px rgba(241,236,223,.9)}
.welcome #s3 .kicker{color:#2f5687}
.welcome #s3 h2{color:#0E2240}
.welcome #s3 .rules{border-top:1px solid rgba(14,34,64,.14)}
.welcome #s3 .rules li{border-bottom:1px solid rgba(14,34,64,.14)}
.welcome #s3 .rules span{color:#2f5687}
.welcome #s3 .rules p{color:#0E2240;font-weight:500}
.welcome #s3 .rules p small{color:#4a5568;font-weight:400}
.welcome #s3 .hold .track{stroke:rgba(14,34,64,.15)}
.welcome #s3 .hold .ring{stroke:#0E2240}
.welcome #s3 .hold .core{background:#0E2240;color:#fff;text-shadow:none;box-shadow:0 10px 24px -12px rgba(14,34,64,.6)}
.welcome #s3 .hold.done .core{background:#17325c}
.welcome #s3 .hold-hint{color:#4a5568}
@media (max-height:760px){.welcome #s3 .rules{margin-top:20px}
.welcome #s3 .rules li{padding:12px 4px}
.welcome #s3 .hold{margin-top:24px}}
.welcome .dots{position:fixed;top:28px;right:32px;display:flex;gap:8px;z-index:5;transition:opacity 300ms}
.welcome .dots i{width:22px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);transition:background 300ms var(--ease-out)}
.welcome .dots i.a{background:var(--off)}
@media (max-width:760px){.welcome{overflow:auto}
.welcome .arrive{transform:none}
.welcome .mark{margin-bottom:28px}
.welcome .actions{gap:20px;margin-top:36px}
.welcome .trail{height:auto;margin-top:32px}
.welcome .trail svg{display:none}
.welcome .node{position:relative;left:auto!important;top:auto!important;transform:none;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;
    padding:10px 0 10px 18px;border-left:1px solid rgba(244,241,234,.3);width:auto!important;text-align:left}
.welcome .node.v .frame{width:72px}
.welcome .node.v b{margin:0}
.welcome .node.q,.welcome .node.f .flag{display:none}
.welcome #s2 .node{border-left-color:rgba(14,34,64,.25)}
.welcome #s2 .node.q{display:block;width:auto;height:auto;border:0;border-left:1px solid rgba(14,34,64,.25);color:#5A6372;font-size:12px}
.welcome .node.q{display:block;width:auto;height:auto;border:0;border-left:1px solid rgba(244,241,234,.3);border-radius:0;background:none;padding:6px 0 6px 18px;font-size:12px;color:var(--faint)}
.welcome .node.q::after{content:none}
.welcome .node.f{display:block}
.welcome .dots{top:20px;right:20px}}
@media (prefers-reduced-motion:reduce){.welcome *,.welcome *::before,.welcome *::after{transition-duration:150ms!important;transition-delay:0ms!important;animation:none!important}}

/* base-camp beat */
.welcome .land{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity 300ms ease-out}
.welcome .land.on{opacity:1}
.welcome .arrive4{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:18px;background:#F1ECDF;font:400 italic 22px/1.3 'Source Serif 4',serif;color:#0E2240;pointer-events:none;opacity:1;overflow:hidden;transition:opacity 500ms cubic-bezier(.23,1,.32,1) 1300ms}
.welcome .arrive4 img{width:40px}
.welcome .arrive4::before{content:"";position:absolute;inset:0;background:url(/img/summit.png) 62% 10%/cover;opacity:.16;z-index:-1}
.welcome .arrive4 p{position:relative;opacity:0;transform:translateY(6px);transition:opacity 500ms cubic-bezier(.23,1,.32,1) 250ms,transform 600ms cubic-bezier(.23,1,.32,1) 250ms}
.welcome .land.on .arrive4 p{opacity:1;transform:none}
.welcome .land.on .arrive4{opacity:0}
.welcome.reveal{background:transparent}
.welcome.reveal .ridge,.welcome.reveal .dots,.welcome.reveal .scene:not(.land){display:none}
.welcome .hold-hint.err{color:#B5413A}
@media (prefers-reduced-motion:reduce){.welcome .arrive4 p{transform:none!important}}

/* toast (shown on home after the intro) */
.na-toast{position:fixed;right:24px;bottom:28px;z-index:70;background:#0E2240;color:#fff;font-size:13px;line-height:1.4;padding:12px 18px;border-radius:8px;box-shadow:0 12px 32px -12px rgba(0,0,0,.4);opacity:0;transform:translateY(16px);transition:opacity 200ms var(--ease-out),transform 260ms var(--ease-out);pointer-events:none}
.na-toast.on{opacity:1;transform:none}
@media (max-width:760px){.na-toast{left:16px;right:16px;bottom:20px}}
@media (prefers-reduced-motion:reduce){.na-toast{transform:none;transition-duration:150ms}}

/* device robustness for the welcome */
.welcome .hold,.welcome .hold *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none}
.welcome .skip{min-height:44px;padding:0 6px}
.welcome .ridge{height:46dvh}
.welcome .scene{padding-left:max(clamp(20px,5vw,72px),env(safe-area-inset-left));padding-right:max(clamp(20px,5vw,72px),env(safe-area-inset-right));padding-bottom:max(clamp(20px,5vw,72px),env(safe-area-inset-bottom))}
.welcome .dots{top:max(28px,calc(env(safe-area-inset-top) + 12px));right:max(32px,calc(env(safe-area-inset-right) + 16px))}
.welcome .scene{overflow-y:auto;overflow-x:hidden}
.welcome .scene.land{overflow:hidden}
.welcome .ask input{font-size:18px}
@media (max-width:760px){
  .welcome .hero img{object-position:62% 40%}
  .welcome #s3 .hero3 img{object-position:62% 0%}
  .welcome .scene{place-items:start center;padding-top:max(72px,calc(env(safe-area-inset-top) + 56px))}
  .welcome #s3{place-items:start center}
  .welcome .art .arrive,.welcome .ask,.welcome .path,.welcome .pledge{margin:auto 0}
  .welcome .ask .btn{width:100%;justify-content:center}
  .welcome .actions .btn{flex:0 0 auto}
  .welcome .path .foot .btn{width:100%;justify-content:center}
}

/* Google sign-in */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;margin-top:0;background:#fff;color:var(--text);border:1px solid #CFCAC0;border-radius:var(--r-btn);font:500 15px/1 var(--sans);text-decoration:none;transition:background-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out)}
@media (hover:hover){.gbtn:hover{background:#F8F7F4}}
.gbtn:active{transform:scale(var(--press-scale))}
.gbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.login-card .or{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:var(--muted);font-size:13px}
.login-card .or::before,.login-card .or::after{content:"";flex:1;border-top:1px solid var(--border)}
.gerr:empty{display:none}
.gerr{margin-top:14px;text-align:center}
@media (max-width:760px){
  .welcome #s1 .hero img{object-position:64% 0%}
  .welcome #s1 .hero::after{background:linear-gradient(180deg,rgba(241,236,223,.15) 0%,rgba(241,236,223,.45) 20%,rgba(241,236,223,.93) 40%,rgba(241,236,223,.92) 78%,rgba(241,236,223,.4) 100%)}
}
@media (max-width:760px){
  .welcome #s2 .trail{height:auto;margin-top:20px}
  .welcome #s2 .node.f{left:auto!important;top:auto!important;text-align:left}
  .welcome #s2 .node.f b,.welcome #s2 .node.f small{white-space:normal}
  .welcome .node{padding-top:6px;padding-bottom:6px}
  .welcome #s2 .path .foot{margin-top:20px}
  .welcome #s2 .path .foot span{font-size:13px}
}
@media (max-width:760px){
  .welcome #s2 .node.q{background:none;padding-top:2px;padding-bottom:2px}
  .welcome #s2 .node.v .frame{grid-row:span 2}
  .welcome #s2 .node.v b{align-self:end}
  .welcome #s2 .node.v small{grid-column:2;align-self:start}
}

/* login card: forgot link, or-divider, reset forms */
.login-card .forgot{margin:8px 0 0;text-align:right;font-size:13px;line-height:1.4}
.login-card .forgot a{color:var(--muted);text-decoration:none;padding:4px 0;display:inline-block}
.login-card .forgot a:hover{color:var(--text);text-decoration:underline}
.login-card .forgot.back{text-align:center;margin-top:16px}
.login-card .or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--muted);font-size:13px}
.login-card .or::before,.login-card .or::after{content:"";flex:1;border-top:1px solid var(--border)}
.login-card .ok{margin:12px 0 0;color:#2F6B45;font-size:13px;font-weight:500}
.login-card .ok:empty{display:none}
.login-card form label{display:block}

.splash{position:fixed;inset:0;z-index:100;background:var(--navy-side);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.splash-mark{width:64px;height:64px;opacity:0}
.splash-hi{margin:0;color:#F6F4EF;font:500 32px/1.2 var(--serif);opacity:0;text-align:center;padding:0 16px}
@media(max-width:600px){.splash-hi{font-size:24px}}