:root{--bg:#EEF1F3;--sf:#FFFFFF;--sf2:#E6EBEF;--ink:#14181D;--mu:#5B6672;--bd:#D3DAE0;--ac:#1F5A96;--ac2:#E1ECF7;--acx:#FFFFFF;--blk:#17191C;--red:#B3262D;--redbg:#FBE8E8;--ok:#2B7A4B;--okbg:#E1F2E7;--wb:#FFFFFF;--bb:#2D62C4;--pb:#5E3D99;--sh:0 1px 2px rgba(20,24,29,.06),0 2px 8px rgba(20,24,29,.05);
--co:var(--red);--cb:var(--redbg);--cd:var(--sf2);--fg:var(--ink);--ab:var(--ac2);--ob:var(--okbg);
--fd:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;--fb:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1216;--sf:#161B21;--sf2:#1F262E;--ink:#E6EBEF;--mu:#94A1AC;--bd:#2B333C;--ac:#74AEE8;--ac2:#172E46;--acx:#0E1216;--blk:#050607;--red:#E8737A;--redbg:#3A1A1D;--ok:#71CF98;--okbg:#12301F;--wb:#E9ECEE;--sh:none;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0E1216;--sf:#161B21;--sf2:#1F262E;--ink:#E6EBEF;--mu:#94A1AC;--bd:#2B333C;--ac:#74AEE8;--ac2:#172E46;--acx:#0E1216;--blk:#050607;--red:#E8737A;--redbg:#3A1A1D;--ok:#71CF98;--okbg:#12301F;--wb:#E9ECEE;--sh:none;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--fb);-webkit-font-smoothing:antialiased}
a{color:var(--ac)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
h1,h2{font-family:var(--fd);font-weight:700;letter-spacing:.005em;line-height:1.1}
h1{font-size:34px;margin:0 0 6px}
h2{font-size:28px;margin:0 0 6px}
h3{font-family:var(--fd);font-size:19px;font-weight:600;margin:26px 0 8px;color:var(--ink);letter-spacing:.01em}
h3 .mu{font-family:var(--fb);font-size:14px;font-weight:400}
p{margin:6px 0;max-width:72ch}
.mu{color:var(--mu)}.sm{font-size:14px}
/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--sf);border-right:1px solid var(--bd);padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px;padding-top:calc(18px + env(safe-area-inset-top,0px))}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;font-family:var(--fd);font-weight:700;font-size:23px;letter-spacing:.01em;color:var(--ink);text-decoration:none;cursor:pointer;background:none;border:0;text-align:left}
.brand svg{flex:0 0 auto}
.ng{margin-top:10px}
.ng>span{display:block;font-size:12.5px;color:var(--mu);padding:0 10px 4px;font-weight:600}
.ni{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;color:var(--ink);font-size:15px;padding:8px 10px;border-radius:9px;cursor:pointer;text-align:left}
.ni svg{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--mu)}
.ni:hover{background:var(--sf2)}
.ni.on{background:var(--ac2);color:var(--ac);font-weight:600}.ni.on svg{color:var(--ac)}
.ni .ct{margin-left:auto;font-size:12px;color:var(--mu);font-weight:500}
.sset{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--bd);display:flex;flex-direction:column;gap:10px}
.sset label{font-size:12.5px;color:var(--mu);font-weight:600;display:flex;flex-direction:column;gap:5px}
.sync{font-size:12.5px;color:var(--mu)}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 28px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.topbar.sc{border-bottom-color:var(--bd)}
.mbtn{display:none;border:1px solid var(--bd);background:var(--sf);color:var(--ink);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.mbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.srch{position:relative;flex:1;max-width:620px}
.srch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--mu);fill:none;stroke-width:2;pointer-events:none}
.srch input[type=search]{width:100%;font:inherit;font-size:15.5px;padding:10px 44px 10px 40px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);color:var(--ink);box-shadow:var(--sh)}
.srch input[type=search]:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac2)}
.srch kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:12px var(--fb);color:var(--mu);border:1px solid var(--bd);border-radius:6px;padding:1px 7px;background:var(--sf2)}
.qr{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--sf);border:1px solid var(--bd);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;max-height:min(70vh,520px);overflow-y:auto;display:none}
.qr.open{display:block}
.qg{font-size:12.5px;color:var(--mu);font-weight:600;padding:8px 10px 3px}
.qi{display:flex;flex-direction:column;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:8px 10px;border-radius:9px;cursor:pointer;font-size:15px}
.qi small{color:var(--mu);font-size:13px}
.qi.hi,.qi:hover{background:var(--ac2)}
.qe{padding:14px 10px;color:var(--mu);font-size:14px}
.view{padding:8px 28px 40px;max-width:1080px;width:100%}
.foot{padding:0 28px 100px;max-width:1080px;font-size:13px;color:var(--mu)}
.tabs{display:none}
.scrim{display:none}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);z-index:60;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
.side.open{transform:none}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
.scrim.open{display:block}
.mbtn{display:inline-flex}
.topbar{padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
.srch kbd{display:none}
.view{padding:6px 14px 30px}
.foot{padding:0 14px 110px}
.tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--sf);border-top:1px solid var(--bd);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.tb{border:0;background:none;color:var(--mu);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;padding:4px 0;cursor:pointer;font-weight:500}
.tb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb.on{color:var(--ac);font-weight:600}
h1{font-size:28px}h2{font-size:24px}
}
/* ---------- belt progress ---------- */
.belt{display:inline-flex;align-items:stretch;height:12px;width:100%;min-width:90px;border-radius:3px;overflow:hidden;border:1px solid var(--bd);vertical-align:middle}
.belt .bc{flex:1;position:relative;background:repeating-linear-gradient(135deg,var(--sf2) 0 5px,transparent 5px 9px),var(--sf)}
.belt .bc b{position:absolute;left:0;top:0;bottom:0;background:var(--wb);box-shadow:1px 0 0 var(--bd)}
.belt.lI .bc b{background:var(--bb)}.belt.lA .bc b{background:var(--pb)}
.view>h2:first-child,.view>.top:first-child h2{font-size:34px}
@media(max-width:900px){.view>h2:first-child,.view>.top:first-child h2{font-size:28px}}
.belt .bk{flex:0 0 38%;max-width:62px;background:var(--blk);display:flex;gap:3px;justify-content:flex-start;padding:0 5px;align-items:stretch}
.belt .bk i{width:4px;background:#F4F4F1;opacity:.12}
.belt .bk i.on{opacity:1}
.belt.full{box-shadow:0 0 0 2px var(--ok)}
.bline{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--mu)}
.bline .belt{flex:1;max-width:240px}
/* ---------- generic components used by views ---------- */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.top>span{display:flex;gap:6px;flex-wrap:wrap}
.btn{font:inherit;font-size:14.5px;font-weight:500;border:1px solid var(--bd);background:var(--sf);color:var(--ink);border-radius:10px;padding:7px 13px;cursor:pointer;margin:2px 0;display:inline-flex;align-items:center;gap:6px;text-decoration:none;line-height:1.3}
.btn:hover{border-color:var(--ac)}
.btn.p{background:var(--ac);color:var(--acx);border-color:var(--ac)}
.btn.p:hover{filter:brightness(1.08)}
.btn.w{color:var(--red);border-color:var(--red)}
.btn.lg{font-size:16px;padding:10px 18px}
.chip{font:inherit;font-size:14.5px;border:1px solid var(--bd);background:var(--sf);color:var(--ink);border-radius:10px;padding:6px 12px;margin:0 6px 7px 0;cursor:pointer;text-align:left;display:inline-block;vertical-align:top}
.chip:hover{border-color:var(--ac)}
.chip small{display:block;font-size:12.5px;color:var(--mu)}
.chip.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.chip.full{border-color:var(--ok);background:var(--okbg)}
.chip .d{font-size:12px;color:var(--mu);margin-left:6px}
.sub{background:var(--redbg);color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent);cursor:default}
.thr{background:var(--sf);color:var(--red);border-style:dashed;border-color:var(--red);cursor:default}
.tag{font:600 12.5px var(--fb);background:var(--ac2);color:var(--ac);border-radius:6px;padding:2px 8px;margin-left:8px;vertical-align:middle;white-space:nowrap}
.tag.l{background:transparent;border:1px solid var(--bd);color:var(--mu);font-weight:500}
h2 .tag:first-of-type{margin-left:12px}
.box{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-top:10px}
.pr{margin-top:12px;font-size:14px}
.bar{height:6px;background:var(--sf2);border-radius:3px;margin-top:5px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--ac);border-radius:3px}
ul{margin:0;padding-left:20px}
ul.t{list-style:none;padding:0}
ul.t li{padding:9px 0;border-top:1px solid var(--bd);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;align-items:center}
ul.t label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--ok);margin-top:3px;flex:0 0 auto}
.lk a{font-size:13.5px;margin-left:12px;color:var(--ac);white-space:nowrap}
a.in{color:var(--ac);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--sf);flex-wrap:nowrap;max-width:100%;overflow-x:auto}
.seg button{font:inherit;font-size:14px;border:0;background:transparent;color:var(--ink);padding:7px 12px;cursor:pointer;white-space:nowrap}
.seg button+button{border-left:1px solid var(--bd)}
.seg button.on{background:var(--ac);color:var(--acx);font-weight:600}
.side .seg{width:100%}.side .seg button{flex:1;padding:6px 6px;font-size:13.5px}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
input[type=search],input[type=date],select,textarea{font:inherit;font-size:15px;padding:8px 11px;border:1px solid var(--bd);border-radius:10px;background:var(--sf);color:var(--ink);max-width:100%}
.tools input[type=search]{flex:1 1 220px;min-width:0}
.tg{font-size:14px;display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.empty{font-size:15px;color:var(--mu);padding:10px 0}
.legend{font-size:13px;color:var(--mu);margin-top:6px}
.go .chip{border-radius:10px}
.chain{margin-top:10px;padding:12px 14px;border:1px solid var(--ac);border-radius:12px;background:var(--ac2)}
.chain ol{margin:4px 0 0;padding-left:22px}.chain li{margin:4px 0}
.rx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);gap:8px 12px;align-items:center;font-size:15px}
.rx .ar{color:var(--mu)}.rx .y{font-weight:600}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.form label{font-size:13px;color:var(--mu);display:flex;flex-direction:column;gap:4px;font-weight:600}
.form textarea{min-height:44px;resize:vertical}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.hb{display:flex;align-items:center;gap:8px;font-size:14px;margin:5px 0}.hb span:first-child{flex:0 0 46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb i{display:block;height:8px;background:var(--ac);border-radius:4px}
details>summary{cursor:pointer}
/* map */
.mapw{border:1px solid var(--bd);border-radius:12px;background:var(--sf);overflow:hidden;margin-top:10px}
#svg{display:block;width:100%;height:auto;aspect-ratio:1100/848;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#svg .rl{font:600 12px var(--fb);fill:var(--mu)}
#svg .n rect{fill:var(--sf2);stroke-width:2}
#svg .n text{font:500 12px var(--fb);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
#svg .n{cursor:pointer}
#svg .n.star rect{stroke-width:3.5}
#svg .n.sel rect{fill:var(--ac2)}
#svg .e{fill:none;stroke:var(--mu);stroke-opacity:.16;stroke-width:1.2}
#svg.hl .e{stroke-opacity:.05}
#svg.hl .e.out{stroke:var(--ac);stroke-opacity:.95;stroke-width:2.2;marker-end:url(#ah)}
#svg.hl .e.inn{stroke:var(--red);stroke-opacity:.7;stroke-width:1.6;stroke-dasharray:5 4}
#svg.hl .n.dim,#svg .n.off{opacity:.25}
#svg.mg .n:not(.star){opacity:.18}
#svg.mg .e{stroke-opacity:.03}
#svg.mg .e.both{stroke:var(--ok);stroke-opacity:.9;stroke-width:2}
#svg #ah path{fill:var(--ac)}
.mapbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sess{border-top:1px solid var(--bd);padding-top:12px;margin-top:12px}.sess.dn{opacity:.6}
/* course */
.course{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;margin-top:16px}
.chaps{display:flex;flex-direction:column;gap:2px;position:sticky;top:76px;align-self:start}
.cb{font:inherit;font-size:15px;text-align:left;border:0;background:transparent;color:var(--ink);padding:8px 9px;border-radius:9px;cursor:pointer;display:flex;gap:9px;align-items:center}
.cb:hover{background:var(--sf)}.cb.on{background:var(--sf);box-shadow:inset 3px 0 0 var(--ac);font-weight:600}
.ck{flex:0 0 24px;height:24px;border-radius:50%;border:1.5px solid var(--bd);font-size:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--mu);background:var(--sf)}
.ck.y{background:var(--ok);border-color:var(--ok);color:var(--acx)}
.chb{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:18px 20px;min-width:0;box-shadow:var(--sh)}
.chb .box{background:var(--bg)}
.chb h2{font-size:24px}
.chf{display:flex;justify-content:space-between;gap:8px;margin-top:22px;padding-top:14px;border-top:1px solid var(--bd);flex-wrap:wrap}
@media(max-width:760px){.course{grid-template-columns:1fr}.chaps{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px;scrollbar-width:none}.cb{flex:0 0 auto;white-space:nowrap}.cb.on{box-shadow:inset 0 -3px 0 var(--ac)}.chb{padding:14px}}
.timer{text-align:center}.tdisp{font:700 64px/1.05 var(--fd);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.timer.big .tdisp{font-size:min(30vw,160px)}
/* home + cards */
.hero{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-color:var(--ac);box-shadow:var(--sh)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:12px}
.kpi{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.kpi b{font:700 26px/1 var(--fd)}.kpi span{font-size:13px;color:var(--mu)}
.paths{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pcard{font:inherit;text-align:left;background:var(--sf);color:var(--ink);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh)}
.pcard:hover{border-color:var(--ac)}.pcard b{font:600 19px/1.15 var(--fd)}.pcard .bar{display:block;width:100%}
.steps{list-style:none;padding:0;margin:16px 0 0}.steps li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--bd)}
.sn{flex:0 0 32px;height:32px;border-radius:50%;border:2px solid var(--ac);color:var(--ac);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.steps li.dn .sn{background:var(--ok);border-color:var(--ok);color:var(--acx)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lcard{font:inherit;text-align:left;background:var(--sf);color:var(--ink);border:1px solid var(--bd);border-radius:14px;padding:13px 15px;cursor:pointer;display:flex;flex-direction:column;gap:5px;box-shadow:var(--sh)}
.lcard:hover{border-color:var(--ac)}.lcard.dn{border-color:var(--ok)}
.lcard b{font-size:16px}
.lt{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.okm{font-size:12px;color:var(--ok);font-weight:600;white-space:nowrap}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:4px}
.stp{padding-left:0;margin:6px 0;list-style:none;counter-reset:s}
.stp li{counter-increment:s;position:relative;padding:8px 0 8px 44px;border-top:1px solid var(--bd)}
.stp li::before{content:counter(s);position:absolute;left:0;top:7px;width:30px;height:30px;border-radius:50%;background:var(--blk);color:#fff;font:700 15px/30px var(--fd);text-align:center}
.note{width:100%;min-height:90px;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);color:var(--ink);resize:vertical}
.totd{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.flow,.flow ul{list-style:none;margin:0;padding:0}
.flow ul{padding-left:26px;border-left:2px solid var(--bd);margin-left:12px}
.flow li{position:relative;padding:5px 0}
.flow ul>li::before{content:"";position:absolute;left:-26px;top:22px;width:22px;border-top:2px solid var(--bd)}
.fn{display:inline-flex;flex-direction:column;gap:2px;border:1px solid var(--bd);border-radius:10px;padding:7px 11px;background:var(--sf);font-size:14.5px}
.fn.root{border-color:var(--ac);border-width:2px}
.fh{font-size:12px;color:var(--mu)}.fs{font-size:12.5px;color:var(--red)}.fs a{color:var(--red)}
/* positions browser */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pos{font:inherit;text-align:left;background:var(--sf);color:var(--ink);border:1px solid var(--bd);border-left:4px solid var(--gc,var(--bd));border-radius:12px;padding:11px 13px;cursor:pointer;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh)}
.pos:hover{border-color:var(--ac);border-left-color:var(--gc,var(--ac))}
.pos .pn{display:flex;justify-content:space-between;gap:6px;font-weight:600;font-size:15.5px}
.pos .pn i{font-style:normal;color:var(--ac)}
.pos .ps{font-size:13px;color:var(--mu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pos .pm{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mu)}
.pos .pm .belt{flex:1}
.ph{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px}.ph h3{margin:0}.ph .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}
.qa button{font:inherit;text-align:left;background:var(--sf);color:var(--ink);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:center;font-weight:600;box-shadow:var(--sh)}
.qa button:hover{border-color:var(--ac)}
.qa svg{width:22px;height:22px;stroke:var(--ac);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px}
.qa small{display:block;font-weight:400;color:var(--mu);font-size:12.5px}
.homehd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.homehd .bline{min-width:240px}
.hero .bline{margin-top:8px}
/* toast + modal */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--blk);color:#fff;padding:10px 16px;border-radius:12px;font-size:14.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:90;max-width:90vw}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){#toast{bottom:90px}}
.modal{position:fixed;inset:0;z-index:80;background:rgba(10,12,15,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.mcard{background:var(--sf);color:var(--ink);border-radius:18px;max-width:540px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:92vh;overflow-y:auto}
.mcard h2{font-size:30px}
.opts{display:grid;gap:8px;margin-top:14px}
.opts button{font:inherit;text-align:left;border:1.5px solid var(--bd);background:var(--sf);color:var(--ink);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600}
.opts button small{display:block;font-weight:400;font-size:13.5px;color:var(--mu)}
.opts button:hover{border-color:var(--ac)}
.opts button.sel{border-color:var(--ac);background:var(--ac2)}
.dots{display:flex;gap:6px;margin-bottom:12px}.dots i{width:28px;height:4px;border-radius:2px;background:var(--bd)}.dots i.on{background:var(--ac)}
.mfoot{display:flex;justify-content:space-between;margin-top:18px;gap:8px}
.swb{width:46px;height:14px;border-radius:3px;border:1px solid var(--bd);flex:0 0 46px;position:relative;overflow:hidden}
.swb::after{content:"";position:absolute;right:0;top:0;bottom:0;width:14px;background:var(--blk)}
/* ---------- v7 ---------- */
body{font-size:16.5px;line-height:1.6}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ac);color:var(--acx);padding:8px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.pbar{display:inline-block;height:8px;width:100%;min-width:80px;background:var(--sf2);border-radius:99px;overflow:hidden;vertical-align:middle}
.pbar i{display:block;height:100%;background:var(--ac);border-radius:99px;transition:width .4s ease}
.pbar.done i{background:var(--ok)}
.bline{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mu);margin-top:8px}
.bline .pbar{flex:1;max-width:280px}
.ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring circle{fill:none;stroke-width:4}
.ring .rt{stroke:var(--sf2)}
.ring .rf{stroke:var(--ac);stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.ring.done .rf{stroke:var(--ok)}
.ring b{position:relative;font:700 12px/1 var(--fb);color:var(--ink)}
.ring.done b{color:var(--ok)}
.pct{display:flex;gap:12px;align-items:center}
.pct>span{display:flex;flex-direction:column;gap:2px}
.pcard .pct b{font:600 19px/1.15 var(--fd)}
.pos .pn{align-items:flex-start}
.pos .pm .lvl{font-size:12px;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--sf2);color:var(--mu)}
.pos .pm .lvl.lI{background:var(--ac2);color:var(--ac)}
.pos .pm .lvl.lA{background:color-mix(in srgb,var(--pb) 16%,transparent);color:var(--pb)}
:root[data-theme="dark"] .pos .pm .lvl.lA{color:#B9A2E8}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pos .pm .lvl.lA{color:#B9A2E8}}
.ovw{display:flex;gap:12px;align-items:center;font-size:15px;line-height:1.35}
.ht{font:700 26px/1.12 var(--fd);margin:2px 0 4px}
.hero{margin-top:14px}
.duebox{border-color:var(--ok);background:var(--okbg)}
.cal{display:flex;gap:3px;overflow-x:auto;padding:2px 0;scrollbar-width:thin}
.cw{display:flex;flex-direction:column;gap:3px}
.cal .c{width:13px;height:13px;border-radius:3px;background:var(--sf2);display:block}
.cal .c.f{background:transparent}
.cal .c.l1{background:color-mix(in srgb,var(--ac) 40%,var(--sf2))}
.cal .c.l2{background:color-mix(in srgb,var(--ac) 70%,var(--sf2))}
.cal .c.l3{background:var(--ac)}
.calbox{overflow:hidden}
.rvl{list-style:none;padding:0;margin:0}
.rvi{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;margin-bottom:8px}
.rvb{display:flex;gap:6px}
kbd.k{font:600 13px var(--fb);border:1px solid var(--bd);border-bottom-width:2px;border-radius:6px;padding:2px 8px;background:var(--sf2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.view.enter{animation:vin .18s ease-out}
@keyframes vin{from{transform:translateY(3px)}to{transform:none}}
h1:focus,h2:focus{outline:none}
.chip,.btn,.ni,.cb,.opt,.qi{min-height:40px}
.chip{min-height:0}
@media(max-width:900px){.ovw{width:100%}.rvb{width:100%}.rvb .btn{flex:1;justify-content:center}}
/* ---------- trending ---------- */
input[type=url],input[type=text]{font:inherit;font-size:15px;padding:8px 11px;border:1px solid var(--bd);border-radius:10px;background:var(--sf);color:var(--ink);width:100%}
.tgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.tcard{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:13px 14px;box-shadow:var(--sh);position:relative}
.tcard:hover{border-color:var(--ac)}
.tcard b{display:block;font-size:15.5px}.tcard small{display:block;color:var(--mu);font-size:13px;line-height:1.35}
.tcf{flex:0 0 38px;height:38px;border-radius:10px;background:var(--ac2);display:inline-flex;align-items:center;justify-content:center}
.tcf svg{width:20px;height:20px;stroke:var(--ac);fill:none;stroke-width:1.8;stroke-linejoin:round}
.tcard .ext{position:absolute;right:12px;top:10px;color:var(--mu);font-size:13px}
.tcard.big{grid-column:1/-1;background:var(--ac);border-color:var(--ac);color:var(--acx)}
.tcard.big small,.tcard.big .ext{color:var(--acx);opacity:.85}
.tcard.big .tcf{background:rgba(255,255,255,.18)}.tcard.big .tcf svg{stroke:var(--acx)}
.tcard.big b{font:700 22px/1.15 var(--fd)}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.hcard{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh);margin:0}
.hcard h4{font:700 19px/1.2 var(--fd);margin:0}
.hcard p{margin:0}
.hd{font-size:12.5px;font-weight:600;color:var(--ac)}
.hl{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.hmore{text-decoration:none;color:var(--ink);justify-content:center;border-style:dashed}
.hmore:hover{border-color:var(--ac)}
.evl{list-style:none;padding:0;margin:0}
.evl li{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--bd)}
.evd{flex:0 0 52px;height:52px;border-radius:12px;background:var(--sf);border:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--mu);line-height:1.1}
.evd b{font:700 22px/1 var(--fd);color:var(--ink)}
.wl li.dn a{color:var(--mu)}
a.chip{text-decoration:none}
@media(max-width:600px){.tgrid2{grid-template-columns:1fr 1fr;gap:8px}.tgrid2 .tcard:not(.big){padding:11px 12px}.tgrid2 .tcard:not(.big) small,.tgrid2 .tcard:not(.big) .tcf{display:none}.tgrid2 .tcard:not(.big) b{font-size:14.5px;padding-right:10px}}
/* ---------- v8: research, escapes, size, handbook ---------- */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:6px}
.rgrid .box{margin-top:0}
.big{display:block;font:700 36px/1 var(--fd);margin-bottom:6px;color:var(--ac)}
.box.warn{border-left:4px solid var(--red)}
.box.warn .big{color:var(--red)}
.box.stat{border-left:4px solid var(--ac)}
.src{font-size:12.5px;color:var(--mu);margin:6px 0 0;line-height:1.45}
.src a{color:var(--mu)}
.tapbox{border-left:4px solid var(--red);background:var(--redbg)}
.esclink{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-left:4px solid var(--ok)}
.rd{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:14px 0 4px;font-size:14px}
.rd b{font-size:14px;margin-right:2px}
.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:14px 0 6px}
.toc button{font:inherit;font-size:15px;text-align:left;display:flex;gap:10px;align-items:center;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.toc button:hover{border-color:var(--ac)}
.toc span{flex:0 0 26px;height:26px;border-radius:50%;background:var(--ac2);color:var(--ac);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
section[id^="bh-"]{scroll-margin-top:80px;padding-top:6px}
section[id^="bh-"] h2{margin-top:28px}
.ladder{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.lr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--sf);border:1px solid var(--bd);border-left:5px solid var(--bd);border-radius:10px;padding:9px 14px}
.lr.up{border-left-color:var(--ok)}.lr.down{border-left-color:var(--red)}
.lr .pts{font-size:12.5px;font-weight:700;background:var(--ac2);color:var(--ac);border-radius:99px;padding:1px 9px}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0}
.gi{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:10px 12px}
.gi dt{font-weight:700}.gi dd{margin:2px 0 0;font-size:14px;color:var(--mu)}
.faq summary{list-style-position:outside}
.faq{margin-top:8px}
/* ---- round timer v2 ---- */
.tpre{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0}
.tpre button{font:inherit;text-align:left;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.tpre button b{display:block;font-family:var(--fd);font-size:17px;letter-spacing:.2px}
.tpre button small{display:block;color:var(--mu);font-size:12.5px;line-height:1.35;margin-top:2px}
.tpre button:hover{border-color:var(--ac)}
.tpre button.on{border-color:var(--ac);background:var(--ac2);box-shadow:inset 0 0 0 1px var(--ac)}
.tclock{--tc:var(--mu);--tb:var(--sf);position:relative;margin:12px 0;padding:22px 18px 18px;border-radius:18px;background:var(--tb);border:2px solid var(--tc);text-align:center;cursor:pointer;user-select:none;transition:background .3s,border-color .3s}
.tclock.ph-ready{--tc:var(--bd)}
.tclock.ph-get{--tc:#C98A12;--tb:#FFF6E3}
.tclock.ph-work{--tc:var(--ok);--tb:var(--okbg)}
.tclock.ph-work.warn{--tc:#C98A12;--tb:#FFF6E3}
.tclock.ph-rest{--tc:var(--ac);--tb:var(--ac2)}
.tclock.ph-done{--tc:var(--ac);--tb:var(--sf)}
:root[data-theme="dark"] .tclock.ph-get,:root[data-theme="dark"] .tclock.ph-work.warn{--tc:#E8B44C;--tb:#3A2C10}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tclock.ph-get,:root:not([data-theme="light"]) .tclock.ph-work.warn{--tc:#E8B44C;--tb:#3A2C10}}
.tclock.paused:not(.ph-ready):not(.ph-done) .ttime{opacity:.55}
.tph{font-family:var(--fd);font-size:15px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--tc)}
.ttime{font-family:var(--fd);font-weight:700;font-size:clamp(84px,22vw,168px);line-height:1;letter-spacing:1px;font-variant-numeric:tabular-nums;margin:6px 0 8px;color:var(--ink)}
.titem{font-size:18px;font-weight:600;margin:0 auto 6px;max-width:34em}
.tgoal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:14px;max-width:44em;margin:0 auto}
.tprog{display:flex;justify-content:center;gap:6px;margin:14px 0 4px;flex-wrap:wrap}
.tprog i{width:10px;height:10px;border-radius:50%;background:var(--bd);display:block}
.tprog i.d{background:var(--tc)}
.tprog i.c{background:var(--tc);box-shadow:0 0 0 3px var(--tb),0 0 0 5px var(--tc)}
.tctl{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.tctl .btn{cursor:pointer}
.tctl #tgo2{min-width:130px;justify-content:center}
.tclock:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0;border-width:0}
.tclock:fullscreen .ttime{font-size:min(38vw,46vh)}
.tclock:fullscreen .titem{font-size:28px}
.tset summary{cursor:pointer;list-style:none}
.tset summary::-webkit-details-marker{display:none}
.tset summary::before{content:"▸ ";color:var(--mu)}
.tset[open] summary::before{content:"▾ "}
.tset select{font:inherit;padding:6px 8px;border:1px solid var(--bd);border-radius:8px;background:var(--sf);color:var(--ink)}
.tplan{margin:8px 0 0;padding-left:22px}
.tplan li{margin:4px 0;font-size:14.5px}
@media(max-width:600px){.tclock{padding:16px 10px 14px}.titem{font-size:16px}.tgoal{font-size:13px}.tpre{grid-template-columns:1fr 1fr}}

/* ================= Atlas look ================= */
.view>h1:first-child,.view>.top:first-child h1{letter-spacing:-.01em}
h3{position:relative;padding-left:12px}
h3::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:4px;border-radius:3px;background:linear-gradient(var(--ac),var(--ok))}
.hh{position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:stretch;margin:8px 0 14px;padding:22px 22px 20px;border-radius:20px;color:#EEF4FA;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M84 78Q84 80 83 81Q82 83 82 84Q81 85 80 86Q80 88 79 89Q78 90 76 90Q75 91 74 91Q73 92 71 93Q70 93 68 94Q67 94 65 94Q63 94 62 92Q61 91 61 89Q60 88 60 86Q60 85 60 84Q59 82 58 81Q58 80 57 78Q57 77 57 75Q57 74 58 73Q59 71 60 70Q61 69 63 68Q64 67 65 67Q67 67 68 67Q70 67 71 68Q73 69 74 70Q75 70 76 71Q77 71 79 71Q81 71 82 72Q84 73 84 75Q85 77 84 78ZM97 77Q96 80 95 83Q94 85 93 88Q92 91 91 93Q89 95 87 97Q85 99 83 100Q80 102 78 103Q76 104 73 106Q70 108 67 109Q63 110 60 108Q57 107 55 104Q53 101 53 98Q52 94 51 92Q51 89 49 87Q47 85 46 83Q44 80 44 77Q43 74 44 71Q45 68 47 66Q49 63 51 61Q53 58 55 57Q58 55 61 54Q64 54 67 55Q70 56 72 57Q75 59 77 60Q80 60 83 60Q86 60 89 61Q93 62 95 64Q98 67 98 70Q98 74 97 77ZM109 75Q108 80 107 84Q105 88 104 92Q103 96 101 100Q99 103 96 106Q93 108 89 110Q86 113 82 115Q79 118 74 121Q70 124 65 124Q60 125 55 122Q51 119 49 114Q47 109 46 105Q44 100 42 97Q40 94 37 91Q34 88 32 84Q30 80 30 75Q29 71 31 66Q33 62 35 58Q38 54 41 51Q44 47 48 45Q52 42 57 42Q61 42 66 44Q70 46 74 47Q77 49 81 49Q85 49 90 48Q95 48 100 50Q105 52 108 56Q111 60 110 66Q110 71 109 75ZM120 74Q119 80 118 85Q118 91 116 96Q115 101 111 106Q108 110 104 114Q100 117 96 121Q92 125 87 129Q82 134 76 137Q70 140 63 140Q57 139 51 134Q46 129 44 123Q41 116 39 112Q36 107 33 103Q29 100 24 96Q20 91 17 86Q15 80 16 74Q16 68 19 62Q21 56 24 51Q27 46 31 41Q35 36 41 34Q46 31 53 32Q59 32 65 34Q70 36 75 37Q80 38 86 36Q92 35 99 35Q106 35 112 38Q118 42 120 48Q122 55 122 62Q121 68 120 74ZM131 73Q131 80 130 87Q130 94 128 100Q126 107 121 112Q117 118 112 122Q107 127 103 133Q98 138 92 144Q86 151 78 154Q70 157 62 154Q54 151 48 144Q43 137 39 130Q36 123 32 119Q27 114 22 110Q16 106 10 101Q5 95 3 87Q1 80 2 72Q3 65 6 58Q9 50 12 43Q15 37 21 31Q26 25 34 23Q42 21 49 23Q57 24 64 25Q70 27 76 26Q83 24 91 22Q99 20 108 21Q117 21 123 27Q129 33 131 41Q133 50 132 58Q132 66 131 73ZM205 178Q205 180 205 182Q204 183 203 184Q202 186 201 187Q200 188 199 189Q198 190 196 190Q195 191 194 192Q193 192 191 192Q190 192 189 192Q187 192 186 192Q184 193 182 192Q181 192 179 191Q178 189 178 188Q178 186 178 184Q179 183 179 181Q179 180 179 179Q179 177 179 176Q178 174 179 173Q179 171 180 170Q181 169 183 168Q184 168 186 167Q187 167 188 166Q190 166 191 166Q193 167 194 168Q195 169 196 170Q197 172 198 172Q199 173 200 174Q201 175 203 176Q204 177 205 178ZM220 177Q220 180 219 183Q217 186 215 189Q213 191 211 193Q209 195 207 197Q205 199 203 201Q201 202 198 203Q195 204 193 204Q190 204 187 205Q184 206 181 206Q177 206 174 205Q171 204 169 201Q167 198 167 194Q168 191 168 188Q169 185 168 182Q168 180 167 177Q166 175 166 171Q166 168 167 165Q168 163 171 161Q173 159 176 157Q178 155 181 154Q184 153 187 153Q190 152 193 154Q196 155 198 157Q200 159 202 161Q203 163 206 164Q208 166 211 167Q214 168 217 171Q219 173 220 177ZM234 175Q234 180 231 184Q228 189 226 192Q223 196 221 199Q219 203 216 206Q213 209 210 211Q206 213 202 214Q198 215 194 216Q190 217 185 219Q181 220 176 221Q170 221 166 218Q162 215 160 210Q158 205 158 200Q159 195 159 191Q159 187 157 184Q156 180 154 176Q152 171 153 167Q153 162 155 158Q158 154 161 151Q165 148 168 145Q172 143 176 141Q181 139 185 139Q190 139 194 142Q198 144 201 147Q204 151 207 153Q210 155 215 156Q219 157 224 159Q229 161 232 166Q235 170 234 175ZM247 173Q246 180 242 186Q239 191 236 196Q234 201 231 206Q228 211 225 215Q221 219 216 221Q211 224 206 225Q201 227 195 229Q190 232 184 234Q177 236 170 236Q163 235 158 230Q154 226 152 219Q150 212 150 205Q150 199 149 194Q148 190 145 185Q142 180 140 174Q138 168 139 162Q140 156 144 151Q147 146 152 142Q156 137 161 134Q166 130 172 128Q178 126 184 127Q190 128 195 131Q200 135 204 138Q209 142 213 143Q218 144 225 146Q232 147 238 150Q244 154 247 160Q249 167 247 173ZM212 39Q212 40 212 41Q212 43 211 44Q211 45 210 46Q209 48 209 49Q208 50 207 52Q206 53 205 54Q203 55 202 55Q200 54 199 53Q197 52 196 51Q195 50 194 49Q193 49 192 48Q190 48 189 47Q188 46 187 44Q187 43 186 42Q186 40 187 38Q187 37 187 35Q187 34 188 33Q189 31 191 31Q192 30 194 30Q195 30 196 30Q198 30 199 29Q200 28 202 28Q203 27 205 27Q207 26 208 27Q209 28 210 30Q211 31 211 33Q211 35 212 36Q212 37 212 39ZM224 37Q225 40 224 43Q224 45 223 48Q221 50 220 53Q219 56 218 59Q217 62 215 64Q213 67 210 68Q207 69 203 68Q200 67 197 65Q195 63 193 61Q191 59 188 59Q186 58 183 57Q180 56 178 54Q175 52 174 49Q173 46 173 43Q173 40 173 37Q173 34 174 31Q175 28 177 25Q179 23 182 22Q185 21 188 21Q191 20 193 20Q195 19 198 17Q200 15 203 13Q206 12 210 12Q213 13 216 15Q218 17 219 21Q220 24 221 27Q222 29 223 32Q224 35 224 37ZM54 199Q55 200 55 202Q55 203 54 205Q53 206 51 207Q50 208 49 209Q48 209 46 210Q45 211 44 212Q43 212 41 212Q40 212 39 212Q37 212 36 212Q34 212 33 211Q31 211 30 210Q28 210 27 208Q27 206 27 205Q28 203 28 201Q29 200 29 199Q29 198 29 196Q29 195 29 193Q30 192 30 190Q31 189 33 188Q34 188 35 187Q37 187 38 186Q40 186 42 186Q43 186 44 187Q46 188 46 190Q47 191 48 192Q48 193 49 194Q50 195 52 196Q53 197 54 199ZM69 197Q71 200 70 203Q69 207 66 209Q64 212 62 213Q59 215 57 217Q55 219 53 221Q51 222 48 223Q45 224 43 224Q40 224 37 224Q35 224 31 224Q28 224 25 224Q21 223 19 221Q16 219 16 216Q15 212 16 209Q17 205 18 203Q19 200 18 198Q18 195 18 192Q17 189 18 186Q19 183 21 181Q23 178 25 177Q28 175 31 174Q34 173 37 173Q40 172 43 173Q46 173 48 175Q51 178 52 180Q54 183 55 185Q57 187 59 188Q62 190 65 192Q68 194 69 197Z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E"),radial-gradient(900px 300px at 85% -40%,rgba(116,174,232,.45),transparent 60%),linear-gradient(135deg,#1F5A96 0%,#17406B 55%,#10263E 100%);box-shadow:0 10px 30px -12px rgba(16,38,62,.55);overflow:hidden}
.hh h1{color:#fff;margin:2px 0 0;font-size:40px;line-height:1.05}
.hh-k{font:600 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#A9CBEE}
.hh-s{margin:4px 0 0;color:#C9DBEC;font-size:15px}
.hh-ed{font:inherit;font-size:13px;background:none;border:0;color:#A9CBEE;text-decoration:underline;cursor:pointer;padding:0 2px}
.hh-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hh-wk,.hh-ex{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;color:#EEF4FA;font:inherit;font-size:14px;line-height:1.3;text-align:left}
.hh-ex{cursor:pointer}.hh-ex:hover{background:rgba(255,255,255,.16)}
.hh-ex b{font:700 28px/1 var(--fd);color:#fff}.hh-stats>*{padding:9px 11px}
.hh-wk b{color:#fff}.hh-m{color:#A9CBEE;font-size:13px}
.wbars{display:flex;align-items:flex-end;gap:3px;height:34px}
.wbars i{display:block;width:7px;border-radius:3px;background:rgba(255,255,255,.28)}
.wbars i.hit{background:#71CF98}.wbars i.now{outline:1.5px solid rgba(255,255,255,.75);outline-offset:1px}
.hh-note{display:block;margin-top:12px;font-size:13.5px;color:#C9DBEC;max-width:46em}
.hh-new{margin-top:12px;font:600 13.5px var(--fb);color:#10263E;background:#A9CBEE;border:0;border-radius:999px;padding:6px 12px;cursor:pointer}
.hh-map{font:inherit;display:flex;flex-direction:column;gap:6px;align-items:stretch;justify-content:center;background:rgba(6,16,28,.28);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:10px;cursor:pointer;color:#C9DBEC;font-size:13px}
.hh-map:hover{border-color:rgba(255,255,255,.4)}
.hh-map svg{width:100%;height:auto;display:block}
.hh-map .ml line{stroke:#71CF98;stroke-opacity:.6;stroke-width:6}
.hh-map circle.u{fill:rgba(255,255,255,.16)}
.hh-map circle.f{fill:none;stroke:#A9CBEE;stroke-width:5;stroke-dasharray:8 6}
.hh-map circle.x{fill:#74AEE8}
.hh-map circle.d{fill:#71CF98}
@media(max-width:760px){.hh{grid-template-columns:1fr;padding:18px 16px}.hh h1{font-size:32px}.hh-map{order:2}}
.ctx{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:16px 18px;margin-top:12px;box-shadow:var(--sh);position:relative;overflow:hidden}
.ctx::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ac)}
.ctx.fresh::before{background:var(--ok)}.ctx.ask::before{background:#C98A12}.ctx.insight::before{background:var(--red)}.ctx.setup::before{background:linear-gradient(var(--ac),var(--ok))}
.ctx>div{flex:1;min-width:240px}
.ctx b{display:block;font:600 21px/1.2 var(--fd)}
.ctx .kick{font:600 12px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.ctx p{margin:4px 0 0}
.ctx-b{flex:1;min-width:260px}
.ctx-a{display:flex;flex-wrap:wrap;gap:6px}
.itline{font:500 22px/1.3 var(--fd);margin-top:2px}.itline b{display:inline;font:inherit;font-weight:700;color:var(--ac)}
.itf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-weight:600}
.itf select{font:inherit;font-weight:500;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--sf);color:var(--ink);max-width:100%}
.dchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.dchips button{font:600 15px var(--fb);min-width:56px;padding:9px 10px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);color:var(--ink);cursor:pointer}
.dchips button.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
.mstones{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ms{font:inherit;display:flex;gap:12px;align-items:center;text-align:left;background:var(--sf);color:var(--ink);border:1px solid var(--bd);border-top:4px solid var(--gc);border-radius:14px;padding:12px 14px;cursor:pointer;box-shadow:var(--sh)}
.ms b{display:block;font:600 18px/1.2 var(--fd)}
.ms .ring .rf{stroke:var(--gc)}
.pcard,.hcard,.qa button,.ms,.hh-ex,.lcard{transition:transform .15s ease,box-shadow .15s ease,border-color .15s}
.pcard:hover,.hcard:hover,.qa button:hover,.ms:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(20,24,29,.35)}
.qa svg{box-sizing:content-box;padding:8px;border-radius:10px;background:var(--ac2)}
.box.hero{border:1px solid var(--bd);border-left:5px solid var(--ac);border-radius:16px}
.totd{border-left:5px solid var(--ok);border-radius:16px}
.hcard{border-top:3px solid var(--ac)}
.sbx{display:flex;flex-direction:column;gap:6px}
.sbb{display:block;height:7px;border-radius:5px;background:var(--sf2);overflow:hidden}.sbb i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ok));border-radius:5px}
@media(prefers-reduced-motion:reduce){.pcard,.hcard,.qa button,.ms,.hh-ex{transition:none}.pcard:hover,.hcard:hover,.qa button:hover,.ms:hover{transform:none}}
/* map atlas */
.frontier{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 2px}.frontier .go{margin:0}
.mapw.atlas{border-radius:16px;background:var(--sf);box-shadow:var(--sh)}
#svg .tp{fill:none;stroke:var(--ac);stroke-opacity:.07;stroke-width:1.2}
#svg .band.b0{fill:var(--sf2);fill-opacity:.55}#svg .band.b1{fill:transparent}
#svg .rl{font:700 11.5px var(--fb);letter-spacing:.06em;text-transform:uppercase;fill:var(--mu)}
#svg .ax{font:600 11px var(--fb);fill:var(--mu);opacity:.8}
#svg .n rect.nb{fill:var(--sf);stroke-width:2}
#svg .n rect.pf{stroke:none;fill-opacity:.26}
#svg .n.done rect.pf{fill-opacity:.4}
#svg .n.ux rect.nb{stroke-dasharray:4 4;stroke-opacity:.55;fill:var(--bg)}
#svg .n.ux text{fill:var(--mu)}
#svg .n.fr rect.nb{stroke-width:2.5}
#svg .n.ex text{font-weight:600}
#svg .n.sel rect.nb{fill:var(--ac2)}
#svg .fd{stroke:var(--sf);stroke-width:2}
@media(prefers-reduced-motion:no-preference){#svg .fd{animation:fdp 2.4s ease-in-out infinite}}
@keyframes fdp{50%{opacity:.35}}
#svg .e{stroke-opacity:.07}
#svg .e.trail{stroke:var(--ok);stroke-opacity:.6;stroke-width:2.2}
#svg.hl .e.trail{stroke-opacity:.08}
.legend .lg{display:inline-flex;align-items:center;gap:6px;margin-right:14px}
.legend .lg i{width:14px;height:12px;border-radius:4px;border:2px solid var(--mu);display:inline-block}
.legend .lx{background:linear-gradient(90deg,rgba(59,130,196,.35) 60%,transparent 60%);border-color:#3B82C4!important}
.legend .lf{border-color:#3B82C4!important;position:relative}.legend .lf::after{content:"";position:absolute;right:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:#3B82C4}
.legend .lu{border-style:dashed!important;opacity:.6}
.legend .lt{border:0!important;height:3px!important;background:var(--ok);border-radius:2px}
.mip{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bd)}
/* =================================================================
   v9 — video-first layout
   ================================================================= */
:root{--r:14px;--sh2:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.18);--maxw:1240px}
body{background:var(--bg)}
/* shell: sidebar becomes a drawer at every width */
.app{grid-template-columns:1fr}
.side{position:fixed;left:0;top:0;bottom:0;width:min(320px,88vw);z-index:60;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.22)}
.side.open{transform:none}
.scrim{position:fixed;inset:0;background:rgba(10,14,20,.42);z-index:55;display:none}.scrim.open{display:block}
.mbtn{display:inline-flex;flex:0 0 auto;width:40px;height:40px;border-radius:10px;box-shadow:none}
.topbar{position:sticky;top:0;z-index:30;gap:14px;padding:10px 24px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--sf);border-bottom:1px solid var(--bd);backdrop-filter:none}
.topbar.sc{box-shadow:0 2px 12px -6px rgba(16,24,40,.18)}
.tbrand{font:700 21px/1 var(--fd);letter-spacing:.2px;color:var(--ink);background:none;border:0;display:inline-flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px 4px 0;white-space:nowrap}
.tlogo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1F5A96,#123B66);display:inline-flex;align-items:center;justify-content:center}
.tlogo svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tnav{display:flex;gap:2px;margin-right:6px}
.tnav button{font:600 15px var(--fb);color:var(--mu);background:none;border:0;padding:9px 13px;border-radius:10px;cursor:pointer;position:relative}
.tnav button:hover{color:var(--ink);background:var(--sf2)}
.tnav button.on{color:var(--ink)}
.tnav button.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-11px;height:3px;border-radius:3px 3px 0 0;background:var(--ac)}
.topbar .srch{max-width:440px;margin-left:auto}
.topbar .srch input[type=search]{box-shadow:none;background:var(--bg);padding-top:9px;padding-bottom:9px}
.tmy{flex:0 0 auto;white-space:nowrap}
.tmy svg{width:15px;height:15px;fill:currentColor}
.tmy.on{border-color:var(--ac);color:var(--ac)}
.view{max-width:var(--maxw);margin:0 auto;padding:22px 32px 56px}
.foot{max-width:var(--maxw);margin:0 auto;padding:0 32px 60px}
.view h1{font-size:38px;line-height:1.08;margin:6px 0 8px}
.view>.mu:first-of-type{max-width:62ch}
h3{margin:30px 0 12px}
.box,.lcard,.pos,.pcard,.hcard,.kpi,.qa button,.ctx,.chb,.scard{border-radius:var(--r)}
/* section pills */
.subnav{display:flex;gap:6px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;padding:2px}
.subnav::-webkit-scrollbar{display:none}
.subnav button{font:600 14px var(--fb);white-space:nowrap;border:1px solid var(--bd);background:var(--sf);color:var(--mu);border-radius:999px;padding:7px 14px;cursor:pointer}
.subnav button:hover{color:var(--ink);border-color:var(--mu)}
.subnav button.on{background:var(--ink);border-color:var(--ink);color:var(--sf)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px;color:var(--mu);margin:0 0 14px}
.crumbs a.in{color:var(--mu);text-decoration:none}.crumbs a.in:hover{color:var(--ac);text-decoration:underline}
.crumbs span[aria-current]{color:var(--ink);font-weight:600}
/* thumbnails */
.th{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h,210) 48% 34%) 0%,hsl(calc(var(--h,210) + 28) 52% 20%) 100%);flex:0 0 auto}
.th::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 70% 30%,rgba(116,174,232,.35),transparent 55%)}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.th-pl{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(10,14,20,.62);display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}
.th-pl svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.th-ok{position:absolute;left:8px;top:8px;font:700 11.5px var(--fb);color:#fff;background:var(--ok);border-radius:6px;padding:2px 7px}
.th-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35)}.th-bar i{display:block;height:100%;background:#E5484D}
.th.sm{width:96px;border-radius:7px}.th.sm .th-pl{width:26px;height:26px;margin:-13px 0 0 -13px}.th.sm .th-pl svg{width:12px;height:12px}.th.sm .th-ok{display:none}
.th.md{width:124px;border-radius:8px}.th.md .th-pl{width:30px;height:30px;margin:-15px 0 0 -15px}.th.md .th-pl svg{width:14px;height:14px}
.th.big{border-radius:0;width:100%;height:100%;aspect-ratio:auto}.th.big .th-pl{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(229,72,77,.92)}.th.big .th-pl svg{width:34px;height:34px}
a:hover .th-pl,button:hover .th-pl{transform:scale(1.08);background:rgba(229,72,77,.92)}
/* video cards in grids */
.vcard{overflow:hidden}
.vcard>.th.card{border-radius:0;margin:-13px -15px 8px;width:calc(100% + 30px)}
.pos.vcard>.th.card{margin:-11px -13px 6px -13px;width:calc(100% + 26px)}
.pcard.vcard>.th.card{margin:-14px -16px 8px;width:calc(100% + 32px)}
.pos.vcard{border-left-width:1px;border-top:4px solid var(--gc,var(--bd))}
.vmeta{display:block;font-size:12.5px}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.lgrid,.paths{gap:16px}
.pos,.lcard,.pcard{transition:transform .15s,box-shadow .15s,border-color .15s}
.pos:hover,.lcard:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.vrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.vtile{font:inherit;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;gap:8px}
.vtile .th{border-radius:12px;box-shadow:var(--sh)}
.vt-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.3}
.vt-t small{display:block;color:var(--mu);font-size:13px;margin-top:3px}
.vtile:hover .vt-t b{color:var(--ac)}
.sech{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:30px 0 12px}
.sech h3{margin:0}
.feat{font:inherit;text-align:left;color:var(--ink);width:100%;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:22px;align-items:center;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:14px;cursor:pointer;box-shadow:var(--sh)}
.feat:hover{border-color:var(--ac)}
.feat .th{border-radius:10px}
.feat-b{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.feat-b b{font:700 26px/1.1 var(--fd)}
.feat-b .btn{margin-top:6px}
.kick{font:700 11.5px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
/* lesson layout */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.ls-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 100px)}
.scard{background:var(--sf);border:1px solid var(--bd);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.scard-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--bd)}
.scard-h b{font:700 17px var(--fd)}
.plw{overflow-y:auto;max-height:calc(100vh - 330px);min-height:160px}
.pl{list-style:none;margin:0;padding:4px 0}
.pl-h{font:700 11.5px var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--mu);padding:12px 16px 6px}
.pl-row{font:inherit;color:var(--ink);text-align:left;width:100%;display:flex;gap:10px;align-items:center;background:none;border:0;padding:8px 14px 8px 12px;cursor:pointer;border-left:3px solid transparent}
.pl-row:hover{background:var(--sf2)}
.pl-row.on{background:var(--ac2);border-left-color:var(--ac)}
.pl-n{flex:0 0 22px;font:700 12px var(--fb);color:var(--mu);text-align:center}
.pl-row.dn .pl-n{color:var(--ok);font-size:14px}
.pl-t{min-width:0}.pl-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.3;font-weight:600}
.pl-t small{display:block;color:var(--mu);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx{font:inherit;color:var(--ink);text-align:left;display:flex;gap:12px;align-items:center;background:none;border:0;padding:14px 16px;cursor:pointer;width:100%}
.nx:hover b{color:var(--ac)}.nx b{display:block;font-size:15px}.nx small{color:var(--mu);font-size:13px}
/* player */
.vp{margin-bottom:18px}
.vp-stage{position:relative;aspect-ratio:16/9;background:#05080C;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 40px -22px rgba(5,8,12,.6)}
.vp-stage iframe,.vp-stage #ytp{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-poster{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.vp-fbn{display:none}
.vp.fb .vp-fbn{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(5,8,12,.85));font:700 16px var(--fb);color:#fff}
.vp.fb .vp-fbn small{font:400 13px var(--fb);color:#C9D2DA}
.vp-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:#E6EBEF;padding:20px}
.vp-err p{color:#AAB4BE;margin:0 0 8px}
.vp-next{position:absolute;right:16px;bottom:16px;max-width:320px;background:rgba(14,18,22,.94);color:#fff;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.vp-next .kick{color:#9FB3C6}.vp-next b{font-size:15px;line-height:1.3}.vp-cd{font-size:12.5px;color:#9FB3C6}
.vp-next .btn{border-color:rgba(255,255,255,.25);background:transparent;color:#fff}.vp-next .btn.p{background:#fff;color:#0E1216;border-color:#fff}
.vp-bar{display:flex;justify-content:space-between;gap:14px 20px;align-items:flex-start;flex-wrap:wrap;padding:14px 2px 0}
.vp-meta{min-width:0;flex:1 1 320px}
.vp-meta h2{font:700 24px/1.15 var(--fd);margin:3px 0 2px}
.vp-ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ic{font:600 13px var(--fb);height:38px;min-width:38px;padding:0 10px;border-radius:10px;border:1px solid var(--bd);background:var(--sf);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ic:hover{border-color:var(--ac)}
.ic svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.ic.spd{padding:0 4px}.ic.spd select{font:600 13px var(--fb);border:0;background:transparent;color:var(--ink);cursor:pointer;padding:0 4px}
.btn.ok{background:var(--okbg);color:var(--ok);border-color:var(--ok)}
.vp.fb .lv{display:none}
.vp-x{display:flex;flex-wrap:wrap;gap:6px 26px;padding-top:10px}
.vx b{font-size:13px;color:var(--mu);font-weight:600}
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vch{font:500 13.5px var(--fb);color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:999px;padding:5px 11px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;text-decoration:none}
.vch span{font-variant-numeric:tabular-nums;color:var(--ac);font-weight:700}
.vch:hover{border-color:var(--ac)}
.vbm{display:inline-flex;align-items:center}.vbx{border:0;background:none;color:var(--mu);font-size:18px;cursor:pointer;padding:0 6px}
.ls-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:8px;padding-top:18px;border-top:1px solid var(--bd)}
.ls-head h1,.ls-head .h1{font:700 34px/1.08 var(--fd);margin:0 0 8px}
.ls-head .tags .tag:first-child{margin-left:0}
.ls-prog{margin:12px 0 6px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}.ls-prog .bar{flex-basis:100%}
.ls-lede{font-size:17px;max-width:68ch;color:var(--ink)}
.ls-sec{font:700 22px var(--fd);margin:26px 0 0}
/* study guide: chapters as tabs over the content */
.lesson .course{display:block;margin-top:10px}
.lesson .chaps{position:sticky;top:61px;z-index:5;flex-direction:row;overflow-x:auto;gap:4px;background:var(--bg);padding:8px 0;scrollbar-width:none;border-bottom:1px solid var(--bd);margin-bottom:14px}
.lesson .chaps::-webkit-scrollbar{display:none}
.lesson .cb{flex:0 0 auto;white-space:nowrap;font-size:14px;padding:7px 11px;border-radius:999px}
.lesson .cb.on{background:var(--ink);color:var(--sf);box-shadow:none}
.lesson .cb.on .ck{background:transparent;color:var(--sf);border-color:var(--sf)}
.lesson .chb{box-shadow:none}
/* home */
.hh{margin-top:0}
.feat .th.card{margin:0;width:100%}
/* tablet */
@media(max-width:1180px){.lesson{grid-template-columns:minmax(0,1fr) 320px;gap:22px}.tnav button{padding:9px 9px}.topbar .srch{max-width:300px}}
@media(max-width:1020px){.tnav{display:none}.topbar .srch{max-width:none}}
/* mobile + small tablet: one column, video first, playlist right under it */
@media(max-width:900px){
.topbar{padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top,0px));gap:8px}
.tbrand{font-size:0;gap:0;padding:0}.tbrand .tlogo{width:34px;height:34px}
.tmy{padding:0;width:40px;height:40px;justify-content:center;font-size:0;gap:0}.tmy svg{width:16px;height:16px}
.view{padding:14px 14px 30px}.foot{padding:0 14px 110px}
.view h1{font-size:30px}
.lesson{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.lesson,.lesson>*,.ls-main>*{min-width:0;max-width:100%}.ls-main{display:contents}.ls-main>*{order:3}.ls-main>.ls-prog{order:1}.ls-main>.vp{order:0}.ls-main>.ls-head{order:1}.ls-side{order:2;position:static;max-height:none}
.vp{margin:0 -14px}.vp-stage{border-radius:0}.vp-bar,.vp-x{padding-left:14px;padding-right:14px}
.vp-meta h2{font-size:20px}
.plw{max-height:330px}
.ls-head{padding-top:6px;border-top:0}.ls-head h1,.ls-head .h1{font-size:28px}
.lesson .chaps{top:57px}
.feat{grid-template-columns:1fr;gap:12px}
.vrow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.vrow>*{scroll-snap-align:start}
.pgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.pos .ps{display:none}
}
@media(max-width:560px){.topbar .srch kbd{display:none}.vp-ctl .btn{flex:1;justify-content:center}.vp-ctl{width:100%}}
@media(prefers-reduced-motion:reduce){.pos:hover,.lcard:hover{transform:none}}
:root[data-theme="dark"] .subnav button.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .subnav button.on{background:var(--ac);border-color:var(--ac);color:var(--acx)}}

.vp.fb .vx-e{display:none}
@media(max-width:900px){.lesson>.ls-main>.vp,.ls-main>.vp{max-width:none}}
/* v10 learning-first */
.lp{display:flex;flex-direction:column;gap:8px}
.lp-t{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.lp-b{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.lp-n{margin:0}
.lp.done .bar i{background:var(--ok,#2E7D4F)}
.btn.ok{background:color-mix(in srgb,var(--ok,#2E7D4F) 14%,transparent);border-color:var(--ok,#2E7D4F);color:var(--ok,#2E7D4F)}
.okm{color:var(--ok,#2E7D4F);font-weight:700;font-size:13px;white-space:nowrap}
.what{font-size:15.5px;line-height:1.55;color:var(--ink);margin:2px 0 14px;max-width:68ch}
.tql{display:flex;flex-direction:column;padding:4px 0 8px;max-height:560px;overflow:auto}
.tq-n{margin:6px 16px 4px}
.tq-h{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);padding:12px 16px 4px}
.tq{font:inherit;color:var(--ink);text-align:left;display:flex;gap:10px;align-items:center;background:none;border:0;padding:7px 16px;cursor:pointer;width:100%}
.tq:hover{background:color-mix(in srgb,var(--ac) 7%,transparent)}
.tq .th.sm{flex:0 0 72px}
.tq-t{display:flex;flex-direction:column;min-width:0;flex:1}
.tq-t b{font-size:14px;font-weight:600;line-height:1.3}
.tq-t small{font-size:12px;color:var(--mu)}
.vp-end .vp-endb{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.dl{font:inherit;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:6px;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;cursor:pointer}
div.dl{cursor:default}
.dl.nt .sm{color:var(--mu);white-space:pre-wrap}
.feat .bar{display:block;height:6px}
.ls-prog.lp{align-items:stretch;flex-wrap:nowrap;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin:14px 0 8px}
.ls-prog.lp .bar{flex-basis:auto}
.lp-t{justify-content:flex-start}
.ls-side .pl-h:first-child{display:none}
.what{margin-top:12px}
/* quizzes */
.qsec{margin:26px 0 8px}
.qlaunch{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;box-shadow:var(--sh)}
.qlaunch>div{display:flex;flex-direction:column;gap:3px}
.qlaunch b{font-size:17px}
.qz2{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:18px 20px 20px;box-shadow:var(--sh)}
.qz2-h{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}
.qz2-h>div{display:flex;flex-direction:column;gap:2px;flex:1}
.qz-x{flex:0 0 auto}
.qz-bar{margin:12px 0 4px;height:6px}
.qz-tm{font:700 26px/1 var(--fc,inherit);font-variant-numeric:tabular-nums;color:var(--ac);padding:2px 8px}
.qq2{font-size:19px;line-height:1.45;margin:16px 0 14px}
.qo2{display:grid;gap:8px}
.qopt{font:inherit;color:var(--ink);text-align:left;display:flex;gap:12px;align-items:center;background:var(--bg,transparent);border:1.5px solid var(--bd);border-radius:12px;padding:12px 14px;cursor:pointer;min-height:48px;transition:border-color .15s,background .15s}
.qopt:hover:not([disabled]){border-color:var(--ac);background:color-mix(in srgb,var(--ac) 6%,transparent)}
.qopt kbd{flex:0 0 26px;height:26px;border-radius:7px;border:1px solid var(--bd);display:grid;place-items:center;font:600 12px/1 inherit;color:var(--mu);background:var(--sf)}
.qopt[disabled]{cursor:default;opacity:.75}
.qopt.ok{border-color:var(--ok,#2E7D4F);background:color-mix(in srgb,var(--ok,#2E7D4F) 12%,transparent);opacity:1}
.qopt.ok kbd{background:var(--ok,#2E7D4F);color:#fff;border-color:transparent}
.qopt.no{border-color:#C0392B;background:color-mix(in srgb,#C0392B 10%,transparent);opacity:1}
.qopt.no kbd{background:#C0392B;color:#fff;border-color:transparent}
.qz-fb{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.5;border-left:4px solid var(--ok,#2E7D4F);background:color-mix(in srgb,var(--ok,#2E7D4F) 7%,transparent)}
.qz-fb.no{border-left-color:#C0392B;background:color-mix(in srgb,#C0392B 6%,transparent)}
.qz-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qz-end{display:flex;gap:18px;align-items:center;margin:14px 0 4px;flex-wrap:wrap}
.qz-v{font-size:24px}
.qz-end p{margin:4px 0}
.qz-rh{margin-top:18px}
.qz-rev{display:flex;flex-direction:column;gap:10px;padding-left:20px}
.qz-rev li{display:flex;flex-direction:column;gap:3px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.qcard2{font:inherit;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:5px;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:16px;cursor:pointer;box-shadow:var(--sh);transition:transform .15s,border-color .15s}
.qcard2:hover:not(.static){transform:translateY(-2px);border-color:var(--ac)}
.qcard2.static{cursor:default}
.qcard2.ps{border-color:color-mix(in srgb,var(--ok,#2E7D4F) 55%,var(--bd))}
.qc-i{font-size:26px;line-height:1}
.qcard2 b{font-size:16px}
.qc-r{margin-top:auto;font-weight:600;color:var(--ac)}
.qcard2.ps .qc-r{color:var(--ok,#2E7D4F)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.bdg{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:14px;border-radius:14px;border:1px dashed var(--bd);opacity:.6}
.bdg.on{opacity:1;border-style:solid;background:var(--sf);box-shadow:var(--sh)}
.bdg-i{font-size:28px;line-height:1}
@media (max-width:600px){.qz2{padding:14px}.qq2{font-size:17px}.qlaunch .btn{width:100%}}
/* trending redesign */
.tr-hero{padding:6px 0 4px}
.tr-hero h1{font-size:clamp(28px,4vw,40px);margin:4px 0 6px}
.tr-hero p{max-width:70ch}
.tr-news{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:18px}
.tr-feat{position:relative;border-radius:18px;padding:26px 26px 22px;color:#fff;background:linear-gradient(135deg,#1F3B63 0%,#1F5A96 55%,#C2410C 130%);box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px;min-height:250px;justify-content:flex-end}
.tr-feat h2{color:#fff;font-size:clamp(22px,2.6vw,30px);line-height:1.2;margin:0}
.tr-feat p{color:rgba(255,255,255,.88);margin:0;max-width:60ch}
.tr-feat .in{color:#fff}
.tr-feat .btn.p{background:#fff;color:#1F3B63;border-color:#fff}
.tr-feat .hl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:6px}
.tr-badge{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:5px 10px;border-radius:99px}
.tr-list{background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;box-shadow:var(--sh)}
.tr-lh{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin-bottom:6px}
.tr-it{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--bd);color:var(--ink);text-decoration:none}
.tr-it:first-of-type{border-top:0}
.tr-it:hover b{color:var(--ac)}
.tr-it b{font-size:15px;line-height:1.35}
.tr-sech{align-items:center}
.tr-cre{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tr-c{display:flex;gap:12px;align-items:center;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:14px;color:var(--ink);text-decoration:none;box-shadow:var(--sh);transition:transform .15s,border-color .15s;flex-wrap:wrap}
.tr-c:hover{transform:translateY(-2px);border-color:var(--ac)}
.tav{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 55% 42%),hsl(calc(var(--h) + 40) 60% 30%))}
.tr-ct{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tr-ct b{font-size:15.5px}
.tr-ct small{font-size:12.5px;color:var(--mu);line-height:1.35}
.tr-ct .tr-n{color:var(--ac);font-weight:600}
.tr-go{font-size:12.5px;font-weight:700;color:var(--ac);margin-left:58px}
.tr-top{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tr-tp{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);color:var(--ink);text-decoration:none}
.tr-tp:hover{border-color:#C2410C}
.tr-tp svg{flex:0 0 20px;width:20px;height:20px;fill:#C2410C;stroke:none}
.tr-tp span{display:flex;flex-direction:column}
.tr-tp small{font-size:12.5px;color:var(--mu)}
.tr-ev{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.tr-e{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);color:var(--ink);text-decoration:none}
.tr-e:hover{border-color:var(--ac)}
.tr-e>span:last-child{display:flex;flex-direction:column}
.tr-e small{font-size:12.5px;color:var(--mu)}
.tr-wl{margin-top:28px}
@media (max-width:860px){.tr-news{grid-template-columns:1fr}.tr-feat{min-height:0}}
.tr-c{flex-wrap:wrap;align-content:flex-start}
.tr-ct{flex:1 1 140px}
.tr-go{flex-basis:100%;margin-left:58px}
.tr-sech{flex-wrap:wrap;gap:8px}
/* accounts */
.acctb{display:inline-flex;align-items:center;gap:8px}
.acctb .aci{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;display:none}
.avt{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:var(--ac);color:#fff;font-weight:700;font-size:13px}
.avt.big{width:60px;height:60px;font-size:26px;flex:0 0 60px}
body.noscroll{overflow:hidden}
.am-box{background:var(--sf);color:var(--ink);border-radius:18px;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.am-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.am-h b{font-size:21px}
.am-why{margin:10px 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.am-why li{font-size:14px;padding-left:22px;position:relative}
.am-why li:before{content:"✓";position:absolute;left:0;color:var(--ok,#2E7D4F);font-weight:700}
.am-why.big li{font-size:15.5px;padding:4px 0 4px 26px}
.am-g{width:100%;justify-content:center;display:flex;gap:10px;align-items:center;min-height:46px;font-weight:600}
.am-g svg{width:20px;height:20px}
.am-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--mu);font-size:12.5px}
.am-or:before,.am-or:after{content:"";flex:1;height:1px;background:var(--bd)}
.am-box form{display:flex;flex-direction:column;gap:10px}
.am-box label,.pf-row label,.danger label,.acc-set label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600}
.am-box input,.pf-row input,.pf-row select,.danger input,.acc-set input{font:inherit;font-size:16px;padding:11px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--bg,#fff);color:var(--ink);min-height:46px;width:100%;box-sizing:border-box}
.am-pw{position:relative;display:block}
.am-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:600 12.5px/1 inherit;background:none;border:0;color:var(--ac);padding:8px;cursor:pointer}
.am-sub{min-height:48px;font-size:16px;margin-top:4px}
.am-fg{align-self:flex-end}
.am-sw{text-align:center;margin:12px 0 4px}
.am-err{background:color-mix(in srgb,#C0392B 10%,transparent);color:#9B2C1F;border-radius:10px;padding:10px 12px;font-size:14px}
.am-ok{background:color-mix(in srgb,var(--ok,#2E7D4F) 12%,transparent);border-radius:10px;padding:10px 12px;font-size:14px}
.am-free{text-align:center;margin:10px 0 0}
@media (max-width:600px){#accm{padding:0;align-items:flex-end}.am-box{border-radius:18px 18px 0 0;width:100%;max-height:92vh;padding-bottom:max(18px,env(safe-area-inset-bottom))}.acctb .acn{display:none}.acctb .aci{display:block}.acctb{padding:8px 10px}}
.svb.on{border-color:var(--ac);color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,transparent)}
.sv-h{display:block;margin:-4px 0 10px}
.nudge .nudge-b{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.nudge-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;align-items:center}
.btn.lnk{background:none;border-color:transparent;color:var(--mu)}
.nudge.banner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;background:color-mix(in srgb,var(--ac) 7%,var(--sf));border:1px solid color-mix(in srgb,var(--ac) 30%,var(--bd));border-radius:14px;margin:16px 0;padding:4px 14px 4px 0}
.nudge.banner .nudge-a{margin:0;padding:10px 0 10px 16px}
.dash-h,.acc-top{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between}
.acc-top{justify-content:flex-start}.acc-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.acc-top h1{margin:0}
.beltc{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;border:1px solid var(--bd)}
.b-white{background:#fff;color:#222}.b-blue{background:#1F5AC2;color:#fff;border-color:transparent}.b-purple{background:#6B3FA0;color:#fff;border-color:transparent}.b-brown{background:#6D4527;color:#fff;border-color:transparent}.b-black{background:#111;color:#fff;border-color:#C0392B}
.cont{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
@media (max-width:760px){.cont{grid-template-columns:1fr}}
.dl.rc{margin-bottom:10px;width:100%}
.dl.fin{border-color:color-mix(in srgb,var(--ok,#2E7D4F) 50%,var(--bd))}
.svf{margin-bottom:10px;flex-wrap:wrap}
.svi{flex-direction:row;align-items:center;padding:8px}
.svo{font:inherit;color:var(--ink);text-align:left;display:flex;gap:10px;align-items:center;background:none;border:0;cursor:pointer;flex:1;min-width:0}
.svo>span:last-child{display:flex;flex-direction:column;min-width:0}
.svo .th.sm{flex:0 0 72px}
.game{display:flex;flex-direction:column;gap:12px}
.prog2,.hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.pr-r{display:grid;grid-template-columns:110px 1fr 50px;gap:8px;align-items:center;margin-top:8px}
.hl2{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px}
.hl2 li{display:flex;flex-direction:column}
.pf fieldset{border:0;padding:0;margin:0 0 16px}
.pf legend{font-weight:700;margin-bottom:8px}
.pf-ch{display:flex;flex-wrap:wrap;gap:8px}
.pf-c{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:99px;border:1px solid var(--bd);cursor:pointer;font-size:14px;min-height:40px}
.pf-c input{position:absolute;opacity:0;pointer-events:none}
.pf-c.on{background:var(--ac);border-color:var(--ac);color:#fff}
.pf-c:focus-within{outline:2px solid var(--ac);outline-offset:2px}
.pf-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.pf-row label{flex:1 1 200px}
.acc-set{display:flex;flex-direction:column;gap:14px}
.danger{border:1px solid color-mix(in srgb,#C0392B 45%,var(--bd));border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.btn.dang{background:#C0392B;border-color:#C0392B;color:#fff;align-self:flex-start}
.acc-hero{max-width:640px}.acc-cta{display:flex;gap:10px;flex-wrap:wrap}
.coffee{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px;padding:16px;border-radius:14px;border:1px dashed var(--bd)}
.coffee>span{font-size:28px}.coffee>div{display:flex;flex-direction:column;flex:1;min-width:200px}
.aff{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:22px 0 8px;padding:16px;border-radius:14px;background:var(--sf);border:1px solid var(--bd)}
.aff>div{display:flex;flex-direction:column;gap:3px;flex:1 1 260px}
.aff-d{flex-basis:100%}
.foot-l{display:block;margin-top:8px}
/* position breakdown */
.px{margin:10px 0 22px}
.px-ab{font-size:16px;line-height:1.6;max-width:72ch;margin:4px 0 14px}
.px-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:12px}
.px-c{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:14px 16px}
.px-c>b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin-bottom:6px}
.px-c.ok{border-left:4px solid var(--ok,#2E7D4F)}.px-c.th{border-left:4px solid #C2410C}.px-c.bad{border-left:4px solid #C0392B}.px-c.ex{border-left:4px solid var(--ac);margin-bottom:12px}
.px-l{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:14.5px;line-height:1.45}
.px-ex{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.px-ex li{display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.45}
.px-s{font-weight:600}.px-s:before{content:"If ";color:var(--mu);font-weight:500}
.px-d{color:var(--ink)}.px-d:before{content:"→ ";color:var(--ac);font-weight:700}
/* support + editor */
.sup{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.sup{grid-template-columns:1fr}}
#supf{display:flex;flex-direction:column;gap:12px}
#supf label,.ed label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:600}
#supf input,#supf select,#supf textarea,.ed input:not([type=checkbox]):not([type=file]),.ed select,.ed textarea{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--bd);background:var(--bg,#fff);color:var(--ink);width:100%;box-sizing:border-box}
#supf textarea,.ed textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.faq{border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin-bottom:8px;background:var(--sf)}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:8px 0 0;font-size:14.5px;line-height:1.5}
.vp-rep{margin-left:auto}
.mab{background:color-mix(in srgb,var(--ac) 12%,var(--sf));border-bottom:1px solid color-mix(in srgb,var(--ac) 30%,var(--bd));padding:10px 16px;text-align:center;font-size:14.5px}
.ed-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-end}
.ed-pub{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ed-tabs{margin:14px 0}
.ed{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.ed-vl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ed-v{display:flex;gap:10px;align-items:center;border:1px solid var(--bd);border-radius:12px;padding:8px}
.ed-v .th.sm{flex:0 0 96px}
.ed-vf{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.ed-va{display:flex;flex-direction:column;gap:4px}
.ed-add{display:flex;flex-direction:column;gap:10px;border-top:1px dashed var(--bd);padding-top:12px}
.ed-ck{flex-direction:row!important;align-items:center;gap:8px!important}
.ed-fq{display:grid;grid-template-columns:1fr 1.6fr auto;gap:8px;align-items:start}
@media (max-width:700px){.ed-fq{grid-template-columns:1fr}}
.ed-hd{border:1px solid var(--bd);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}

/* ---- brand logo ---- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp-logo{display:inline-flex;align-items:center;color:var(--ink)}
.pp-logo svg{display:block}
.tbrand .pp-h{height:38px;width:auto}
.tbrand .pp-m{display:none;height:28px;width:auto}
.pp-side .pp-h{height:auto;width:200px}
.pp-foot{color:var(--mu);margin:0 0 10px}
.pp-foot svg{height:26px;width:auto;display:block;opacity:.85}
.pp-ob{color:var(--ink);text-align:center;margin:4px 0 10px}
.pp-ob svg{height:88px;width:auto}
@media (max-width:900px){.tbrand .pp-h{display:none}.tbrand .pp-m{display:block}}

/* ---- lesson page v2 ---- */
.lesson.lsx{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"top side" "body side";gap:20px 28px;align-items:start}
.lsx>.lx-top{grid-area:top;display:flex;flex-direction:column;gap:16px;min-width:0}
.lsx>.ls-side{grid-area:side;position:sticky;top:84px;max-height:none;order:initial}
.lsx>.lx-body{grid-area:body;min-width:0;display:flex;flex-direction:column}
.lsx .lx-head{order:0;display:block;margin:0;padding:0;border:0}
.lsx .lx-head .kick{display:block;margin-bottom:4px}
.lsx .lx-head h1{font:700 34px/1.08 var(--fd);margin:0 0 6px}
.lx-sum{font-size:17px;color:var(--ink);margin:0 0 10px;max-width:62ch;line-height:1.45}
.lsx .lx-head .tags{display:inline-flex;gap:6px;vertical-align:middle;margin-right:6px}
.lx-act{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle;margin-top:4px}
.lx-act .btn.q{padding:5px 11px;font-size:13.5px;min-height:0;background:transparent;border-color:var(--bd);box-shadow:none}
.lx-act .btn.q:hover{background:var(--sf)}
.lsx .vp-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;column-gap:10px}
.lsx .vp-meta>*{flex:0 0 auto;width:auto}
.lx-two .px-c:before,.lx-two .px-c:after,.lx-plain:before,.lx-plain:after{display:none!important}
.lx-sec .px-c.ex.lx-plain{border:0!important;background:none!important;padding:0;box-shadow:none}
.lsx .vp-meta .kick,.lsx .vp-meta h2{flex-basis:100%}
.lsx .vp-meta #vpby{order:2}.lsx .vp-meta .vp-rep{order:3}
.lsx .vp-meta .vp-rep:before{content:"·";margin-right:10px;color:var(--mu)}
.lx-sec{margin-top:30px}
.lx-h{font:700 22px var(--fd);margin:0 0 10px}
.lx-sub{color:var(--mu);margin:-4px 0 12px;font-size:14.5px}
.lx-sec .px-ab{font-size:16.5px;line-height:1.55;margin:0 0 14px;max-width:68ch}
.lx-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lx-two .px-c{background:var(--sf);border:1px solid var(--bd);border-left-width:1px;border-radius:12px;padding:14px 16px;box-shadow:none;background-image:none}
.lx-two .px-c b{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:6px}
.lx-two .px-c.ok b{color:#2E7D4F}.lx-two .px-c.th b,.lx-two .px-c.bad b{color:#B4472B}
.lx-two .px-l{margin:0;padding-left:18px}.lx-two .px-l li{margin:4px 0}
.lx-plain{background:none;border:0;padding:0;box-shadow:none}
.lx-plain .px-ex{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lx-plain .px-ex li{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:12px 14px}
.lx-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.lx-tg{display:flex;flex-direction:column;gap:8px}
.lx-tgh{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.lx-tg .tq{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:8px 10px;width:100%}
.lx-tg .tq:hover{border-color:var(--ac)}
.lx-more{margin-top:14px}
.lx-more summary,.lx-deep summary{cursor:pointer;color:var(--ac);font-weight:600;list-style-position:inside}
.lx-tg-flat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:10px}
.lx-finc{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;display:grid;gap:14px}
.lx-finc .ls-prog.lp{margin:0;border:0;padding:0;background:none}
.lx-finc .qsec{margin:0;padding-top:14px;border-top:1px solid var(--bd)}
.lx-finc .qlaunch{border:0;padding:0;box-shadow:none;background:none}
.lx-deep{margin-top:26px;border-top:1px solid var(--bd);padding-top:16px}
.lx-deep summary{color:var(--ink);display:flex;flex-direction:column;gap:2px}
.lx-deep summary b{font:700 19px var(--fd)}
.lx-deep summary span{color:var(--mu);font-weight:400;font-size:14.5px}
.lx-deep summary::-webkit-details-marker{display:none}
.lx-deep summary b:after{content:" +";color:var(--ac)}
.lx-deep[open] summary b:after{content:" −"}
.lx-deep .course{margin-top:12px}
@media (max-width:900px){
.lesson.lsx{display:flex;flex-direction:column;gap:16px}
.lsx>.ls-side{position:static;order:initial}
.lsx .lx-head h1{font-size:28px}
.lx-two{grid-template-columns:1fr}
.lx-sec{margin-top:24px}
}
.lsx .vp-meta>.kick,.lsx .vp-meta>h2{flex:0 0 100%}
.lsx .vp-x:empty,.lsx .vx-e{display:none}
.lsx .vp-meta .vp-rep{margin:0!important;flex:0 0 auto!important;text-align:left}
.lsx .vp-x{padding-top:0}
.lx-two .px-c{min-height:0}
.lx-two{align-items:start}
/* =====================================================================
   The Position Project — design system v3 (monochrome + one accent)
   Loaded last so it wins over the older layers in v6.css.
   ===================================================================== */
:root{
  --bg:#F6F6F4;--sf:#FFFFFF;--sf2:#EFEFEC;--sf3:#E7E7E3;--ink:#0F0F10;--ink2:#2A2A2D;--mu:#66666C;--bd:#E4E4E0;--bd2:#D3D3CE;
  --ac:#D93A1F;--ac2:#FCEBE6;--acx:#FFFFFF;--acs:#F04E30;
  --blk:#0F0F10;--ok:#1F7A4A;--okbg:#E5F3EA;--red:#B42318;--redbg:#FDECEA;
  --fd:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px;--r-s:10px;--r-l:22px;
  --sh:0 1px 2px rgba(15,15,16,.04);
  --sh2:0 1px 2px rgba(15,15,16,.04),0 12px 32px -16px rgba(15,15,16,.22);
  --ring:0 0 0 3px rgba(217,58,31,.28);
  --maxw:1240px;color-scheme:light}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#18181B;--sf:#212125;--sf2:#2A2A2F;--sf3:#333339;--ink:#F3F3F1;--ink2:#DCDCD9;--mu:#A8A8AF;--bd:#323237;--bd2:#424249;
  --ac:#FF6B4E;--ac2:#2A1611;--acx:#0B0B0C;--acs:#FF6B4E;--blk:#050506;--ok:#5FD08F;--okbg:#10261A;--red:#FF8A80;--redbg:#2E1513;
  --sh:none;--sh2:0 12px 32px -16px rgba(0,0,0,.7);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#18181B;--sf:#212125;--sf2:#2A2A2F;--sf3:#333339;--ink:#F3F3F1;--ink2:#DCDCD9;--mu:#A8A8AF;--bd:#323237;--bd2:#424249;
  --ac:#FF6B4E;--ac2:#2A1611;--acx:#0B0B0C;--acs:#FF6B4E;--blk:#050506;--ok:#5FD08F;--okbg:#10261A;--red:#FF8A80;--redbg:#2E1513;
  --sh:none;--sh2:0 12px 32px -16px rgba(0,0,0,.7);color-scheme:dark}

/* ---------- base ---------- */
html,body{background:var(--bg)}
body{font-family:var(--fb);color:var(--ink);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.003em}
h1,h2,h3,h4,.h1{font-family:var(--fd);letter-spacing:-.022em;color:var(--ink)}
h1,.h1{font-weight:700}
h2,h3{font-weight:650}
.mu,.sm.mu{color:var(--mu)}
.kick{font:600 11.5px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
a,.in{color:var(--ink);text-decoration-color:var(--bd2);text-underline-offset:3px}
a:hover,.in:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--ring)!important;border-radius:10px}
::selection{background:var(--ac2)}
.view{max-width:var(--maxw);margin:0 auto}

/* ---------- buttons ---------- */
.btn{font:600 14px/1 var(--fb);letter-spacing:-.005em;border-radius:999px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink);padding:10px 16px;min-height:40px;box-shadow:none;transition:background .15s,border-color .15s,transform .1s,opacity .15s}
.btn:hover{background:var(--sf2);border-color:var(--bd2)}
.btn:active{transform:translateY(1px)}
.btn.p,a.btn.p{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.p:hover{background:var(--ink2);border-color:var(--ink2)}
.btn.ac{background:var(--ac);border-color:var(--ac);color:#fff}
.btn[disabled],.btn.p[disabled]{opacity:.45}
.ic{border-radius:999px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink)}
.ic:hover{background:var(--sf2)}

/* ---------- chips, tags, segmented ---------- */
.tag,.chip{font:600 12px/1 var(--fb);border-radius:999px;padding:5px 9px;background:var(--sf2);color:var(--ink2);border:0;letter-spacing:0}
.tag.l{background:transparent;border:1px solid var(--bd2);color:var(--mu)}
.seg{background:var(--sf2);border:0;border-radius:999px;padding:3px}
.seg button{border-radius:999px;font-weight:600;color:var(--mu)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--sf);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.subnav{gap:6px;border:0;padding:2px 0 6px;margin:0 0 18px}
.subnav button{font:600 13.5px var(--fb);border-radius:999px;padding:8px 14px;background:transparent;border:1px solid var(--bd);color:var(--mu)}
.subnav button:hover{color:var(--ink);border-color:var(--bd2)}
.subnav button.on,:root[data-theme="dark"] .subnav button.on,:root:not([data-theme="light"]) .subnav button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- surfaces ---------- */
.box,.card,.scard,.ctx,.qcard2,.hcard,.lcard,.pcard,.tcard,.ms,.feat,.px-c,.chb,.qlaunch,.lx-finc{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh)}
.ctx{border-left-width:1px!important}
.ctx:before,.ctx:after{display:none!important}
.box.warn{border-color:var(--bd)}
.scard-h{border-bottom:1px solid var(--bd)}

/* section headings: no coloured bars, one consistent style */
.sech,.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 12px}
.sech h3,.top h3,.sech h2,.top h2{font:650 20px/1.2 var(--fd);letter-spacing:-.02em;margin:0;padding:0;border:0}
.sech h3:before,.top h3:before,.sech:before{display:none!important}
.sech>a.in,.top>a.in{font-weight:600;font-size:13.5px;text-decoration:none;color:var(--mu)}
.sech>a.in:hover,.top>a.in:hover{color:var(--ink)}
.sech>a.in:after,.top>a.in:after{content:" →"}
h2.ls-sec,.ls-sec,.lx-h{font:650 21px/1.2 var(--fd);letter-spacing:-.02em}
.ls-sec:before,.lx-h:before{display:none}

/* ---------- top bar ---------- */
.topbar{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--bd);box-shadow:none!important}
.tnav{gap:2px}
.tnav button{font:600 14.5px var(--fb);color:var(--mu);padding:8px 12px;border-radius:999px;position:relative}
.tnav button:hover{color:var(--ink);background:var(--sf2)}
.tnav button.on{color:var(--ink);background:var(--sf2)}
.tnav button.on:after,.tnav button[aria-current]:after{display:none!important}
.srch{background:var(--sf2);border:1px solid transparent;border-radius:999px}
.srch:focus-within{background:var(--sf);border-color:var(--bd2);box-shadow:var(--ring)}
.srch input{font-size:14.5px}
.srch kbd{border-radius:6px;background:var(--sf);border:1px solid var(--bd);color:var(--mu)}
.qr{border-radius:var(--r);border:1px solid var(--bd);box-shadow:var(--sh2);background:var(--sf)}
.acctb,.tmy{border-radius:999px!important;border:1px solid var(--bd2)!important;background:var(--sf)!important;font-weight:600}
.tmy svg{stroke:currentColor}
.mbtn{border-radius:999px;border:1px solid var(--bd2);background:var(--sf)}

/* mobile tabs */
.tabs{background:color-mix(in srgb,var(--sf) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--bd);box-shadow:none}
.tabs .tb{color:var(--mu);font-weight:600;font-size:11px}
.tabs .tb svg{stroke:currentColor}
.tabs .tb.on{color:var(--ink)}
.tabs .tb.on svg{stroke-width:2.2}
.tabs .tb.on:before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:2px;background:var(--ac)}
.tabs .tb{position:relative}

/* drawer */
.side{background:var(--sf);border-right:1px solid var(--bd)}
.ni{border-radius:10px;color:var(--ink2);font-weight:500}
.ni:hover{background:var(--sf2)}
.ni.on{background:var(--sf2);color:var(--ink);font-weight:650}
.ni.on svg{stroke:var(--ac)}
.ng>span{letter-spacing:.06em;text-transform:uppercase;font-size:11px}

/* crumbs */
.crumbs{font-size:13px;color:var(--mu);margin-bottom:14px}
.crumbs a{color:var(--mu);text-decoration:none}.crumbs a:hover{color:var(--ink)}

/* ---------- progress: the one place the accent is loud ---------- */
.bar,.pbar{background:var(--sf3);border-radius:99px;overflow:hidden;height:6px}
.bar i,.pbar i{background:var(--ac);border-radius:99px}
.pbar.done i,.bar.done i{background:var(--ok)}
.ring .rt{stroke:var(--sf3)}
.ring .rf{stroke:var(--ac)}
.ring.done .rf{stroke:var(--ok)}

/* ---------- thumbnails ---------- */
.th{border-radius:12px;background-color:var(--sf3)}
.th img{filter:saturate(.92)}
.th-pl{background:rgba(15,15,16,.72);backdrop-filter:blur(4px)}
.vtile .th,.vcard .th,.feat .th{transition:transform .25s}
.vtile:hover .th,.vcard:hover .th,.feat:hover .th{transform:scale(1.015)}

/* ---------- cards ---------- */
.pcard,.lcard,.tcard,.hcard,.ms,.vtile,.feat{transition:border-color .15s,box-shadow .2s,transform .15s}
.pcard:hover,.lcard:hover,.tcard:hover,.hcard:hover,.ms:hover,.feat:hover{border-color:var(--bd2);box-shadow:var(--sh2);transform:translateY(-1px)}
.vtile{background:none;border:0}
.vt-t b{font:600 14.5px/1.35 var(--fb);letter-spacing:-.01em}
.vt-t small{color:var(--mu)}

/* horizontal rails for video rows and course rows on every screen size */
.home3 .vrow,.home3>.paths,.home3>.hgrid{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:16px;padding:2px 2px 12px;margin:0 -2px;scrollbar-width:thin}
.home3 .vrow>*,.home3>.paths>*,.home3>.hgrid>*{scroll-snap-align:start}
.home3>.paths{grid-auto-columns:minmax(272px,1fr)}
@media (min-width:1100px){.home3 .vrow{grid-auto-columns:calc((100% - 64px)/5)}.home3>.paths,.home3>.hgrid{grid-auto-columns:calc((100% - 32px)/3)}}
@media (max-width:640px){.home3 .vrow{grid-auto-columns:72%}.home3>.paths,.home3>.hgrid{grid-auto-columns:84%}}

/* ---------- forms ---------- */
input[type=search],input[type=text],input[type=email],input[type=password],select,textarea{border-radius:12px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink2);box-shadow:var(--ring)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--bd);margin-top:56px;padding-top:24px;color:var(--mu)}

/* ---------- modals & toasts ---------- */
.mcard{border-radius:var(--r-l);border:1px solid var(--bd);box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
#toast{background:var(--ink);color:var(--bg);border-radius:999px;font-weight:600}

/* ---------- loading skeleton ---------- */
@keyframes ppShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{background:linear-gradient(90deg,var(--sf2) 0,var(--sf3) 40%,var(--sf2) 80%);background-size:800px 100%;animation:ppShimmer 1.2s linear infinite;border-radius:12px}

/* ---------- empty states ---------- */
.empty{border:1px dashed var(--bd2);border-radius:var(--r);padding:28px 20px;text-align:center;color:var(--mu);background:transparent}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- homepage hero ---------- */
.home3{display:flex;flex-direction:column}
.hx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;background:#0F0F10;color:#F3F3F1;border-radius:var(--r-l);padding:40px 40px;position:relative;overflow:hidden;margin-top:4px}
:root[data-theme="dark"] .hx{background:var(--sf2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hx{background:var(--sf2)}}
.hx:before{content:"";position:absolute;right:-120px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,78,48,.28),transparent 70%);pointer-events:none}
.hx>*{position:relative}
.hx .hx-k{display:block;font:600 11.5px/1.3 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:#A3A3A8;margin-bottom:10px}
.hx h1{color:#FFFFFF;font:700 44px/1.04 var(--fd);letter-spacing:-.035em;margin:0 0 12px;max-width:16ch}
.hx-new h1{font-size:52px}
.hx .hx-s{color:#C9C9CC;font-size:16.5px;line-height:1.55;margin:0 0 20px;max-width:52ch}
.hx .hx-s .hh-ed{color:#fff}
.hx-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.hx-cta .btn{min-height:46px;padding:12px 20px;font-size:15px}
.hx .btn.ac{background:var(--acs);border-color:var(--acs);color:#fff}
.hx .btn.ac:hover{filter:brightness(1.06)}
.hx .hx-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.hx .hx-ghost:hover{background:rgba(255,255,255,.08)}
.hx-facts{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;color:#A3A3A8;font-size:14px}
.hx-facts b{color:#fff;font-weight:700}
.hx-link{background:none;border:0;color:#fff;font:600 14px var(--fb);padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.hx-stats{display:flex;flex-wrap:wrap;gap:8px}
.hx-stats>*{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;color:#fff!important;border-radius:14px!important;box-shadow:none!important}
.hx-stats *{color:inherit}
.hx-stats .mu,.hx-stats span{color:#C9C9CC}
.hx-stats b{color:#fff}
.hx .hx-note{display:block;color:#A3A3A8;font-size:13.5px;margin-top:14px;max-width:56ch}
.hx-r .hh-map{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;color:#A3A3A8}
.hx-r .hh-map span{color:#A3A3A8}
.hx-r .feat{display:grid;grid-template-columns:1fr;gap:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:10px;color:#fff;width:100%;text-align:left;box-shadow:none}
.hx-r .feat:hover{background:rgba(255,255,255,.08);transform:none;box-shadow:none}
.hx-r .feat .th{aspect-ratio:16/9;width:100%;height:auto;border-radius:12px}
.hx-r .feat-b{padding:12px 6px 4px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.hx-r .feat-b b{color:#fff;font:650 20px/1.2 var(--fd)}
.hx-r .feat-b .kick,.hx-r .feat-b .mu{color:#A3A3A8}
.hx-r .feat-b .btn.p{background:#fff;border-color:#fff;color:#0F0F10;margin-top:8px}
@media (max-width:900px){
.hx{grid-template-columns:1fr;padding:26px 20px;gap:20px;border-radius:20px}
.hx h1,.hx-new h1{font-size:34px}
.hx-new .hx-r{display:none}
}
/* shortcuts */
.qa3{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.qa3 button{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:14px;font-weight:600;color:var(--ink);text-align:left}
.qa3 button:hover{border-color:var(--bd2)}
.home3 .ctx{margin-top:16px}

/* ---------- thumbnail placeholder (shown until the YouTube image loads, or in the preview) ---------- */
.th{background-image:linear-gradient(135deg,#2B2B2F 0%,#151517 100%)!important}
.th::before{background-image:radial-gradient(circle at 75% 25%,rgba(240,78,48,.22),transparent 55%)!important}
.home3 .pcard .th,.paths .pcard .th{aspect-ratio:16/9;height:auto!important}
.ring .rf{stroke:var(--ac)!important}
.ring.done .rf{stroke:var(--ok)!important}

/* ---------- technique library: dense, scannable rows ---------- */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.lgrid .lcard{display:grid;grid-template-columns:132px minmax(0,1fr);grid-auto-rows:min-content;column-gap:14px;row-gap:2px;align-items:start;padding:10px;text-align:left;border-radius:14px}
.lgrid .lcard>.th{grid-row:1 / span 4;width:132px;height:auto;aspect-ratio:16/9;margin:0;border-radius:10px}
.lgrid .lcard>.lt{margin-top:2px}
.lgrid .lcard>.lt b{font:650 15px/1.3 var(--fd);letter-spacing:-.01em}
.lgrid .lcard>.sm{font-size:12.5px;line-height:1.4}
.lgrid .lcard>.sm:last-child{display:none}
.lgrid .lcard.dn{border-color:color-mix(in srgb,var(--ok) 40%,var(--bd))}
.okm{color:var(--ok);font-weight:600}
.view>h3{display:flex;align-items:baseline;gap:8px;font:650 18px var(--fd);margin:30px 0 10px}
.view>h3 a.in{text-decoration:none}
.view>h3 .mu{font:500 13px var(--fb)}
#lkt{margin:6px 0 12px;display:inline-flex;flex-wrap:wrap}
#lkt button .sm{opacity:.6;margin-left:4px}
.tools{position:sticky;top:64px;z-index:6;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 0;display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--bd);margin-bottom:6px}
.tools input{flex:1 1 260px;min-height:42px;padding:0 14px}
.tools select{min-height:42px;padding:0 12px}
@media (max-width:640px){.lgrid{grid-template-columns:1fr}.lgrid .lcard{grid-template-columns:112px minmax(0,1fr)}.lgrid .lcard>.th{width:112px}.tools{top:57px}.tools select{flex:1 1 45%}}

/* ---------- technique page v3 ---------- */
.tx-head .kick{display:block;margin-bottom:6px}
.tx-head h1{font:700 36px/1.06 var(--fd);letter-spacing:-.03em;margin:0 0 8px}
.tx-head .lx-sum{margin-bottom:12px}
.tx-head .lx-act{display:flex;flex-wrap:wrap;gap:6px}
.tx-head .lx-act label.btn{padding:5px 11px;font-size:13.5px;min-height:0}
.tx-where{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tx-where>div{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:12px 14px}
.tx-where h3{font:600 12px var(--fb);text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin:0 0 8px}
.tx-where h3:before{display:none}
.tx .stp{counter-reset:ppst;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tx .stp li{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:13px 16px 13px 52px;position:relative;font-size:15.5px}
.tx .stp li:before{counter-increment:ppst;content:counter(ppst);position:absolute;left:14px;top:11px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 13px/26px var(--fb);text-align:center}
.tx .box{border-radius:14px;padding:14px 16px;box-shadow:none}
.tx .box>b,.tx .box>b.sm{display:block;font:600 12px var(--fb);text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin-bottom:6px}
.tx-esc{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;background:var(--ac2)!important;border-color:transparent!important}
.tx-esc b{text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important;font:650 16px var(--fd)!important}
.tx-safe .box.warn{border-left:3px solid var(--ac)!important}
.tx-notes{border-top:1px solid var(--bd);padding-top:14px}
.tx-notes>b{display:block;margin-bottom:6px}
.tx-notes textarea{width:100%;min-height:90px;padding:10px 12px}
.tx .chf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:28px;padding-top:16px;border-top:1px solid var(--bd)}
.tx .aff{margin-top:24px}
.lx-deep .go{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
@media (max-width:640px){.tx-where{grid-template-columns:1fr}.tx-head h1{font-size:30px}.tx-esc{flex-direction:column;align-items:flex-start}}

.tx .stp li{counter-increment:none}
.tx .box,.tx .box.warn{border-color:var(--bd)!important}
.pl .on,.pl li.on,.pl [aria-current]{background:var(--sf2)!important}
.vp-rep a,.vp-rep{color:var(--mu)!important}
.lgrid .lcard .sm b{font-size:inherit;font-weight:650}
.view>.subnav+.top h2,.view>.top:first-child h2{font:700 34px/1.1 var(--fd);letter-spacing:-.03em}
.view>.subnav+.top{margin-top:4px}
.pl-row.on{background:var(--sf2)!important;border-left-color:var(--ink)!important}
/* one heading style everywhere: no gradient bars */
.view h3::before,.view h2::before{display:none!important}
.view h3{padding-left:0!important}
.lx-h3{font:650 20px/1.2 var(--fd)!important;letter-spacing:-.02em;margin:30px 0 10px!important}
.tx ul{padding-left:20px}
.tx .tx-where h3{font:600 12px var(--fb)!important;text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin:0 0 8px!important}
.tmy.on,.tmy[aria-current]{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}
.foot a{color:var(--mu)!important}
.view p a:not(.btn),.view li a:not(.btn),.view .sm a:not(.btn),.box a:not(.btn){color:inherit}
.vrow{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:2px 2px 12px;scrollbar-width:thin}
.vrow>*{scroll-snap-align:start}
@media (min-width:1100px){.vrow{grid-auto-columns:calc((100% - 64px)/5)}}
@media (max-width:640px){.vrow{grid-auto-columns:72%}}
.box.stat{border-left:3px solid var(--ac)!important}
a.in{color:var(--ink);text-decoration-color:var(--bd2)}
a.in:hover{color:var(--ink);text-decoration-color:var(--ink)}
.foot a.in,.foot a{color:var(--mu)!important}
.crumbs a.in:hover{color:var(--ink)}
.box.hero{border-left:1px solid var(--bd)!important}
.tr-feat{background:#0F0F10!important;color:#fff}
.tr-feat:before{content:"";position:absolute;right:-80px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,78,48,.3),transparent 70%);pointer-events:none}
.tr-feat>*{position:relative}
.tr-feat .btn.p{background:#fff!important;color:#0F0F10!important;border-color:#fff!important}
:root[data-theme="dark"] .tr-feat{background:var(--sf2)!important}
.tr-c .tr-n,.tr-n{color:var(--mu)!important}
.tr-go{color:var(--ink)!important}
@media (max-width:900px){
.acctb,.tmy{font-size:0!important;gap:0!important;width:40px;height:40px;min-width:40px;padding:0!important;justify-content:center;display:inline-flex;align-items:center}
.acctb svg,.tmy svg{width:17px;height:17px}
#lkt{display:flex!important;flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
#lkt::-webkit-scrollbar{display:none}
#lkt button{flex:0 0 auto;white-space:nowrap}
.tools select{flex:1 1 calc(50% - 4px);min-width:0}
.view>.subnav+.top h2,.view>.top:first-child h2{font-size:30px}
}
/* accent only where it means "progress / highlight"; plain text stays ink or grey */
.btn.ac,.hx .btn.ac{background:var(--ac)!important;border-color:var(--ac)!important;color:var(--acx)!important}
:root[data-theme="dark"] .hx .btn.ac{color:#0B0B0C!important}
a{color:var(--ink)}
.lk a,.hd,.qc-r,.itline b,.am-why b,.am-why.big b,.lx-more summary{color:var(--ink)}
.qc-r{color:var(--mu)}
.big{color:var(--ink)}
.vtile:hover .vt-t b,.nx:hover b,.tr-it:hover b{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tag{background:var(--sf2);color:var(--ink2)}
.toc span,.lr .pts,.pos .pm .lvl.lI{background:var(--sf2);color:var(--ink)}
.sn{border-color:var(--ink);color:var(--ink)}
.pcard{border-top-width:1px!important;border-top-color:var(--bd)!important}
.pgrid .pcard .th,.pos .th{aspect-ratio:16/9;height:auto!important}
.vch span{color:var(--ink)}
.qc-i{display:inline-flex;width:38px;height:38px;border-radius:12px;background:var(--sf2);align-items:center;justify-content:center;color:var(--ink);font-size:18px}
.svb{display:inline-flex;align-items:center;gap:6px}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);width:18px;height:18px}
@media (max-width:900px){.acctb .aci{display:block!important}}
.svb.on,.btn.svb.on{color:var(--ink)!important;background:var(--sf2)!important;border-color:var(--bd2)!important}

/* polish (Nov 8 2026): on phones "Report a problem" wraps to its own line, so drop the leading dot */
@media (max-width:600px){.lsx .vp-meta .vp-rep:before{content:none}.lsx .vp-meta .vp-rep{flex-basis:100%!important}}

/* =====================================================================
   v4 additions: Trending media layout + submission escape roadmap
   ===================================================================== */
/* ---------- Trending: section nav ---------- */
.tr-nav{position:sticky;top:57px;z-index:15;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:16px -4px 0;padding:8px 4px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tr-nav::-webkit-scrollbar{display:none}
.tr-nb{flex:0 0 auto;font:600 13px/1 var(--fb);padding:9px 14px;border-radius:999px;border:1px solid var(--bd);background:var(--sf);color:var(--ink2);cursor:pointer;white-space:nowrap}
.tr-nb:hover{border-color:var(--bd2);color:var(--ink)}
.tr-nb.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tr-nb:focus-visible{outline:0;box-shadow:var(--ring)}
.tr-sec{scroll-margin-top:120px}
.tr-sec>.sech{margin-top:38px}
.tr-sec>.sech h3{font-size:22px}
.tr-sec>.sech h3:after{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--ac);margin-top:8px}
/* ---------- Trending: top story with artwork ---------- */
.tr-news{scroll-margin-top:120px;margin-top:14px}
.tr-feat3{padding:0!important;overflow:hidden;min-height:460px;justify-content:flex-end;isolation:isolate;border-radius:var(--r-l)}
.tr-feat3:before{display:none!important}
.tr-fart{position:absolute!important;inset:0;display:block;z-index:0}
.tr-fart:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 30%,rgba(11,11,12,.72) 58%,#0B0B0C 92%);pointer-events:none}
.tr-art{display:block;width:100%;height:100%;object-fit:cover}
.tr-play{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);transition:transform .15s,background .15s}
.tr-play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.tr-fart:hover .tr-play{transform:scale(1.08);background:var(--acs)}
.tr-fart:focus-visible{outline:0;box-shadow:inset 0 0 0 3px var(--acs)}
.tr-fb{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;padding:26px 28px 24px;pointer-events:none}
.tr-fb a,.tr-fb .btn{pointer-events:auto}
.tr-fb h2{color:#fff;font-size:clamp(24px,2.7vw,32px);line-height:1.15;margin:0;text-wrap:balance}
.tr-fb p{color:rgba(255,255,255,.86);margin:0;max-width:60ch}
.tr-fb .in{color:#fff}
.tr-fb .hl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:6px}
.tr-feat3 .tr-badge{background:var(--acs);color:#fff}
:root[data-theme="dark"] .tr-feat3{background:#0B0B0C!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tr-feat3{background:#0B0B0C!important}}
@media (max-width:860px){
 .tr-feat3{min-height:0}
 .tr-fart{position:relative!important;inset:auto;aspect-ratio:16/9}
 .tr-fart:after{background:linear-gradient(180deg,rgba(11,11,12,0) 60%,#0B0B0C 100%)}
 .tr-fb{padding:16px 18px 20px}
 .tr-play{width:40px;height:40px;top:12px;right:12px}}
/* ---------- Trending: rails and grids ---------- */
.tr-rail{display:grid;gap:12px}
.tr-evr{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.tr-crr{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
@media (max-width:640px){
 .tr-rail{grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -14px;padding:2px 14px 6px;scroll-padding:0 14px}
 .tr-rail::-webkit-scrollbar{display:none}
 .tr-rail>*{scroll-snap-align:start}
 .tr-evr{grid-auto-columns:82%}
 .tr-crr{grid-auto-columns:64%}}
.tr-go{font-size:12.5px;font-weight:700;color:var(--ink)!important;margin:0!important;white-space:nowrap}
/* events */
.tr-ec{display:flex;align-items:stretch;gap:0;border:1px solid var(--bd);background:var(--sf);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.tr-ec:hover{border-color:var(--bd2);box-shadow:var(--sh2);transform:translateY(-1px)}
.tr-ecd{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--sf2);padding:12px 6px;font:600 12px/1.1 var(--fb);color:var(--mu);text-transform:uppercase;letter-spacing:.06em}
.tr-ecd b{font:700 30px/1 var(--fd);color:var(--ink);letter-spacing:-.03em}
.tr-ecd small{font-size:10.5px;letter-spacing:.08em}
.tr-ec.next .tr-ecd{background:var(--blk);color:#B5B5BA}
.tr-ec.next .tr-ecd b{color:#fff}
.tr-ecb{display:flex;flex-direction:column;gap:3px;padding:12px 14px;min-width:0;flex:1}
.tr-ecb b{font:650 15.5px/1.25 var(--fd);letter-spacing:-.01em}
.tr-ecb small{font-size:12.5px;color:var(--mu);line-height:1.35}
.tr-ecb .tr-go{margin-top:auto!important;padding-top:6px}
.tr-when{align-self:flex-start;font:700 10.5px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--mu);background:var(--sf2);padding:4px 7px;border-radius:999px}
.tr-when.soon{background:var(--ac2);color:var(--ac)}
.tr-note{margin-top:10px}
/* creators */
.tr-cc{position:relative;display:flex;flex-direction:column;border:1px solid var(--bd);background:var(--sf);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.tr-cc:hover{border-color:var(--bd2);box-shadow:var(--sh2);transform:translateY(-1px)}
.tr-ccb{display:block;height:58px;background:radial-gradient(120% 140% at 85% 0%,hsl(var(--h) 45% 32% / .9),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px),#141416}
.tr-cc .tav{position:absolute;top:34px;left:14px;width:46px;height:46px;flex:none;box-shadow:0 0 0 3px var(--sf);font-size:15px}
.tr-cct{display:flex;flex-direction:column;gap:3px;padding:32px 14px 8px}
.tr-cct b{font:650 15.5px/1.2 var(--fd)}
.tr-cct small{font-size:12.5px;color:var(--mu);line-height:1.4}
.tr-ccf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;margin-top:auto;padding:8px 14px 14px}
.tr-pill{font:600 11px/1 var(--fb);color:var(--ink2);background:var(--sf2);padding:5px 8px;border-radius:999px;white-space:nowrap}
/* topics */
.tr-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.tr-tc{display:flex;flex-direction:column;border:1px solid var(--bd);background:var(--sf);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.tr-tc:hover{border-color:var(--bd2);box-shadow:var(--sh2);transform:translateY(-1px)}
.tr-tc.wide{grid-column:span 2}
.tr-tca{display:block;aspect-ratio:16/9;overflow:hidden;background:#0B0B0C}
.tr-tct{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.tr-tct b{font:650 14.5px/1.25 var(--fd)}
.tr-tct small{font-size:12px;color:var(--mu);line-height:1.35}
.tr-tc.wide .tr-tca{aspect-ratio:32/9}
@media (max-width:640px){.tr-tgrid{grid-template-columns:1fr 1fr;gap:10px}.tr-tc.wide{grid-column:span 2}.tr-tc.wide .tr-tca{aspect-ratio:16/7}.tr-tct{padding:8px 10px 10px}}
@media (max-width:640px){.tr-nav{top:51px;margin-top:12px}.tr-sec>.sech{margin-top:30px}.tr-sec>.sech h3{font-size:20px}}
.tr-wl{margin-top:8px}
.tr-wl>h3{margin-top:38px}
@media (prefers-reduced-motion:reduce){.tr-ec,.tr-cc,.tr-tc,.tr-play{transition:none}.tr-ec:hover,.tr-cc:hover,.tr-tc:hover{transform:none}}
/* ---------- Submission escape roadmap ---------- */
.sxr-hero{padding:4px 0 2px}
.sxr-hero h1{font-size:clamp(28px,4vw,38px);margin:4px 0 6px}
.sxr-hero p{max-width:72ch}
.sxr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;counter-reset:none}
.sxr-st{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 12px 14px;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf)}
.sxr-st:not(:last-child):after{content:"";position:absolute;top:29px;right:-11px;width:10px;height:2px;background:var(--bd2)}
.sxr-st b{font:650 14.5px/1.2 var(--fd)}
.sxr-st small{font-size:12px;line-height:1.4;color:var(--mu)}
.sxr-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 13px/1 var(--fd);flex:none}
.sxr-st.late{border-style:dashed}
.sxr-st.late .sxr-n,.sxr-rs.late>.sxr-n{background:var(--ac);color:var(--acx)}
.sxr-rule{margin-top:16px}
.sxr-jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.sxr-jump .chip{font-size:13px;padding:9px 13px;cursor:pointer;border:1px solid var(--bd);background:var(--sf)}
.sxr-jump .chip:hover{border-color:var(--bd2)}
.sxr-jump .chip .mu{margin-left:4px}
.sxr-cat{scroll-margin-top:80px}
.sxr-cat>.sech{margin-bottom:4px}
.sxr-cd{margin:0 0 12px;max-width:72ch}
.sxr-meta{grid-column:2;font:600 11.5px/1.3 var(--fb);color:var(--mu);letter-spacing:.01em;margin-top:4px}
.lcard:not(.vcard) .sxr-meta{grid-column:1/-1}
@media (max-width:1100px){.sxr-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.sxr-st:nth-child(4n):after{display:none}}
@media (max-width:640px){.sxr-steps{grid-template-columns:1fr;gap:0;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);overflow:hidden}
 .sxr-st{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:1px;border:0;border-radius:0;border-top:1px solid var(--bd);padding:12px 14px}
 .sxr-st:first-child{border-top:0}.sxr-st .sxr-n{grid-row:span 2}.sxr-st:after{display:none}.sxr-st.late{border-style:solid;background:var(--ac2)}}
/* escape page: stage timeline + options */
.sxr-road{list-style:none;margin:6px 0 0;padding:0;position:relative}
.sxr-road:before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--bd)}
.sxr-rs{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:6px 0 12px}
.sxr-rs>.sxr-n{position:relative;z-index:1;box-shadow:0 0 0 4px var(--bg)}
.sxr-rs b{font:650 15px/1.3 var(--fd);display:block;margin:4px 0 4px}
.sxr-rs ul{margin:0;padding-left:18px}
.sxr-rs li{margin:2px 0;font-size:14.5px}
.sxr-rs.late>div{background:var(--ac2);border-radius:12px;padding:6px 12px 8px;margin-left:-6px}
.sxr-ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:6px}
.sxr-op{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf)}
.sxr-op b{font:650 15px/1.25 var(--fd)}
.sxr-op .in{margin-top:auto;padding-top:4px;font-weight:600}
@media (max-width:640px){.sxr-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:16px -14px 0;padding:0 14px 4px}.sxr-jump::-webkit-scrollbar{display:none}.sxr-jump .chip{flex:none}}
/* ---------- Site editor v2: in-place editing ---------- */
.edfab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--fb);padding:12px 16px;border-radius:999px;border:0;background:var(--ink);color:var(--bg);box-shadow:0 10px 30px -10px rgba(0,0,0,.45);cursor:pointer}
.edfab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.edfab.dirty:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--acs);margin-left:2px}
.edfab:focus-visible{outline:0;box-shadow:var(--ring)}
@media (max-width:640px){.edfab{bottom:calc(74px + env(safe-area-inset-bottom,0px));right:12px;padding:11px 14px}}
#edx{position:fixed;top:0;right:0;bottom:0;z-index:70;width:420px;max-width:100%;display:flex;flex-direction:column;background:var(--sf);border-left:1px solid var(--bd);box-shadow:-18px 0 40px -24px rgba(0,0,0,.35)}
#edx[hidden]{display:none}
@media (min-width:1100px){body.edx-on .app{margin-right:420px}body.edx-on .edfab{right:438px}}
@media (max-width:640px){#edx{top:auto;height:72vh;width:100%;border-left:0;border-top:1px solid var(--bd);border-radius:18px 18px 0 0}body.edx-on .edfab{display:none}}
.exhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.exhd b{display:block;font:650 17px/1.25 var(--fd);margin-top:2px}
.exb{flex:1;overflow-y:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.exft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);background:var(--sf)}
.exbtn{display:flex;gap:8px}
.exdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acs);margin-right:6px;vertical-align:1px}
.exh{display:block;font:650 13px/1.2 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:8px}
.exsec,.exv{display:flex;flex-direction:column;gap:10px}
.exf{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--ink2)}
.exl{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.exf input,.exf textarea,.exva2 input,.exrf input{font:400 14px/1.45 var(--fb);color:var(--ink);background:var(--bg);border:1px solid var(--bd2);border-radius:10px;padding:8px 10px;width:100%;box-sizing:border-box;resize:vertical}
.exf input:focus,.exf textarea:focus,.exva2 input:focus{outline:0;border-color:var(--ink);box-shadow:var(--ring)}
.exf.ch input,.exf.ch textarea{border-color:var(--acs)}
.exr{font:600 12px/1 var(--fb);background:none;border:0;color:var(--ac);cursor:pointer;padding:0}
.expick{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px dashed var(--bd2);border-radius:12px}
.expick .btn{align-self:flex-start}
.exvl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.exvl li{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:10px;align-items:center}
.exvl li .th{width:80px}
.exvl b{display:block;font-size:13px;line-height:1.3}
.exvl small{display:block;font-size:12px}
.exva{display:flex;gap:2px}
.exva2{display:flex;gap:8px}
.exrl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.exrl li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px;padding:6px 8px;background:var(--sf2);border-radius:8px}
.exrl s{color:var(--mu)}
.exrl.big li{font-size:14px}
.exrf{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-top:12px}
@media (max-width:640px){.exrf{grid-template-columns:1fr}}
body.edpick #view *:not(input):not(textarea):hover,body.edpick .foot *:hover,body.edpick .topbar *:hover{outline:1px dashed var(--acs);outline-offset:2px;cursor:text}
.expk{outline:2px solid var(--acs)!important;outline-offset:2px}
#expop{position:fixed;z-index:80;width:min(420px,calc(100vw - 20px));display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--sf);border:1px solid var(--bd2);border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
#expop textarea{font:400 15px/1.45 var(--fb);color:var(--ink);background:var(--bg);border:1px solid var(--bd2);border-radius:10px;padding:8px 10px;resize:vertical}
#expop textarea:focus{outline:0;border-color:var(--ink);box-shadow:var(--ring)}
.expb{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ins-top{align-items:center!important;justify-content:flex-start!important;gap:16px}
.ins-ph{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--bd)}
img.tav-img{object-fit:cover;background:var(--sf2)}
@media (max-width:640px){body.edpick #edx{height:34vh}}
/* the lesson "What they want" box shares the .th class name with video thumbnails: undo the thumbnail look */
.px-c.th{background-image:none!important;background-color:var(--sf)!important;aspect-ratio:auto!important;overflow:visible!important;border-radius:12px}
.px-c.th::before{display:none!important;content:none!important}
/* ---------- Homepage v4: map explorer hero ---------- */
.hx4{align-items:stretch}
.hx4 .hx-l{display:flex;flex-direction:column;justify-content:center;gap:14px;min-width:0}
.hx4 .hx-l h1{margin:0}
.hx4 .hx-s{margin:0}
.hx4-prog{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;max-width:420px}
.hx4-prog i{display:block;height:100%;background:var(--acs);border-radius:99px}
.hx4-stats{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0;font-size:14px;color:#B8B8BD}
.hx4-stats b{color:#fff}
.hx4-cl{margin-top:4px}
.hx4 .hx-l .feat{max-width:520px}
.hx4-r{display:flex;flex-direction:column;min-width:0}
.hx4-x{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px 14px 12px;height:100%;box-sizing:border-box}
.hx4-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px}
.hx4-top .sm{color:#8E8E95}
.hx4-back{font:600 12.5px/1 var(--fb);color:#fff;background:rgba(255,255,255,.1);border:0;border-radius:99px;padding:7px 11px;cursor:pointer}
.hx4-back:hover{background:rgba(255,255,255,.18)}
.hx4-svg{width:100%;height:auto;display:block}
.hx4-e{stroke:rgba(255,255,255,.28);stroke-width:1.6;fill:none}
.hx4-e.in{stroke-dasharray:4 5;stroke:rgba(255,255,255,.18)}
.hx4-n{cursor:pointer;outline:none}
.hx4-n rect:first-child{fill:#1B1B1E;stroke:rgba(255,255,255,.16);stroke-width:1.2;transition:stroke .15s,fill .15s}
.hx4-n:hover rect:first-child,.hx4-n:focus-visible rect:first-child{stroke:#fff;fill:#242428}
.hx4-n.ex rect:first-child{stroke:rgba(240,78,48,.55)}
.hx4-t{font:600 14.5px var(--fb);fill:#fff}
.hx4-h{font:400 12px var(--fb);fill:#A3A3A9}
.hx4-p{fill:var(--acs)}
.hx4-m rect{fill:#fff}
.hx4-mt{font:700 19px var(--fd);fill:#0F0F10;letter-spacing:-.01em}
.hx4-mh{font:500 13px var(--fb);fill:#66666C}
.hx4-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hx4-open{background:#fff!important;color:#0F0F10!important;border-color:#fff!important}
.hx4-list,.hx4-mob{display:none}
.hx4-svgp{display:none}
@media (max-width:860px){
 .hx4-svg{display:none}
 .hx4-svgp{display:block;max-width:460px;width:100%;margin:0 auto}
 .hx4-svgp .hx4-t{font-size:18px}.hx4-svgp .hx4-h{font-size:14.5px}.hx4-svgp .hx4-mt{font-size:21px}.hx4-svgp .hx4-mh{font-size:14.5px}
 .hx4-mob{display:none}
 .hx4-mob b{font:700 20px/1.2 var(--fd);color:#fff}
 .hx4-mob span{font-size:13px;color:#9B9BA2}
 .hx4-list{display:none;grid-template-columns:1fr 1fr;gap:8px;list-style:none;margin:0;padding:0}
 .hx4-list button{width:100%;height:100%;display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:center;text-align:left;padding:10px;border-radius:12px;background:#1B1B1E;border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer}
 .hx4-list .hx4-dot{width:8px;height:8px;border-radius:50%;grid-row:span 2}
 .hx4-list b{font:600 13.5px/1.25 var(--fb)}
 .hx4-list small{font-size:11.5px;color:#9B9BA2;line-height:1.3}
 .hx4-act{justify-content:flex-start}}
/* ---------- For your size v2 ---------- */
.bd-head p{max-width:70ch}
.bd-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start;margin-top:14px}
.bd-left{position:sticky;top:76px}
.bd-ctl{display:flex;flex-direction:column;gap:16px;padding:18px}
.bd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bd-row.bd-col{flex-direction:column;align-items:stretch;gap:6px}
.bd-lab{font:600 13px/1.2 var(--fb);color:var(--ink2);display:flex;justify-content:space-between;gap:8px}
.bd-lab b{font:700 15px/1 var(--fd);color:var(--ink)}
.bd-sl{display:flex;flex-direction:column;gap:8px}
.bd-sl small{font-size:11.5px}
.bd-sl input[type=range]{width:100%;accent-color:var(--ink);height:28px;cursor:pointer}
.bd-seg{display:flex;width:100%}
.bd-seg button{flex:1;padding:8px 6px;font-size:13px}
.bd-hint{margin:0}
.bd-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bd-tt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border-radius:14px;border:1px solid var(--bd);background:var(--sf);color:var(--ink2);font:650 14.5px/1.2 var(--fd);text-align:left;cursor:pointer}
.bd-tt:hover{border-color:var(--bd2)}
.bd-tt.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bd-me{font:700 10.5px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
.bd-hero{margin-top:12px;padding:18px 20px;border-radius:var(--r);background:var(--blk);color:#fff}
.bd-hero .kick{color:#A3A3A8}
.bd-hero .ht{font:700 clamp(22px,2.6vw,28px)/1.15 var(--fd);margin:6px 0 6px;color:#fff}
.bd-hero p{margin:0 0 6px;color:rgba(255,255,255,.86);max-width:70ch}
.bd-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bd-hero .btn.p{background:#fff;color:#0F0F10;border-color:#fff}
.bd-hero .btn:not(.p){background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.bd-hero .btn.lnk{border:0;text-decoration:underline}
.bd-sub{display:flex;gap:4px;margin:16px 0 0;border-bottom:1px solid var(--bd)}
.bd-sub button{font:600 14px/1 var(--fb);padding:11px 14px;border:0;background:none;color:var(--mu);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.bd-sub button.on{color:var(--ink);border-bottom-color:var(--ac)}
.bd-pane{padding-top:14px}
.bd-h{display:block;font:650 15px/1.3 var(--fd);margin:0 0 8px}
.bd-ph{margin:-4px 0 10px}
.bd-pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:18px}
.bd-pc{display:flex;align-items:stretch;border:1px solid var(--bd);border-radius:12px;background:var(--sf);overflow:hidden}
.bd-pc.on{border-color:var(--ink)}
.bd-pgo{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer;min-width:0}
.bd-pgo b{font:600 14px/1.25 var(--fb)}
.bd-pgo small{font-size:12px;color:var(--mu)}
.bd-star{flex:0 0 44px;border:0;border-left:1px solid var(--bd);background:var(--sf2);font-size:18px;color:var(--ink);cursor:pointer}
.bd-pc.on .bd-star{background:var(--ink);color:var(--bg)}
.bd-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
@media (max-width:960px){.bd-grid{grid-template-columns:1fr}.bd-left{position:static}.bd-ctl{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bd-ctl .bd-row:first-child,.bd-hint{grid-column:1/-1}}
@media (max-width:640px){.bd-ctl{grid-template-columns:1fr}.bd-tabs{grid-template-columns:1fr 1fr}.bd-sub{overflow-x:auto}}
.bd-col2 .go{gap:8px}
.bd-col2 .chip{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 12px;font-size:13px;line-height:1.25;text-align:left;border-radius:10px;border:1px solid var(--bd);background:var(--sf)}
.bd-col2 .chip:hover{border-color:var(--bd2)}
.bd-col2 .chip small{display:block;font-size:11.5px;font-weight:500;color:var(--mu);line-height:1.3}

/* ===== Homepage v5 (home5.js) ===== */
.home5 .h5-sec{margin-top:6px}
.home5 .h5-sub{margin:-4px 0 14px;color:var(--mu);font-size:14.5px;max-width:70ch}
.home5 .h5-ctx{margin-top:16px}
/* where are you getting stuck */
.h5-stuck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.h5-st{position:relative;text-align:left;font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px 40px 16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:92px;overflow:hidden;transition:border-color .15s,box-shadow .2s,transform .15s}
.h5-st:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c)}
.h5-st b{font:650 16px/1.25 var(--fd);letter-spacing:-.01em}
.h5-st span{font-size:13.5px;color:var(--mu);line-height:1.4}
.h5-st i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--mu);transition:transform .15s,color .15s}
.h5-st:hover{border-color:var(--bd2);box-shadow:var(--sh2,0 6px 20px rgba(0,0,0,.08));transform:translateY(-1px)}
.h5-st:hover i{color:var(--ink);transform:translate(3px,-50%)}
/* routes through the map */
.h5-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.h5-rc{text-align:left;font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px 15px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0;transition:border-color .15s,box-shadow .2s,transform .15s}
.h5-rc:hover{border-color:var(--bd2);box-shadow:var(--sh2,0 6px 20px rgba(0,0,0,.08));transform:translateY(-1px)}
.h5-rk{font:600 11.5px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.h5-rc>b{font:650 18px/1.25 var(--fd);letter-spacing:-.015em}
.h5-rt{list-style:none;margin:14px 0 10px;padding:0;display:flex;align-items:center;justify-content:space-between;position:relative}
.h5-rt:before{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--bd2);border-radius:2px}
.h5-rt li{position:relative;z-index:1;display:flex;flex:0 0 auto;margin:0;padding:0}
.h5-rt li span{width:14px;height:14px;border-radius:50%;background:var(--sf);border:2px solid var(--c);box-sizing:border-box}
.h5-rt li.pt span{background:linear-gradient(90deg,var(--c) 50%,var(--sf) 50%)}
.h5-rt li.dn span{background:var(--c)}
.h5-rt li.h5-nx span{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 22%,transparent);border-color:var(--ac)}
.h5-rn{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h5-rm{font-size:13px;color:var(--mu)}
/* technique of the day + news */
.h5-two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start}
.h5-two.one{grid-template-columns:1fr}
.h5-two .feat{width:100%}
.h5-news ul{list-style:none;margin:0;padding:0;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.h5-news li+li{border-top:1px solid var(--bd)}
.h5-news button{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:0;padding:14px 16px;cursor:pointer}
.h5-news button:hover{background:var(--sf2)}
.h5-news button b{font:600 15.5px/1.3 var(--fd);letter-spacing:-.01em}
.h5-nk{font:600 11.5px/1.3 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
/* toolbox */
.h5-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.h5-tools button{display:flex;align-items:center;gap:12px;text-align:left;font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:13px 14px;cursor:pointer;min-width:0;transition:border-color .15s,background .15s}
.h5-tools button:hover{border-color:var(--bd2);background:var(--sf2)}
.h5-tools svg{flex:none;width:36px;height:36px;padding:8px;box-sizing:border-box;border-radius:10px;background:var(--sf2);stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h5-tools span{display:flex;flex-direction:column;min-width:0}
.h5-tools b{font-weight:600;font-size:14.5px}
.h5-tools small{font-size:12.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:980px){.h5-stuck{grid-template-columns:repeat(2,minmax(0,1fr))}.h5-routes{grid-template-columns:repeat(2,minmax(0,1fr))}.h5-two{grid-template-columns:1fr}}
@media (max-width:640px){.h5-stuck{gap:8px}.h5-st{padding:14px 14px 14px;min-height:0}.h5-st i{display:none}.h5-st b{font-size:15px}.h5-st span{font-size:12.5px}
 .h5-routes{grid-template-columns:1fr;gap:10px}.h5-tools{grid-template-columns:1fr 1fr;gap:8px}.h5-tools button{padding:11px 12px;gap:10px}.h5-tools svg{width:32px!important;height:32px!important;padding:7px}}

/* compact "set your rhythm" card */
.ctx.setup .ctx-b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:center}
.ctx.setup .ctx-b>.kick,.ctx.setup .ctx-b>b,.ctx.setup .ctx-b>p{grid-column:1}
.ctx.setup .ctx-b>.dchips{grid-column:2;grid-row:1 / span 3;margin:0}
.ctx.setup .ctx-b>[data-dsave]{grid-column:2;justify-self:end}
.ctx.setup b{font-size:19px}
@media (max-width:860px){.ctx.setup .ctx-b{grid-template-columns:1fr}.ctx.setup .ctx-b>.dchips,.ctx.setup .ctx-b>[data-dsave]{grid-column:1;grid-row:auto;justify-self:start}.ctx.setup .ctx-b>.dchips{margin-top:8px}}

/* FAQ: the arrow sits inside the box, on the right, and the whole row is clickable */
details.faq{padding:0!important;overflow:hidden}
details.faq>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;font-weight:600;cursor:pointer}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::marker{content:""}
details.faq>summary b{font-weight:600}
details.faq>summary:after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
details.faq[open]>summary:after{transform:rotate(-135deg) translate(-2px,-2px)}
details.faq>summary:hover{background:var(--sf2)}
details.faq>p{margin:0!important;padding:0 16px 14px;color:var(--ink2);font-size:14.5px;line-height:1.55}

/* lighter dark mode: the hero's map nodes follow the lifted surfaces */
:root[data-theme="dark"] .hx4-n rect:first-child{fill:#34343A}
:root[data-theme="dark"] .hx4-n:hover rect:first-child{fill:#3E3E45}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hx4-n rect:first-child{fill:#34343A}:root:not([data-theme="light"]) .hx4-n:hover rect:first-child{fill:#3E3E45}}
/* "Continue where you left off" in the hero: a compact horizontal card */
.hx4 .hx-l .feat{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:16px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px;color:#fff;max-width:520px;box-shadow:none}
.hx4 .hx-l .feat .th{aspect-ratio:16/9;width:100%;height:auto;border-radius:10px}
.hx4 .hx-l .feat-b{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:0;min-width:0}
.hx4 .hx-l .feat-b b{color:#fff;font:650 19px/1.2 var(--fd)}
.hx4 .hx-l .feat-b .kick,.hx4 .hx-l .feat-b .mu{color:#A3A3A8}
.hx4 .hx-l .feat-b .btn.p{background:#fff;border-color:#fff;color:#0F0F10;margin-top:6px}
.hx4 .hx-l .feat:hover{border-color:rgba(255,255,255,.3)}
@media (max-width:640px){.hx4 .hx-l .feat{grid-template-columns:120px minmax(0,1fr);gap:12px}.hx4 .hx-l .feat-b b{font-size:16.5px}}
/* "If this happens…" branches: numbered if → then cards */
.lx-plain .px-ex{counter-reset:pxe}
.lx-plain .px-ex li{counter-increment:pxe;display:grid!important;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start;padding:14px 16px!important;background:var(--sf)!important;border:1px solid var(--bd)!important;border-radius:14px!important}
.lx-plain .px-ex li:before{content:counter(pxe);grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--fb);color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.lx-plain .px-s{grid-column:2;font-weight:600;color:var(--ink);font-size:15px;line-height:1.4}
.lx-plain .px-s:before{content:"If ";color:var(--ac);font-weight:700}
.lx-plain .px-d{grid-column:2;color:var(--ink2);font-size:14.5px;line-height:1.5}
.lx-plain .px-d:before{content:"→ ";color:var(--mu);font-weight:700}
@media (max-width:640px){
 .h5-routes{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -14px;padding:2px 14px 8px;scroll-padding:0 14px;scrollbar-width:none}
 .h5-routes::-webkit-scrollbar{display:none}
 .h5-rc{scroll-snap-align:start}
 .home5 .h5-sub{font-size:13.5px}
}

/* ===== Position map v2: top vs bottom (map2.js) ===== */
#svg .band.sd-top{fill:#3B82C4;fill-opacity:.055}
#svg .band.sd-neu{fill:var(--sf2);fill-opacity:.7}
#svg .band.sd-bot{fill:#C0492B;fill-opacity:.045}
#svg .band.sd-top.b1,#svg .band.sd-bot.b1{fill-opacity:.025}
#svg .sd-div{stroke:var(--bd2);stroke-width:1.5;stroke-dasharray:6 5}
#svg .sd-tag rect{fill:var(--sf);stroke:var(--bd2)}
#svg .sd-tag text{font:700 11px var(--fb);letter-spacing:.05em;text-transform:uppercase;text-anchor:middle;dominant-baseline:central}
#svg .sd-tag.sd-top text{fill:#3B82C4}#svg .sd-tag.sd-bot text{fill:#C0492B}#svg .sd-tag.sd-neu text{fill:var(--mu)}
:root[data-theme="dark"] #svg .sd-tag.sd-top text{fill:#7FB2E5}:root[data-theme="dark"] #svg .sd-tag.sd-bot text{fill:#F08A6E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #svg .sd-tag.sd-top text{fill:#7FB2E5}:root:not([data-theme="light"]) #svg .sd-tag.sd-bot text{fill:#F08A6E}}
/* moves filter */
#svg.mv-top .e,#svg.mv-bot .e{stroke-opacity:.025}
#svg.mv-top .e.sa-top{stroke:#3B82C4;stroke-opacity:.55;stroke-width:1.6}
#svg.mv-bot .e.sa-bot{stroke:#C0492B;stroke-opacity:.5;stroke-width:1.6}
#svg.mv-top .n.s-bot,#svg.mv-bot .n.s-top{opacity:.3}
#svg.mv-top.hl .e,#svg.mv-bot.hl .e{stroke-opacity:.04}
#svg.mv-top.hl .e.out,#svg.mv-bot.hl .e.out{stroke:var(--ac);stroke-opacity:.95;stroke-width:2.2}
.mv2{display:inline-flex;align-items:center;gap:2px;background:var(--sf2);border-radius:99px;padding:3px 3px 3px 12px;margin-right:6px}
.mv2 .sm{margin-right:6px}
.mv2 button{font:600 13px/1 var(--fb);color:var(--mu);background:none;border:0;border-radius:99px;padding:8px 12px;cursor:pointer}
.mv2 button.on{background:var(--sf);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sd-legend .lg i{border:0!important;height:12px}
.sd-legend .lst{background:rgba(59,130,196,.35)}.sd-legend .lsn{background:var(--sf3)}.sd-legend .lsb{background:rgba(192,73,43,.3)}
.mi2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px}
.mi2-s{font:700 11.5px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:var(--sf2);color:var(--mu)}
.mi2-s.sd-top{color:#3B82C4}.mi2-s.sd-bot{color:#C0492B}
@media (max-width:640px){.mv2{padding-left:10px}.mv2 button{padding:7px 9px;font-size:12.5px}}


/* the map explorer shows on phones for new visitors too */
@media (max-width:900px){.hx4.hx-new .hx-r.hx4-r{display:flex}}

/* ===== Phone polish (≤640px) ===== */
@media (max-width:640px){
 /* section headings: one line, link stays beside the title */
 .sech{align-items:baseline;gap:12px}
 .sech h2,.sech h3{font-size:21px;line-height:1.2}
 .sech .in,.sech a,.sech button{white-space:nowrap;flex:none;font-size:13.5px}
 /* homepage hero: tighter type, buttons side by side */
 .hx{padding:22px 18px 18px;gap:16px}
 .hx h1,.hx-new h1{font-size:31px;line-height:1.08}
 .hx-new .hx-l>p{font-size:15.5px;line-height:1.5}
 .hx-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .hx-cta .btn{justify-content:center;text-align:center;padding:12px 10px;font-size:14.5px;white-space:normal;line-height:1.2}
 .hx4-x{padding:12px 10px 12px;border-radius:16px}
 .hx4-top .sm{font-size:12.5px}
 .hx4-act{justify-content:center}
 /* where are you stuck: compact two-column tiles */
 .h5-stuck{gap:8px}
 .h5-st{padding:13px 12px 12px;min-height:64px;justify-content:center;gap:0}
 .h5-st b{font-size:14.5px;line-height:1.25}
 .h5-st span{display:none}
 .home5 .h5-sub{display:none}
 /* training days: seven chips on one row */
 .ctx.setup .dchips{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
 .ctx.setup .dchips button{min-width:0;padding:10px 0;font-size:13px;text-align:center}
 .ctx.setup p.sm{display:none}
 .ctx.setup [data-dsave]{width:100%;justify-content:center;margin-top:10px}
 /* technique of the day: horizontal card */
 .h5-two .feat{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:start;padding:10px}
 .h5-two .feat .th{aspect-ratio:16/9;width:100%;height:auto;border-radius:10px}
 .h5-two .feat-b{padding:0;gap:2px}
 .h5-two .feat-b b{font-size:18px;line-height:1.2}
 .h5-two .feat-b .sm:not(.mu){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
 .h5-two .feat-b .btn{padding:7px 12px;font-size:13px;margin-top:6px}
 /* course cards (Learn page and elsewhere): compact rows instead of full-width thumbnails */
 .paths{gap:10px!important}
 .pcard.vcard{display:grid!important;grid-template-columns:112px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;padding:10px!important;text-align:left}
 .pcard.vcard>.th{grid-column:1;grid-row:1 / span 4;align-self:start;aspect-ratio:4/3;width:112px!important;min-width:0!important;max-width:112px;height:auto!important;border-radius:10px;margin:0!important}
 .pcard.vcard>.vmeta{grid-column:2;margin:0;font-size:12px}
 .pcard.vcard>.pct{grid-column:2;display:flex;align-items:center;gap:8px;margin:0}
 .pcard.vcard>.pct .ring{width:30px!important;height:30px!important;flex:none}
 .pcard.vcard>.pct .ring svg{width:30px;height:30px}
 .pcard.vcard>.pct b,.pcard.vcard b{font-size:15.5px;line-height:1.25}
 .pcard.vcard>p,.pcard.vcard>.sm:last-child{grid-column:2;margin:2px 0 0;font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 /* trending: event header subtitle under the title */
 .tr-sech{flex-wrap:wrap}
}

/* ===== Technique library v2 (lib2.js) ===== */
.lb2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 6px}
.lb2-stats button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:12px 14px;cursor:pointer}
.lb2-stats button:hover{border-color:var(--bd2)}
.lb2-stats b{font:700 24px/1.1 var(--fd);letter-spacing:-.02em}
.lb2-stats span{font-size:13px;color:var(--mu)}
.lb2-grp{font:650 13px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin:30px 0 4px;padding-top:14px;border-top:1px solid var(--bd)}
.lb2-pos{margin:6px 0 18px}
.lb2-pos h3{margin:14px 0 8px}
.lb2-mv{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.lb2-mvk{font:600 11.5px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-right:4px}
.lb2-chip{display:inline-flex;align-items:baseline;gap:6px;font:inherit;font-size:13px;color:var(--ink2);background:var(--sf2);border:1px solid transparent;border-radius:99px;padding:6px 11px;cursor:pointer;max-width:100%}
.lb2-chip b{font-weight:600;color:var(--ink);white-space:nowrap}
.lb2-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb2-chip:hover{border-color:var(--bd2);background:var(--sf)}
.lb2-note{margin:6px 0 4px}
@media (max-width:640px){.lb2-stats{grid-template-columns:1fr 1fr;gap:8px}.lb2-stats b{font-size:21px}.lb2-chip{font-size:12.5px;padding:6px 10px}.lb2-chip span{max-width:150px}}

/* continue / feature cards: the picture never squeezes the title out of the card */
.feat{min-width:0}
.feat.sm2{grid-template-columns:minmax(0,42%) minmax(0,1fr)!important;align-items:center}
.feat.sm2>.th{width:100%!important;min-width:0;height:auto;aspect-ratio:16/9}
.feat-b{min-width:0}
.feat-b b{overflow-wrap:anywhere}
@media (max-width:640px){.feat.sm2{grid-template-columns:minmax(0,40%) minmax(0,1fr)!important;gap:12px}}
@media (max-width:640px){.lb2-mv{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 10px;padding:2px 14px}.lb2-mv::-webkit-scrollbar{display:none}.lb2-chip,.lb2-mvk{flex:none}.lb2-chip span{max-width:none}}

/* map explorer: easier to read — dim "leads here" boxes, "you're here" label, key */
.hx4-n.hx4-in{opacity:.62}
.hx4-n.hx4-in:hover,.hx4-n.hx4-in:focus-visible{opacity:1}
.hx4-yh{font:700 10.5px var(--fb);letter-spacing:.12em;fill:var(--acs,#F04E30)}
.hx4-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12px;color:#A3A3A8;margin:2px 0 4px}
.hx4-key span{display:inline-flex;align-items:center;gap:6px}
.hx4-key i{display:inline-block;width:22px;height:0;border-top:2px solid rgba(255,255,255,.55);position:relative}
.hx4-key i.k-out:after{content:"";position:absolute;right:-1px;top:-5px;border:4px solid transparent;border-left:6px solid rgba(255,255,255,.55)}
.hx4-key i.k-in{border-top:2px dashed rgba(255,255,255,.4)}
.hx4-key .k-tap{color:#fff;font-weight:600}
@media (min-width:901px){.hx4-key .k-tap{display:none}}
@media (max-width:640px){.hx{padding:20px 12px 14px}.hx4-x{padding:12px 6px 12px}.hx4-top{padding:0 6px}}

/* library: how to play each position */
.lb2-how{background:var(--sf);border:1px solid var(--bd);border-left:3px solid var(--ac);border-radius:var(--r);padding:14px 16px;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}
.lb2-how-k{font:700 11.5px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.lb2-how-h p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.lb2-how-b{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px 24px}
.lb2-how-b b{display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mu);margin-bottom:4px}
.lb2-how-b ol,.lb2-how-b ul{margin:0;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.lb2-how-b li+li{margin-top:2px}
.lb2-if{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--ink2)}
.lb2-if span{font-weight:600;color:var(--ink)}
.lb2-how-go{align-self:flex-start;font:600 13.5px/1 var(--fb);color:var(--ink);background:var(--sf2);border:0;border-radius:99px;padding:9px 14px;cursor:pointer}
.lb2-how-go:hover{background:var(--sf3)}
@media (max-width:640px){.lb2-how{padding:12px 13px}.lb2-how-b{grid-template-columns:1fr}.lb2-how-h p{font-size:15px}}
/* research page */
.rs-lead{max-width:62ch}
.rs-jump{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;position:sticky;top:66px;z-index:5;background:var(--bg);padding:8px 0}
.rs-jump button{font:600 13px/1 var(--fb,inherit);padding:8px 13px;border-radius:999px;border:1px solid var(--bd);background:var(--sf);color:var(--ink);cursor:pointer}
.rs-jump button:hover{border-color:var(--bd2);background:var(--sf2)}
.rs-sec{margin-top:34px;scroll-margin-top:120px}
.rs-sec h2{margin:0 0 2px}
.rs-sub{margin:0 0 12px;font-size:14px}
.rs-stat{border-left:1px solid var(--bd)!important;display:flex;flex-direction:column}
.rs-stat .big{color:var(--ink)!important}
.rs-stat .src{margin-top:auto;padding-top:8px}
.rs-take{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:var(--sf2);border-left:3px solid var(--ac)}
.rs-take b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin-bottom:4px}
.rs-take p{margin:0;max-width:72ch}
.rs-list li{padding:7px 0}
@media(max-width:600px){.rs-jump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.rs-jump button{flex:none}.rs-sec{margin-top:26px}}
/* footer section links */
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 24px;margin:18px 0 20px;max-width:760px}
.foot-nav b{display:block;font:600 11.5px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.foot-nav a{display:block;font-size:14px;padding:3px 0;text-decoration:none!important;cursor:pointer}
.foot-nav a:hover{color:var(--ink)!important}
@media(max-width:600px){.foot-nav{grid-template-columns:1fr 1fr}.foot-nav a{padding:6px 0}}
/* keyboard focus is always visible */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:6px}
/* map: each box names its kind of position; the legend says what the colours mean */
.hx4-g{font:700 9.5px var(--fb);letter-spacing:.09em}
.hx4-gm{font-size:10px}
.hx4-svgp .hx4-g{font-size:12px}
.hx4-gk{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12px;color:#C9C9CE;margin:0 0 6px}
.hx4-gk span{display:inline-flex;align-items:center;gap:6px}
.hx4-gk i{width:9px;height:9px;border-radius:3px;display:inline-block}
/* trending topics: real photos under the topic word */
.tr-ph{position:relative;display:block;width:100%;height:100%;background:#0B0B0C}
.tr-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.02);transition:transform .35s ease;filter:saturate(.9)}
.tr-ph:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.15) 0%,rgba(10,10,12,.35) 45%,rgba(10,10,12,.86) 100%)}
.tr-phw{position:absolute;left:14px;right:14px;bottom:11px;z-index:1;color:#fff;font:800 clamp(20px,2.4vw,30px)/1.02 var(--fb);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.tr-phw small{display:block;font:700 10px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:6px}
.tr-tc.wide .tr-phw{font-size:clamp(26px,3.4vw,44px)}
.tr-tc:hover .tr-ph img{transform:scale(1.07)}
@media (max-width:640px){.tr-phw{font-size:19px;left:10px;bottom:9px}.tr-tc.wide .tr-phw{font-size:26px}}
/* Training tools page */
.nv4-lead{max-width:60ch;margin:-4px 0 18px}
.nv4-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.nv4-tool{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px;border:1px solid var(--bd);background:var(--sf);border-radius:var(--r,14px);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.nv4-tool:hover{border-color:var(--bd2);background:var(--sf2)}
.nv4-tool svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.nv4-tool b{display:block;font-size:15.5px;margin-bottom:3px}
.nv4-tool b em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ac);margin-left:6px}
.nv4-tool small{color:var(--mu);font-size:13.5px;line-height:1.4}
.foot-nav{grid-template-columns:repeat(6,minmax(0,1fr));max-width:980px}
@media(max-width:900px){.foot-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.foot-nav{grid-template-columns:1fr 1fr}}
/* Positions page: the position guide */
.pos5-lead{max-width:64ch}
.pos5-jump{margin-top:6px}
.pos5-g{scroll-margin-top:120px}
.pos5-pc{font-size:12px;font-weight:600;color:var(--ac);margin-left:6px}
/* ===== Site editor v3: dense layout ===== */
.ed3{display:grid;grid-template-columns:196px minmax(0,1fr);gap:0 22px;align-items:start}
.ed3>*{grid-column:2}
.ed3>.ed-h{grid-column:1/-1;position:sticky;top:66px;z-index:6;background:var(--bg);padding:10px 0 10px;margin:0 0 6px;border-bottom:1px solid var(--bd);align-items:center}
.ed3>.ed-h .kick{display:none}
.ed3>.ed-h h1{font-size:24px;margin:0}
.ed3>.ed-h p{margin:2px 0 0;font-size:12.5px;max-width:70ch}
.ed3>.ed3-nav{grid-column:1;grid-row:2/span 40;position:sticky;top:140px;margin:6px 0 0;display:flex;flex-direction:column;gap:2px;flex-wrap:nowrap;overflow:visible;max-height:calc(100vh - 160px);overflow-y:auto}
.ed3-tg{font:700 10.5px/1 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin:12px 8px 4px}
.ed3-tg:first-child{margin-top:4px}
.ed3-grp{display:flex;flex-direction:column;gap:1px}
.ed3 .ed3-nav button{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 10px;border-radius:8px;font-size:13.5px;color:var(--ink);width:100%}
.ed3 .ed3-nav button:hover{background:var(--sf2)}
.ed3 .ed3-nav button.on{background:var(--ink);color:var(--bg);font-weight:600}
.ed3 .box.ed{padding:12px 14px;margin:6px 0 10px;gap:8px}
.ed3 .ed label,.ed3 label{font-size:11.5px;font-weight:600;color:var(--mu);gap:3px;text-transform:none}
.ed3 .ed input:not([type=checkbox]):not([type=file]),.ed3 .ed select,.ed3 .ed textarea,.ed3 input:not([type=checkbox]):not([type=file]),.ed3 select,.ed3 textarea{padding:6px 9px!important;font-size:13.5px!important;border-radius:7px!important;min-height:0!important;line-height:1.4}
.ed3 textarea{min-height:52px}
.ed3 .btn{padding:6px 12px;font-size:13px;min-height:0}
.ed3 .ic{width:26px;height:26px;font-size:11px}
/* videos: one line each */
.ed3 .ed-vl{gap:4px}
.ed3 .ed-v{padding:5px 8px;gap:10px;border-radius:9px}
.ed3 .ed-v .th.sm{flex:0 0 64px;width:64px;height:36px}
.ed3 .ed-vf{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.ed3 .ed-vf small{white-space:nowrap;font-size:11.5px}
.ed3 .ed-va{flex-direction:row;gap:3px}
.ed3 .ed-add{display:grid;grid-template-columns:1.4fr 1.4fr 1fr auto;gap:8px;align-items:end;padding-top:10px}
.ed3 .ed-add>b{grid-column:1/-1;font-size:13px}
.ed3 .ed-add>#edaddm{grid-column:1/-1}
/* headlines: collapsed cards */
.ed3 .ed3-hd{padding:0;gap:0;border-radius:9px}
.ed3 .ed3-hd>summary{display:flex;gap:12px;align-items:baseline;padding:8px 12px;cursor:pointer;list-style:none;font-size:13.5px}
.ed3 .ed3-hd>summary::-webkit-details-marker{display:none}
.ed3 .ed3-hd>summary:before{content:"▸";color:var(--mu);font-size:11px}
.ed3 .ed3-hd[open]>summary:before{content:"▾"}
.ed3-hdd{color:var(--mu);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.ed3-hdt{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed3 .ed3-hd[open]{padding:0 12px 10px;display:flex;flex-direction:column;gap:7px}
.ed3 .ed3-hd[open]>summary{padding:8px 0}
.ed3 .pf-row{gap:8px}
.ed3 .ed-fq{gap:6px}
@media (max-width:900px){
 .ed3{display:block}
 .ed3>.ed-h{top:58px}
 .ed3>.ed3-nav{position:static;max-height:none;flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:6px;scrollbar-width:none}
 .ed3-tg{display:none}.ed3-grp{flex-direction:row;gap:4px}
 .ed3 .ed3-nav button{width:auto;white-space:nowrap;border:1px solid var(--bd)}
 .ed3 .ed-vf{grid-template-columns:1fr}.ed3 .ed-add{grid-template-columns:1fr}
}
.ed3 .ed-vf input{width:100%;min-width:0}
.ed3[data-tab^="x-"] .box.ed{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:start}
.ed3[data-tab^="x-"] .box.ed>*{grid-column:1/-1}
.ed3[data-tab^="x-"] .box.ed>label:has(textarea){grid-column:auto}
@media (max-width:900px){.ed3 .ed-v{flex-wrap:wrap}.ed3 .ed-vf{flex:1 1 calc(100% - 80px)}.ed3 .ed-va{margin-left:auto}.ed3[data-tab^="x-"] .box.ed{grid-template-columns:1fr}}
/* Map in the top bar: text tab on desktop, icon button on phones */
.nv4-mapb{display:none}
@media (max-width:900px){.nv4-mapb{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:none;width:44px;height:40px;border:1px solid var(--bd);border-radius:12px;background:var(--sf);color:var(--ink);cursor:pointer;font:600 9.5px/1 var(--fb);padding:0}
 .nv4-mapb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
 .nv4-mapb.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}}
@media (max-width:900px){.nv4-mapb{width:40px}.nv4-mapb span{display:none}.nv4-mapb svg{width:19px;height:19px}}
@media (max-width:900px){#q{padding-right:8px!important;min-width:0}}
/* ===== phones and tablets: the same text tabs as the website, under the header ===== */
@media (max-width:1020px){
 .topbar{flex-wrap:wrap;row-gap:6px}
 .topbar .tnav{display:flex!important;order:10;flex:1 0 100%;margin:0 -12px -8px;padding:2px 12px 7px;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 92%,transparent)}
 .topbar .tnav::-webkit-scrollbar{display:none}
 .topbar .tnav button{flex:none;white-space:nowrap;padding:7px 11px!important;font-size:14px;border-radius:999px}
 .tabs,.nv4-mapb{display:none!important}
 .foot{padding-bottom:36px}
 #toast{bottom:24px}
 .edfab{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 .tools,.rs-jump,.ed3>.ed-h,.tr-nav,.lesson .chaps{top:var(--tbh,104px)!important}
 .bd-left,.ls-side,.lsx>.ls-side{top:calc(var(--tbh,104px) + 12px)!important}
}
@media (max-width:420px){.topbar .tnav button{padding:6px 9px!important;font-size:13.5px}}
/* phone homepage: keep the short descriptions the website shows */
@media (max-width:640px){
 .h5-st span{display:block!important;font-size:12.5px;margin-top:2px}
 .home5 .h5-sub{display:block!important;font-size:13.5px}
 .h5-st{justify-content:flex-start!important}
}
/* ===== Study guides ===== */
.gd-lead,.gd-intro{max-width:66ch}
.gd-intro{font-size:17px;line-height:1.55;margin:4px 0 12px}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:8px}
.gd-card{display:flex;flex-direction:column;gap:5px;text-align:left;font:inherit;color:var(--ink);background:var(--sf);border:1px solid var(--bd);border-radius:var(--r,14px);padding:15px 16px;cursor:pointer;transition:border-color .15s,transform .15s}
.gd-card:hover{border-color:var(--bd2);transform:translateY(-1px)}
.gd-card b{font-size:16px}.gd-card span{font-size:13.5px;color:var(--mu);line-height:1.45}.gd-card small{font-size:12px;color:var(--mu);margin-top:auto;padding-top:4px;font-weight:600}
.gd-rel{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.gd-note{max-width:72ch}
.gd-sec{margin-top:26px;scroll-margin-top:calc(var(--tbh,66px) + 60px)}
.gd-sec h2{font-size:20px;margin:0 0 8px}
.gd-list{margin:0;padding:0 0 0 0;list-style:none;counter-reset:none;border:1px solid var(--bd);border-radius:12px;background:var(--sf);overflow:hidden}
.gd-list li{border-top:1px solid var(--bd)}.gd-list li:first-child{border-top:0}
.gd-list a{display:flex;gap:12px;align-items:baseline;justify-content:space-between;padding:10px 14px;color:var(--ink);text-decoration:none}
.gd-list a:hover{background:var(--sf2)}
.gd-t{font-size:14.5px;line-height:1.4}.gd-yt{flex:none;font-size:12px;color:var(--mu);font-weight:600}
.gd-more{margin-top:34px}
.gd-link{border:1px solid var(--bd);background:var(--sf);border-radius:12px;padding:12px 14px;margin:10px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.gd-link b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.gd-link button{font-size:14.5px;text-align:left}
.gd-row{display:flex;align-items:center;gap:8px;padding-right:10px}
.gd-row>a{flex:1;min-width:0}
.gd-t small{display:block;font-size:12px;color:var(--mu);margin-top:1px}
.gd-k{flex:none;font-size:11.5px;padding:3px 8px}
.gd-vl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.gd-vl a{color:var(--ink);text-decoration:none}.gd-vl a:hover{text-decoration:underline}
.gd-link details summary{cursor:pointer;font-size:13px;margin-top:4px;list-style:none}
.gd-pos{margin:6px 0 10px}
@media(max-width:600px){.gd-row{flex-wrap:wrap;padding:0 10px 8px 0}.gd-k{margin-left:14px}}
/* five primary categories fit on one line on phones */
@media (max-width:430px){#tnav{padding-left:4px;padding-right:4px;gap:0;justify-content:space-between}#tnav.tnav button{font-size:11.5px!important;padding:6px 4px!important;letter-spacing:-.01em}}
@media (max-width:400px){#tnav{padding-left:2px;padding-right:2px}#tnav.tnav button{font-size:10.6px!important;padding:6px 2px!important;letter-spacing:-.015em}}
@media (max-width:370px){#tnav.tnav button{font-size:10.5px!important;padding:6px 2px!important}}
/* ---------- Seminars library (seminars.tpl.js) ---------- */
.sem-lead{max-width:62ch;margin:6px 0 18px}
.sem-tools{display:grid;gap:12px;margin:0 0 14px}
.sem-q input{width:100%;font:500 15px/1.3 var(--fb);padding:12px 14px;border-radius:12px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink)}
.sem-q input:focus{outline:none;box-shadow:var(--ring);border-color:var(--ac)}
.sem-fs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.sem-f{display:grid;gap:4px;font:600 11.5px/1.2 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.sem-f select{font:500 14px/1.2 var(--fb);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--sf);border:1px solid var(--bd2);border-radius:10px;padding:9px 10px;min-width:0;width:100%}
.sem-count{margin:4px 0 12px;font-size:13.5px;color:var(--mu)}
.sem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.sem-card,.sem-row{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.sem-th{position:relative;display:block;aspect-ratio:16/9;background:var(--sf3);cursor:pointer;overflow:hidden}
.sem-th img{width:100%;height:100%;object-fit:cover;display:block}
.sem-pl{position:absolute;inset:auto auto 10px 10px;width:38px;height:38px;border-radius:50%;background:rgba(15,15,16,.78);display:grid;place-items:center}
.sem-pl svg{width:18px;height:18px;fill:#fff}
.sem-th:hover .sem-pl,.sem-th:focus-visible .sem-pl{background:var(--ac)}
.sem-if{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.sem-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.sem-m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font:600 11.5px/1.2 var(--fb)}
.sem-ty{color:var(--ac);text-transform:uppercase;letter-spacing:.06em}
.sem-tag{padding:3px 7px;border-radius:999px;background:var(--sf2);color:var(--ink2)}
.sem-su{color:var(--mu)}
.sem-t{font:650 16.5px/1.25 var(--fd);letter-spacing:-.01em;margin:0;overflow-wrap:anywhere}
.sem-by{margin:0;font-size:13.5px;font-weight:600}
.sem-s{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.sem-why{margin:0;font-size:13px;color:var(--ink);border-left:3px solid var(--ac);padding-left:8px}
.sem-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sem-chip{font:600 12px/1 var(--fb);padding:6px 9px;border-radius:999px;border:1px solid var(--bd);background:var(--sf2);color:var(--ink2);cursor:pointer}
.sem-chip:hover{border-color:var(--bd2);color:var(--ink)}
.sem-more{font-size:12px;color:var(--mu);align-self:center}
.sem-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:6px}
.sem-yt{font:600 13px/1 var(--fb);color:var(--mu)}
.sem-yt:hover{color:var(--ink)}
.sem-note{margin-top:22px;max-width:70ch}
.sem-none{padding:20px 0}
.sem-sh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.sem-rows{display:grid;gap:12px;margin-top:10px}
.sem-row{flex-direction:row}
.sem-row .sem-th,.sem-row .sem-if{width:260px;flex:none;aspect-ratio:16/9;height:auto;align-self:flex-start}
@media (max-width:640px){.sem-row{flex-direction:row;flex-wrap:wrap}.sem-row .sem-th{width:116px;border-radius:0 0 10px 0}.sem-row .sem-if{width:100%}.sem-row .sem-b{padding:10px 12px;min-width:0;flex:1 1 180px}.sem-row .sem-s{display:none}.sem-row .sem-t{font-size:15px}.sem-row .sem-act .btn{padding:7px 12px;min-height:0;font-size:13px}.sem-grid{grid-template-columns:1fr}.sem-fs{grid-template-columns:1fr 1fr}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- Knowledge base layer (kb.js): search, connections, positions index, home ---------- */
.qr{max-height:min(74vh,600px)}
.qr .qg{text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:10px 10px 4px}
.qi{gap:1px}
.qi .qt{font-weight:600}
.qi mark{background:none;color:var(--ac);font-weight:700}
.qi .qk{font-style:normal;font:600 10.5px/1 var(--fb);text-transform:uppercase;letter-spacing:.06em;color:var(--mu);margin-left:6px}
.qbest{background:var(--sf2)}
.kb-rel{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.kb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 10px 6px}
.kb-chip{font:600 12.5px/1.2 var(--fb);padding:7px 10px;border-radius:999px;border:1px solid var(--bd);background:var(--sf);color:var(--ink2);cursor:pointer;text-align:left}
.kb-chip:hover,.kb-chip:focus-visible{border-color:var(--bd2);color:var(--ink);background:var(--sf2)}
.kb-chip.kb-q{background:var(--sf2)}
.kb-tip{font-size:12.5px;color:var(--mu);padding:6px 10px 8px;margin:0}
.kb-empty .qg:first-child{padding-top:6px}
.kb-con .kb-dl{display:grid;gap:10px;margin:10px 0 0}
.kb-row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:start}
.kb-row dt{font:600 11.5px/1.3 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mu);padding-top:8px}
.kb-row dd{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.kb-con .kb-chip{padding:6px 10px}
.kb-sem{border-color:var(--ac);color:var(--ac)}
@media (max-width:640px){.kb-row{grid-template-columns:1fr;gap:4px}.kb-row dt{padding-top:0}}
.kb-pt{display:flex;gap:14px;margin:4px 0 8px}
.kb-pwrap{border:1px solid var(--bd);border-radius:14px;background:var(--sf);margin:8px 0;overflow:hidden}
a.kb-pc{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:13px 14px 10px;color:var(--ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a.kb-pc .kb-pn,a.kb-pc .kb-ps,a.kb-pc .kb-pm{grid-column:1}
.kb-pn{font:650 17px/1.25 var(--fd);margin:0}
.kb-ps{font-size:13.5px;color:var(--ink2);line-height:1.4}
.kb-pm{font-size:12.5px;color:var(--mu)}
.kb-open{grid-column:2;grid-row:1/4;font:600 13px/1 var(--fb);border:1px solid var(--bd2);background:var(--sf);color:var(--ink);border-radius:999px;padding:9px 13px;white-space:nowrap;transition:background .15s,border-color .15s}
a.kb-pc:hover{background:var(--sf2)}
a.kb-pc:hover .kb-open{border-color:var(--ink2)}
a.kb-pc:active{background:var(--sf3)}
a.kb-pc:focus-visible{outline:2px solid var(--ac);outline-offset:-2px;border-radius:14px}
details.kb-pd{border-top:1px solid var(--bd);margin:0}
details.kb-pd>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 14px;font:600 12.5px/1.2 var(--fb);color:var(--mu)}
details.kb-pd>summary:hover{color:var(--ink)}
details.kb-pd>summary:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
details.kb-pd>summary::-webkit-details-marker{display:none}
details.kb-pd>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 2px;transition:transform .15s}
details.kb-pd[open]>summary::after{transform:rotate(225deg);margin:3px 0 0 2px}
details.kb-pd>*:not(summary){margin-left:14px;margin-right:14px}
details.kb-pd>*:last-child{margin-bottom:14px}
@media (max-width:640px){a.kb-pc{grid-template-columns:1fr}.kb-open{grid-row:auto;grid-column:1;justify-self:start;margin-top:8px}}
.kb-home{margin:18px 0 6px;display:grid;gap:10px}
.kb-launch{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:500 16px/1.3 var(--fb);color:var(--mu);background:var(--sf);border:1px solid var(--bd2);border-radius:14px;padding:15px 16px;cursor:text}
.kb-launch:hover{border-color:var(--ink2)}
.kb-launch svg{width:20px;height:20px;stroke:var(--mu);fill:none;stroke-width:2;flex:none}
.kb-launch span{flex:1;min-width:0}
.kb-launch kbd{font:12px var(--fb);border:1px solid var(--bd);border-radius:6px;padding:1px 7px;background:var(--sf2)}
@media (max-width:640px){.kb-launch kbd{display:none}.kb-launch{font-size:15px;padding:13px 14px}}
.kb-home .kb-chips{padding:0}
.kb-hp{align-items:center}
.kb-hsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.kb-hs{display:flex;gap:12px;align-items:center;text-align:left;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:10px;cursor:pointer;color:var(--ink)}
.kb-hs img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--sf3);flex:none}
.kb-hs b{display:block;font:650 14.5px/1.3 var(--fd)}
.kb-hs small{color:var(--mu);font-size:12.5px}
.sem-flash{outline:3px solid var(--ac);outline-offset:2px;transition:outline-color 1s}
.qr .kb-chip{width:auto;display:inline-flex;align-items:center;min-height:0;flex:none}
.qr .kb-chips,.qr .kb-rel{display:flex;flex-wrap:wrap}
.qi small{display:block;overflow:hidden;text-overflow:ellipsis}
.kb-pt{gap:8px}
@media (max-width:640px){.qr{position:fixed;left:8px;right:8px;top:calc(var(--tbh,96px) + 4px);max-height:calc(100vh - var(--tbh,96px) - 16px);z-index:60}}
/* ---------- hub.js: Positional Map explorer ---------- */
.mx-lead{max-width:66ch;margin:6px 0 14px}
.mx-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--bd);border-radius:999px;background:var(--sf);margin:0 0 16px}
.mx-tabs button{font:600 14px/1 var(--fb);border:0;background:none;color:var(--mu);padding:9px 16px;border-radius:999px;cursor:pointer;min-height:38px}
.mx-tabs button.on{background:var(--ink);color:var(--bg)}
.mx-bar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-bottom:14px}
.mx-pick{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.mx-pick select{font:600 15px/1.2 var(--fb);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--sf);border:1px solid var(--bd2);border-radius:10px;padding:9px 12px;max-width:260px}
.mx-trail{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;min-width:0}
.mx-crumb,.mx-clear{font:600 13px/1 var(--fb);border:0;background:none;color:var(--ink2);padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bd2)}
.mx-clear{color:var(--mu);margin-left:6px}
.mx-plan{color:var(--ink);min-height:44px;margin-left:10px}
.mx-sep{color:var(--mu)}
.mx-grid{display:grid;grid-template-columns:1fr minmax(300px,1.05fr) 1fr;gap:16px;align-items:start}
.mx-col{min-width:0}
.mx-h{font:650 16px/1.2 var(--fd);margin:0 0 10px;display:flex;gap:8px;align-items:baseline}
.mx-h .mu{font:600 13px var(--fb)}
.mx-g{margin:0 0 12px}
.mx-t{display:block;font:600 11px/1.3 var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--mu);margin:0 0 6px}
.mx-g ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mx-mv{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink);min-height:48px}
.mx-mv:hover,.mx-mv:focus-visible{border-color:var(--ink2);background:var(--sf2)}
.mx-mv span{display:grid;gap:2px;flex:1;min-width:0}
.mx-mv b{font:650 14.5px/1.25 var(--fd)}
.mx-mv small{font-size:12.5px;color:var(--mu);line-height:1.35}
.mx-arr{color:var(--mu);flex:none}
.mx-dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.mx-card{position:sticky;top:calc(var(--tbh,64px) + 12px);background:var(--sf);border:1px solid var(--bd2);border-radius:var(--r);padding:18px;display:grid;gap:10px}
.mx-card>.mx-dot{display:none}
.mx-side{justify-self:start;font:600 11px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--sf2);color:var(--ink2)}
.mx-top{background:var(--okbg);color:var(--ok)}.mx-bot{background:var(--redbg);color:var(--red)}
.mx-grp{font-size:12.5px;color:var(--mu);margin-top:-4px}
.mx-name{font:700 26px/1.1 var(--fd);letter-spacing:-.02em;margin:0}
.mx-sum{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.mx-keys{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5}
.mx-stats{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--mu)}
.mx-stats b{color:var(--ink);font-size:14px}
.mx-open{width:100%;justify-content:center}
.mx-other,.mx-semlink{font:600 13.5px/1.2 var(--fb);background:none;border:1px solid var(--bd);border-radius:999px;padding:9px 12px;cursor:pointer;color:var(--ink);text-align:center}
.mx-semlink{border-color:var(--ac);color:var(--ac)}
.mx-sub .mx-chips{display:flex;flex-wrap:wrap;gap:6px}
.mx-note{margin-top:14px;max-width:80ch}
@media (max-width:980px){.mx-grid{grid-template-columns:1fr 1fr}.mx-cur{grid-column:1/-1;order:-1}.mx-card{position:static}}
@media (max-width:640px){.mx-grid{grid-template-columns:1fr}.mx-out{order:0}.mx-in{order:1}.mx-pick{width:100%}.mx-pick select{flex:1;max-width:none}.mx-name{font-size:23px}}
/* ---------- hub.js: position page hub ---------- */
.hub-toc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;position:sticky;top:var(--tbh,64px);z-index:5;background:var(--bg);padding:10px 0;margin:0 0 6px;border-bottom:1px solid var(--bd)}
.hub-tl{font:600 11px/1 var(--fb);letter-spacing:.07em;text-transform:uppercase;color:var(--mu);margin-right:4px}
.hub-tc{font:600 13px/1 var(--fb);color:var(--ink2);padding:7px 10px;border-radius:999px;background:var(--sf2);text-decoration:none}
.hub-tc:hover{color:var(--ink);background:var(--sf3)}
.hub-back{font:600 13px/1 var(--fb);border:1px solid var(--ac);color:var(--ac);background:var(--sf);border-radius:999px;padding:7px 10px;cursor:pointer;margin-right:6px}
@media (max-width:640px){.hub-toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 0}.hub-toc::-webkit-scrollbar{display:none}.hub-tc,.hub-back,.hub-tl{flex:none}}
.hub-rem{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.hub-rem>*{margin:0}
@media (max-width:640px){.hub-rem{grid-template-columns:1fr}}
.hub-map{margin:10px 0 0}
.lx-body>section,.lx-body>details{scroll-margin-top:calc(var(--tbh,64px) + 56px)}
/* ---------- hub.js: homepage ---------- */
.h6-search{margin:18px 0 14px;max-width:560px}
.h6-lib{margin:28px 0 8px}
.h6-lead{margin:2px 0 14px;max-width:70ch}
.h6-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.h6-cat{background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:14px;border-top:3px solid var(--gc);display:grid;gap:10px;align-content:start}
.h6-ch{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);text-align:left}
.h6-ch b{font:650 16px/1.2 var(--fd)}
.h6-ch span{font-size:12.5px;color:var(--mu);white-space:nowrap}
.h6-ps{display:flex;flex-wrap:wrap;gap:6px}
.h6-p{font:600 12.5px/1.2 var(--fb);border:1px solid var(--bd);background:var(--sf2);color:var(--ink2);border-radius:999px;padding:6px 10px;cursor:pointer}
.h6-p:hover{color:var(--ink);border-color:var(--bd2)}
.h6-start{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:14px;padding:12px 14px;border:1px dashed var(--bd2);border-radius:14px}
.h6-sl{font-size:14px;font-weight:600}
.h6-sp{display:flex;flex-wrap:wrap;gap:6px}
.h6-sp .kb-chip{padding:6px 10px}
@media (max-width:1100px){.h6-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.h6-grid{grid-template-columns:1fr}.h6-search{margin:14px 0 12px}}
.hub-escpos{margin:8px 0 22px}
.hub-escpos h2,.hub-esh{font:650 20px/1.2 var(--fd);margin:0 0 6px}
.hub-epg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.hub-ep{display:grid;gap:4px;text-align:left;background:var(--sf);border:1px solid var(--bd);border-left:3px solid #C0492B;border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink)}
.hub-ep:hover{border-color:var(--ink2);border-left-color:#C0492B}
.hub-ep b{font:650 15px/1.25 var(--fd)}
.hub-ep small{font-size:12.5px;color:var(--ink2);line-height:1.4}
.hub-ep span{font:600 12.5px/1.2 var(--fb);color:var(--mu)}
.hub-esh{margin-top:6px}
.hub-elead{max-width:66ch;margin:4px 0 16px}
@media (max-width:640px){.hub-epg{grid-template-columns:1fr 1fr;gap:8px}.hub-ep small{display:none}.hub-ep{padding:10px 12px}.hub-ep b{font-size:14px}}
/* ---------- One click opens it: whole-card targets + clear hover / focus / pressed states ---------- */
/* stretched primary action: the card's main control covers the card; secondary controls sit above it */
.sem-card,.sem-row,.h6-cat,.lr{position:relative}
.sem-card .sem-watch::after,.sem-row .sem-watch::after,.h6-cat .h6-ch::after,.lr>a.in:first-of-type::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.sem-card .sem-th,.sem-row .sem-th,.sem-chip,.sem-yt,.sem-if,.h6-p,.lr .pts,.lr a.in:not(:first-of-type),.lr button{position:relative;z-index:2}
.sem-card:has(.sem-watch),.sem-row:has(.sem-watch),.h6-cat,.lr{cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.sem-card:has(.sem-watch):hover,.sem-row:has(.sem-watch):hover,.h6-cat:hover,.lr:hover{border-color:var(--bd2);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.sem-card:has(.sem-watch:active),.sem-row:has(.sem-watch:active),.h6-cat:has(.h6-ch:active),.lr:has(>a.in:first-of-type:active){transform:scale(.995)}
.h6-cat:hover .h6-ch b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bd2)}
.sem-card:has(.sem-watch:focus-visible),.sem-row:has(.sem-watch:focus-visible),.h6-cat:has(.h6-ch:focus-visible),.lr:has(>a.in:first-of-type:focus-visible){outline:2px solid var(--ac);outline-offset:2px}
.sem-watch:focus-visible,.h6-ch:focus-visible,.lr>a.in:first-of-type:focus-visible{outline:none}
/* card-shaped buttons: lesson cards, technique rows, next-lesson, playlist rows, map moves, home shortcuts */
.lcard,.tq,.nx,.pl-row,.mx-mv,.kb-hs,.hub-ep>*,.h6-p,.pcard,.tcard{transition:background .15s,border-color .15s,box-shadow .15s,transform .08s;-webkit-tap-highlight-color:transparent}
.nx:hover,.kb-hs:hover,.pl-row:hover{background:var(--sf2)}
.lcard:active,.tq:active,.nx:active,.pl-row:active,.mx-mv:active,.kb-hs:active,.hub-ep>*:active,.h6-p:active,.pcard:active,.tcard:active,a.kb-pc:active{transform:scale(.99)}
.lcard:focus-visible,.tq:focus-visible,.nx:focus-visible,.pl-row:focus-visible,.mx-mv:focus-visible,.kb-hs:focus-visible,.hub-ep>*:focus-visible,.h6-p:focus-visible,.pcard:focus-visible,.tcard:focus-visible,.sem-chip:focus-visible,.kb-chip:focus-visible,.chip:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lcard:active,.tq:active,.nx:active,.pl-row:active,.mx-mv:active,.kb-hs:active,.hub-ep>*:active,.h6-p:active,.pcard:active,.tcard:active,a.kb-pc:active,.sem-card:has(.sem-watch:active),.sem-row:has(.sem-watch:active),.h6-cat:has(.h6-ch:active),.lr:has(>a.in:first-of-type:active){transform:none}}
/* ---------- Phone bottom navigation: the five primary destinations, Positions in the centre ---------- */
@media (max-width:760px){
 :root{--tabh:60px}
 .topbar .tnav{display:none!important}
 .nv4-mapb{display:none!important}
 .tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:5px max(4px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--sf) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--bd);box-sizing:border-box;max-width:100vw}
 .tabs .tb{position:relative;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:5px 2px 3px;margin:0;border:0;border-radius:12px;background:none;
  color:var(--mu);font:600 10.5px/1.15 var(--fb);letter-spacing:-.01em;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
 .tabs .tb svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .tabs .tb-l{display:block;max-width:100%;overflow-wrap:normal;word-break:keep-all;hyphens:none}
 .tabs .tb:hover{color:var(--ink)}
 .tabs .tb:active{background:var(--sf2)}
 .tabs .tb:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
 .tabs .tb.on{color:var(--ink)}
 .tabs .tb.on svg{stroke:var(--ac);stroke-width:2.2}
 .tabs .tb.on:before{content:"";position:absolute;top:-5px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--ac)}
 body{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
 .foot{padding-bottom:28px!important}
 #toast{bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px))!important}
 .edfab{bottom:calc(var(--tabh) + 14px + env(safe-area-inset-bottom,0px))!important}
 .scrim.open~.tabs,.side.open~.tabs{z-index:40}
}
@media (max-width:359px){.tabs .tb{font-size:9.8px;letter-spacing:-.02em}.tabs .tb svg{width:21px;height:21px}}
/* ---------- Position images (pimg.js): one consistent frame; labelled placeholder until a checked image exists ---------- */
.pimg{margin:4px 0 14px;display:grid;gap:6px}
.pimg-f{display:block;aspect-ratio:4/3;width:100%;background:var(--sf2);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.pimg-f img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.pimg figcaption{font-size:12px;color:var(--mu);line-height:1.4}
.pimg figcaption span+span::before{content:" · "}
.pimg-side{color:var(--ink2);font-weight:600}
.pimg.pimg-ph{grid-template-columns:44px 1fr;align-items:center;gap:12px;padding:10px 12px;border:1px dashed var(--bd2);border-radius:12px;background:var(--sf)}
.pimg-ph .pimg-f{aspect-ratio:1;border:0;background:var(--sf2);border-radius:10px;display:grid;place-items:center}
.pimg-ph .pimg-f svg{width:22px;height:22px;fill:none;stroke:var(--mu);stroke-width:1.7;stroke-linejoin:round}
.pimg-ph figcaption{display:grid;gap:1px}
.pimg-ph figcaption b{font:650 13.5px/1.25 var(--fb);color:var(--ink)}
.pimg-ph figcaption span::before{content:none!important}
@media (min-width:761px){.hub-ess>.pimg{float:right;width:min(300px,38%);margin:2px 0 12px 22px}.hub-ess>.pimg.pimg-ph{width:min(280px,36%)}.hub-ess::after{content:"";display:block;clear:both}}
@media (max-width:760px){.pimg-f img{max-height:240px}.pimg:not(.pimg-ph) .pimg-f{aspect-ratio:auto;max-height:240px}}
.pimg-cand{margin:14px 0;padding:12px;border:1px solid var(--bd);border-radius:12px;display:grid;gap:6px}
.pimg-cand img{width:100%;max-height:220px;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--bd)}
/* very small phones: give the search box room for its label */
@media (max-width:360px){.topbar{gap:6px!important;padding-left:10px!important;padding-right:10px!important}.topbar .mbtn,.topbar .acctb,.topbar .tmy{width:36px!important;min-width:36px!important;height:36px!important;padding:0!important}#q{padding-left:34px!important;font-size:15px}.srch svg{left:10px!important}}
/* a pressed button must not become the box its full-card overlay is measured from (that turned clicks into misses) */
.sem-card .sem-watch:active,.sem-row .sem-watch:active,.h6-cat .h6-ch:active,.lr>a.in:first-of-type:active{transform:none!important;filter:none!important}
/* Positions page: the three counts sit on one row on phones */
@media (max-width:640px){.lb2-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}.lb2-stats button{padding:10px 11px}.lb2-stats b{font-size:21px}.lb2-stats span{font-size:12px;line-height:1.25}}
/* Nov 2026 homepage pass: the closed menu drawer is off-screen at every width, so keep it out of the Tab order
   (keyboard users were tabbing through ~22 hidden menu items before reaching the page). */
.side:not(.open){visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.side.open{visibility:visible;transition:transform .22s ease}
/* Sharing (share.js): Share buttons, section links, glossary/seminar/quiz/not-found pages */
.sh-btn{display:inline-flex;align-items:center;gap:6px}
.sh-row{margin:6px 0 14px;display:flex;gap:6px;flex-wrap:wrap}
.top > span .sh-btn{margin-left:6px}
.sem-act .sh-btn{margin-left:auto}
.sh-lnk{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:4px;vertical-align:middle;border:0;border-radius:999px;background:transparent;color:var(--mu);cursor:pointer;opacity:.55;transition:opacity .15s,background .15s}
.sh-lnk:hover,.sh-lnk:focus-visible{opacity:1;background:var(--sf2);color:var(--ink)}
section:hover > h2 .sh-lnk,section:hover > .sem-sh > h2 .sh-lnk,section:hover > .sech > h2 .sh-lnk{opacity:1}
.sh-vid{display:inline-flex;align-items:center;justify-content:center}
.sh-qz{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
.sh-box{margin:8px 0 12px;display:grid;gap:4px;max-width:520px}
.sh-box input{width:100%;font:500 14px/1.3 var(--fb,inherit);padding:10px 12px;border:1px solid var(--bd2);border-radius:10px;background:var(--sf);color:var(--ink)}
.sh-page .kick{display:block;margin-bottom:4px}
.sh-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.sh-list li{line-height:1.45}
.sh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px}
.sh-chips .sem-chip{text-decoration:none}
.sh-def{font-size:18px;line-height:1.5;max-width:46em}
.sh-gloss dt a{color:inherit}
.sem-one{margin:6px 0 26px}
.sem-one .sem-t{font-size:clamp(24px,4vw,32px);line-height:1.15;margin:6px 0}
.sem-one .sem-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sh-qact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 16px}
.sh-nf{max-width:640px;padding:12px 0 30px}
.sh-nfq{display:flex;gap:8px;margin:14px 0 6px}
.sh-nfq input{flex:1;min-width:0;font:500 15px/1.3 var(--fb,inherit);padding:11px 13px;border:1px solid var(--bd2);border-radius:12px;background:var(--sf);color:var(--ink)}
/* phones: comfortable tap targets */
@media (pointer:coarse),(max-width:760px){
 .sh-btn,.sh-qz{min-height:44px!important;padding:8px 14px!important}
 .sh-lnk{width:40px;height:40px;opacity:.8;margin-left:2px}
 .sh-vid{min-width:44px;min-height:44px}
 .sem-act .sh-btn,.sh-qz{margin-left:0}
}
/* ---------- Submissions v2 (subs2.js): list page and submission page badges ---------- */
.sb2-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sb2 h1{margin:0 0 6px}
.sb2-lead{color:var(--mu);margin:0 0 18px;max-width:62ch}
.sb2-search{position:relative;margin:0 0 18px;max-width:640px}
.sb2-search input{width:100%;box-sizing:border-box;min-height:48px;padding:0 16px 0 44px;border:1px solid var(--bd2);border-radius:999px;background:var(--sf);color:var(--ink);font:500 16px/1.2 var(--fb)}
.sb2-search input::placeholder{color:var(--mu)}
.sb2-search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round;pointer-events:none}
.sb2-f{margin:0 0 14px}
.sb2-fl{display:block;font:600 11.5px/1.2 var(--fb);text-transform:uppercase;letter-spacing:.07em;color:var(--mu);margin:0 0 8px}
.sb2-chips{display:flex;flex-wrap:wrap;gap:8px}
/* phones: each filter group is one swipeable row so the cards stay near the top; wider screens wrap */
@media (max-width:759px){
 .sb2-chips{flex-wrap:nowrap;overflow-x:auto;padding:2px 24px 4px 2px;margin:-2px -16px 0 -2px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .sb2-chips::-webkit-scrollbar{display:none}
 .sb2-f{margin-bottom:10px}
 .sb2-lead{margin-bottom:14px}
 .sb2-search{margin-bottom:14px}}
.sb2-chip{flex:none;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink);font:600 14px/1 var(--fb);cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sb2-chip small{font:500 12.5px/1 var(--fb);color:var(--mu)}
.sb2-chip:hover{border-color:var(--ink)}
.sb2-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sb2-chip[aria-pressed="true"] small{color:var(--bg)}
.sb2-chip:disabled{color:var(--mu);border-style:dashed;cursor:default}
.sb2-chip:disabled:hover{border-color:var(--bd2)}
.sb2-tg{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px;cursor:pointer;margin:0 0 4px}
.sb2-tg input{width:20px;height:20px;accent-color:var(--ink);margin:0}
.sb2-cnt{margin:8px 0 0;font-size:14px;color:var(--mu)}
.sb2-clr{font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;background:none;border:0;padding:6px 2px;cursor:pointer;min-height:32px}
.sb2-h{font:700 20px/1.2 var(--fd);margin:26px 0 12px;display:flex;gap:8px;align-items:baseline}
.sb2-h span{font:500 14px/1 var(--fb);color:var(--mu)}
.sb2-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:700px){.sb2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.sb2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sb2-card{position:relative;display:flex;flex-direction:column;gap:6px;min-height:44px;padding:15px 44px 15px 16px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s}
.sb2-card:hover{box-shadow:var(--sh2);border-color:var(--bd2)}
.sb2-n{font:700 16.5px/1.25 var(--fd);letter-spacing:-.01em}
.sb2-m{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--mu)}
.sb2-fr{font-size:13.5px;color:var(--ink2)}
.sb2-bs{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sb2-ch{position:absolute;right:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--mu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb2-lv{display:inline-flex;align-items:flex-end;gap:2px}
.sb2-lv i{display:block;width:5px;border-radius:2px;background:var(--bd2)}
.sb2-lv i:nth-child(1){height:7px}.sb2-lv i:nth-child(2){height:10px}.sb2-lv i:nth-child(3){height:13px}
.sb2-lv i.on{background:var(--ink)}
.sb2-b{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--fb);padding:6px 9px;border-radius:999px;border:1px solid var(--bd2);background:var(--sf2);color:var(--ink2)}
.sb2-rb{background:var(--sf);border-color:var(--ink);color:var(--ink)}
.sb2-empty{margin:18px 0;padding:22px;border:1px dashed var(--bd2);border-radius:var(--r);text-align:center}
.sb2-empty p{margin:6px 0 14px}
.sb2-note{margin-top:18px}
/* submission pages */
.sb2-badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.sb2-p{margin:0 0 12px}
.sb2-h3{font:600 15px/1.3 var(--fd);margin:18px 0 6px}
.sb2-pchips{display:flex;flex-wrap:wrap;gap:8px}
.sb2-pc{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--bd2);background:var(--sf);color:var(--ink);font:600 14px/1.2 var(--fb);text-decoration:none}
.sb2-pc:hover{border-color:var(--ink)}
.sb2-sec .box+.box{margin-top:10px}
.sb2-sec ol.stp{margin-top:6px}
/* ===== Homepage v7 (home7.js). Mobile first; monochrome with the accent only on the main button. ===== */
.home7{display:block}
.home7 .h7-sec{margin-top:34px;scroll-margin-top:80px}
.home7 .h7-sec:focus{outline:none}
.home7 .sech{margin:0 0 10px}
.home7 .sech h2{font:650 21px/1.2 var(--fd);letter-spacing:-.02em;margin:0}
.home7 .h7-lead{margin:-2px 0 14px;font-size:15px;line-height:1.5;color:var(--mu)}

/* hero */
.h7-hero{background:var(--sf2);border-radius:var(--r-l);padding:28px 20px 24px;margin-top:4px}
.h7-hero .hx-k{display:block;font:600 11.5px/1.3 var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--mu);margin-bottom:10px}
.h7-hero h1{font:700 32px/1.08 var(--fd);letter-spacing:-.03em;margin:0 0 12px;max-width:16ch;color:var(--ink)}
.h7-sub{font-size:16.5px;line-height:1.5;color:var(--mu);margin:0 0 18px;max-width:52ch}
.h7-hero .h7-search{max-width:560px;margin:0 0 16px;min-height:52px}
.h7-hero .h7-search kbd{font:600 12px/1 var(--fb);border:1px solid var(--bd2);border-radius:6px;padding:3px 7px;color:var(--mu)}
.h7-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.h7-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:999px;background:var(--ac);border:1px solid var(--ac);color:var(--acx);font:650 16px/1 var(--fb);text-decoration:none}
.h7-go:hover{filter:brightness(1.06);color:var(--acx)}
.h7-new{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px}

/* continue */
.h7-cg{display:grid;grid-template-columns:1fr;gap:10px}
.h7-cc{display:flex;flex-direction:column;gap:3px;min-height:56px;padding:14px 16px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);color:var(--ink);text-decoration:none}
.h7-ck{font:600 11.5px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.h7-cc b{font:650 17px/1.25 var(--fd)}
.h7-cm{font-size:13.5px;color:var(--mu)}

/* where are you stuck */
.h7-gl{font:600 12px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--mu);margin:16px 0 8px}
.h7-stuck,.h7-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.h7-more{grid-template-columns:1fr;margin-top:16px}
.h7-st{position:relative;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:64px;padding:14px 14px 13px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);color:var(--ink);text-decoration:none;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.h7-st:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--c,#888)}
.h7-st b{font:650 15px/1.25 var(--fd);letter-spacing:-.01em}
.h7-st span{font-size:12.5px;line-height:1.4;color:var(--mu)}
.h7-st i{display:none;font-style:normal}
.h7-wide{padding-right:40px}
.h7-wide i{display:block;position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--mu)}

/* browse */
.h7-br{display:grid;grid-template-columns:1fr;gap:10px}
.h7-bc{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);color:var(--ink);text-decoration:none}
.h7-bi{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--sf2)}
.h7-bi svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h7-bc b{display:block;font:650 16px/1.25 var(--fd)}
.h7-bc b+span{display:block;font-size:13.5px;line-height:1.4;color:var(--mu)}

/* foundations */
.h7-fd{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.h7-fc{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);color:var(--ink);text-decoration:none}
.h7-fn{flex:none;min-width:34px;font:700 13px/1 var(--fd);color:var(--mu)}
.h7-fc b{font:600 15px/1.3 var(--fb)}

/* events */
.h7-ev{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.h7-ec{display:flex;gap:14px;align-items:center;min-height:64px;padding:12px 14px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);color:var(--ink);text-decoration:none}
.h7-ed{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;border-radius:12px;background:var(--sf2)}
.h7-ed b{font:700 19px/1 var(--fd)}
.h7-ed span{font:600 11px/1.2 var(--fb);text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.h7-eb{display:flex;flex-direction:column;gap:2px;min-width:0}
.h7-eb b{font:650 15.5px/1.3 var(--fd)}
.h7-eb>span{font-size:13px;color:var(--mu)}
.h7-eb .h7-eg{color:var(--ink);font-weight:600;font-size:13px}

/* support line */
.h7-sup{margin:40px 0 8px;font-size:14.5px;line-height:1.6;color:var(--mu)}
.h7-sup a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* shared states: hover, keyboard focus, pressing */
.h7-st:hover,.h7-cc:hover,.h7-bc:hover,.h7-fc:hover,.h7-ec:hover{border-color:var(--bd2);box-shadow:var(--sh2)}
.h7-st:focus-visible,.h7-cc:focus-visible,.h7-bc:focus-visible,.h7-fc:focus-visible,.h7-ec:focus-visible,.h7-go:focus-visible,.h7-new:focus-visible,.h7-sup a:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
@media (hover:hover){.h7-st:hover{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.h7-st,.h7-st:hover{transition:none;transform:none}}

/* wider screens */
@media (min-width:640px){
 .h7-hero{padding:40px 40px 36px}
 .h7-hero h1{font-size:44px}
 .h7-cg{grid-template-columns:repeat(3,minmax(0,1fr))}
 .h7-stuck{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .h7-more{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .h7-st{min-height:84px;padding:16px 36px 15px 16px}
 .h7-st b{font-size:16px}.h7-st span{font-size:13.5px}
 .h7-st i{display:block;position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mu)}
 .h7-br{grid-template-columns:repeat(2,minmax(0,1fr))}
 .h7-fd{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
 .h7-hero h1{font-size:52px}
 .h7-stuck{grid-template-columns:repeat(5,minmax(0,1fr))}
 .h7-br{grid-template-columns:repeat(4,minmax(0,1fr))}
 .h7-bc{flex-direction:column;align-items:flex-start}
 .h7-fd{grid-template-columns:repeat(3,minmax(0,1fr))}
 .h7-ev{grid-template-columns:repeat(3,minmax(0,1fr))}
 .h7-more{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* section-header links and seminar cards as links: comfortable tap size */
.home7 .sech a.in{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;text-decoration:underline;text-underline-offset:3px}
.home7 a.kb-hs{text-decoration:none}
.home7 .sech{align-items:center}
.h7-sup a{display:inline-block;padding:4px 0}
.home7 .kb-hs img{height:auto}

/* polish (Nov 8 2026): flex boxes drop the space before an arrow, so space it with gap */
.home7 .sech a.in,.h7-new{gap:.3em}
.h7-hero h1{text-wrap:balance}
/* profile icons (avatar.js) */
.avt{overflow:hidden;flex:0 0 auto;line-height:1}
.avt.av-emo{font-size:15px}
.avt.big.av-emo{font-size:32px}
.avt.av-img{background:var(--sf2)}
.avt.av-img img{width:100%;height:100%;object-fit:cover;display:block}
.acctb .avt{font-size:13px!important}
.acctb .avt.av-emo{font-size:15px!important}
.av-go{position:relative;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;flex:0 0 60px}
.av-go:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.av-pen{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--sf);border:1px solid var(--bd2);color:var(--ink);display:grid;place-items:center;font-size:12px}
.av-go:hover .av-pen{background:var(--sf2)}
.av-go[aria-expanded="true"] .av-pen{background:var(--ink);color:var(--sf);border-color:var(--ink)}
.dash-who{display:flex;align-items:center;gap:14px}
.av-pick{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.av-head{display:flex;align-items:center;gap:14px}
.av-head>div{display:flex;flex-direction:column;gap:2px}
.av-tabs{align-self:flex-start}
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;max-width:520px}
.av-e{height:46px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);font-size:24px;cursor:pointer;line-height:1}
.av-e:hover{background:var(--sf2)}
.av-e.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;background:var(--sf2)}
.av-cols{display:flex;flex-wrap:wrap;gap:8px}
.av-col{width:32px;height:32px;border-radius:50%;border:2px solid var(--sf);box-shadow:0 0 0 1px var(--bd2);cursor:pointer;padding:0}
.av-col.on{box-shadow:0 0 0 2px var(--ink)}
.av-pick .tq-h{margin-top:2px}
.av-ph{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.av-up{cursor:pointer}
.av-pick p{margin:0}
.av-save{display:flex;gap:8px;align-items:center}
.av-save .btn[disabled]{opacity:.45;cursor:default}