:root{--bg:#f7f7f5;--card:#fff;--fg:#1d1d1f;--mut:#6b6b70;--bd:#e2e2e0;--code:#f1f1ee;--acc:#2a5bd7;--ok:#1f8a4c;--okb:#e6f4ec;--no:#c23b3b;--nob:#fbeaea;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#141416;--card:#1d1d20;--fg:#ececee;--mut:#9a9aa2;--bd:#2e2e33;--code:#232327;--acc:#7aa2ff;--ok:#5fd08f;--okb:#17301f;--no:#ff8080;--nob:#3a1d1d;color-scheme:dark}}
:root[data-theme=dark]{--bg:#141416;--card:#1d1d20;--fg:#ececee;--mut:#9a9aa2;--bd:#2e2e33;--code:#232327;--acc:#7aa2ff;--ok:#5fd08f;--okb:#17301f;--no:#ff8080;--nob:#3a1d1d;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,-apple-system,sans-serif}
header{position:sticky;top:0;z-index:4;background:var(--card);border-bottom:1px solid var(--bd);padding:12px 19px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:18px}
header>button{padding:6px 12px}header .tmp{font-size:15px}header svg[width="18"]{width:22px;height:22px}
header h1{font-size:19px;margin:0}#home{flex:none;display:grid;place-items:center;width:41px;height:41px;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:inherit;transition:background-color .18s,border-color .18s}#home:hover{background:var(--code);border-color:color-mix(in srgb,var(--mut) 45%,var(--bd))}#home:active{transform:translateY(1px)}body.athome #home{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--card));color:var(--acc)}#home:focus-visible{outline:2px solid var(--acc);outline-offset:2px}select,button{font:inherit;padding:6px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--fg);cursor:pointer}
button.p{background:#2a5bd7;border-color:#2a5bd7;color:#fff}#rs{color:#fff;background:#c62f2f;border-color:#c62f2f}#rs:hover,button.rst:hover{background:#ad2525}button.rst{margin-left:auto;color:#fff;background:#c62f2f;border-color:#c62f2f}button:disabled{opacity:.6;cursor:wait}
.bar{flex:1;min-width:168px;height:10px;background:var(--bd);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ok)}
#stat{color:var(--mut);font-size:15.5px}#th,#hlb{display:grid;place-items:center;width:43px;height:41px;padding:0}#hlb[aria-pressed=false]{color:var(--mut)}#hlb[aria-pressed=false] .on-only{display:none}
body.nohl pre.code span:not(.blank){color:inherit!important;font-style:normal!important;font-weight:inherit!important}main{max-width:900px;margin:0 auto;padding:16px;flex:1;min-width:0;zoom:var(--zm,1)}
.hnav{flex:none;display:flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden}.hnav button{display:grid;place-items:center;width:41px;height:39px;padding:0;border:0;border-radius:0}.hnav button+button{border-left:1px solid var(--bd)}.hnav button:hover:not(:disabled){background:var(--code)}.hnav button:disabled{opacity:1;cursor:default;color:color-mix(in srgb,var(--mut) 50%,transparent)}.hnav button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
@media (max-width:760px){.hnav button,#home{width:34px}} /* ← → and home stay beside the title on a 360px phone */
.zm{display:flex;align-items:center;border:1px solid var(--bd);border-radius:10px;overflow:hidden}.zm button{border:0;border-radius:0;padding:6px 12px;min-width:41px}.zm #zf{border-left:1px solid var(--bd)}
.zm #zv{width:70px;border:0;border-left:1px solid var(--bd);border-right:1px solid var(--bd);background:var(--card);color:var(--fg);font:inherit;text-align:center;padding:6px 5px;font-variant-numeric:tabular-nums}.zm #zv:focus{outline:2px solid var(--acc);outline-offset:-2px}.zm button.on{background:var(--acc);color:#fff}
.wrap{display:flex;align-items:flex-start;overflow-x:clip}
select{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.lst{overflow:hidden}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:ease-in-out;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
button.arm,button.rst.arm,#rs.arm,.fa.arm{font-weight:600;background:var(--card);border-color:var(--no);color:var(--no)}button.arm:hover,#rs.arm:hover,button.rst.arm:hover{background:var(--nob)}button{transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s}button .lbl{display:inline-block;white-space:nowrap}button:has(>.lbl){white-space:nowrap;overflow:hidden;text-overflow:clip;text-align:left;transition-duration:.25s}
.grip{position:sticky;top:var(--hh,66px);flex:none;width:6px;margin-left:-3px;height:calc(100vh - var(--hh,66px));cursor:col-resize;z-index:1;touch-action:none}
.grip:hover,.grip.on{background:var(--acc);opacity:.35}body.drag{cursor:col-resize;user-select:none}body.drag.dragr{cursor:row-resize}body.drag.dragm{cursor:move}
aside{position:sticky;z-index:1;top:var(--hh,66px);width:var(--sw,324px);flex:none;height:calc(100vh - var(--hh,66px));overflow-y:auto;border-right:1px solid var(--bd);background:var(--card);padding:10px 8px}
aside details{margin-bottom:2px}aside summary{list-style:none;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:600;font-size:17px}
aside summary::-webkit-details-marker{display:none}aside summary{padding-left:2px}
.tg{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-4px 0;padding:0;border:0;border-radius:7px;background:none;color:var(--mut);cursor:pointer}
.tg:hover{background:var(--bd);color:var(--fg)}.tg svg{width:14px;height:14px;transition:transform .2s}aside details[open]>summary .tg svg{transform:rotate(90deg)}
aside summary:hover,aside a:hover{background:var(--code)}aside details.cur>summary{color:var(--acc)}aside details.cur{position:relative;z-index:1;background:var(--card)}
aside .nm{flex:1}aside .ct{font-weight:400;font-size:14.5px;color:var(--mut)}
aside a{display:flex;gap:6px;align-items:center;padding:5px 10px 5px 46px;border-radius:6px;color:var(--fg);text-decoration:none;font-size:15.5px}
aside a .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.done{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#1f8a4c;color:#fff;font-size:11px;font-weight:700}
.done.sm{width:14px;height:14px;font-size:9px}
.ring{flex:none;transform:rotate(-90deg)}.ring circle{fill:none;stroke:color-mix(in srgb,var(--mut) 40%,transparent);stroke-width:2.5}.ring .arc{stroke:var(--acc);stroke-linecap:round}
@media (max-width:760px){.grip{display:none}.wrap{display:block}aside{position:static;width:auto;height:auto;max-height:45vh;border-right:0;border-bottom:1px solid var(--bd)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(230,80,80,.0)}30%{box-shadow:0 0 0 4px rgba(230,80,80,.35);background:rgba(240,110,110,.22)}100%{box-shadow:0 0 0 0 rgba(230,80,80,0)}}
.q.shake{animation:shake .4s ease,flash .7s ease}
@media (prefers-reduced-motion:reduce){.q.shake{animation:flash .7s ease}}
.prob{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:18px}.prob h2{font-size:17px;margin:0 0 8px}
pre{background:var(--code);border-radius:8px;padding:10px 12px;overflow-x:auto;font:13px/1.55 ui-monospace,Menlo,monospace;margin:10px 0;white-space:pre;tab-size:4}
.txt p,.ql p{margin:8px 0;line-height:1.6;max-width:75ch}.txt h3{font-size:14px;margin:16px 0 4px;color:var(--mut);font-weight:600}.ql p{margin:0 0 4px}.ql pre{font-weight:400}
.note{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 16px;margin-bottom:16px;font-size:14px;line-height:1.55}.note>p{margin:0}.note .nh{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}.note .by{color:var(--mut);font-size:13px}.note .nsc{margin-top:1.55em}.note .mut,.mut{color:var(--mut)}.ref{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.tips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}.tip{font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid}
.tip.dn,.badge.dn{color:#8a5a00;background:#fff4d6;border-color:#f0d58a}.tip.csm,.badge.csm{color:#1d4fb8;background:#e8f0ff;border-color:#bcd0f7}.tip.oos,.badge.oos{color:#6b6b70;background:var(--code);border-color:var(--bd)}
:root[data-theme=dark] .tip.dn,:root[data-theme=dark] .badge.dn{color:#f3c969;background:#3a2f12;border-color:#5c4a1c}:root[data-theme=dark] .tip.csm,:root[data-theme=dark] .badge.csm{color:#9cbcff;background:#1a2640;border-color:#2c3f66}:root[data-theme=dark] .tip.oos,:root[data-theme=dark] .badge.oos{color:#a0a0a8}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tip.dn,:root:not([data-theme=light]) .badge.dn{color:#f3c969;background:#3a2f12;border-color:#5c4a1c}:root:not([data-theme=light]) .tip.csm,:root:not([data-theme=light]) .badge.csm{color:#9cbcff;background:#1a2640;border-color:#2c3f66}:root:not([data-theme=light]) .tip.oos,:root:not([data-theme=light]) .badge.oos{color:#a0a0a8}}
.badge{display:inline-block;margin-left:8px;font-size:10.5px;padding:1px 7px;border-radius:999px;border:1px solid;letter-spacing:.02em}
.q.oosq{opacity:.72}.q.oosq:hover,.q.oosq:focus-within{opacity:1}
aside .star{color:#d9a400;font-size:14.5px}aside .dia{color:#3b74e6;font-size:13px}aside .skp{font-size:12.5px;color:var(--mut);border:1px solid var(--bd);border-radius:999px;padding:0 6px}
.cb{margin:10px 0}.cb pre{margin:0}.cbh{display:flex;justify-content:flex-end;margin-top:6px}.qh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:2px}.qh .fb{text-align:right;flex:none;max-width:60%;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}.qh .fb .stale{font-size:12px;color:var(--mut);flex-basis:100%;text-align:right}.qh .fb .mk{font-size:12px;padding:2px 8px}
.ai{display:inline-flex;align-items:center;gap:6px;font-weight:600}.ai svg{flex:none}.ai[hidden]{display:none}.ai.copied{border-color:var(--ok);color:var(--ok)}
.fa{font-size:14px;padding:7px 14px}.fa.shown{border-color:var(--ok);color:var(--ok)}
.fillv{background:rgba(31,138,76,.14);border-radius:3px;padding:0 1px}
.dd{position:relative}.ddb,.ddm{display:none}
@media (hover:hover) and (pointer:fine){.dd select{display:none}
 .ddb{display:flex;align-items:center;gap:10px;min-width:150px;justify-content:space-between}.ddb svg{color:var(--mut);transition:transform .15s}.ddb[aria-expanded=true] svg{transform:rotate(180deg)}
 .ddm{display:block;position:absolute;top:calc(100% + 6px);left:0;min-width:100%;margin:0;padding:5px;list-style:none;background:var(--card);border:1px solid var(--bd);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:5;opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s}
 .ddm[hidden]{display:none}.ddm.in{opacity:1;transform:none}
 .ddm li{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:7px;cursor:pointer;white-space:nowrap;font-size:14px}
 .ddm li .ck{width:14px;color:var(--acc);visibility:hidden}.ddm li[aria-selected=true] .ck{visibility:visible}.ddm li[aria-selected=true]{font-weight:600}
 .ddm li.hi{background:var(--code)}}
.fhint{font-size:14.5px;color:var(--mut);padding:4px 8px 8px}
pre.lnums{counter-reset:ln}pre.lnums .ln{counter-increment:ln}pre.lnums .ln::before{content:counter(ln) ':';display:inline-block;width:2.4em;margin-right:.6em;text-align:right;color:var(--mut);opacity:.7;user-select:none}
.sidetop{position:sticky;top:-10px;z-index:3;background:var(--card);margin:-10px -8px 8px;padding:10px 8px}.sidetop{font-size:18px}.sidetop .ddm li{font-size:17px}.sidetop .ddb{width:100%}.sidetop select{width:100%}
.tipbox{position:fixed;z-index:50;max-width:260px;padding:6px 9px;border-radius:7px;background:#1d1d1f;color:#f5f5f7;font-size:12px;line-height:1.35;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.2);opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s}
.tipbox.in{opacity:1;transform:none}:root[data-theme=dark] .tipbox{background:#f0f0f2;color:#1d1d1f}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tipbox{background:#f0f0f2;color:#1d1d1f}}
.blank{display:inline-block;min-width:3.2em;padding:0 6px;margin:0 1px;border:1.5px dashed var(--acc);border-radius:5px;color:var(--acc);text-align:center;font-weight:600;line-height:1.35}
:root{--hk:#a626a4;--hs:#50a14f;--hn:#986801;--hc:#8a8f98;--hf:#4078f2;--hb:#0184bc;--hp:#c18401}
:root[data-theme=dark]{--hk:#c678dd;--hs:#98c379;--hn:#d19a66;--hc:#7f848e;--hf:#61afef;--hb:#56b6c2;--hp:#e5c07b}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--hk:#c678dd;--hs:#98c379;--hn:#d19a66;--hc:#7f848e;--hf:#61afef;--hb:#56b6c2;--hp:#e5c07b}}
.hk{color:var(--hk)}.hs{color:var(--hs)}.hn{color:var(--hn)}.hc{color:var(--hc);font-style:italic}.hf{color:var(--hf)}.hb{color:var(--hb)}.hp{color:var(--hp);font-weight:600}.hd{color:var(--hs)}

.q{border:1px solid var(--bd);border-radius:10px;padding:12px;margin:10px 0}.q.ok{border-color:var(--ok);background:var(--okb)}.q.no{border-color:var(--no);background:var(--nob)}
.ql{font-weight:600;margin-bottom:6px;white-space:pre-wrap}label.o{display:flex;gap:8px;align-items:flex-start;padding:3px 0;cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:13px}
textarea{width:100%;font:13px ui-monospace,Menlo,monospace;padding:8px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--fg);resize:none;overflow:hidden;min-height:36px;field-sizing:content}
.cf{position:fixed;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:9}.cf.sm{width:4px;height:4px;border-radius:1px}
.row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;align-items:center}.row .ib{display:inline-flex;align-items:center;gap:6px;font-weight:600}.row .ib svg{flex:none}.fb{font-size:13px}.fb.ok{color:var(--ok)}.fb.no{color:var(--no)}
.out{font:13px ui-monospace,Menlo,monospace;white-space:pre-wrap;color:var(--mut);margin-top:6px}
.qw{margin:10px 0}.qw>.q{margin:0}.ans{margin-top:8px;border:1px solid var(--bd);border-left:4px solid var(--acc);border-radius:10px;background:var(--card);padding:12px 14px}
.ans h4{margin:0 0 6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}.ans .k{font:16px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;color:var(--fg)}.ans .x{margin-top:8px;font-size:14px;color:var(--mut);white-space:pre-wrap}.out{max-height:220px;overflow:auto;background:var(--code);border-radius:8px;padding:8px}
.tag{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.tag b{color:var(--acc);font-weight:600}
.tm{position:relative}#tmb{display:flex;align-items:center;gap:7px;height:41px;padding:0 12px;font-variant-numeric:tabular-nums}#tmb #tmv:empty{display:none}#tmb.run{border-color:var(--acc);color:var(--acc)}#tmb.low{border-color:var(--no);color:var(--no)}
#tmb.up{background:var(--no);border-color:var(--no);color:#fff;animation:tmpulse 1s ease-in-out infinite}@keyframes tmpulse{50%{opacity:.6}}@media (prefers-reduced-motion:reduce){#tmb.up{animation:none}}
.tmp{position:absolute;top:calc(100% + 8px);right:0;width:300px;padding:14px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:6;transform-origin:top right;opacity:0;transform:translateY(-6px) scale(.97);transition:opacity .16s ease,transform .16s ease}.tmp[hidden]{display:none}.tmp.in{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.tmp{transform:none}}
.tmp h3{margin:0 0 6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:600}
.tmr{font:600 40px/1.1 ui-monospace,Menlo,monospace;text-align:center;font-variant-numeric:tabular-nums;margin:2px 0 12px}.tmr.low{color:var(--no)}.tmr.up{color:var(--no);font-size:28px;line-height:44px}
.tmps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}.tmps button{padding:5px 0;font-size:13px}.tmps button.on{border-color:var(--acc);color:var(--acc);font-weight:600}
.tmc{display:flex;gap:6px;margin-bottom:4px}.tmc input{flex:1;min-width:0;font:inherit;padding:6px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--card);color:var(--fg)}.tmc input:focus{outline:2px solid var(--acc);outline-offset:-1px}.tmc input.bad{border-color:var(--no);outline-color:var(--no)}
.tmh{font-size:12px;color:var(--mut);margin-bottom:12px;min-height:18px}.tmh.bad{color:var(--no)}
.tmk{display:flex;gap:6px}.tmk button{flex:1}.tmk #tmgo{flex:1.4}.tms{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13px;color:var(--mut);cursor:pointer}
@media (max-width:760px){.tm{position:static}.tmp{top:calc(100% + 6px);left:16px;right:16px;width:auto;transform-origin:top center}}
#ptb{flex:1 0 100%;display:flex;align-items:center;justify-content:center;gap:7px;height:41px;padding:0 14px;font-weight:600;white-space:nowrap}#ptb.run{border-color:var(--acc);color:var(--acc);font-variant-numeric:tabular-nums}
body.ptm #dd,body.ptm #rs{display:none}body.ptm .bar{visibility:hidden;min-width:0}body.ptm #stat{display:none}
.pthome p{max-width:70ch;line-height:1.6}.pthome h3{font-size:14px;margin:24px 0 6px;color:var(--mut)}
.ptopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.ptopt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border-radius:12px;text-align:left}
.ptopt b{font-size:17px}.ptopt span{font-size:13px;color:var(--mut)}.ptopt[aria-checked=true]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}.ptopt[aria-checked=true] b{color:var(--acc)}
.ptrules{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.7}#ptgo{padding:8px 18px}
.pth{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}.pth th,.pth td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--bd)}.pth th{color:var(--mut);font-weight:600}
.ptside{display:flex;flex-direction:column;gap:2px}.ptside a{padding-left:10px}.ptside .ct{flex:none}
.ptclock,.ptscore{font:600 30px/1.1 ui-monospace,Menlo,monospace;text-align:center;font-variant-numeric:tabular-nums;padding-top:6px}.ptclock.low{color:var(--no)}.ptclock.busy{font:600 15px/34px system-ui,-apple-system,sans-serif}
.ptsub{text-align:center;font-size:12px;margin-bottom:12px}.ptbtns{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding:0 4px}.ptbtns button:has(>.lbl),.ptend button:has(>.lbl){text-align:center}
.ptend{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0 40px}.ptend button{padding:8px 18px}
label.o.right>span{color:var(--ok);font-weight:600}label.o.wrong>span{color:var(--no);text-decoration:line-through}
@media (max-width:760px){.ptopts{grid-template-columns:1fr}}
.hist{margin-top:12px;padding-top:10px;border-top:1px solid var(--bd)}.histh{font-size:13px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding:0 8px 6px}.hist a{padding-left:10px}.hist .old{display:flex;gap:6px;padding:5px 10px;font-size:15.5px;color:var(--mut)}.hist .old .nm{flex:1}.pthl{color:var(--acc)}

/* "Studying for" sits beside the filter in the sidebar's top bar, in the same dropdown style */
.sidetop{display:flex;gap:6px}.sidetop .dd{flex:1 1 0;min-width:0}
.sidetop .ddb{min-width:0}.sidetop .ddb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidetop .ddm{min-width:max(100%,220px)}
.ddm .ddh{padding:4px 8px 6px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);cursor:default}
.ddm li .sub{margin-left:auto;padding-left:16px;font-size:13px;font-weight:400;color:var(--mut)}
.cprog{font-size:13.5px;color:var(--mut);padding:0 8px 8px}
.tip.note{color:var(--fg);background:var(--card);border-color:var(--bd);border-style:dashed}
/* Sort: small pill buttons on their own row under the two menus, styled apart from them */
.sidetop{flex-wrap:wrap}
.sortbar{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.srt{position:relative}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;line-height:1.3;padding:4px 11px 4px 8px;border-radius:999px;background:transparent;border:1px solid var(--bd);color:var(--mut)}
.chip:hover,.chip[aria-expanded=true]{color:var(--fg);background:var(--code)}
.chip svg{width:14px;height:14px;flex:none}
.srtp{position:absolute;top:calc(100% + 6px);left:0;z-index:6;width:min(260px,calc(100vw - 32px));padding:10px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}
.srtp.in{opacity:1;transform:none}
.srth{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:0 2px 8px}
.srto{display:flex;flex-wrap:wrap;gap:6px}
.srto button{font-size:13.5px;padding:5px 12px;border-radius:999px}
.srto button[aria-checked=true]{background:var(--acc);border-color:var(--acc);color:#fff}
@media (prefers-reduced-motion:reduce){.srtp{transition:none}}
/* Sort is one split chip: the label opens the options, the arrow at its end reverses the order */
#srtb{border-radius:999px 0 0 999px;padding-right:9px}#srtd{margin-left:-1px;border-radius:0 999px 999px 0;padding:4px 8px}
/* The Sort pill and the Topic chip share the row and grow to fill it; when both don't fit, Topic wraps to its own full row */
.sortbar .srt{display:flex;flex:1 1 auto;max-width:100%}#srtb{flex:1;min-width:0}#srtb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#srtd{flex:none}
#srtd svg{transition:transform .28s cubic-bezier(.3,.7,.2,1.3)}#srtd.desc svg{transform:rotate(180deg)}
#srtd.rev{color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}#srtd.rev:hover{background:color-mix(in srgb,var(--acc) 20%,transparent)}
@media (prefers-reduced-motion:reduce){#srtd svg{transition:none}}
/* The Sort and Topic chips sit below the line that closes the sidebar's top controls, just above the progress line, and stay
   pinned with them while the exam list scrolls. Topic's menu spans the row and lists each topic with a thin progress bar. */
.sortbar{position:relative;flex-basis:calc(100% + 16px);margin:4px -8px 0;padding:10px 8px 0;border-top:1px solid var(--bd)}.sidetop.stuck{box-shadow:0 1px 0 var(--bd)}
.sortbar .dd{display:flex;flex:1 1 auto;min-width:0;max-width:100%}.sortbar .ddb{width:100%;min-width:0;gap:5px;justify-content:space-between}.sortbar .ddb span{min-width:0}.sortbar .ddb svg{flex:none}
.sortbar select{width:100%;font-size:13.5px;padding:4px 10px;border-radius:999px;color:var(--mut)}
#tdd{position:static}#tddm{left:8px;right:8px;min-width:0;width:auto;max-height:min(60vh,440px);overflow-y:auto}
#tddm li{font-size:14px;white-space:normal}.tpn{flex:1;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;min-width:0}
.tpl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tpn .sub{padding:0;font-size:12.5px;font-variant-numeric:tabular-nums}
.tpb{grid-column:1/-1;height:3px;border-radius:2px;background:var(--bd);overflow:hidden}.tpb i{display:block;height:100%;background:var(--acc)}
body.ptm .sortbar{display:none}
@media (max-width:760px){.chip,.srto button{min-height:36px}}
.tip.adapted{color:#7a3fb8;background:#f3ebfc;border-color:#d9c2f2}
:root[data-theme=dark] .tip.adapted{color:#cfa8ff;background:#2a1d3a;border-color:#4a3466}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tip.adapted{color:#cfa8ff;background:#2a1d3a;border-color:#4a3466}}

.hints{font-size:14px;line-height:1.6;padding:4px 0}.hints p{max-width:70ch;margin:8px 0}.walkthrough{margin-top:12px;font-size:14px;line-height:1.6}.walkthrough summary{cursor:pointer;color:var(--acc)}.walkthrough p{max-width:70ch}.walkthrough .mut{font-size:12px}
.whole{border-top:1px solid var(--bd);padding-top:14px;margin-top:20px}.whole p{font-size:13px;max-width:70ch;margin:6px 0}.whole-result{white-space:pre-wrap;font:13px/1.6 ui-monospace,Menlo,monospace;margin-top:10px}.whole-result.ok{color:var(--ok)}.authored{color:var(--mut);font-size:13px;max-width:70ch}
button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:760px){.hint,.whole button{min-height:40px}}

.save-notice{position:sticky;top:var(--hh,66px);z-index:3;display:flex;align-items:center;gap:16px;padding:12px 19px;background:var(--card);border-bottom:1px solid var(--no);font-size:14px;line-height:1.5}
.save-notice[hidden]{display:none}.save-notice>div:first-child{flex:1;min-width:0}.save-notice strong{color:var(--no)}.save-notice p{max-width:85ch;margin:4px 0 0}.save-notice .save-action{font-weight:600}.save-buttons{display:flex;gap:8px;flex:none}.save-notice[data-state=saved]{border-color:var(--ok)}.save-notice[data-state=saved] strong{color:var(--fg)}
/* Socials stay pinned to the bottom of the sidebar: below a short list, and over a long one while it scrolls */
aside{display:flex;flex-direction:column}#nav{flex:1 0 auto}
#fbd{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--fg);box-shadow:0 10px 30px rgba(0,0,0,.18)}#fbd::backdrop{background:rgba(0,0,0,.35)}@media (min-width:761px){#fbd{width:max(440px,35vw)}}
#fbd[open]{animation:fbin .16s ease}@keyframes fbin{from{opacity:0;transform:translateY(-6px) scale(.97)}}@media (prefers-reduced-motion:reduce){#fbd[open]{animation:none}}
#fbf{display:flex;flex-direction:column;gap:10px;padding:16px}#fbd h3{margin:0;font-size:17px}#fbn{margin:0;font-size:14px;line-height:1.5;color:var(--mut)}
#fbm{width:100%;min-height:130px;resize:vertical;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}#fbm:focus{outline:2px solid var(--acc);outline-offset:-1px}
.fbhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.fbs{min-height:20px;font-size:13.5px;color:var(--mut)}.fbs.bad{color:var(--no)}.fbs.ok{color:var(--ok)}.fba{display:flex;justify-content:flex-end;gap:8px}
/* Home: no exam is selected, so there's nothing to reset */
body.athome #rs{display:none}
.prob.home p{max-width:70ch;line-height:1.6}.prob.home h3{font-size:14px;margin:28px 0 8px;color:var(--mut)}
.cprogs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cprogs button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:10px 14px;border-radius:10px;text-align:left}.cprogs button:hover{background:var(--code)}
.cprogs button[aria-current=true]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.cprogs .cn{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}.cprogs .sub,.cprogs .cans{font-size:13px;color:var(--mut)}
.cprogs .now{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--acc)}
.cprogs .num{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--mut)}
.cprogs .bar{grid-column:1/-1;flex:none;min-width:0;height:8px}.cprogs .cans{grid-column:1/-1;margin-top:-2px}.homebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.homebtns button{padding:8px 18px}
@media(min-width:761px){body.has-save-notice aside,body.has-save-notice .grip{top:calc(var(--hh,66px) + var(--save-h,0px));height:calc(100vh - var(--hh,66px) - var(--save-h,0px))}}
@media(max-width:760px){.save-notice{align-items:flex-start;flex-direction:column;gap:8px;padding:10px 16px}.save-buttons button{min-height:40px}}

/* Playground (playground.js, editor.js). Header button, then the view: the sidebar is hidden while it's open. */
#pgb{display:inline-flex;align-items:center;gap:7px;height:41px;padding:0 13px;border-radius:10px;font-weight:600;white-space:nowrap}#pgb[hidden]{display:none}#pgb:hover{background:var(--code)}
#pgb[aria-pressed=true]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--card));color:var(--acc)}
body.pgm #side,body.pgm .grip,body.pgm #rs,body.pgm #stat{display:none}body.pgm .bar{visibility:hidden;min-width:0}body.pgm main{max-width:none}
.pg{display:flex;flex-direction:column;gap:10px;height:calc(100dvh - var(--hh,66px) - var(--fh,49px) - 32px);min-height:440px}
.pgbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.pgbar button{display:inline-flex;align-items:center;gap:6px}.pgbar button[hidden]{display:none}.pgbar button svg{width:14px;height:14px}.pgbar .pgsp~button{font-weight:600}.pgbar button.busy svg{animation:pgspin .8s linear infinite}@keyframes pgspin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.pgbar button.busy svg{animation:none}}
.seg{display:flex;border:1px solid var(--bd);border-radius:8px}.seg button{border:0;border-radius:0}.seg button:first-child{border-radius:7px 0 0 7px}.seg button:last-child{border-radius:0 7px 7px 0}.seg button:focus-visible{position:relative;z-index:1}.seg button+button{border-left:1px solid var(--bd)}.seg button[aria-checked=true]{background:var(--acc);color:#fff}
.pgt{font-weight:600}.pgt[hidden]{display:none}.pgtn{font:inherit;font-weight:600;padding:3px 6px;margin:0 -6px;border:1px solid transparent;border-radius:6px;background:none;color:var(--fg)}.pgtn:hover{border-color:var(--bd)}.pgtn:focus{border-color:var(--acc);background:var(--card);outline:none}.pgtn[hidden]{display:none}
.pgrc{position:relative}.pgrp{position:absolute;top:calc(100% + 6px);left:0;z-index:6;width:min(340px,calc(100vw - 32px));padding:10px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s}.pgrp.in{opacity:1;transform:none}
.pgnp{width:190px}.pgrp [data-new]{display:flex;width:100%;gap:8px;padding:6px 8px;border:0;border-radius:8px;background:none;text-align:left}.pgrp [data-new]:hover{background:var(--code)}.pgrp [data-new]:focus-visible{outline-offset:-2px}
/* The language tag on New's choices and Recent's files. */
.pglg-tag{display:inline-block;min-width:24px;margin-right:7px;padding:0 5px;border-radius:5px;font-size:11px;font-weight:700;line-height:18px;text-align:center;vertical-align:1px;color:var(--fg)}.pgrp [data-new] .pglg-tag{margin-right:0}
.pglg-tag.py{background:color-mix(in srgb,#3776ab 30%,var(--card))}.pglg-tag.gleam{background:color-mix(in srgb,#ffaff3 55%,var(--card))}
.pgrls{list-style:none;margin:0;padding:0;max-height:min(50vh,360px);overflow:auto}.pgrls li{display:flex;align-items:center;gap:4px}
.pgrp .pgro{flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:0;padding:6px 8px;border:0;border-radius:8px;background:none;text-align:left}.pgrp .pgro:hover{background:var(--code)}.pgrp .pgro[aria-current]{background:color-mix(in srgb,var(--acc) 12%,transparent)}.pgrp .pgro:focus-visible{outline-offset:-2px}
.pgro b,.pgro span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pgro b{font-size:14px;font-weight:600}.pgro span{font-size:12.5px}
.pgrp .pgrx{flex:none;padding:5px 7px;border-color:transparent;background:none;color:var(--mut);font-size:13px}.pgrp .pgrx:hover{border-color:var(--bd);color:var(--no)}.pgrp .pgrx.arm{border-color:var(--no);color:var(--no)}.lbl:empty{display:none}
.pgrf{margin:8px 2px 0;font-size:12px}@media (prefers-reduced-motion:reduce){.pgrp{transition:none}}.pgrt{font-size:13.5px;color:var(--mut)}.pgrt.on::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--ok);vertical-align:1px}
.pgsp{flex:1}.pgauto{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--mut);cursor:pointer}.pgauto[hidden],.pglive[hidden]{display:none}.pglive{font-size:13.5px}
.pgsave{margin:0}.pghint{margin:0;font-size:13px}
.pgmain{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,var(--pgl,1.15fr)) 12px minmax(0,var(--pgr,1fr))}
/* Splitters sit in the gaps between the panes and show an accent line on hover; the corner (.pgx) moves the column and row splitters together. */
.pgcs,.pgrs,.pgis{position:relative;touch-action:none}.pgcs{cursor:col-resize}.pgrs,.pgis{cursor:row-resize}
.pgcs::after,.pgrs::after,.pgis::after{content:'';position:absolute;border-radius:2px;background:var(--acc);opacity:0;transition:opacity .15s}.pgcs::after{top:0;bottom:0;left:5px;width:2px}.pgrs::after,.pgis::after{left:0;right:0;top:5px;height:2px}
:is(.pgcs,.pgrs,.pgis,.pgx):is(:hover,.on,:focus-visible)::after,.pg:has(.pgx:hover,.pgx.on) :is(.pgcs,.pgrs)::after{opacity:1}:is(.pgcs,.pgrs,.pgis):focus-visible{outline:none}
.pgrs{position:absolute;left:0;right:0;bottom:-12px;height:12px;z-index:1}.pgis{position:absolute;left:0;right:0;top:-6px;height:12px;z-index:1}
.pgx{display:none;position:absolute;left:-4px;right:-4px;top:-14px;height:18px;z-index:2;cursor:move}.pg:has(.pgpw:not([hidden]) .pgprob:not(.shut)) .pgx{display:block}
.pged,.pgout{min-height:0;border:1px solid var(--bd);border-radius:10px;background:var(--card);overflow:hidden}.pged:focus-within{border-color:var(--acc)}
.pgout{display:flex;flex-direction:column}
.pgtabs{display:flex;border-bottom:1px solid var(--bd)}.pgtabs[hidden]{display:none}.pgtabs button{padding:8px 12px;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px;background:none;color:var(--mut);font-size:14px}.pgtabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--acc)}
.pgstat{display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 12px;border-bottom:1px solid var(--bd);font-size:13.5px;color:var(--mut)}.pgmsg.ok{color:var(--ok)}.pgmsg.no{color:var(--no)}.pgundo{padding:2px 9px;font-size:13px}
.pgout .pgo{flex:1;min-height:0;margin:0;padding:10px 12px;border-radius:0;background:none;overflow:auto}.pgo:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pgo .se{color:color-mix(in srgb,var(--no) 75%,var(--fg))}.pgo .pge{display:block;margin-top:6px;color:var(--no)}.pgo .pgw{display:block;color:var(--hn)}.pgo .pgok{display:block;margin-top:6px;color:var(--ok)}
.pgin{position:relative;border-top:1px solid var(--bd);padding:7px 12px}.pgin[hidden]{display:none}.pgin summary{cursor:pointer;font-size:14px}
.pgin textarea{display:block;width:100%;height:72px;min-height:40px;margin-top:6px;padding:6px 8px;border:1px solid var(--bd);border-radius:6px;background:var(--code);color:var(--fg);font:13px/1.5 ui-monospace,Menlo,monospace;resize:none}
.ed{position:relative;height:100%;min-height:260px;font:13.5px/1.6 ui-monospace,Menlo,monospace;--gw:calc(var(--gd,2) * 1ch + 22px)}
.ed .edta,.ed .edhl{position:absolute;inset:0;margin:0;padding:10px 14px 10px calc(var(--gw) + 12px);border:0;border-radius:0;background:none;font:inherit;white-space:pre;tab-size:4;overflow:auto}
.ed .edhl{overflow:hidden;pointer-events:none;color:var(--fg)}
.ed .edta{z-index:1;resize:none;outline:none;color:transparent;caret-color:var(--fg)}.ed .edta::selection{background:color-mix(in srgb,var(--acc) 30%,transparent);color:transparent}
.edln{position:absolute;top:0;bottom:0;left:0;width:var(--gw);overflow:hidden;border-right:1px solid var(--bd);background:var(--code);color:var(--mut);text-align:right;user-select:none}.edln>div{padding:10px 9px 10px 0;white-space:pre}
/* Debug (playground.js): the editor marks the line about to run (.ednext) and the one that just ran (.edprev), each with an arrow between the line numbers and the code. */
.edmk{position:absolute;inset:0;overflow:hidden;pointer-events:none}.edmk>div{position:absolute;top:0;left:0;right:0}.edmk>div[hidden]{display:none}
.ednext{background:color-mix(in srgb,var(--acc) 16%,transparent)}.edprev{background:color-mix(in srgb,var(--mut) 12%,transparent)}
.edmk>div::before{content:'';position:absolute;left:calc(var(--gw) + 2px);top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent;border-left:7px solid var(--acc)}.edprev::before{border-left-color:var(--mut)!important;opacity:.6}
.pg.stepping .pgstat:has(.pgmsg:empty):has(.pgundo[hidden]){display:none}.ed.ro .edta{caret-color:transparent;cursor:default}.pg.stepping .pged{border-color:color-mix(in srgb,var(--acc) 55%,var(--bd))}
.pgstep{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--bd)}.pgstep[hidden]{display:none}
.pgstep button{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;font-size:14px}.pgstep button:disabled{cursor:default;opacity:.4}.pgstep svg{width:16px;height:16px}
.pgstep input{flex:1;min-width:80px;accent-color:var(--acc)}.pgsn{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.pgfr{flex:0 1 auto;max-height:55%;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bd)}.pgfr[hidden]{display:none}.pgfr:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pgf{border:1px solid var(--bd);border-radius:8px;padding:6px 10px;background:var(--card)}.pgf.on{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc)}
.pgf h3{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--mut)}.pgf.on h3{color:var(--fg)}.pgf p{margin:0;font-size:13px}.pgf p+table{margin-top:4px}.pgfr>p{margin:0;font-size:13.5px}
.pgf table{border-collapse:collapse;font:13px/1.5 ui-monospace,Menlo,monospace}.pgf th{padding:0 14px 0 0;font-weight:500;text-align:right;vertical-align:top;white-space:nowrap}.pgf td{padding:0 4px;word-break:break-word}
.pgf tr.chg td{background:color-mix(in srgb,var(--acc) 16%,transparent);border-radius:4px}.pgf tr.ret th{font-family:system-ui,sans-serif;color:var(--mut)}.pgf tr.ret td{color:var(--ok)}
@media(max-width:760px){.pglg{display:none}#pgb{width:41px;padding:0;justify-content:center}#pgb span{display:none}.pg{height:auto;min-height:0}.pgmain{grid-template-columns:minmax(0,1fr);gap:12px}.pgcs{display:none}.pged{height:55vh}.pgout{min-height:260px}.pgsp{display:none}}
/* Importing practice problems into the playground (picker.js, the problem panel, "Open in playground"). */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.ph h2{margin-bottom:8px}
.pgopen{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;font-size:14px;color:var(--mut)}.pgopen svg{width:15px;height:15px}.pgopen:hover{color:var(--acc);border-color:var(--acc)}body.pglock .pgopen{display:none}
.pgpw[hidden]{display:none}.pgprob{position:relative;border:1px solid var(--bd);border-radius:10px;background:var(--card)}.pgprob.shut .pgpb,.pgprob.shut .pgrs{display:none}
/* The title row: the title (which opens and closes the statement), then Start again with and Open in practice, then ×. It wraps on narrow screens. */
.pgph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:6px}
.pgph .pgptg{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:6px;padding:4px 6px;border:0;background:none;text-align:left;font-weight:600}.pgph .pgptg:hover{background:var(--code)}
.pgptg svg{flex:none;width:16px;height:16px;color:var(--mut);transition:transform .2s}.pgptg[aria-expanded=false] svg{transform:rotate(-90deg)}.pgprob .pgpx{font-weight:400;font-size:14px}
.pgpa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}.pgpa[hidden]{display:none}.pgpa button{padding:3px 10px;font-size:14px}.pgpa button:disabled{cursor:not-allowed;opacity:.5}.pgpd{width:1px;height:20px;background:var(--bd)}
.pgpc{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-color:transparent;background:none;color:var(--mut)}.pgpc:hover{background:var(--code);border-color:var(--bd);color:var(--fg)}.pgpc svg{width:16px;height:16px}
/* A narrow panel: the title and × share the first line, and the buttons get a line of their own under them. */
.pgprob{container-type:inline-size}@container (max-width:780px){.pgph .pgptg{flex-basis:0}.pgpc{order:1}.pgpa{order:2;flex-basis:100%;padding:0 6px 4px}.pgpd{display:none}}
.pgpb{max-height:min(30vh,320px);overflow:auto;padding:4px 12px 10px;border-top:1px solid var(--bd);font-size:14.5px}.pgpb pre{font-size:12.5px}.pgq{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--bd)}.pgq p{margin:4px 0}
.pick{width:min(640px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 48px));padding:0;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--fg);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.pick[open]{display:flex;flex-direction:column}.pick::backdrop{background:rgba(0,0,0,.35)}
.pkt{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}.pkt h2{margin:0;font-size:17px}.pkc{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:none;color:var(--mut)}
.pks{margin:4px 14px 8px;padding:9px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--fg);font:inherit}.pks:focus{outline:2px solid var(--acc);outline-offset:-1px}
.pkfl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:0 14px 8px;font-size:14px}.pka{display:inline-flex;align-items:center;gap:6px;color:var(--mut);cursor:pointer}.pka[hidden]{display:none}
.pick .seg button{padding:4px 11px;font-size:14px}
.pkl{flex:1;min-height:120px;margin:0;padding:4px 6px;list-style:none;overflow:auto;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.pkl li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 10px;border-radius:7px;cursor:pointer}.pkl li.on{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.pkx{font-weight:600}.pkx svg{flex:none;width:14px;height:14px;color:var(--mut);transition:transform .15s}.pkx[aria-expanded=true] svg{transform:rotate(90deg)}.pkx .nm{flex:1}.pkx .ct{font-weight:400;font-size:13.5px;color:var(--mut)}
.pkp{padding-left:34px!important}.pkp.flat{padding-left:10px!important}.pkp .nm{flex:1 1 auto}.pkp .ex{flex-basis:100%;order:3;font-size:13px;color:var(--mut)}.pkp mark{background:color-mix(in srgb,var(--acc) 25%,transparent);color:inherit;border-radius:2px}
.pkp .tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}.pkp .tp{color:var(--mut)}
.lt,.tg2{padding:1px 7px;border:1px solid var(--bd);border-radius:999px;color:var(--mut)}.lt.gleam{border-color:color-mix(in srgb,#ffaff3 60%,var(--bd))}.lt.py{border-color:color-mix(in srgb,#3776ab 50%,var(--bd))}.tg2.have{color:var(--acc);border-color:var(--acc)}.tg2.lk{color:var(--no)}
.pke{padding:16px 10px!important;color:var(--mut);cursor:default!important}
.pkn{margin:0;padding:0 14px;font-size:13.5px;color:var(--no)}.pkn:empty{display:none}.pkn:not(:empty){padding:8px 14px 0}
.pkfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px 12px;font-size:14px}.pkk{margin-left:auto;font-size:13px}
@media(max-width:760px){.pgopen span{display:none}.pgopen{padding:4px 7px}.pkk{display:none}}
/* "Make available offline" / "Works offline" (offline.js), in the playground's toolbar and on the home page. */
.offl[hidden]{display:none}.offl button{padding:3px 10px;font-size:13.5px}.offl button:disabled{cursor:progress;font-variant-numeric:tabular-nums}
.offl.ready span{font-size:13.5px;color:var(--ok)}.offl.failed button{color:var(--no);border-color:var(--no)}.homeoff{margin:16px 0 0}.homeoff:has(.offl[hidden]){display:none}

/* Home: three activities, with the exam browser in the page rather than a sidebar. */
body.athome #side,body.athome #grip,body.athome header>.bar,body.athome #stat{display:none}

body.athome #m{max-width:1120px;width:100%;padding:44px 32px;zoom:var(--zm,1)}
.prob.home{padding:0;border:0;background:none;margin:0}
.home .homeintro h2{font-size:32px;line-height:1.2;letter-spacing:-.025em;margin:0 0 12px;font-weight:650}
.homeintro p{margin:0 0 28px;font-size:16px}
.homepaths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.homepaths>button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:24px;min-width:0;border-radius:14px;background:var(--card);gap:12px}
.homepaths>button:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 4%,var(--card))}
.homepaths strong{font-size:21px;font-weight:650}
.homepaths>button>span:not(.pathicon):not(.pathgo){color:var(--mut);line-height:1.55}
.homepaths .pathicon{color:var(--acc);display:flex;margin-bottom:4px}.pathicon svg{width:26px;height:26px}
.homepaths .pathgo{color:var(--acc);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-top:auto;padding-top:12px}
.pathgo svg{width:18px;height:18px}
.homeresume{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--bd);font-size:14px}
.home .homebtns{margin:0;gap:8px}.homebtns button{font-size:14px;min-height:44px}
#home-exams{margin-top:44px;scroll-margin-top:calc(var(--hh,66px) + 20px)}#home-exams:focus{outline:none}#home-exams:focus-visible{outline:2px solid var(--acc);outline-offset:8px;border-radius:8px}
.home-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home .home-section-head h3{font-size:23px;color:var(--fg);margin:0;font-weight:650;letter-spacing:-.02em}
.home-study{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut)}
.home-study .ddb{min-height:44px;color:var(--fg)}
.homecoverage{font-size:14px;margin:12px 0 18px}
.homeadvice{font-size:14px;margin:-10px 0 18px}
.homefilters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 12px}
.homefilters #sortbar{display:flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap}
.homefilters .ddb,.homefilters .chip{min-height:44px}.homefilters #dd{width:auto}
.homecounts{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums;margin:12px 0}
.homeexamlist{border-top:1px solid var(--bd)}
.homeexam{width:100%;border:0;border-bottom:1px solid var(--bd);border-radius:0;padding:18px 12px;display:flex;align-items:center;gap:18px;text-align:left;background:none;min-height:84px}
.homeexam:hover{background:var(--card)}.homeexam>span:first-child{flex:1;min-width:0}.homeexam strong{display:block;font-size:16px;font-weight:600}.homeexam .mut{display:block;font-size:13px;margin-top:4px}
.homeexam .examstatus{text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.homeexam>svg{width:18px;height:18px;flex:none;color:var(--mut)}
.homeempty{padding:24px 12px;color:var(--mut)}
.homeprogress{margin-top:32px}.homeprogress>summary{cursor:pointer;padding:12px 0;color:var(--mut);font-size:14px}.homeprogress .cprogs{margin-top:8px}


.home button:focus-visible,.home summary:focus-visible,.home a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media(max-width:760px){body.athome #m{padding:28px 20px}.home .homeintro h2{font-size:27px}.homepaths{grid-template-columns:1fr;gap:10px}.homepaths>button{padding:18px 20px;gap:6px}.homepaths .pathicon{display:none}.homepaths strong{font-size:19px}.homepaths .pathgo{padding-top:6px}.homeintro p{font-size:15px;margin-bottom:22px}#home-exams{margin-top:32px}.home-study{width:100%;justify-content:space-between}.homeexam{padding:16px 0;gap:8px}.homeexam strong{font-size:15px}.homeexam .examstatus{font-size:13px}.homefilters{gap:8px}.homefilters #sortbar{gap:8px}}
.homefilters #sortbar{flex:0 1 auto;width:auto;padding:0;border:0}.homefilters #sortbar .srt{flex:0 1 auto}.homefilters #tdd{position:relative;width:auto}.homefilters #tddm{left:0;right:auto;min-width:280px;max-width:calc(100vw - 48px)}
@media(max-width:760px){body.athome header{gap:8px;padding:10px 12px}body.athome header h1{font-size:16px}body.athome #th{width:34px}body.athome .hnav button{width:28px}}

/* Activity navigation stays separate from the tools used while solving questions. */
.activitynav{display:flex;align-items:center;gap:6px;margin-left:12px;min-width:0}
.activitynav #exb,.activitynav #pgb,.activitynav #ptb{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;height:41px;min-height:41px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:600;white-space:nowrap;background:none;border-color:transparent}
.activitynav svg{width:18px;height:18px;flex:none}
.activitynav #pgb[hidden]{display:none}
.activitynav #pgb span{display:inline}
.activitynav #exb:hover,.activitynav #pgb:hover,.activitynav #ptb:hover{background:var(--code)}
.activitynav #exb[aria-current=page],.activitynav #pgb[aria-pressed=true],.activitynav #ptb[aria-pressed=true]{color:var(--acc);border-color:var(--bd);background:var(--code)}
.activitynav #ptb.run{color:var(--acc);border-color:var(--acc)}
header>#th{margin-left:auto}
.examtools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:100%;font-size:15px;padding-top:10px;border-top:1px solid var(--bd)}
.examtools>.bar{min-width:100px}.examtools>#rs{margin-left:auto}
body.athome .examtools{display:none}
.activitynav button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:960px){header{gap:8px}header h1{font-size:17px}.activitynav{margin-left:0}.activitynav #exb,.activitynav #pgb,.activitynav #ptb{padding:0 9px}}
@media(max-width:760px){.activitynav{order:10;flex:1 0 100%;justify-content:space-between;padding-top:8px;border-top:1px solid var(--bd)}.activitynav #exb,.activitynav #pgb,.activitynav #ptb{flex:1;padding:0 6px;font-size:13px;min-height:44px;height:44px}.activitynav #pgb{width:auto}.activitynav svg{display:none}.examtools{order:20;gap:8px}.examtools>.bar{flex:1}.examtools #stat{font-size:13px}.examtools .zm{font-size:14px}.examtools .zm button{min-width:32px;padding:6px 8px}}
@media(max-width:760px){header{padding:10px 12px}header h1{font-size:16px}header>#th{width:34px}.hnav button{width:28px}}
@media(max-width:760px){.activitynav #ptb .navclock{display:none}}

/* Compact, persistent view tools; detailed zoom controls open on demand. */
.viewtools{display:flex;align-items:center;gap:6px;margin-left:auto}
header>.viewtools+#th{margin-left:0}
body.ptm .examtools,body.pgm .examtools{display:none}
.zoom-control{position:relative}
#zmb{display:grid;place-items:center;width:41px;height:41px;padding:0;border-radius:10px}
#zmb[aria-expanded=true]{border-color:var(--acc);color:var(--acc);background:var(--code)}
.zoom-panel{position:absolute;right:0;top:calc(100% + 10px);width:294px;padding:16px;background:var(--card);border:1px solid var(--bd);border-radius:12px;z-index:8;box-shadow:0 8px 24px #0002;font-size:14px}
.zoom-panel[hidden]{display:none}.zoom-panel .zm{width:100%;display:flex}.zoom-panel .zm #zv{flex:1;min-width:0}.zoom-panel p{font-size:12px;color:var(--mut);margin:12px 0 0;line-height:1.5}
body.ptm #side,body.ptm #grip{display:none}
body.ptm #m{width:100%;max-width:960px;padding:32px 24px}
.ptchooser{text-align:center;margin:0 auto 28px;max-width:760px}
.ptchooser h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:0 0 8px}.ptchooser p{margin:0 0 20px}
.ptcollections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px;background:var(--code);border:1px solid var(--bd);border-radius:12px}
.ptcollections button{min-height:46px;border:1px solid transparent;background:none;font-size:14px;font-weight:600;padding:8px}
.ptcollections button[aria-pressed=true]{background:var(--card);border-color:var(--bd);color:var(--acc)}.ptcollections button:hover{color:var(--acc)}
.ptcollections button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
body.ptm .pthome{padding:28px;max-width:760px;margin:0 auto 24px}
.pthome>h2{font-size:21px;letter-spacing:-.015em}.pthome>p{color:var(--mut)}
.pthome .ptlength-title{margin:24px 0 10px;font-size:14px;color:var(--fg)}
.pthome .ptopts{margin:0 0 20px}.pthome .ptopt{min-height:94px}
.ptrule-details{margin:16px 0 20px;font-size:14px}.ptrule-details summary{padding:8px 0;cursor:pointer;color:var(--mut)}.ptrule-details .ptrules{margin:8px 0}
#ptgo{min-height:46px;min-width:160px}.pthome .pth{display:block;overflow-x:auto}
.ptsession{padding:20px;margin-bottom:20px;border:1px solid var(--bd);border-radius:12px;background:var(--card);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.ptsession .ptclock,.ptsession .ptscore{grid-column:1/-1;font-size:28px}.ptsession .ptsub{grid-column:1/-1;margin:0 0 12px}
.ptsession>a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg);font-size:13px;padding:8px 10px;border-radius:6px;min-height:40px}.ptsession>a:hover{background:var(--code)}.ptsession>a .nm{flex:1}.ptsession .ct{color:var(--mut);font-variant-numeric:tabular-nums}
.ptsession .ptbtns{grid-column:1/-1;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:8px 0 0;margin:0;gap:8px}.ptsession .ptbtns button{min-height:44px;padding:8px 18px}
@media(max-width:1100px) and (min-width:761px){header{column-gap:6px}header h1{font-size:16px}.activitynav #exb,.activitynav #pgb,.activitynav #ptb{padding:0 7px;font-size:13px}.activitynav svg{width:16px;height:16px}.viewtools{gap:4px}}
@media(max-width:760px){header{position:sticky}.viewtools{order:11;margin-left:0;flex:1;justify-content:flex-end;border-top:1px solid var(--bd);padding-top:8px}.viewtools #hlb,.viewtools #zmb{width:38px;height:38px}.viewtools #tmb{height:38px}.activitynav{border-top:0}.zoom-control{position:static}.zoom-panel{right:12px;left:auto;top:calc(100% + 6px);max-width:calc(100vw - 24px)}body.ptm #m{padding:24px 16px}.ptchooser h2{font-size:26px}.ptcollections{gap:2px;padding:4px}.ptcollections button{font-size:12px;padding:8px 2px;min-height:44px}body.ptm .pthome{padding:20px}.ptsession{padding:16px;grid-template-columns:1fr}.ptsession>a{grid-column:1/-1}}
.ptsource-details{margin:12px 0 20px;font-size:14px}.ptsource-details summary{cursor:pointer;color:var(--mut);padding:8px 0}.ptsource-details p{margin:8px 0 0;color:var(--mut)}
@media(max-width:760px){.activitynav svg{display:block;width:16px;height:16px;flex:none}body.pglock .activitynav #ptb .navclock{display:inline}.ptopts{grid-template-columns:1fr}.pthome .ptopt{min-height:80px}}
/* Narrow phones: the three labels and their icons still fit on one row. */
@media(max-width:360px){.activitynav #exb,.activitynav #pgb,.activitynav #ptb{padding:0 2px;gap:4px;font-size:12px}.activitynav svg{width:14px;height:14px}}

/* Exam progress belongs with the primary navbar controls on desktop. */
.examtools{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:41px;align-items:center;gap:2px 10px;flex:1 1 260px;max-width:none;min-width:290px;width:auto;padding:0;border:0;margin-left:auto}
.examtools>.bar{grid-column:2;grid-row:1;width:100%;min-width:0;height:14px;align-self:center}
.examtools #stat{grid-column:1;grid-row:1;font-size:14px;white-space:nowrap;line-height:1.4;font-variant-numeric:tabular-nums}
.examtools>#rs{grid-column:3;grid-row:1;min-height:41px;margin:0;padding:6px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.examtools~.viewtools{margin-left:auto}
@media(min-width:761px) and (max-width:1400px){header{gap:8px}header h1{font-size:17px}.activitynav{margin-left:0;gap:4px}.activitynav #exb,.activitynav #pgb,.activitynav #ptb{font-size:13px;padding:0 8px}}
@media(max-width:1100px){.examtools{order:12;flex:1 0 100%;max-width:none;min-width:0;padding-top:8px;border-top:1px solid var(--bd)}.examtools #stat{font-size:14px}.examtools~.viewtools{margin-left:auto}}
@media(max-width:760px){.examtools{order:12}.examtools~.viewtools{margin-left:auto}}

/* The same four controls form one right-aligned group in every view. */
.viewtools #th{margin:0;flex:none}
@media(max-width:760px){.viewtools{flex:1 0 100%;justify-content:flex-end}.viewtools #th{width:38px;height:38px}}

.homeresume[hidden],.homecoverage[hidden],.homeadvice[hidden]{display:none}

/* Let sidebar pickers wrap and stack before their labels get clipped. */
.sidetop>#sdd,.sidetop>#dd{flex:1 1 145px}
.sidetop>#sdd .ddb>span,.sidetop>#dd .ddb>span{flex:1;min-width:0;white-space:normal;overflow:visible;text-align:left;overflow-wrap:anywhere}
.sidetop .ddb>svg{flex:none}
.sidetop>.dd .ddb{min-height:44px}
.ddm li{white-space:normal;align-items:flex-start}
.ddm li>.ck{flex:none}
.dd-option{display:flex;flex:1;min-width:0;align-items:center;flex-wrap:wrap;gap:4px 8px;overflow-wrap:anywhere}
.dd-option>.sub{flex-basis:100%;margin-left:0!important;padding-left:0!important}
#side:has(.ddb[aria-expanded=true]){z-index:5}
.pgadd{position:relative;flex:none}body.pglock .pgadd{display:none}
.pgaddmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:3;width:300px;max-width:calc(100vw - 48px);padding:14px;border:1px solid var(--bd);border-radius:12px;background:var(--card);box-shadow:0 8px 24px #0002;font-size:14px;display:grid;gap:8px}
.pgaddmenu[hidden],.pgaddtargets[hidden]{display:none}
.pgaddmenu label{display:grid;gap:6px;color:var(--mut);font-size:12px}.pgaddmenu select{width:100%;min-width:0;color:var(--fg);min-height:40px;font-size:14px}
.pgaddmenu button{min-height:44px;text-align:left}.pgaddtargets{display:grid;gap:8px;border-top:1px solid var(--bd);padding-top:12px}.pgaddtargets p{font-size:12px;color:var(--mut);margin:0}
@media(max-width:760px){.ph{flex-wrap:wrap}.pgadd .pgopen span{display:inline}.pgaddmenu{left:0;right:auto}}

/* Make adding a problem a clear primary action within each problem header. */
.pgadd .pgopen{background:#2a5bd7;border-color:#2a5bd7;color:#fff;font-weight:600;min-height:40px;padding:8px 14px}
.pgadd .pgopen svg{width:18px;height:18px}.pgadd .pgopen:hover{background:#214bb7;border-color:#214bb7;color:#fff}
.pgadd .pgopen:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.pgreplace{width:min(480px,calc(100vw - 32px));padding:24px;border:1px solid var(--bd);border-radius:14px;background:var(--card);color:var(--fg);box-shadow:0 16px 48px #0004}
.pgreplace::backdrop{background:#0008}.pgreplace h2{font-size:21px;margin:0 0 12px}.pgreplace p{font-size:15px;line-height:1.6;margin:0 0 24px;overflow-wrap:anywhere}
.pgreplace-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.pgreplace-actions button{min-height:44px;padding:8px 14px}

.pgaddfill{border:0;padding:0;margin:0 0 4px;min-width:0}.pgaddfill legend{padding:0;margin-bottom:6px;font-size:12px;color:var(--mut)}
.pgfilloptions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.pgfilloptions label{position:relative;display:flex;min-width:0;cursor:pointer}
.pgfilloptions input{position:absolute;width:1px;height:1px;opacity:0}
.pgfilloptions span{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:6px 3px;border:1px solid var(--bd);border-radius:8px;font-size:12px;color:var(--fg);white-space:nowrap}
.pgfilloptions input:checked+span{background:var(--code);border-color:var(--acc);color:var(--acc);font-weight:600}
.pgfilloptions input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}.pgfilloptions label:hover span{background:var(--code)}

.pgaddmenu>[data-add]{display:flex;align-items:center;gap:9px}.pgaddmenu>[data-add]>svg{width:18px;height:18px;flex:none}.pgaddmenu>[data-add]>span{min-width:0}

.pgdestinations{border:0;min-width:0;margin:0;padding:0}.pgdestinations legend{font-size:12px;color:var(--mut);margin-bottom:8px;padding:0}
.pgdestination-options{display:grid;gap:5px;max-height:210px;overflow-y:auto;padding:3px}
.pgdestination-options label{position:relative;display:flex;cursor:pointer;min-width:0}
.pgdestination-options input{position:absolute;opacity:0;width:1px;height:1px}
.pgdestination-label{display:flex;flex-direction:column;gap:3px;width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:8px;color:var(--fg)}
.pgdestination-label strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.pgdestination-label>span{font-size:12px;color:var(--mut)}
.pgdestination-options input:checked+.pgdestination-label{border-color:var(--acc);background:var(--code)}
.pgdestination-options input:checked+.pgdestination-label strong{color:var(--acc)}
.pgdestination-options input:focus-visible+.pgdestination-label{outline:2px solid var(--acc);outline-offset:1px}.pgdestination-options label:hover .pgdestination-label{background:var(--code)}

/* A full-width footer surface with a compact group of links. */
.sitefooter{flex:none;border-top:1px solid var(--bd);padding-top:4px}
.sitesocials{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:0 16px;font-size:13px;color:var(--mut)}
.sitesocials button,.sitesocials a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 0;font:inherit;color:inherit;background:none;border:0;text-decoration:none}
.sitesocials button{color:var(--fg)}.sitesocials button:hover,.sitesocials a:hover{color:var(--acc)}.sitesocials svg{flex:none;width:16px;height:16px}
.sitesocials button:focus-visible,.sitesocials a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
@media(max-width:760px){.sitesocials{justify-content:center}.sitesocials button,.sitesocials a{min-height:44px}}

.sitesocials a.ig,.sitesocials a.li{padding:6px 10px;border-radius:8px;color:#fff;font-weight:600}
.sitesocials a.ig{background:linear-gradient(45deg,#fa7e1e,#d62976 35%,#962fbf 70%,#4f5bd5)}
.sitesocials a.li{background:#0a66c2}
.sitesocials a.ig:hover,.sitesocials a.li:hover{color:#fff;filter:brightness(1.1)}
@media(max-width:760px){.sitesocials{column-gap:10px}.sitesocials a.ig span,.sitesocials a.li span{display:none}.sitesocials a.ig,.sitesocials a.li{width:44px;padding:0;justify-content:center}}

body{display:flex;flex-direction:column;min-height:100dvh}body>header{flex:none}.wrap{flex:1}.sitefooter{margin:0 16px;padding:4px 0}

/* Keep contact links visible while reserving their actual height for page content. */
body{padding-bottom:var(--fh,49px)}
html{scroll-padding-bottom:calc(var(--fh,49px) + 16px)}
.sitefooter{position:fixed;inset:auto 0 0;z-index:6;margin:0;padding:4px 16px calc(4px + env(safe-area-inset-bottom));background:var(--card)}
@media(min-width:761px){aside,.grip{height:calc(100dvh - var(--hh,66px) - var(--fh,49px))}body.has-save-notice aside,body.has-save-notice .grip{height:calc(100dvh - var(--hh,66px) - var(--save-h,0px) - var(--fh,49px))}}

.pkdestination{display:grid;gap:12px;padding:20px}.pkdestination[hidden]{display:none}
.pkdestination h3{font-size:19px;margin:0}.pkdestination-name{margin:0 0 4px;color:var(--mut);font-size:14px;overflow-wrap:anywhere}
.pkdestination>[data-destination]{display:flex;align-items:center;gap:12px;min-height:70px;padding:14px;text-align:left;border-radius:10px}
.pkdestination>[data-destination]>svg{width:22px;height:22px;flex:none;color:var(--acc)}
.pkdestination>[data-destination]>span{display:grid;gap:4px;min-width:0}.pkdestination strong{font-size:15px;font-weight:600}.pkdestination small{font-size:13px;color:var(--mut);overflow-wrap:anywhere}
.pkdestination>[data-destination]:hover:not(:disabled){background:var(--code);border-color:var(--acc)}.pkdestination button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pkdestination-note{font-size:13px;color:var(--mut);margin:0}.pkdestination .pkback{justify-self:start;min-height:40px}
.pick>[hidden]{display:none}
/* Course switcher: the title opens a list of every course's practice site (chrome.js initCourses). */
.crs{position:relative;min-width:0}
#crsb{display:inline-flex;align-items:center;gap:7px;margin:0 -6px;padding:4px 8px;border:1px solid transparent;border-radius:8px;background:none;color:inherit;font:inherit;font-weight:inherit;cursor:pointer;transition:background-color .18s,border-color .18s}
#crsb:hover,#crsb[aria-expanded=true]{background:var(--code);border-color:var(--bd)}#crsb svg{flex:none;color:var(--mut);transition:transform .18s ease}#crsb[aria-expanded=true] svg{transform:rotate(180deg)}
.crsp{position:absolute;top:calc(100% + 8px);left:-6px;width:280px;padding:8px;background:var(--card);border:1px solid var(--bd);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:6;transform-origin:top left;opacity:0;transform:translateY(-6px) scale(.97);transition:opacity .16s ease,transform .16s ease}
.crsp[hidden]{display:none}.crsp.in{opacity:1;transform:none}
.crsp h3{margin:4px 8px 6px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);font-weight:600}
.crsp ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.crsp a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;font-size:15px}
.crsp a>span{display:grid;gap:1px}.crsp a b{font-weight:600}.crsp a>span>span{font-size:13px;color:var(--mut)}
.crsp a:hover,.crsp a:focus-visible{background:var(--code);outline:none}.crsp a:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
.crsp a[aria-current]{color:var(--acc)}.crsp a svg{flex:none;width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.crsp,#crsb svg{transition:none}}
@media (max-width:760px){.crs{position:static}.crsp{top:calc(100% + 6px);left:12px;right:12px;width:auto;transform-origin:top center}#crsb{gap:5px;padding:4px 6px}}