:root{--bg:#04060c;--panel:#0a1322;--line:#1b2c47;--cyan:#22d3ee;--blue:#3b82f6;--violet:#8b5cf6;--green:#34d399;--amber:#fbbf24;--red:#fb4b6a;--text:#e8eef8;--dim:#93a4bf;--cell:#07101d;--well:#0a1a2c;--hover:#0e1b30;--hair:#101d32;--th:#0d1a2e;--well2:#12213a;--sel:#06283a;--okbg:#0c3a2d;--ambg:#3a2a07;--redbg:#3a0f1c;--draft:#1a1408;--oktx:#b9f5dc;--badtx:#ffc7d1;--wn:#c9d3e3;--prose:#d7e0ee;--h3:#cfe9ff;--oneb:#1b5866;--head:#04060cee;--ph1:#123054;--ph2:#060c18;--edge:#3c506f;--illegal:#7a3344;--onacc:#03121a;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;font-weight:600;letter-spacing:-.01em}h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2em 0}h2{font-size:clamp(1.4rem,3vw,2rem);margin-top:2em}
code,textarea{font-family:ui-monospace,"JetBrains Mono",Consolas,Menlo,monospace}code{color:var(--amber);font-size:.9em;overflow-wrap:anywhere}
.wrap{max-width:1180px;margin:auto;padding-inline:20px}
header.top{position:sticky;top:0;z-index:5;background:var(--head);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-block:12px}.brand{font-weight:700;color:var(--text);letter-spacing:.06em;margin-right:auto}.brand i{color:var(--cyan);font-style:normal}.nav a:not(.brand){color:var(--dim);font-size:.93rem}.nav a:hover{color:var(--text)}
.draft{background:var(--draft);color:var(--amber);font-size:.85rem;text-align:center;padding:4px 16px}
.hero{padding-block:clamp(36px,7vw,84px);display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}.lead{font-size:1.2rem;color:var(--dim);max-width:36em}
.eyebrow{color:var(--cyan);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin:0}
.row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btn{display:inline-block;font:inherit;font-weight:600;font-size:.95rem;border:0;border-radius:6px;padding:9px 16px;background:var(--cyan);color:var(--onacc);cursor:pointer}.btn:hover{filter:brightness(1.12);text-decoration:none}.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--cyan)}
.btn:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible,.cell:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* The code box: rectangle on a multi-colour neon field */
.neon{position:relative;padding:3px;border-radius:4px;background:linear-gradient(115deg,#22d3ee,#8b5cf6 28%,#fb4b6a 52%,#fbbf24 74%,#34d399);background-size:300% 300%;animation:flow 12s ease infinite;min-width:0}
.neon:before{content:"";position:absolute;inset:-14px;z-index:-1;background:inherit;background-size:inherit;animation:inherit;filter:blur(26px);opacity:.55}
.neon-in{background:#050a14;border-radius:2px;padding:12px 14px;height:100%}.neon-title{color:var(--dim);font:13px ui-monospace,Consolas,monospace;margin-bottom:6px}
.neon textarea,.neon pre{display:block;width:100%;margin:0;background:transparent;border:0;color:#d5f5ff;font-size:13.5px;line-height:1.5;outline-offset:4px;white-space:pre;overflow:auto;tab-size:2}
@keyframes flow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){.neon,.neon:before,.pulse{animation:none!important}html{scroll-behavior:auto}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-block:18px}
.card{background:var(--panel);padding:18px 20px;color:var(--text);display:block;min-width:0}a.card:hover{background:var(--hover);text-decoration:none}.card h3{margin:.1em 0 .35em;font-size:1.07rem}.card p{margin:0;color:var(--dim);font-size:.93rem}.tag{display:inline-block;font-size:.75rem;color:var(--cyan);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}.tag.live{color:var(--green)}.tag.soon{color:var(--amber)}
.mod{margin-top:28px;border-top:1px solid var(--line);padding-top:12px}.mod ol{padding:0;list-style:none;margin:10px 0;counter-reset:none}.mod li{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair)}.mod li span{color:var(--dim);min-width:2em;font-variant-numeric:tabular-nums}.pill{margin-left:auto;font-size:.76rem;color:var(--green);white-space:nowrap;padding-left:8px}
.lesson{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.videoph{aspect-ratio:16/9;background:radial-gradient(circle at 30% 20%,var(--ph1),var(--ph2) 70%);display:grid;place-items:center;text-align:center;color:var(--dim);padding:20px;border:1px solid var(--line);max-width:860px}
.embed{aspect-ratio:16/9;width:100%;border:0;display:block;max-width:100%}
.qa{border-bottom:1px solid var(--line);padding:12px 0}.qa p{margin:0 0 6px}.qa .a{color:var(--green);margin-top:6px}.link{background:none;border:0;color:var(--cyan);font:inherit;font-size:.9rem;cursor:pointer;padding:0}
.lab{background:var(--panel);border:1px solid var(--line);padding:18px;margin-block:16px;min-width:0;overflow:hidden}.labgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;isolation:isolate}.labnote{color:var(--dim);font-size:.85rem;margin:.8em 0 0}
.status{padding:9px 12px;border-left:3px solid var(--dim);background:var(--well);font-size:.95rem;margin:10px 0}.status.good{border-color:var(--green);color:var(--oktx)}.status.bad{border-color:var(--red);color:var(--badtx)}.warn{color:var(--amber);font-size:.9rem}
.slider{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:.9rem;color:var(--dim);margin-block:8px;min-width:0}.slider input{grid-column:1/-1;grid-row:2;width:100%;accent-color:var(--cyan)}.slider b{color:var(--text)}.sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 22px}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-block:12px}.readout span{display:block;color:var(--dim);font-size:.82rem}.readout b{font-size:1.45rem;font-weight:400;font-variant-numeric:tabular-nums}.readout .good b{color:var(--green)}.readout .bad b{color:var(--red)}
.wavebox{overflow-x:auto}.wave{display:block;min-width:600px;width:100%;height:auto}.wn{fill:var(--wn);font:12px ui-monospace,Consolas,monospace}.wl{fill:var(--text);font:11px ui-monospace,Consolas,monospace}
.graph svg{width:100%;height:auto;max-height:300px}.ed{fill:none;stroke:var(--edge);stroke-width:1.5;transition:stroke .15s}.ed.on{stroke:var(--cyan);stroke-width:3}.el{fill:var(--dim);font:11px ui-monospace,monospace}.nd circle{fill:var(--well);stroke:var(--edge);stroke-width:1.5;transition:all .15s}.nd text{fill:var(--text);font:10.5px ui-monospace,monospace}.nd.on circle{fill:var(--sel);stroke:var(--cyan);stroke-width:3}
.tape{display:flex;flex-wrap:wrap;gap:3px;margin-block:8px}.bit{width:24px;height:26px;display:grid;place-items:center;background:var(--well);font:13px ui-monospace,monospace;color:var(--dim)}.bit.past{color:var(--text)}.bit.cur{background:var(--cyan);color:var(--onacc);font-weight:700}.bit.err{background:var(--red);color:#fff}
.fifoblocks{display:flex;flex-wrap:wrap;gap:2px;margin-block:12px}.fifoblocks i{width:15px;height:20px;background:var(--well2)}.fifoblocks i.full{background:linear-gradient(var(--cyan),var(--blue))}
.gridscroll{overflow-x:auto}.sbgrid{display:grid;gap:2px;min-width:580px;margin-block:10px}.axis{font:11px ui-monospace,monospace;color:var(--dim);text-align:center}.axis.lft{text-align:right;padding-right:6px;align-self:center}.cell{aspect-ratio:1;background:var(--th);border:0;padding:0;cursor:pointer;min-width:0}.cell.ok{background:var(--green)}.cell.no{background:var(--red)}.pulse{animation:pop .35s}@keyframes pop{0%{transform:scale(1.15);filter:brightness(1.5)}100%{transform:scale(1)}}
.lab textarea:not(.neon textarea){width:100%;background:#050a14;border:1px solid var(--line);color:#d5f5ff;padding:8px;font-size:13px}
.steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}.steps a{background:var(--hover);padding:3px 10px;font-size:.88rem}.steps i{color:var(--dim);font-style:normal}
table{width:100%;border-collapse:collapse;font-size:.93rem}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--dim);font-weight:500}.tablew{overflow-x:auto}
.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:10px}
footer{border-top:1px solid var(--line);margin-top:70px;padding-block:26px;color:var(--dim);font-size:.88rem}
@media (max-width:880px){.hero,.labgrid{grid-template-columns:minmax(0,1fr)}body{font-size:16px}}
.neon textarea{resize:vertical}

/* Lesson theory and animations */
.theory{max-width:76ch}.theory h2{margin-top:1.8em}.theory h3{margin-top:1.4em;font-size:1.15rem;color:var(--h3)}.theory p,.theory li{color:var(--prose)}.theory pre{background:#050a14;border:1px solid var(--line);border-left:3px solid var(--cyan);padding:12px 14px;overflow:auto;font-size:13.5px;line-height:1.5;color:#d5f5ff;max-width:100%}.theory table,.tt{border-collapse:collapse;margin:12px 0;font-size:.93rem}.theory th,.theory td,.tt th,.tt td{border:1px solid var(--line);padding:5px 10px;text-align:left}.theory th,.tt th{background:var(--th)}
.anim{background:var(--panel);border:1px solid var(--line);padding:18px;margin-block:16px;min-width:0;overflow:hidden}.anim .row{margin-block:8px}.anim .btn.small,.anim .btn.ghost.small{padding:5px 12px;font-size:.85rem}
.bitbtn{display:inline-flex;flex-direction:column;align-items:center;min-width:42px;padding:4px 8px;background:var(--cell);border:1px solid var(--line);color:var(--dim);cursor:pointer;font:inherit}.bitbtn small{font-size:.68rem}.bitbtn b{font:600 1.05rem ui-monospace,Consolas,monospace}.bitbtn.on{border-color:var(--cyan);color:var(--cyan);background:var(--sel)}.bitbtn:focus-visible,.kc:focus-visible,.sel:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.lamps{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.lamp{display:inline-flex;flex-direction:column;align-items:center;min-width:56px;padding:5px 9px;border:1px solid var(--line);background:var(--cell);color:var(--dim);transition:background .2s,color .2s}.lamp small{font-size:.68rem}.lamp b{font:600 1.1rem ui-monospace,Consolas,monospace}.lamp.on{background:var(--okbg);border-color:var(--green);color:var(--green)}.lamp.unk{background:var(--ambg);border-color:var(--amber);color:var(--amber)}
.bits{display:inline-flex;flex-wrap:wrap;gap:2px;vertical-align:middle}.bits i{font:600 .95rem ui-monospace,Consolas,monospace;font-style:normal;min-width:1.25em;text-align:center;padding:1px 3px;background:var(--cell);border:1px solid var(--line);color:var(--dim)}.bits i.one{color:var(--cyan);border-color:var(--oneb)}.bits i.hi{outline:2px solid var(--amber)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:8px;margin:12px 0}.readout>div{background:var(--cell);border:1px solid var(--line);padding:7px 10px;min-width:0}.readout span{display:block;color:var(--dim);font-size:.76rem}.readout b{font-weight:600;overflow-wrap:anywhere}
.sel{background:var(--cell);color:var(--text);border:1px solid var(--line);padding:7px 10px;font:inherit;max-width:100%;margin-block:6px}.mono{font-family:ui-monospace,Consolas,monospace;font-size:.87rem;overflow-wrap:anywhere}.okc{color:var(--green)}.badc{color:var(--red)}.unkc{color:var(--amber)}
.snip{background:#050a14;border:1px solid var(--line);padding:10px 12px;font-size:13px;line-height:1.5;color:#d5f5ff;overflow:auto;margin:8px 0}
.kmap{display:grid;grid-template-columns:70px repeat(4,minmax(42px,62px));gap:4px;margin:10px 0}.kmap .axis{color:var(--dim);font:12px ui-monospace,Consolas,monospace;align-self:center;text-align:center}.kc{height:48px;background:var(--cell);border:1px solid var(--line);color:var(--text);font:600 1rem ui-monospace,Consolas,monospace;cursor:pointer}
.netw{display:flex;flex-direction:column;gap:5px;max-width:360px;margin:10px 0;text-align:center}.rail{color:var(--dim);font-size:.8rem}.net{padding:9px;border:1px solid var(--line);background:var(--cell);color:var(--dim);transition:background .2s}.net.cond{background:var(--okbg);border-color:var(--green);color:var(--green)}.node{padding:7px;border:1px dashed var(--cyan);color:var(--cyan)}
.muxv,.states,.fifo{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.muxv span,.states span{padding:6px 11px;border:1px solid var(--line);background:var(--cell);color:var(--dim);font:.86rem ui-monospace,Consolas,monospace;transition:background .2s}.sel-on,.states .cur{background:var(--sel)!important;border-color:var(--cyan)!important;color:var(--cyan)!important}.states .illegal{border-style:dashed;border-color:var(--illegal)}.states .illegal.cur{background:var(--redbg)!important;border-color:var(--red)!important;color:var(--red)!important}
.rip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.fa{flex:1 1 92px;padding:8px;border:1px solid var(--line);background:var(--cell);color:var(--dim);display:flex;flex-direction:column;font-size:.85rem;transition:background .25s}.fa small{font-size:.7rem}.fa span,.fa b{font-family:ui-monospace,Consolas,monospace}.fa.done{border-color:var(--oneb)}.fa.now{background:var(--sel);border-color:var(--cyan);color:var(--cyan)}
.sr{margin:10px 0;font-size:1.2rem}.fifo span{width:50px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--cell);color:var(--text);font:.95rem ui-monospace,Consolas,monospace;transition:background .2s}.fifo span.live{background:var(--okbg);border-color:var(--green)}.fifo small{height:1.1em;font-size:.68rem;color:var(--amber)}
.pipe{display:flex;flex-wrap:wrap;align-items:stretch;gap:4px;margin:10px 0}.pipe span{flex:1 1 72px;padding:8px;background:var(--cell);border:1px solid var(--line);font-size:.86rem;display:flex;flex-direction:column;text-align:center}.pipe small{color:var(--dim);font-size:.72rem}.pipe i{width:6px;background:var(--cyan);flex:none}.pipe i.ff{width:auto;padding:8px 6px;background:var(--amber);color:#111;font:600 .75rem ui-monospace,Consolas,monospace;display:flex;align-items:center}.pipe .pcur{background:var(--sel);border-color:var(--cyan)}
.tl{padding:8px 13px;color:#071018;font-weight:600;transition:background .3s}.mcsvg{width:100%;max-width:640px;height:auto;display:block}
@media (prefers-reduced-motion:reduce){.lamp,.net,.fa,.fifo span,.tl,.muxv span,.states span{transition:none}}

/* Light theme: the default. Code blocks stay dark in both themes. */
html[data-theme=light]{--bg:#f6f8fb;--panel:#fff;--line:#cfd9e6;--cyan:#0e7490;--blue:#1d4ed8;--violet:#6d28d9;--green:#047857;--amber:#b45309;--red:#be123c;--text:#0f1b2d;--dim:#4b5b73;--cell:#f1f5f9;--well:#eef3f8;--hover:#eaf1f7;--hair:#e4eaf1;--th:#e9eff6;--well2:#dfe7f0;--sel:#d9f0f6;--okbg:#d6f5e8;--ambg:#fdf0d5;--redbg:#fde4ea;--draft:#fff4dc;--oktx:#065f46;--badtx:#9f1239;--wn:#334155;--prose:#1e2b3d;--h3:#0b4f66;--oneb:#7fb9c7;--head:#f6f8fbee;--ph1:#dbe9f6;--ph2:#f1f5f9;--edge:#94a3b8;--illegal:#d98a9c;--onacc:#fff;color-scheme:light}
html[data-theme=light] [stroke="#22d3ee"]{stroke:#0e7490}html[data-theme=light] [stroke="#fbbf24"]{stroke:#b45309}html[data-theme=light] [stroke="#34d399"]{stroke:#047857}html[data-theme=light] [stroke="#8b5cf6"]{stroke:#6d28d9}html[data-theme=light] [stroke="#fb4b6a"]{stroke:#be123c}html[data-theme=light] [stroke="#1b2c47"]{stroke:#cfd9e6}
html[data-theme=light] [fill="#22d3ee"]{fill:#0e7490}html[data-theme=light] [fill="#34d399"]{fill:#047857}html[data-theme=light] [fill="#fb4b6a"]{fill:#be123c}
.theory pre code,.snip code{color:#d5f5ff}
.neon-title{color:#93a4bf}
.themebtn{font:inherit;font-size:.85rem;padding:5px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);cursor:pointer}.themebtn:hover{border-color:var(--cyan)}.themebtn:focus-visible,.bugline:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* Find the bug */
.bugx{background:var(--panel);border:1px solid var(--line);padding:18px;margin-block:16px;min-width:0}.bugx .labnote{margin-top:0}.bugx h3{margin-bottom:.3em}
.bugcode{background:#050a14;padding:8px 0;overflow-x:auto;margin:10px 0}.bugline{display:block;min-width:100%;width:max-content;background:none;border:0;border-left:3px solid transparent;padding:1px 12px;color:#d5f5ff;font:13px/1.55 ui-monospace,Consolas,monospace;white-space:pre;text-align:left;cursor:pointer}.bugline:hover{background:#12213a}.bugline.tried{opacity:.5}.bugline.found{background:#3a0f1c;border-left-color:#fb4b6a;color:#ffc7d1}
.btn.small{padding:5px 12px;font-size:.85rem}
/* Video column on the right. On narrower screens it drops below the content. */
.withside{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:34px;align-items:start}.sidemain{min-width:0}.sidecol{min-width:0;position:sticky;top:76px;max-height:calc(100vh - 90px);overflow-y:auto;padding-top:28px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.sidecol h2{font-size:1rem;margin:0 0 10px;color:var(--dim);font-weight:600}.sidecol h2:not(:first-child){margin-top:20px}
.sidevid{display:block;background:var(--panel);border:1px solid var(--line);margin-bottom:10px;color:var(--text);font-size:.86rem;line-height:1.35;overflow:hidden}.sidevid:hover{border-color:var(--cyan);text-decoration:none}.sidevid img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--well)}.sidevid b{display:block;font-weight:600;padding:8px 10px 0}.sidevid small{display:block;color:var(--dim);padding:4px 10px 0;font-size:.78rem}.sidevid b:last-child,.sidevid small:last-child{padding-bottom:9px}
.sidecol:focus-visible,.sidevid:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:1060px){.withside{grid-template-columns:minmax(0,1fr)}.sidecol{position:static;max-height:none;overflow:visible;padding-top:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 12px}.sidecol h2{grid-column:1/-1}}
/* Study plan */
.planform{background:var(--panel);border:1px solid var(--line);padding:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 22px;margin-block:18px}.pfield{display:flex;flex-direction:column;gap:3px;font-size:.92rem;color:var(--dim);min-width:0}.pfield .sel{width:100%;margin:0;color:var(--text)}.planform .row{grid-column:1/-1;margin:0}
.pknown{grid-column:1/-1;border:1px solid var(--line);padding:8px 12px 12px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:5px 16px;font-size:.92rem;min-width:0}.pknown legend{color:var(--dim);padding:0 6px}.pknown label{display:flex;gap:7px;align-items:flex-start}
input[type=checkbox]{accent-color:var(--cyan)}.sel:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pbar{height:9px;background:var(--well2);margin-block:10px;overflow:hidden}.pbar i{display:block;height:100%;background:var(--green);transition:width .3s}
.pdays{display:grid;gap:12px;margin-block:14px}.pday{background:var(--panel);border:1px solid var(--line);padding:10px 14px;min-width:0}.pday h3{margin:.1em 0 .4em;font-size:1rem;display:flex;justify-content:space-between;gap:10px}.pday h3 small{color:var(--dim);font-weight:400;font-size:.82rem;white-space:nowrap}
.pitem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:start;padding:5px 0;border-top:1px solid var(--hair);font-size:.95rem}.pitem small{color:var(--dim);font-size:.8rem}.pitem>small{white-space:nowrap}.pitem em{color:var(--dim);font-size:.75rem;font-style:normal;border:1px solid var(--line);padding:0 5px;margin-left:4px}.pitem.isdone span,.pitem.isdone span a{color:var(--dim);text-decoration:line-through}.pitem input{margin-top:.35em}
.pquick{margin:2px 0 0;gap:6px}[hidden]{display:none!important}.pitem em.pvid{color:var(--cyan);border-color:var(--cyan);margin-left:0}.pdrop{margin-block:10px;font-size:.93rem}.pdrop summary{cursor:pointer;color:var(--amber)}
@media (prefers-reduced-motion:reduce){.pbar i{transition:none}}


/* AXI lab */
.axgrid{overflow-x:auto;margin:8px 0}.axrow{display:flex;gap:2px;align-items:center;margin-bottom:2px;width:max-content}.axlab{width:82px;flex:none;color:var(--dim);font:12px ui-monospace,Consolas,monospace}.axc,.axb{width:34px;height:28px;flex:none;border:1px solid var(--line);background:var(--cell);color:var(--dim);font:12px ui-monospace,Consolas,monospace;cursor:pointer;padding:0}.axc.on{background:var(--cyan);color:var(--onacc);border-color:var(--cyan)}.axb.on{background:var(--ambg);color:var(--amber);border-color:var(--amber)}.axc:focus-visible,.axb:focus-visible{outline:2px solid var(--amber);outline-offset:1px}.axsig{box-shadow:inset 0 0 0 1px var(--cyan)!important}

/* Clickable terms */
.gt{font:inherit;color:inherit;background:none;border:0;border-bottom:1.5px dotted var(--cyan);padding:0;cursor:help}.gt:hover,.gt[aria-expanded=true]{color:var(--cyan)}.gt:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.gpop{position:fixed;z-index:20;right:18px;bottom:18px;width:min(340px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--cyan);padding:14px 36px 14px 16px;box-shadow:0 8px 28px #0003;font-size:.93rem}.gpop b{display:block;margin-bottom:4px}.gpop p{margin:0 0 8px}.gclose{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--dim);font-size:1.2rem;cursor:pointer;line-height:1;padding:4px}.gclose:focus-visible{outline:2px solid var(--amber)}
/* On this page */
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 18px}.toc a{padding:3px 11px;border:1px solid var(--line);border-radius:14px;font-size:.84rem;background:var(--panel)}.toc a:hover{border-color:var(--cyan);text-decoration:none}[id]{scroll-margin-top:76px}
/* Explore, Bug Hunt, Quiz */
.fold{background:var(--panel);border:1px solid var(--line);margin-block:8px;padding:0 14px}.fold summary{cursor:pointer;font-weight:600;padding:10px 0}.fold summary small{color:var(--dim);font-weight:400;margin-left:6px}.fold summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.fold>.labnote{margin-top:0}.fold .qa:last-child{border-bottom:0}
.exsearch{max-width:420px;margin-top:10px}.exsearch .sel{width:100%;margin:2px 0 0}.exlist{list-style:none;padding:0;margin:0 0 8px}.exrow{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--hair)}.exn{color:var(--dim);min-width:2em;font-variant-numeric:tabular-nums}.exrow>div{min-width:0}.exrow p{margin:1px 0 5px;color:var(--dim);font-size:.9rem}.exlink{font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:5px}.chip{font-size:.76rem;padding:1px 9px;border:1px solid var(--line);border-radius:12px}.chip:hover{border-color:var(--cyan);text-decoration:none}.chip.solved{background:var(--okbg);border-color:var(--green);color:var(--green)}
.huntrow{display:block;background:var(--panel);border:1px solid var(--line);padding:9px 14px;margin-block:6px;color:var(--text)}.huntrow:hover{border-color:var(--cyan);text-decoration:none}.huntrow b{display:block}.huntrow span{color:var(--dim);font-size:.9rem}.huntrow.solved{border-left:4px solid var(--green)}.huntrow.solved b:after{content:"  found";color:var(--green);font-weight:400;font-size:.8rem}
.qcard{background:var(--panel);border:1px solid var(--line);padding:14px 16px;margin-block:10px}.qq{margin:0 0 10px;font-weight:600}.qopts{display:grid;gap:6px}.qopt{font:inherit;font-size:.95rem;text-align:left;padding:8px 12px;background:var(--cell);border:1px solid var(--line);color:var(--text);cursor:pointer}.qopt:hover:not(:disabled){border-color:var(--cyan)}.qopt:disabled{cursor:default}.qopt.right{background:var(--okbg);border-color:var(--green);color:var(--green)}.qopt.wrong{background:var(--redbg);border-color:var(--red);color:var(--red)}.qopt:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.qwhy{margin-top:10px;font-size:.93rem}.qverdict{font-weight:600}

/* Cards keep their own borders, so a part-filled row leaves no grey blocks */
.cards{gap:10px;background:none;border:0}.card{border:1px solid var(--line)}a.card:hover{border-color:var(--cyan)}

/* Scroll through the clock */
.csbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-block:4px}.csbar .sel{margin:0}.csbar .slider{flex:1 1 200px;margin:0}.cscount{margin:0 0 0 auto}
.csdia{display:grid;grid-template-columns:92px minmax(0,1fr) 92px;gap:8px;align-items:stretch;margin-block:8px}.csbox{display:grid;place-items:center;text-align:center;background:var(--sel);border:1px solid var(--cyan);font-size:.82rem;font-weight:600;padding:4px}.cswires{display:grid;gap:2px;min-width:0}
.cswire{display:grid;grid-template-columns:70px minmax(0,1fr) 46px;gap:6px;align-items:center;font:11.5px/1.5 ui-monospace,Consolas,monospace;color:var(--dim)}.cswire.live{color:var(--text);font-weight:600}.csval{text-align:right}.csline{position:relative;height:2px;background:var(--line);overflow:hidden}.cswire.live .csline{height:4px;background:var(--well2)}.csline i{position:absolute;top:0;bottom:0;width:30%;background:var(--cyan);animation:csright 1.1s ease-in-out infinite}.csline.left i{animation-name:csleft;background:var(--amber)}@keyframes csright{from{left:-30%}to{left:100%}}@keyframes csleft{from{left:100%}to{left:-30%}}
.cswave{margin-block:4px}.cswave .wave{min-width:560px;max-height:290px}.wcursor{fill:var(--cyan);opacity:.16}
.csstrip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 50% 10px;margin-block:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;position:relative}.cscard{flex:0 0 min(290px,72vw);scroll-snap-align:center;text-align:left;font:inherit;font-size:.87rem;line-height:1.4;padding:8px 12px;background:var(--cell);border:1px solid var(--line);color:var(--dim);cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}.cscard b{display:block;color:var(--text);margin-bottom:2px}.cscard.on{opacity:1;background:var(--panel);border-color:var(--cyan);color:var(--text)}.csstrip:focus-visible,.cscard:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.csline i{animation:none;left:35%}.cscard{transition:none}}
@media (max-width:560px){.csdia{grid-template-columns:62px minmax(0,1fr) 62px}.csbox{font-size:.68rem}.cswire{grid-template-columns:58px minmax(0,1fr) 34px}}

/* The clock widget: side by side on wide screens, so it fits on one screen */
.csmain{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}@media (min-width:1000px){.csmain{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}.cswave .wave{min-width:0}.csmain .csdia{margin-block:4px}}.cswave .wave{max-height:none}.csstrip{padding-block:2px 8px}.cscard{flex-basis:min(330px,76vw)}
@media (max-width:560px){.csbox{font-size:.6rem;padding:2px;overflow-wrap:anywhere}}
/* Three columns: outline, content, videos */
body:has(.three) main.wrap{max-width:1560px}.three{grid-template-columns:232px minmax(0,1fr) 250px;gap:28px}
.leftcol{position:sticky;top:76px;max-height:calc(100vh - 90px);overflow-y:auto;padding-top:28px;font-size:.88rem;min-width:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.leftcol h2{font-size:1rem;margin:0 0 8px}.navmod{border-top:1px solid var(--line)}.navmod summary{cursor:pointer;padding:6px 2px;font-weight:600;font-size:.84rem;line-height:1.3}.navmod ol,.navplain{list-style:none;margin:0 0 6px;padding:0}.navlink{display:flex;gap:7px;padding:4px 6px;color:var(--dim);line-height:1.3;border-left:2px solid transparent}.navlink span{min-width:1.5em;font-variant-numeric:tabular-nums;font-size:.8em}.navlink:hover{color:var(--text);text-decoration:none;background:var(--hover)}.navlink.cur,.navlink.on{color:var(--cyan);border-left-color:var(--cyan);background:var(--sel);font-weight:600}.navlink.isdone:after{content:"done";margin-left:auto;padding-left:6px;color:var(--green);font-size:.72rem;font-weight:400}.navmod summary:focus-visible,.navlink:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
@media (max-width:1240px){.three{grid-template-columns:minmax(0,1fr) 250px}.three>.leftcol{grid-column:1/-1;position:static;max-height:none;overflow:visible;padding-top:14px;columns:2;column-gap:20px}.three>.leftcol h2{column-span:all}.navmod,.navplain li{break-inside:avoid}}
@media (max-width:1060px){.three{grid-template-columns:minmax(0,1fr)}}@media (max-width:640px){.three>.leftcol{columns:1}}
.lecrow{margin:4px 0 14px}.lecbtn{display:inline-block;font-size:.76rem;line-height:1.3;padding:3px 10px;border-radius:12px;background:var(--cyan);color:var(--onacc);font-weight:600;white-space:nowrap}.lecbtn:hover{text-decoration:none;filter:brightness(1.1)}.lecbtn.soon{background:none;color:var(--dim);border:1px dashed var(--line);font-weight:400}
.crow{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--hair)}.crow a:not(.lecbtn){flex:1;min-width:0}.cmod ol{margin:6px 0}.cmod[hidden]{display:none}
/* Compact Explore */
.exrow{align-items:center;padding:5px 0;gap:10px}.exlink{flex:1;min-width:0;font-weight:500;font-size:.95rem}.exrow .chips{flex:none;justify-content:flex-end}.chip{font-size:.7rem;padding:0 7px}.foldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:6px;align-items:start}.foldgrid .fold{margin:0;font-size:.92rem}@media (max-width:560px){.exrow{flex-wrap:wrap}.exrow .chips{width:100%;justify-content:flex-start;padding-left:2.6em}}
.navlink.isdone,.exlink.isdone{color:var(--green)}
/* Focus mode: one animation, one screen */
.anim,.lab{position:relative}.focusbtn{position:absolute;top:8px;right:8px;z-index:2;font:inherit;font-size:.74rem;padding:2px 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--dim);cursor:pointer}.focusbtn:hover{color:var(--text);border-color:var(--cyan)}.focusbtn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.isfocus{position:fixed!important;inset:0;z-index:30;margin:0!important;overflow:auto!important;padding:40px clamp(14px,3vw,44px) 18px;background:var(--bg)}body.hasfocus{overflow:hidden}.isfocus .focusbtn{position:fixed;top:10px;right:14px;background:var(--cyan);color:var(--onacc);border-color:var(--cyan);font-size:.85rem;padding:4px 14px}
.fcols{display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,2.4fr);gap:28px;align-items:start}.fcols>div{min-width:0}.isfocus .wave{min-width:0}
/* Animated roadmap */
.rmroles{display:flex;flex-wrap:wrap;gap:6px;margin-block:12px}.rmsvg{display:block;width:100%;height:auto;background:var(--panel);border:1px solid var(--line)}.rmroad{fill:none;stroke:var(--line);stroke-width:10;stroke-linecap:round}.rmdraw{fill:none;stroke:var(--cyan);stroke-width:10;stroke-linecap:round}.rmdot{fill:var(--amber)}.rmnode{cursor:pointer;opacity:0;transition:opacity .35s}.rmnode.show{opacity:1}.rmnode circle{fill:var(--panel);stroke:var(--edge);stroke-width:3}.rmnode.ready circle{fill:var(--okbg);stroke:var(--green)}.rmnode.sel circle{stroke:var(--cyan);stroke-width:5}.rmnode text{fill:var(--text);font:600 13px Inter,system-ui,sans-serif}.rmnode .n{font-size:13px;fill:var(--dim)}.rmnode .st{font-weight:400;font-size:11px;fill:var(--dim)}.rmnode:focus-visible{outline:none}.rmnode:focus-visible circle{stroke:var(--amber);stroke-width:5}
.rmdetail{background:var(--panel);border:1px solid var(--line);border-top:0;padding:12px 16px}.rmdetail h3{margin:.1em 0 .3em}.rmdetail p{margin:0 0 8px;color:var(--dim)}.rmdetail ul{columns:2;column-gap:24px;margin:6px 0 10px;padding-left:18px;font-size:.92rem}@media (max-width:560px){.rmdetail ul{columns:1}}
@media (prefers-reduced-motion:reduce){.rmnode{transition:none}}

.heroplan{color:var(--dim);font-size:.95rem;max-width:34em;margin:2px 0 0}
/* Search */
.srch{position:fixed;inset:0;z-index:40;background:#0008;padding:clamp(0px,6vh,70px) 12px 12px;overflow:auto}.srchin{max-width:680px;margin:auto;background:var(--panel);border:1px solid var(--line);padding:14px}.srchtop{display:flex;gap:8px;align-items:center}.srchtop .sel{flex:1;margin:0;min-width:0;font-size:1rem}.srchrow{display:block;padding:7px 8px;border-top:1px solid var(--hair);color:var(--text)}.srchrow:hover,.srchrow:focus-visible{background:var(--hover);text-decoration:none}.srchrow b{font-weight:600;font-size:.95rem}.srchd{display:block;color:var(--dim);font-size:.84rem}.srchkind{float:right;color:var(--cyan);font-size:.72rem;margin-left:8px}.srchnone{padding:8px 4px}.srchnone p{color:var(--dim);margin:4px 0}.srchlist{margin-top:8px;min-height:40px}

/* Tighter sizing across the site */
body{font-size:15.5px;line-height:1.55}h1{font-size:clamp(1.65rem,3.2vw,2.35rem)}h2{font-size:clamp(1.2rem,2vw,1.45rem);margin-top:1.5em}.lead{font-size:1.03rem}.hero{padding-block:clamp(22px,4vw,44px)}.hero h1{font-size:clamp(1.8rem,3.6vw,2.7rem)}.btn{font-size:.88rem;padding:7px 13px}.theory h2{margin-top:1.3em}.theory h3{font-size:1.02rem}.card{padding:12px 14px}.card h3{font-size:.98rem}.anim,.lab,.bugx,.planform{padding:12px 14px;margin-block:10px}.readout{gap:6px;margin-block:8px;grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}.readout>div{padding:4px 8px}.readout span{font-size:.72rem}.readout b{font-size:.98rem}.slider{font-size:.82rem;margin-block:3px}.sliders{gap:2px 16px}.status{padding:6px 10px;font-size:.88rem;margin:7px 0}.bitbtn{min-width:34px;padding:2px 5px}.lamp{min-width:46px;padding:3px 7px}.labnote{font-size:.78rem;margin-top:.5em}.qa{padding:8px 0}.mod{margin-top:16px;padding-top:8px}.mod li{padding:4px 0}.fold summary{padding:7px 0;font-size:.95rem}.row{gap:6px;margin:8px 0}.fifoblocks i{width:11px;height:15px}
.wave{min-width:520px}.readout .bits i{font-size:.8rem;min-width:1.1em;padding:0 2px}
/* View code */
.codebtn{right:66px}.anim .focusbtn:not(.codebtn),.lab .focusbtn:not(.codebtn){right:8px}.isfocus .codebtn{position:fixed;right:90px;top:10px;background:var(--panel);color:var(--text);border-color:var(--line);font-size:.85rem;padding:4px 14px}
.anim>*:nth-child(3),.lab>*:nth-child(3){margin-top:22px}.vcode{margin-top:10px;background:#050a14;border:1px solid var(--line)}.vchead{display:flex;justify-content:space-between;gap:10px;padding:5px 12px;font-size:.76rem;color:#93a4bf;border-bottom:1px solid #1b2c47}.vchead .link{color:#22d3ee;font-size:.76rem}.vcode pre{margin:0;padding:10px 12px;color:#d5f5ff;font:12.5px/1.5 ui-monospace,Consolas,monospace;overflow:auto;max-height:340px}mark.vk{background:#12303a;color:#fbbf24;padding:0 3px;border-radius:2px;outline:1px solid #2a5866;transition:background .3s}mark.vk.hot{background:#6b4a06;color:#fff}
/* 3D FIFO */
.f3wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}@media (max-width:820px){.f3wrap{grid-template-columns:minmax(0,1fr)}}.f3scene{height:300px;perspective:900px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,var(--well),var(--panel) 75%);border:1px solid var(--line);cursor:grab;touch-action:none;user-select:none}.f3scene:active{cursor:grabbing}.f3ring{position:relative;width:0;height:0;transform-style:preserve-3d;transition:transform .1s linear}.f3cell{position:absolute;left:calc(var(--w)/-2);top:-13px;width:var(--w);height:26px;background:var(--well2);border:1px solid var(--edge);transform:rotateZ(var(--a)) translateY(calc(var(--rad)*-1)) rotateX(90deg);transition:background .12s}.f3cell.on{background:var(--green);border-color:var(--green)}.f3ptr{position:absolute;left:-10px;top:-10px;width:20px;height:20px;display:grid;place-items:center;font:700 11px ui-monospace,Consolas,monospace;color:#fff;border-radius:50%;transform:rotateZ(var(--a,0deg)) translateY(calc((var(--rad) - 26px)*-1)) translateZ(14px) rotateZ(calc(var(--a,0deg)*-1));transition:transform .15s}.f3ptr.w{background:#b45309}.f3ptr.r{background:#0e7490}
@media (prefers-reduced-motion:reduce){.f3ptr,.f3cell,.f3ring,mark.vk{transition:none}}

/* Denser reading: less vertical space, more on each screen */
body{line-height:1.45}.theory{max-width:92ch}.theory p,.theory ul,.theory ol{margin-block:.45em}.theory li{margin-block:.1em}.theory ul{padding-left:1.25em}.theory h2{margin:.95em 0 .25em;font-size:1.12rem}.theory h3{margin:.8em 0 .2em;font-size:.98rem}.theory pre{margin:.5em 0;padding:8px 11px;font-size:12.5px;line-height:1.4}.theory table{margin:.5em 0;font-size:.86rem}.theory th,.theory td{padding:3px 8px}
.sidemain>h1,.sidemain h1{margin:.1em 0 .1em;line-height:1.1}.sidemain .lead{margin:.1em 0 .3em;font-size:.95rem}.sidemain h2{margin:1em 0 .3em;font-size:1.12rem}.eyebrow{font-size:.68rem;letter-spacing:.1em;margin-top:10px!important}.toc{margin:4px 0 6px;gap:4px}.toc a{padding:1px 8px;font-size:.74rem}.lecrow{margin:2px 0 6px}.qa p{margin:0 0 2px}.sidemain ul{margin-block:.3em}
/* Tighter left index and video column */
.leftcol,.sidecol{padding-top:10px}.leftcol{font-size:.78rem}.leftcol h2{margin-bottom:4px;font-size:.88rem}.navmod summary{padding:3px 2px;font-size:.76rem;line-height:1.25}.navlink{padding:1px 5px;line-height:1.25;gap:5px}.navlink span{min-width:1.3em;font-size:.72rem}.navmod ol,.navplain{margin:0 0 3px}.three{grid-template-columns:205px minmax(0,1fr) 225px;gap:20px}.sidecol h2{font-size:.82rem;margin-bottom:5px}.sidevid{margin-bottom:6px;font-size:.76rem;line-height:1.25}.sidevid b{padding:4px 7px 0}.sidevid small{padding:2px 7px 0;font-size:.7rem}.sidevid b:last-child,.sidevid small:last-child{padding-bottom:5px}
@media (max-width:1240px){.three{grid-template-columns:minmax(0,1fr) 225px}}@media (max-width:1060px){.three{grid-template-columns:minmax(0,1fr)}}
.withside{gap:20px}.withside:not(.three){grid-template-columns:minmax(0,1fr) 225px}@media (max-width:1060px){.withside:not(.three){grid-template-columns:minmax(0,1fr)}}
/* Smaller drawings */
.wave{max-height:320px}.lab svg:not(.wave){max-height:260px}.f3scene{height:250px}

.f3ptr{left:-13px;top:-13px;width:26px;height:26px;font-size:13px;box-shadow:0 0 0 2px #fff;transform:rotateZ(var(--a,0deg)) translateY(calc((var(--rad) - 34px)*-1)) rotateZ(calc(var(--a,0deg)*-1)) rotateZ(calc(var(--spin,0deg)*-1)) rotateX(calc(var(--tilt,0deg)*-1))}

/* ========== Revamp: the wafer ========== */
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/BricolageGrotesque-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/assets/fonts/BricolageGrotesque-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/InstrumentSans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/InstrumentSans-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/InstrumentSans-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/JetBrainsMono-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
html[data-theme=light]{--bg:#F1F2F8;--panel:#FFF;--line:#CCCFE2;--cyan:#4B32C3;--blue:#2743C9;--violet:#7A2FC2;--green:#0B7A5E;--amber:#975800;--red:#C2264B;--text:#15172B;--dim:#565B78;--cell:#EEEFF7;--well:#EBECF6;--hover:#E8E8F6;--hair:#E2E3F0;--th:#E6E7F4;--well2:#DADCEC;--sel:#E7E3FB;--okbg:#D8F3E8;--ambg:#FBEFD6;--redbg:#FBE3E9;--draft:#ECE9FB;--oktx:#075C47;--badtx:#9C1838;--wn:#3A3E5C;--prose:#20233A;--h3:#2C2470;--oneb:#9A8EE0;--head:#F1F2F8EE;--ph1:#E2DEFA;--ph2:#F1F2F8;--edge:#979BBB;--illegal:#D98AA0;--onacc:#FFF;--lit1:#4B32C3;--lit2:#0F8F9E;--lit3:#C8921A;--dieb:#FBFBFE;--diec:#DDDFF0;--code:#17183A;color-scheme:light}
html[data-theme=dark]{--bg:#12132A;--panel:#1B1D3C;--line:#30335C;--cyan:#A99BFF;--blue:#8CA2FF;--violet:#C9A0FF;--green:#4FD6A8;--amber:#E9B44C;--red:#FF7F96;--text:#ECEDF8;--dim:#A3A7CB;--cell:#22244A;--well:#22244A;--hover:#272A52;--hair:#292B50;--th:#25274C;--well2:#2F3260;--sel:#2C2A62;--okbg:#123F35;--ambg:#3F3112;--redbg:#471C2C;--draft:#232350;--oktx:#A6EFD3;--badtx:#FFBFCB;--wn:#C7CAE4;--prose:#DDDFF0;--h3:#CFC8FF;--oneb:#6A62B5;--head:#12132AEE;--ph1:#2C2A62;--ph2:#12132A;--edge:#5A5E8E;--illegal:#8A3F55;--onacc:#12132A;--lit1:#A99BFF;--lit2:#4FD6D0;--lit3:#E9B44C;--dieb:#1B1D3C;--diec:#2F3260;--code:#0E0F26;color-scheme:dark}
html[data-theme=light] [stroke="#22d3ee"]{stroke:#4B32C3}html[data-theme=light] [stroke="#fbbf24"]{stroke:#975800}html[data-theme=light] [stroke="#34d399"]{stroke:#0B7A5E}html[data-theme=light] [stroke="#8b5cf6"]{stroke:#7A2FC2}html[data-theme=light] [stroke="#fb4b6a"]{stroke:#C2264B}html[data-theme=light] [stroke="#1b2c47"]{stroke:#CCCFE2}html[data-theme=light] [fill="#22d3ee"]{fill:#4B32C3}html[data-theme=light] [fill="#34d399"]{fill:#0B7A5E}html[data-theme=light] [fill="#fb4b6a"]{fill:#C2264B}
html[data-theme=light] [fill="#22d3ee22"]{fill:#4B32C31F}html[data-theme=light] [fill="#fbbf2422"]{fill:#97580020}html[data-theme=light] [fill="#34d39922"]{fill:#0B7A5E1F}html[data-theme=light] [fill="#8b5cf622"]{fill:#7A2FC21F}
html[data-theme=dark] [stroke="#22d3ee"]{stroke:#A99BFF}html[data-theme=dark] [stroke="#fbbf24"]{stroke:#E9B44C}html[data-theme=dark] [stroke="#34d399"]{stroke:#4FD6A8}html[data-theme=dark] [stroke="#8b5cf6"]{stroke:#C9A0FF}html[data-theme=dark] [stroke="#fb4b6a"]{stroke:#FF7F96}html[data-theme=dark] [stroke="#1b2c47"]{stroke:#30335C}
body{font-family:"Instrument Sans",system-ui,sans-serif;font-size:15.5px}h1,h2,h3,h4,.brand{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;letter-spacing:-.018em}code,textarea,pre,.mono,.bits i,.wn,.wl,.axlab,.csname,.csval{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
.wn,.wl{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.draft{background:var(--draft);color:var(--cyan);font-size:.76rem;padding:2px 12px}
.nav{gap:4px 14px;padding-block:7px}.brand{font-size:1.02rem;letter-spacing:.01em}.brand i{color:var(--cyan)}.nav>a:not(.brand),.navdrop summary{color:var(--dim);font-size:.86rem;cursor:pointer}.navdrop{position:relative}.navdrop summary{list-style:none}.navdrop summary::-webkit-details-marker{display:none}.navdrop summary:after{content:" ▾";font-size:.7em}.navdrop summary:hover{color:var(--text)}.navdrop>div{position:absolute;top:calc(100% + 8px);left:-10px;z-index:9;min-width:190px;background:var(--panel);border:1px solid var(--line);padding:5px;box-shadow:0 10px 26px #15172B26}.navdrop a{display:block;padding:5px 9px;color:var(--text);font-size:.86rem}.navdrop a:hover{background:var(--hover);text-decoration:none}.navdrop summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.navtools{display:inline-flex;gap:5px;margin-left:4px}.themebtn{font-size:.78rem;padding:3px 9px;border-radius:3px}#timerbtn.running{background:var(--cyan);color:var(--onacc);border-color:var(--cyan);font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.btn{border-radius:3px;font-weight:700}.btn.ghost{background:var(--panel)}.btn.small{padding:4px 10px;font-size:.8rem}.card,.anim,.lab,.bugx,.planform,.fold,.qcard,.huntrow,.sidevid{border-radius:2px}.tag{text-transform:none;letter-spacing:0;font-size:.76rem}.eyebrow{text-transform:none;letter-spacing:0}
.crumb{font-size:.8rem;color:var(--dim);margin:12px 0 0}.lessonhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.lessonhead>div{min-width:0}
.theory pre,.snip,.bugcode,.vcode,.neon-in,.lab textarea:not(.neon textarea){background:var(--code)}.theory pre{border:0;border-left:3px solid var(--cyan);border-radius:2px}.neon textarea,.neon pre{color:#E4E6FF}.theory pre,.snip,.bugline,.vcode pre{color:#E4E6FF}.theory pre code,.snip code{color:#E4E6FF}
code{color:var(--cyan)}mark.vk{background:#2E2A6B;outline-color:#6A62B5;color:#F2C86B}mark.vk.hot{background:#975800;color:#fff}.gt{border-bottom-color:var(--cyan)}.wcursor{fill:var(--cyan)}
/* The die */
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(14px,3vw,34px)}.hero2 h1{font-size:clamp(2.2rem,5.1vw,4.3rem);line-height:.98;letter-spacing:-.03em;margin:0 0 .35em}.hero2 .lead{font-size:1.08rem;margin:0 0 10px;max-width:33em}.diefig{margin:0}.die{display:block;width:100%;height:auto;max-height:min(70vh,560px)}.diefig figcaption{min-height:2.7em;margin-top:6px;font-size:.86rem;color:var(--dim)}
.dsub{fill:var(--dieb);stroke:var(--line)}.dseal{fill:none;stroke:var(--edge);stroke-width:1.5;stroke-dasharray:6 3}.dpads rect{fill:var(--lit3);opacity:.75}.dmb{fill:var(--bg);stroke:var(--line)}.dm.hot .dmb{stroke:var(--cyan);stroke-width:2}.dc rect{fill:var(--diec);transition:fill .15s}a.dc:hover rect,a.dc:focus rect{fill:var(--cyan)}a.dc:focus{outline:none}.dc.isdone rect{fill:url(#lit)}.mini .dc.isdone rect{fill:url(#litm)}.dc.cur rect{fill:var(--cyan)}.droute{fill:none;stroke:var(--cyan);stroke-width:2;opacity:.4;pointer-events:none}.dpulse{fill:none;stroke:var(--lit3);stroke-width:4;stroke-linecap:round;stroke-dasharray:.018 .982;pointer-events:none;opacity:0}
.die.mini{flex:none;width:86px;height:86px;margin-top:12px;max-height:none}.mini .dsub{stroke-width:6}.mini .dseal{display:none}.mini .dm .dmb{stroke-width:3}@media (max-width:640px){.die.mini{width:60px;height:60px}}
@media (prefers-reduced-motion:no-preference){a.dc rect{animation:cellin .34s calc(var(--i)*14ms) both}.droute{stroke-dasharray:1;stroke-dashoffset:1;animation:routein 1.5s .95s ease-out forwards}.dpulse{animation:pulse 7s 2.5s linear infinite}@keyframes cellin{from{opacity:0;transform:translateY(5px)}}@keyframes routein{to{stroke-dashoffset:0}}@keyframes pulse{0%{stroke-dashoffset:1;opacity:0}3%{opacity:1}97%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}}
.homeback{margin-block:8px}.homeback p{margin:4px 0 0;color:var(--dim);font-size:.88rem}
.trylist,.courselist{border-top:1px solid var(--line)}.tryrow,.courserow{display:flex;gap:4px 18px;padding:8px 2px;border-bottom:1px solid var(--line);color:var(--text)}.tryrow{flex-direction:column}.tryrow b{font-family:"Bricolage Grotesque",sans-serif;color:var(--cyan);font-size:1.02rem}.tryrow span{color:var(--dim);font-size:.9rem}.tryrow:hover,.courserow:hover{background:var(--hover);text-decoration:none}.courserow{justify-content:space-between;font-size:.92rem;padding-block:5px}.courserow b{font-weight:400}.courserow span{color:var(--dim);font-size:.8rem;white-space:nowrap}.courserow:first-child span{color:var(--green);font-weight:700}
@media (max-width:820px){.hero2{grid-template-columns:minmax(0,1fr)}.die{max-height:none}}
/* Study timer */
.tmpanel{position:fixed;top:64px;right:clamp(8px,3vw,40px);z-index:25;width:min(320px,calc(100vw - 16px));background:var(--panel);border:1px solid var(--cyan);padding:12px 14px;box-shadow:0 14px 34px #15172B33;font-size:.9rem}.tmhead{display:flex;justify-content:space-between;align-items:center}.tmhead .gclose{position:static}.tmq{margin:6px 0 0}.tmbig{font:700 2.9rem/1.1 "JetBrains Mono",monospace;text-align:center;font-variant-numeric:tabular-nums;margin-top:4px}.tmring{height:5px;background:var(--well2);margin-block:6px}.tmring i{display:block;height:100%;background:var(--cyan);width:0}.tmweek{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;height:70px;margin-top:8px}.tmday{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;text-align:center;min-height:0;height:100%}.tmday i{display:block;background:var(--cyan);min-height:2px;border-radius:1px}.tmday span{font-size:.68rem;color:var(--dim);margin-top:2px}

/* The die stays dark in both themes, as real silicon does */
code,pre,textarea,.bugline,.vcode pre,.snip{font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.dsub{fill:#15163A;stroke:none}.dsheen{fill:url(#sheen);pointer-events:none}.mini .dsheen{fill:url(#sheenm)}.dseal{stroke:#5F6398}.dpads rect{fill:#C8921A;opacity:1}.dmb{fill:#1E2049;stroke:#3A3D75}.dm.hot .dmb{stroke:#A99BFF;stroke-width:2.5}.dc rect{fill:#343769}a.dc:hover rect,a.dc:focus rect{fill:#A99BFF}.dc.cur rect{fill:#A99BFF}.dc.isdone rect{fill:url(#lit)}.mini .dc.isdone rect{fill:url(#litm)}a.dc:focus-visible rect{stroke:#F2C86B;stroke-width:2.5}
.droute{stroke:#C8921A;stroke-width:2.5;opacity:.85}.dvia{fill:#F2C86B;pointer-events:none}.dpulse{stroke:#FFF3C9;stroke-width:5;filter:drop-shadow(0 0 5px #F2C86B)}.die{box-shadow:0 18px 44px #15163A40;border-radius:4px}.die.mini{box-shadow:none}.mini .dsub{stroke:none}.mini .dmb{stroke:#3A3D75}
.dc.justlit rect{animation:litflash .9s ease-out}@keyframes litflash{0%{fill:#fff}100%{}}
.litnote{font-size:.86rem;color:var(--green);font-weight:700;align-self:center}
@media (prefers-reduced-motion:reduce){.dc.justlit rect{animation:none}}
@media (prefers-reduced-motion:no-preference){.dvia{animation:cellin .3s 2.2s both}}
@media (max-width:640px){header.top{position:static}}

/* Code editor scrollbar matches the dark box */
.neon textarea,.neon pre,.theory pre,.vcode pre,.bugcode,.snip{scrollbar-width:thin;scrollbar-color:#4A4E86 transparent}

/* ========== Round, colourful and moving ========== */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--r-l:20px;--r-m:13px;--r-s:9px;--grad:linear-gradient(100deg,#7C5CFF,#EC4899 45%,#F97316 75%,#EAB308)}
html[data-theme=light]{--bg:#F5F4FD;--line:#DDDCF1;--head:#FFFFFFD9;--cell:#F3F2FC;--code:#1B1A45}html[data-theme=dark]{--bg:#100F2B;--head:#100F2BD9}
body{background:var(--bg);position:relative;isolation:isolate}
body:before{content:"";position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;background:radial-gradient(36vmax 36vmax at 18% 22%,#7C5CFF38,transparent 70%),radial-gradient(32vmax 32vmax at 82% 16%,#EC489930,transparent 70%),radial-gradient(38vmax 38vmax at 75% 78%,#06B6D42E,transparent 70%),radial-gradient(30vmax 30vmax at 22% 82%,#F9731626,transparent 70%)}
html[data-theme=dark] body:before{opacity:.8}
header.top{background:var(--head);backdrop-filter:blur(14px) saturate(1.5);border-bottom:1px solid var(--line)}.draft{background:var(--grad);color:#fff;font-weight:700}
.brand i{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1{background:linear-gradient(100deg,var(--text) 40%,#7C5CFF 62%,#EC4899 78%,#F97316);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}.hero2 h1{line-height:1.03}
.btn{border-radius:999px;transition:transform .16s,box-shadow .16s,filter .16s}.btn:not(.ghost){background:var(--grad);background-size:170% 100%;color:#fff;box-shadow:0 7px 20px #7C5CFF4D;transition:transform .16s,box-shadow .16s,background-position .4s}.btn:not(.ghost):hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 11px 26px #EC489955;filter:none}.btn.ghost:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px #7C5CFF}.btn:active{transform:scale(.97)}.axc.on{border-radius:8px}
.themebtn{border-radius:999px;transition:border-color .15s,background .15s}.themebtn:hover{background:var(--hover)}#timerbtn.running{background:var(--grad);border-color:transparent;color:#fff}
.card,.anim,.lab,.bugx,.planform,.fold,.qcard,.huntrow,.sidevid,.tmpanel,.gpop,.srchin,.rmdetail,.rmsvg,.f3scene,.pday,.neon{border-radius:var(--r-l)}.neon-in,.theory pre,.snip,.vcode,.bugcode,.status,.readout>div,.cscard,.csbox,.net,.node,.fa,.qopt,.sel,.navdrop>div,.tablew,.kc,.pipe span,.states span,.muxv span,.fifo span,.bitbtn,.lamp,.exsearch .sel{border-radius:var(--r-m)}.axc,.axb,.chip,.bits i,.navlink,.navdrop a,.srchrow,.exrow,.tryrow,.courserow{border-radius:var(--r-s)}.lecbtn,.toc a,.focusbtn,.chip{border-radius:999px}.fifoblocks i,.pbar,.pbar i,.tmring,.tmring i,.tmday i{border-radius:5px}.neon{overflow:visible}.vcode{overflow:hidden}.sidevid,.card{overflow:hidden}.tablew table{border-radius:var(--r-m);overflow:hidden}.bugline:first-child{border-top-left-radius:8px}.bugx .bugcode{padding:10px 0}.neon-in{height:100%}.theory pre{border-left:0;box-shadow:inset 4px 0 0 var(--m,#7C5CFF)}
.anim,.lab{border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--ang),var(--m,#7C5CFF),#EC4899,#F97316,#06B6D4,var(--m,#7C5CFF)) border-box;box-shadow:0 10px 30px #5B4BD61A}.anim:hover,.lab:hover{animation:ringspin 4s linear infinite;box-shadow:0 14px 38px #5B4BD62E}@keyframes ringspin{to{--ang:360deg}}.isfocus,.isfocus:hover{border-radius:0;background:var(--bg);animation:none}
.card,.qcard,.huntrow,.sidevid,.fold,.pday{box-shadow:0 5px 18px #5B4BD612;transition:transform .18s,box-shadow .18s,border-color .18s}a.card:hover,.huntrow:hover,.sidevid:hover{transform:translateY(-3px);box-shadow:0 13px 28px #5B4BD62B}.sidevid img{transition:transform .35s}.sidevid:hover img{transform:scale(1.05)}
/* Module colour */
.lessonbody h2,.theory h2{display:flex;align-items:center;gap:8px}.lessonbody h2:before{content:"";flex:none;width:7px;height:1em;border-radius:4px;background:linear-gradient(var(--m),#EC4899)}.crumb a{color:var(--m)}.lessonbody .toc a{border-color:color-mix(in srgb,var(--m) 40%,var(--line))}.lessonbody .toc a:hover{background:var(--m);color:#fff;border-color:var(--m)}code{color:color-mix(in srgb,var(--m,#7C5CFF) 72%,var(--text))}pre code{color:inherit}
.navmod summary:before{content:"";display:inline-block;width:8px;height:8px;margin:0 5px 1px 1px;border-radius:50%;background:var(--m)}.navmod summary{list-style:none}.navlink.cur{color:var(--m,var(--cyan));border-left-color:var(--m,var(--cyan));background:color-mix(in srgb,var(--m,#7C5CFF) 14%,transparent)}.navmod .navlink.cur{color:var(--text)}.navplain .navlink.on{background:color-mix(in srgb,var(--m,#7C5CFF) 18%,transparent);color:var(--text);border-left-color:var(--m,var(--cyan))}.navlink{border-radius:0 8px 8px 0}.navplain .navlink span{color:var(--m,var(--dim));font-weight:700}
.cmod{border-top:0;background:var(--panel);border-radius:var(--r-l);padding:10px 16px;margin-top:10px;box-shadow:0 5px 18px #5B4BD612,inset 5px 0 0 var(--m)}.cmod h3{margin:.3em 0}.cmod p{margin:0 0 4px;color:var(--dim);font-size:.9rem}.crow:last-child{border-bottom:0}.fold{box-shadow:0 5px 18px #5B4BD612,inset 5px 0 0 var(--m,transparent);padding-left:18px}.lecbtn:not(.soon){background:var(--grad);color:#fff}
.tag{color:var(--cyan)}.qopt{transition:transform .13s,background .2s}.qopt:hover:not(:disabled){transform:translateX(4px)}.bitbtn,.kc,.axb,.axc{transition:transform .1s,background .15s}.bitbtn:active,.kc:active,.axb:active{transform:scale(.9)}.bitbtn.on,.lamp.on{box-shadow:0 0 12px color-mix(in srgb,var(--green) 40%,transparent)}.bitbtn.on{box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 35%,transparent)}.slider input{accent-color:var(--m,#7C5CFF)}.pbar i,.tmring i,.tmday i,.fifoblocks i.full{background:var(--grad)}
/* The chip in colour */
.die{border-radius:6%;box-shadow:0 24px 60px #5B4BD659;transform-style:preserve-3d;transition:transform .2s ease-out}.die.mini{box-shadow:0 5px 14px #5B4BD640;border-radius:14px}.dmb{fill:color-mix(in srgb,var(--mc) 13%,#191A42);stroke:color-mix(in srgb,var(--mc) 55%,#191A42)}.dc rect{fill:color-mix(in srgb,var(--mc) 38%,#22244F);transition:fill .15s}a.dc:hover rect,a.dc:focus rect{fill:var(--mc)}.dc.isdone rect,.mini .dc.isdone rect{fill:var(--mc);stroke:#FFF8;stroke-width:1.5}.dc.cur rect{fill:#fff}.dpads rect{fill:#E9B44C}.dvia{fill:#FFE29A}.dpulse.p2{stroke:#7DF9FF;filter:drop-shadow(0 0 6px #22D3EE)}.dpulse.p3{stroke:#FF9BD2;filter:drop-shadow(0 0 6px #EC4899)}
/* Home extras */
.statstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-block:6px 12px}.stat{background:var(--panel);border-radius:var(--r-l);padding:9px 16px;box-shadow:0 5px 18px #5B4BD612,inset 0 -4px 0 var(--m);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.stat b{font:700 1.75rem "Bricolage Grotesque",sans-serif;color:var(--m);font-variant-numeric:tabular-nums}.stat span{color:var(--dim);font-size:.88rem}@media (max-width:640px){.statstrip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ribbon{overflow:hidden;margin-block:4px 8px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.ribtrack{display:flex;gap:7px;width:max-content;padding-block:4px}.ribdup{display:contents}.ribtrack a{flex:none;padding:3px 12px;border-radius:999px;font-size:.8rem;color:var(--text);background:color-mix(in srgb,var(--m) 17%,var(--panel));border:1px solid color-mix(in srgb,var(--m) 45%,transparent);white-space:nowrap}.ribtrack a:hover{background:var(--m);color:#fff;text-decoration:none}
.trylist{border-top:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:10px}.tryrow{border:0;border-radius:var(--r-l);padding:12px 15px;transition:transform .18s,box-shadow .18s;box-shadow:0 5px 18px #5B4BD612;color:var(--text)}.tryrow:nth-child(1){background:linear-gradient(135deg,#7C5CFF2E,#06B6D41F)}.tryrow:nth-child(2){background:linear-gradient(135deg,#EC48992E,#F973161F)}.tryrow:nth-child(3){background:linear-gradient(135deg,#06B6D42E,#22C55E1F)}.tryrow:nth-child(4){background:linear-gradient(135deg,#F973162E,#EAB3081F)}.tryrow:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 14px 30px #5B4BD62B;background-color:transparent}.tryrow b{color:var(--text)}
.courselist{border-top:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:6px}.courserow{border:1px solid var(--line);background:var(--panel);padding:6px 11px;border-radius:var(--r-m);transition:transform .15s,border-color .15s}.courserow:hover{transform:translateY(-2px);border-color:#7C5CFF;background:var(--panel)}.roles a{}
@media (prefers-reduced-motion:no-preference){
body:before{animation:meshdrift 26s ease-in-out infinite alternate}@keyframes meshdrift{from{transform:translate3d(-3%,-2%,0) rotate(0)}to{transform:translate3d(3%,3%,0) rotate(12deg)}}
h1{animation:h1flow 9s ease-in-out infinite alternate}@keyframes h1flow{from{background-position:0 0}to{background-position:100% 0}}
.draft{background-size:200% 100%;animation:h1flow 12s ease-in-out infinite alternate}
.die:not(.mini){animation:diefloat 7s ease-in-out infinite alternate}@keyframes diefloat{from{translate:0 -5px}to{translate:0 7px}}
.dpulse{animation-duration:6s}.dpulse.p2{animation-duration:8s;animation-delay:3.4s}.dpulse.p3{animation-duration:10s;animation-delay:5.2s}.dpads rect{animation:padglow 3.6s ease-in-out infinite alternate}@keyframes padglow{from{opacity:.65}to{opacity:1}}
.ribtrack{animation:ribmove 95s linear infinite}.ribbon:hover .ribtrack,.ribbon:focus-within .ribtrack{animation-play-state:paused}@keyframes ribmove{to{transform:translateX(-50%)}}
.rv{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.8,.25,1)}.rv.in{opacity:1;transform:none}.drawin .wave{animation:wavedraw 1s ease-out both}@keyframes wavedraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}
@media (prefers-reduced-motion:reduce){.ribbon{overflow-x:auto}.ribdup{display:none}}
.sparkc{position:fixed;inset:0;z-index:70;pointer-events:none}

/* Module colours stay readable as text */
.crumb a{color:color-mix(in srgb,var(--m) 50%,var(--text))}.navplain .navlink span{color:color-mix(in srgb,var(--m,#7C5CFF) 70%,var(--text))}

/* Less empty space inside boxes */
.readout{display:flex;flex-wrap:wrap;gap:6px}.readout>div{flex:0 1 auto;min-width:92px;width:auto}.statstrip{display:flex;flex-wrap:wrap;gap:8px}.stat{flex:0 1 auto;padding:6px 14px}.stat b{font-size:1.35rem}.qopts{display:flex;flex-wrap:wrap}.qopt{flex:0 1 auto}.card{padding:10px 13px}.cards{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}.anim,.lab,.bugx{padding:10px 12px}.anim>*:nth-child(3),.lab>*:nth-child(3){margin-top:0}.fcols.dense{grid-template-columns:minmax(190px,270px) minmax(0,1fr);gap:16px;margin-top:22px}.fcols.dense .wave{min-width:0}.fcols.dense>div>:first-child{margin-top:0}.anim p{margin-block:.35em}.lamps{margin:5px 0}.status{display:block}.pfield{font-size:.86rem}.planform{gap:8px 16px}.courselist{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.trylist{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.tryrow{padding:9px 12px}.crow{padding:3px 0}.cmod{padding:7px 13px}.qcard{padding:9px 13px}.huntrow{padding:6px 12px}.rmdetail{padding:9px 13px}
@media (max-width:900px){.fcols,.fcols.dense{grid-template-columns:minmax(0,1fr)}}

/* Editable values in the code */
.vkin{font:inherit;color:#F2C86B;background:#2E2A6B;border:1px solid #6A62B5;border-radius:5px;padding:0 3px;margin:0;min-width:2ch;text-align:center;height:1.35em;vertical-align:baseline;transition:background .25s}.vkin:hover{border-color:#F2C86B}.vkin:focus{outline:2px solid #F2C86B;outline-offset:1px;background:#3A3580}.vkin.hot{background:#975800;color:#fff}.vkin.badv{background:#7A1E36;border-color:#FF7F96;color:#fff}.vcnote{margin:0;padding:0 12px 6px;color:#FF9FB2;font-size:.76rem;min-height:0}.vcnote:empty{display:none}

.anim>*:nth-child(3),.lab>*:nth-child(3){margin-top:26px}.fcols.dense{margin-top:26px}.vkin{box-sizing:border-box}

/* Course page: modules as big boxes two by two; lessons as small boxes inside, each with its lecture's preview */
.cmods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px;align-items:stretch}
.cmods .cmod{margin-top:0;display:flex;flex-direction:column}.cmods .cmod ol{align-content:start}
.cmod ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px;margin:8px 0 4px}
.cmod .crow{display:grid;grid-template-columns:auto 1fr;align-content:start;column-gap:5px;row-gap:4px;padding:0 0 8px;border:1px solid var(--line);border-radius:var(--r-m);background:color-mix(in srgb,var(--m) 5%,transparent);overflow:hidden;transition:border-color .15s,transform .15s}
.cmod .crow:last-child{border-bottom:1px solid var(--line)}
.cmod .crow:hover{border-color:var(--m);transform:translateY(-2px)}
.cthumb{grid-column:1/-1;display:block;aspect-ratio:16/9;background:#14123A;margin-bottom:3px}
.cthumb img{display:block;width:100%;height:100%;object-fit:cover}
.cthumb.none{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--m) 55%,#14123A),#14123A)}
.cthumb.none i{font-style:normal;font-size:.66rem;color:#ffffffb0;letter-spacing:.02em}
.cmod .crow .exn{min-width:0;padding-left:8px;font-size:.7rem;font-weight:700;color:var(--m)}
.cmod .crow a:not(.lecbtn):not(.cthumb){padding-right:8px;font-weight:600;font-size:.8rem;line-height:1.25}
.cmod .crow .lecbtn{grid-column:1/-1;justify-self:start;margin:2px 0 0 8px;font-size:.62rem;padding:1px 7px}
.cmod h3{font-size:1.02rem}.cmod p{font-size:.84rem}
@media (max-width:1180px){.cmods{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.cmod ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cmod .crow{transition:none}.cmod .crow:hover{transform:none}}

/* Course page, wide screens: the module index fills the full height of the window beside the lessons */
.navcount{display:none}
@media (min-width:1241px){
#coursepage .leftcol{display:flex;flex-direction:column;height:calc(100vh - 90px);max-height:none}
#coursepage .leftcol .navplain{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:4px;margin:0}
#coursepage .leftcol .navplain li{flex:1;display:flex}#coursepage .leftcol .navplain li:first-child{flex:.55}#coursepage .leftcol .navplain li:first-child .navlink{grid-template-columns:1fr}
#coursepage .leftcol .navlink{flex:1;display:grid;grid-template-columns:1.6em 1fr;align-content:center;column-gap:4px;padding:4px 10px;font-size:.84rem;line-height:1.2;border-radius:var(--r-s);border-left:3px solid var(--m,var(--line));background:color-mix(in srgb,var(--m,#7C5CFF) 6%,transparent)}
#coursepage .leftcol .navlink:hover{background:color-mix(in srgb,var(--m,#7C5CFF) 14%,transparent);text-decoration:none}
#coursepage .leftcol .navcount{display:block;grid-column:2;font-size:.68rem;color:var(--dim)}
}

/* Course page: one module picked on the left, so give it the whole width and bigger lesson boxes */
.cmods:has(.cmod[hidden]){grid-template-columns:minmax(0,1fr)}
.cmods:has(.cmod[hidden]) .cmod ol{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.cmods:has(.cmod[hidden]) .cmod .crow{row-gap:6px;padding-bottom:12px}
.cmods:has(.cmod[hidden]) .cmod .crow a:not(.lecbtn):not(.cthumb){font-size:1.02rem}
.cmods:has(.cmod[hidden]) .cmod .crow .exn{font-size:.85rem;padding-left:12px}
.cmods:has(.cmod[hidden]) .cmod .crow .lecbtn{font-size:.74rem;margin-left:12px}
.cmods:has(.cmod[hidden]) .cmod h3{font-size:1.35rem}.cmods:has(.cmod[hidden]) .cmod p{font-size:.95rem}

/* Course covers: on the course cards and at the top of each course page */
.ccard{display:flex;flex-direction:column}
.ccover{display:block;width:calc(100% + 26px);max-width:none;height:auto;margin:-10px -13px 10px;aspect-ratio:16/9;object-fit:cover}
.chead{display:flex;gap:22px;align-items:center;margin-bottom:6px}.chead h1{margin-top:0}
.chero{width:min(320px,38%);height:auto;aspect-ratio:16/9;border-radius:var(--r-m);box-shadow:0 8px 26px #1b155a33;flex:none}
@media (max-width:640px){.chead{flex-direction:column;align-items:flex-start}.chero{width:100%}}

/* Study plan output: days as a grid of compact cards, not one long column */
.pdays{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px;align-items:start}
.pday{padding:8px 11px 9px}
.pday h3{font-size:.9rem;margin:.05em 0 .3em}
.pitem{font-size:.82rem;gap:6px;padding:4px 0}
.pitem small{font-size:.72rem}
@keyframes pdayin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pday{animation:pdayin .35s ease both}
.pday:nth-child(n+2){animation-delay:.03s}.pday:nth-child(n+4){animation-delay:.06s}.pday:nth-child(n+7){animation-delay:.09s}.pday:nth-child(n+10){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){.pday{animation:none}}

/* Videos page: long videos and Shorts side by side */
.vidsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:22px;align-items:start}
.vidsplit h2{margin-top:.4em}.vidsplit .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.shorts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.shortcard{display:block;border-radius:var(--r-m);overflow:hidden;background:#0c0f2a;border:1px solid var(--line);transition:transform .15s,border-color .15s;position:relative}
.shortcard:hover{transform:translateY(-2px);border-color:var(--cyan);text-decoration:none}
.shortcard img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.shortcard span{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 7px;font-size:.74rem;line-height:1.25;color:#fff;font-weight:600;background:linear-gradient(transparent,#000c)}
@media (max-width:900px){.vidsplit{grid-template-columns:minmax(0,1fr)}.shorts{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
@media (prefers-reduced-motion:reduce){.shortcard{transition:none}.shortcard:hover{transform:none}}

/* Course counts: lectures and projects, as small chips */
.cstats{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cstats i{font-style:normal;font-size:.68rem;font-weight:600;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--text);white-space:nowrap}
.courserow .cstats{flex-basis:100%}
.ccard .cstats{margin-top:auto;padding-top:6px}

/* Explore: modules two by two instead of full-width rows; counts sit in the summaries */
#explore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
#explore>.fold{margin:0}
#explore>.fold[open]{grid-column:1/-1}
@media (max-width:900px){#explore{grid-template-columns:minmax(0,1fr)}}
summary .cstats{display:inline-flex;margin:0 0 0 8px;vertical-align:middle}
h2+.cstats{margin:-6px 0 10px}

/* Roadmaps: cover cards as stops, a road that keeps flowing, a bead that keeps travelling */
.rmsvg{background:linear-gradient(160deg,#0d1036,#171447 60%,#0f1a3e);border-color:#2a2f66}
.rmroad{stroke:#2a2f66;stroke-width:12}
.rmdraw{stroke:url(#none);stroke:#7C5CFF;stroke-width:12;opacity:.85}
.rmflow{fill:none;stroke:#F2C86B;stroke-width:3;stroke-linecap:round;stroke-dasharray:4 22;opacity:0}
.rmsvg.flowing .rmflow{opacity:.9;animation:rmflow 1.2s linear infinite}
@keyframes rmflow{to{stroke-dashoffset:-26}}
.rmdot{fill:#F2C86B}.rmhalo{fill:#F2C86B;opacity:.25;animation:rmpulse 1.4s ease-in-out infinite}
@keyframes rmpulse{50%{opacity:.08;r:30px}}
.rmnode{opacity:0;transform:scale(.6);transition:opacity .4s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.rmnode.show{opacity:1;transform:scale(1)}
.rmnode.pass{transform:scale(1.06)}
.rmnode .fr{fill:none;stroke:#3b3f86;stroke-width:2.5}
.rmnode.ready .fr{stroke:#34d399}
.rmnode.sel .fr{stroke:#4FD6D0;stroke-width:4}
.rmnode:focus-visible .fr{stroke:#F2C86B;stroke-width:4}
.rmnode .bd{fill:#7C5CFF;stroke:#0d1036;stroke-width:3}
.rmnode.ready .bd{fill:#34d399}
.rmnode text{fill:#e8eef8;font:600 13px Inter,system-ui,sans-serif}
.rmnode .n{fill:#fff;font-size:13px;font-weight:700}
.rmnode .st{fill:#9aa6cc;font-weight:400;font-size:11px}
.rmnode.ready .st{fill:#34d399}
@media (prefers-reduced-motion:reduce){.rmnode{transition:none;transform:none}.rmsvg.flowing .rmflow,.rmhalo{animation:none}}
.rmdetail{display:flow-root}.rmcover{float:left;width:min(260px,40%);height:auto;aspect-ratio:16/9;border-radius:var(--r-m);margin:2px 16px 6px 0}
@media (max-width:560px){.rmcover{float:none;width:100%;margin:0 0 8px}}

/* Study plan: goals as pills you can tick several of */
.pgoals{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0 0 4px}
.pgoals legend{font-size:.86rem;color:var(--dim);margin-bottom:6px;padding:0}
.pgoal{position:relative;cursor:pointer}
.pgoal input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pgoal span{display:inline-block;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:.86rem;transition:background .15s,border-color .15s,color .15s}
.pgoal input:checked+span{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.pgoal input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.pgoal[hidden]{display:none}
/* Videos page: a big button to the channel, above the Shorts */
.vidhead{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ytbig{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 26px;border-radius:999px;background:var(--grad);color:#fff;font-weight:800;font-size:1.1rem;box-shadow:0 10px 28px #7C5CFF44;transition:transform .15s,box-shadow .15s}
.ytbig:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 14px 34px #EC489955}
.ytbig svg{flex:none}
@media (prefers-reduced-motion:reduce){.ytbig{transition:none}.ytbig:hover{transform:none}}
/* Study plan: calendar export */
.pcal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 22px;align-items:center;margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(120deg,color-mix(in srgb,var(--violet) 14%,var(--panel)),var(--panel) 60%);position:relative;overflow:hidden}
.pcal::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--cyan) 12%,transparent) 50%,transparent 70%);transform:translateX(-100%);animation:pcalsheen 5s ease-in-out 1s infinite;pointer-events:none}
@keyframes pcalsheen{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pcal h3{margin:0 0 .2em;font-size:1rem}.pcal p{margin:0;color:var(--dim);font-size:.86rem}
.pcalrow{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.pcalrow label{display:grid;gap:3px;font-size:.78rem;color:var(--dim)}.pcalrow .sel{padding:6px 8px}
#p-ics{display:inline-flex;gap:8px;align-items:center;position:relative;z-index:1}#p-ics.pdone{background:var(--green)}
.pcal .pcalnote{grid-column:1/-1;font-size:.78rem}
.pday h3 small{margin-left:auto}.pgcal{font-size:.74rem;font-weight:600;white-space:nowrap;padding:1px 7px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--cyan);align-self:center}.pgcal:hover{box-shadow:inset 0 0 0 1px var(--cyan);text-decoration:none}
@media (max-width:720px){.pcal{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pcal::after{animation:none;display:none}}
.pcalrow .sel{height:38px;box-sizing:border-box}
/* Home course list: name and status on one line, counts below */
.courserow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:3px 10px}
.courserow>span:not(.cstats){color:var(--dim);font-weight:400}.courserow>span.ready{color:var(--green);font-weight:700}
.courserow .cstats{grid-column:1/-1;margin-top:2px;align-items:center}
/* Bug Hunt: modules as boxes, two per row, bugs as small cards inside */
.huntmods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.huntmod{border:1px solid var(--line);border-top:3px solid var(--mc);border-radius:var(--r-l);background:color-mix(in srgb,var(--mc) 5%,var(--panel));padding:10px 12px 12px}
.huntmod h2{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:1.02rem}
.huntmod h2 span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mc);color:#fff;font-size:.78rem;flex:none}
.huntmod h2 small{margin-left:auto;font-weight:500;font-size:.76rem;color:var(--dim)}
.huntgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:7px}
.huntmod .huntrow{position:relative;margin:0;padding:8px 10px 8px;display:flex;flex-direction:column;gap:3px;min-height:92px;overflow:hidden}
.huntmod .huntrow b{font-size:.86rem;line-height:1.25;padding-right:22px}
.huntmod .huntrow span{font-size:.76rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.huntmod .huntrow:hover{border-color:var(--mc)}
.huntmod .huntrow.solved{border-left:1px solid var(--line);border-color:color-mix(in srgb,var(--green) 60%,var(--line));background:color-mix(in srgb,var(--green) 7%,var(--panel))}
.huntmod .huntrow.solved b:after{content:none}
/* The bug: a small beetle drawn in CSS. It wanders when you hover, and turns into a tick once found. */
.hbug{position:absolute;top:8px;right:8px;width:14px;height:17px;border-radius:50% 50% 45% 45%;background:var(--mc);box-shadow:inset 0 5px 0 -2px color-mix(in srgb,#000 35%,var(--mc))}
.hbug::before{content:"";position:absolute;left:50%;top:4px;bottom:2px;width:1.5px;background:color-mix(in srgb,#000 30%,var(--mc));transform:translateX(-50%)}
.hbug::after{content:"";position:absolute;inset:3px -4px 4px;border-left:2px dotted var(--mc);border-right:2px dotted var(--mc);opacity:.8}
.huntrow:hover .hbug{animation:bugwalk 1.1s ease-in-out infinite}
@keyframes bugwalk{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-5px,3px) rotate(-18deg)}50%{transform:translate(-9px,0) rotate(8deg)}75%{transform:translate(-4px,-2px) rotate(16deg)}100%{transform:translate(0,0) rotate(0)}}
.huntrow.solved .hbug{background:var(--green);box-shadow:none;width:18px;height:18px;border-radius:50%;animation:bugfound .45s cubic-bezier(.3,1.6,.5,1) both}
.huntrow.solved .hbug::before{width:5px;height:9px;top:3px;left:6px;background:none;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);bottom:auto}
.huntrow.solved .hbug::after{content:none}
@keyframes bugfound{from{transform:scale(.2)}to{transform:scale(1)}}
@media (max-width:900px){.huntmods{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.huntrow:hover .hbug,.huntrow.solved .hbug{animation:none}}
/* Interview questions: module boxes of flip cards */
.ivmods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;align-items:start}
.ivmod{border:1px solid var(--line);border-top:3px solid var(--mc);border-radius:var(--r-l);background:color-mix(in srgb,var(--mc) 5%,var(--panel));padding:10px 12px 12px}
.ivmod h2{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:1.02rem}
.ivmod h2 span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mc);color:#fff;font-size:.78rem;flex:none}
.ivmod h2 small{margin-left:auto;font-weight:500;font-size:.76rem;color:var(--dim)}
.ivgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px}
.qflip{display:grid;font:inherit;color:var(--text);text-align:left;background:none;border:0;padding:0;cursor:pointer;perspective:900px;min-height:90px}
.qflip>span{grid-area:1/1;display:flex;flex-direction:column;gap:4px;padding:9px 11px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--panel);font-size:.82rem;line-height:1.38;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s cubic-bezier(.4,.2,.2,1),box-shadow .2s,border-color .2s;box-shadow:0 4px 14px #5B4BD612}
.qflip b{font-size:.7rem;color:var(--mc);letter-spacing:.04em}
.qflip small{margin-top:auto;font-size:.7rem;color:var(--dim)}
.qflip .qb{transform:rotateY(180deg);background:color-mix(in srgb,var(--mc) 12%,var(--panel));border-color:color-mix(in srgb,var(--mc) 45%,var(--line))}
.qflip.flipped .qf{transform:rotateY(-180deg)}.qflip.flipped .qb{transform:rotateY(0)}
.qflip:hover>span{border-color:var(--mc);box-shadow:0 8px 20px #5B4BD626}
.qflip:focus-visible{outline:none}.qflip:focus-visible>span{outline:2px solid var(--mc);outline-offset:2px}
@media (max-width:900px){.ivmods{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.qflip>span{transition:none}}
/* Projects: three lanes by level, cards with the course cover */
.projlanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;margin-top:12px}
.projlane{border:1px solid var(--line);border-radius:var(--r-l);background:var(--panel);padding:10px 12px 12px}
.projlane h2{display:flex;align-items:center;gap:10px;margin:0;font-size:1.02rem}.projlane h2 small{margin-left:auto;font-size:.76rem;font-weight:500;color:var(--dim)}
.projlane>.labnote{margin:.3em 0 .7em;font-size:.8rem}
.pjmeter{display:inline-flex;align-items:end;gap:2px;height:16px}.pjmeter i{width:5px;border-radius:2px;background:var(--line)}.pjmeter i:nth-child(1){height:6px}.pjmeter i:nth-child(2){height:11px}.pjmeter i:nth-child(3){height:16px}
.pjmeter i.on{background:linear-gradient(#7C5CFF,#EC4899);transform-origin:bottom;animation:pjbar .5s cubic-bezier(.3,1.5,.5,1) both}.pjmeter i.on:nth-child(2){animation-delay:.12s}.pjmeter i.on:nth-child(3){animation-delay:.24s}
@keyframes pjbar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.projgrid{display:grid;gap:8px}
.projcard{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start;padding:7px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg);color:var(--text);transition:transform .18s,border-color .18s,box-shadow .18s}
.projcard:hover{text-decoration:none;transform:translateY(-2px);border-color:#7C5CFF;box-shadow:0 10px 24px #5B4BD62B}
.pjcover{width:96px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;transition:transform .3s}.projcard:hover .pjcover{transform:scale(1.04)}
.pjbody{display:flex;flex-direction:column;gap:2px;min-width:0}.pjbody b{font-size:.88rem;line-height:1.25}.pjbody>span{font-size:.76rem;color:var(--dim);line-height:1.35}
.pjbody small{font-size:.7rem;color:var(--dim);margin-top:2px}.pjbody small.ready{color:var(--green);font-weight:600}
@media (max-width:1000px){.projlanes{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pjmeter i.on{animation:none}}
/* Quiz: a box per module, question cards side by side */
#quiz{display:grid;gap:14px;margin-top:10px}
.qzmod{border:1px solid var(--line);border-top:3px solid var(--mc);border-radius:var(--r-l);background:color-mix(in srgb,var(--mc) 5%,var(--panel));padding:10px 12px 12px}
.qzmod h2{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-size:1.02rem}
.qzmod h2 span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mc);color:#fff;font-size:.78rem;flex:none}
.qzmod h2 small{margin-left:auto;font-weight:500;font-size:.76rem;color:var(--dim)}
.qzgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;align-items:start}
.qzmod .qcard{margin:0;padding:10px 12px;border-left:3px solid transparent}
.qzmod .qq{font-size:.88rem;margin-bottom:8px}.qzmod .qopt{font-size:.82rem;padding:5px 10px}
.qcard:has(.qopt.right:disabled){border-left-color:var(--green)}
.qcard:has(.qopt.wrong){border-left-color:var(--red)}
.qwhy:not([hidden]){animation:qwhyin .35s ease-out both;font-size:.82rem;margin-top:8px}
@keyframes qwhyin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qopt.wrong{animation:qshake .4s ease-in-out}
@keyframes qshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.qopt.right{animation:qright .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes qright{from{transform:scale(.92)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.qwhy:not([hidden]),.qopt.wrong,.qopt.right{animation:none}}
/* Labs page: picker boxes, one lab shown */
.labtabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0 14px}
.labtab{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 9px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--panel);color:var(--text);transition:transform .15s,border-color .15s,box-shadow .15s}
.labtab:hover{text-decoration:none;transform:translateY(-2px);border-color:#7C5CFF}
.labtab svg{grid-row:1/3;width:30px;height:30px;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.labtab b{font-size:.84rem;line-height:1.2}.labtab span{font-size:.72rem;color:var(--dim);line-height:1.3}
.labtab.on{border-color:#7C5CFF;background:color-mix(in srgb,#7C5CFF 10%,var(--panel));box-shadow:0 8px 22px #5B4BD62B}
.labtab.on svg{stroke:#7C5CFF;stroke-dasharray:60;animation:labtabdraw 1.4s ease-out both}
@keyframes labtabdraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.labpane>h3{margin-top:0}
.labpane.labin{animation:labin .35s ease-out both}
@keyframes labin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.labtab.on svg,.labpane.labin{animation:none}}
.labpane>h2{margin-top:0}
.labpane{scroll-margin-top:190px}
/* Interview bank (interview.js): compact boxed tiles, paged, one question at a time in a dialog */
.ivhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}.ivhead>div{min-width:0;max-width:760px}
.ivapp{margin-top:10px}
.ivbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.ivsearch input,.ivsel{width:100%;font:inherit;font-size:.95rem;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 16px}
.ivsel{appearance:auto}
.ivchips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px;align-items:center}
.ivchip{font:inherit;font-size:.82rem;font-weight:600;text-transform:capitalize;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--dim);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ivchip#ivhide{text-transform:none}
.ivchip[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.ivchip:focus-visible,.ivtile:focus-visible,.ivpg:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ivsep{width:1px;height:20px;background:var(--line);margin-inline:4px}
.ivstat{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--dim);margin:10px 0 12px;font-variant-numeric:tabular-nums}
.ivprog{flex:1;max-width:260px;height:6px;border-radius:3px;background:var(--well2);overflow:hidden}.ivprog i{display:block;height:100%;background:var(--grad);transition:width .4s}
.ivlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ivtile{display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;color:var(--text);background:color-mix(in srgb,var(--mc) 6%,var(--panel));border:1px solid var(--line);border-top:3px solid var(--mc);border-radius:var(--r-m);padding:12px 14px;cursor:pointer;min-width:0;min-height:150px;transition:transform .16s,box-shadow .16s}
.ivtile:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--mc) 25%,transparent)}
.ivtile.known{opacity:.62}.ivtile.known .ivtq::after{content:" ✓";color:var(--green)}
.ivtmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ivtq{font-weight:600;font-size:.98rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ivtles{margin-top:auto;font-size:.78rem;color:var(--dim)}
.ivlvl{display:inline-block;font-size:.72rem;font-weight:700;text-transform:capitalize;padding:1px 8px;border-radius:999px;margin-right:6px;vertical-align:1px}
.lv-basic{background:var(--okbg);color:var(--oktx)}.lv-core{background:var(--sel);color:var(--cyan)}.lv-advanced{background:var(--redbg);color:var(--badtx)}
.ivchip.lv-basic[aria-pressed=true],.ivchip.lv-core[aria-pressed=true],.ivchip.lv-advanced[aria-pressed=true]{background:var(--text);color:var(--bg)}
.ivkind{font-size:.72rem;color:var(--dim);text-transform:capitalize}
.ivbadge{font-size:.68rem;font-weight:700;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 50%,transparent);border-radius:999px;padding:0 7px}
.ivempty{grid-column:1/-1;color:var(--dim);padding:24px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-m)}
.ivpager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0}
.ivpg{font:inherit;font-size:.85rem;min-width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums}.ivpg.on{background:var(--text);color:var(--bg)}
.ivdots{align-self:center;color:var(--dim)}
.ivdlg{width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line);border-top:4px solid var(--mc);border-radius:var(--r-l);background:var(--panel);color:var(--text)}
.ivdlg::backdrop{background:#0008;backdrop-filter:blur(3px)}
.ivdin{padding:18px 22px 20px;display:grid;gap:12px}
.ivdtop{display:flex;align-items:center;gap:8px}.ivpos{margin-left:8px;font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums}
.ivx{margin-left:auto;font:inherit;font-size:1.5rem;line-height:1;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.ivdlg h2{margin:0;font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.35;text-wrap:balance}
.ivcode{margin:0;padding:12px 14px;background:var(--code,var(--cell));color:#E9EAF8;border-radius:var(--r-s);font:14px/1.5 ui-monospace,"JetBrains Mono",Consolas,monospace;overflow-x:auto;white-space:pre}
.ivthink{margin:0;color:var(--dim);font-size:.9rem}
#ivreveal{justify-self:start}
.ivans{font-size:1.02rem;line-height:1.6;color:var(--prose);border-left:3px solid var(--mc);padding:4px 0 4px 14px;animation:ivin .35s ease-out}
.ivchecks{margin:8px 0 0;font-size:.86rem;color:var(--dim)}
.ivah{margin:14px 0 0;font-size:1rem}
.ivlesson{display:inline-block;margin-top:10px;font-size:.9rem}
.ivdnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px}.ivgap{flex:1}
.ivmore{margin-top:10px}
.qa .ivcode{margin:6px 0}
@keyframes ivin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ivans{animation:none}.ivtile,.ivtile:hover{transition:none;transform:none}}
@media (max-width:900px){.ivlist{grid-template-columns:repeat(2,minmax(0,1fr))}.ivbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ivsearch{grid-column:1/-1}}
@media (max-width:560px){.ivlist,.ivbar{grid-template-columns:minmax(0,1fr)}.ivdin{padding:14px}}
.ivsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.reelchips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}.reelchips a{padding:5px 12px;border:1px solid var(--line);border-radius:99px;font-size:.85rem}.reelchips a:hover{border-color:var(--cyan);text-decoration:none}
.reelcat{margin-top:22px}.reelcat h2{margin:.2em 0 0}.reelcat .lead{margin:.2em 0 10px;font-size:.95rem}.reelcat .shorts{grid-template-columns:repeat(auto-fill,minmax(120px,150px))}
/* Verilog practice */
.phero{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-top:14px}.phero>div:first-child{flex:1 1 420px}
.pstats{display:flex;gap:10px;flex-wrap:wrap}.pstreak,.pmeter{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 14px;min-width:120px}
.pstreak{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--grad);color:#fff;border:0;box-shadow:0 7px 20px #7C5CFF40}.pstreak b{font:700 1.9rem/1 "Bricolage Grotesque",sans-serif}.pstreak span{font-size:.8rem}
.pmeter span{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--dim);margin-bottom:6px}.pmeter b{color:var(--text)}.pmeter .pbar i{transition:width .8s}
.lvchip{display:inline-block;font-style:normal;font-size:.74rem;font-weight:700;padding:2px 9px;border-radius:999px}
.ptoday{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:16px 0;padding:14px 18px;border-radius:var(--r-l);color:var(--text);border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--grad) border-box}.ptoday:hover{text-decoration:none;box-shadow:0 10px 26px #7C5CFF2E}.ptoday span{font-size:.8rem;color:var(--dim)}.ptoday b{font:700 1.15rem "Bricolage Grotesque",sans-serif}.ptoday small{color:var(--dim)}
.pfilters{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:12px}.pfilters .pfield{flex:1 1 220px;margin:0}.pfilters .row{margin:0}.pchk{font-size:.9rem;display:flex;gap:6px;align-items:center}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px;margin-bottom:16px}
.pbox{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px 14px 12px 46px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);color:var(--text);min-height:76px;transition:transform .16s,border-color .16s,box-shadow .16s}.pbox:hover{text-decoration:none;transform:translateY(-2px);border-color:#7C5CFF;box-shadow:0 10px 22px #5B4BD622}.pbox b{font-size:.96rem;line-height:1.25}
.pnum{position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:7px;background:var(--well2);color:var(--dim);font:700 .78rem/24px "JetBrains Mono",monospace;text-align:center}
.pmeta{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--dim)}
.pdone{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--green);position:relative;font-style:normal}.pdone:after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.pbox .pdone{position:absolute;right:10px;top:10px}
.pbox.solved{border-color:color-mix(in srgb,var(--green) 55%,var(--line))}.pbox.solved .pnum{background:var(--okbg);color:var(--oktx)}
.pwork{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px;align-items:start}.ptask h1{margin:.2em 0 .4em}.ptask .tablew table{font-size:.88rem}
.pcode{position:sticky;top:70px}.pcode .row{margin:12px 0 4px}
.neon-title{display:flex;justify-content:space-between;gap:10px}.pkeys{opacity:.75}
.pedit{display:grid;grid-template-columns:auto 1fr;gap:10px}.pgut{margin:0;color:#6E72A8;font:13.5px/1.5 "JetBrains Mono",monospace;text-align:right;user-select:none;overflow:hidden;max-height:100%;padding:0}.pgut b{color:#FF7F96}
.pedit textarea{min-height:330px}
.pscore{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--dim)}.pscore .pbar{flex:1}
.pwscroll{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m);padding:8px}.pwave{display:block;max-width:none;height:auto}
.pw-grid{stroke:var(--hair);stroke-width:1}.pw-cyc{fill:var(--dim);font:10px "JetBrains Mono",monospace;text-anchor:middle}
.pw-name{fill:var(--text);font:12px "JetBrains Mono",monospace;text-anchor:end;dominant-baseline:middle}.pw-name.out{fill:var(--cyan);font-weight:700}.pw-name.exp{fill:var(--dim);font-style:italic}
.pw-line{fill:none;stroke:var(--text);stroke-width:1.6;stroke-linejoin:round}.pw-line.clk{stroke:var(--dim)}.pw-line.out{stroke:#7C5CFF;stroke-width:2}.pw-line.exp{stroke:var(--green);stroke-dasharray:4 3}
.pw-val{fill:var(--text);font:11px "JetBrains Mono",monospace;text-anchor:middle}.pw-bad{fill:var(--redbg);fill-opacity:.85;stroke:none}.pw-line.out{paint-order:stroke}
.pwave.draw{clip-path:inset(0 100% 0 0);animation:pwdraw 1.1s ease-out forwards}@keyframes pwdraw{to{clip-path:inset(0 0 0 0)}}
.pnav{display:flex;justify-content:space-between;gap:12px;margin:22px 0;flex-wrap:wrap}.crumbs{font-size:.85rem;color:var(--dim);margin:14px 0 0}
@media (max-width:900px){.pwork{grid-template-columns:1fr}.pcode{position:static}}
@media (prefers-reduced-motion:reduce){.pwave.draw{animation:none;clip-path:none}.pbox,.pbox:hover{transition:none;transform:none}}