@font-face{font-family:"Pixelify Sans";src:url(/fonts/pixelify-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@view-transition{navigation:auto}

:root{
  --pix:"Pixelify Sans","JetBrains Mono",monospace;
  --disp:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --serif:"Cinzel","Trajan Pro","Times New Roman",Georgia,serif;
}
/* themes */
[data-theme=neon]{color-scheme:dark;--bg:oklch(.165 .022 262);--bg2:oklch(.2 .026 262);--surface:oklch(.205 .026 262);--surface2:oklch(.245 .03 262);--line:oklch(.31 .026 262);--fg:oklch(.95 .006 262);--muted:oklch(.71 .022 262);--accent:oklch(.78 .105 195);--accent2:oklch(.72 .1 285);--accent3:oklch(.8 .1 85);--code:oklch(.135 .02 262);--shadow:oklch(.1 .02 262)}
[data-theme=arcade]{color-scheme:dark;--bg:oklch(.14 .045 295);--bg2:oklch(.18 .06 300);--surface:oklch(.2 .05 295);--surface2:oklch(.25 .06 295);--line:oklch(.36 .08 300);--fg:oklch(.96 .01 300);--muted:oklch(.72 .05 300);--accent:oklch(.72 .26 350);--accent2:oklch(.86 .15 200);--accent3:oklch(.9 .17 100);--code:oklch(.11 .03 295);--shadow:oklch(.08 .03 295)}
[data-theme=phosphor]{color-scheme:dark;--bg:oklch(.13 .03 150);--bg2:oklch(.16 .04 150);--surface:oklch(.18 .04 150);--surface2:oklch(.23 .05 150);--line:oklch(.4 .1 150);--fg:oklch(.9 .17 150);--muted:oklch(.7 .13 150);--accent:oklch(.88 .22 145);--accent2:oklch(.82 .17 175);--accent3:oklch(.9 .17 110);--code:oklch(.1 .03 150);--shadow:oklch(.07 .02 150)}
[data-theme=souls]{color-scheme:dark;--bg:oklch(.13 .012 60);--bg2:oklch(.17 .02 55);--surface:oklch(.19 .018 55);--surface2:oklch(.24 .025 55);--line:oklch(.38 .05 70);--fg:oklch(.9 .03 85);--muted:oklch(.67 .05 80);--accent:oklch(.7 .17 50);--accent2:oklch(.8 .13 85);--accent3:oklch(.66 .18 28);--code:oklch(.1 .01 60);--shadow:oklch(.06 .01 60)}
[data-theme=paper]{color-scheme:light;--bg:oklch(.965 .012 85);--bg2:oklch(.94 .016 85);--surface:oklch(.985 .008 85);--surface2:oklch(.945 .014 85);--line:oklch(.84 .014 75);--fg:oklch(.24 .022 55);--muted:oklch(.47 .022 60);--accent:oklch(.47 .155 27);--accent2:oklch(.44 .06 245);--accent3:oklch(.52 .075 75);--code:oklch(.955 .012 85);--shadow:oklch(.35 .02 60)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.7 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh;display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 620px at 50% -12%,color-mix(in oklab,var(--accent) 5%,transparent),transparent 70%);pointer-events:none}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0}
.px,.hero h1,.sechead h2,.lobby h2,.stats,.bar,.boss .b-top,.btn,.casebar,.defeated b{font-family:var(--pix)}
::selection{background:var(--accent);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
kbd{font:600 .75rem var(--mono);padding:.1rem .4rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--surface)}
code{font-family:var(--mono)}

/* CRT + progress */
.crt{position:fixed;inset:0;z-index:90;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;opacity:.5;display:none}
.crt::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45))}
[data-theme=paper] .crt{opacity:.08}
body.crt-on .crt{display:block}
body.nocrt .crt{display:none}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:95;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);display:none}
@supports (animation-timeline:scroll()){.progress{display:block;animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}

/* top bar */
.bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem max(1.25rem,calc((100vw - 1160px)/2));background:var(--surface);border-bottom:1px solid var(--hair)}
.logo{font:600 1.08rem var(--disp);display:flex;align-items:center;gap:.55rem;letter-spacing:-.02em}
.logo .wordmark{display:inline-flex}
.logo em{color:var(--accent);font-style:normal}
.ico .wave{opacity:.3;transition:opacity .15s}
.ico-label{display:none}
.ico.on .wave,.ico:hover .wave{opacity:1}
@keyframes blink{50%{opacity:0}}
.sprite{width:.82rem;height:.82rem;background:var(--accent);image-rendering:pixelated;clip-path:polygon(0 25%,25% 25%,25% 0,75% 0,75% 25%,100% 25%,100% 75%,75% 75%,75% 100%,25% 100%,25% 75%,0 75%)}
.pill{display:flex;gap:.1rem}
.pill a{position:relative;padding:.45rem .72rem;font:500 .92rem var(--body);color:var(--muted);border:0;border-radius:6px;transition:color .15s,background .15s}
.pill a:hover{color:var(--fg);background:color-mix(in oklab,var(--fg) 5%,transparent)}
.pill a[aria-current]{color:var(--fg);background:transparent;box-shadow:none}
.pill a[aria-current]::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:-.42rem;height:2px;border-radius:2px;background:var(--accent)}
.tools-r{display:flex;gap:.3rem}
.ico{width:2.2rem;height:2.2rem;font:500 .95rem var(--body);color:var(--muted);background:transparent;border:1px solid var(--hair);border-radius:8px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.ico:hover{border-color:var(--line);color:var(--fg);background:var(--surface);transform:none}
.ico.key{width:auto;padding:0 .6rem;font-size:.85rem}
.ico.on{background:color-mix(in oklab,var(--accent) 14%,transparent);color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,var(--line))}
@media(max-width:760px){.ico.key{display:none}.pill a{padding:.3rem .5rem;font-size:.9rem}}

/* shared */
.wrap{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.sec{margin-top:6rem}
.eyebrow{font:500 .75rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.live{width:.42rem;height:.42rem;border-radius:50%;background:var(--accent)}
.lead{font-size:1.08rem;color:var(--muted);max-width:42rem;margin:1rem 0 0;text-wrap:pretty}
.lead .dim{color:var(--accent3)}
.muted{color:var(--muted);font-size:.9rem}
.btn{display:inline-flex;gap:.5rem;align-items:center;padding:.7rem 1.1rem;background:var(--accent);color:var(--bg);font-weight:600;font-size:.94rem;border:1px solid var(--accent);border-radius:8px;box-shadow:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:color-mix(in oklab,var(--accent) 86%,var(--fg));border-color:color-mix(in oklab,var(--accent) 86%,var(--fg));transform:none;box-shadow:none}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--surface);border-color:var(--muted)}
.btn.ghost span{color:var(--muted);font:.8rem var(--mono)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.chips a{padding:.22rem .62rem;border:1px solid var(--hair);border-radius:6px;font:.75rem var(--mono);color:var(--muted);background:transparent;transition:color .15s,border-color .15s,background .15s}
.chips a:hover{border-color:var(--line);color:var(--fg);background:var(--surface)}
.chips a.on{border-color:color-mix(in oklab,var(--accent) 45%,var(--line));color:var(--accent);background:color-mix(in oklab,var(--accent) 8%,transparent)}
.chips.big a{font-size:.85rem;padding:.4rem .8rem}.chips a span{opacity:.55;margin-left:.4rem}
.pagehead{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--hair);margin-bottom:2.5rem}
.pagehead.wrap{padding-inline:1.25rem}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;text-transform:none;max-width:26ch}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;gap:1rem}
.sechead h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:600;letter-spacing:-.025em;text-transform:none}
.sechead>a{color:var(--muted);font:.78rem var(--mono);letter-spacing:.02em}.sechead>a:hover{color:var(--accent)}

/* HERO */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.hero-in{position:relative;max-width:1200px;margin:0 auto;padding:4.5rem 1.25rem 5rem;display:grid;grid-template-columns:1.08fr .92fr;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98;font-weight:700;letter-spacing:0;margin:.2rem 0 0}

/* debugger */
/* debugger */
.dbg{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--code);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -30px var(--shadow);font:.76rem/1.55 var(--mono);font-variant-numeric:tabular-nums}
.dbg-title{display:flex;align-items:center;gap:.8rem;min-width:0;padding:.5rem .8rem;background:var(--surface2);border-bottom:1px solid var(--line);color:var(--muted);font-size:.75rem}
.dbg-state{flex:none;width:6.6rem;margin-left:auto;text-align:center;padding:.05rem .6rem;border:1px solid currentColor;border-radius:99px;color:var(--accent);font-size:.75rem;letter-spacing:.08em;white-space:nowrap}
.dbg-state.paused{color:var(--accent3)}.dbg-state.brk{color:var(--accent)}
.dbg-tools{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-bottom:1px solid var(--line)}
.dbg-tools button{min-width:4.4rem;min-height:28px;padding:.15rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);font:inherit;cursor:pointer}
.dbg-tools button:hover{border-color:var(--accent);color:var(--accent)}
.dbg-tools button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dbg-hint{margin-left:auto;color:var(--muted);font-size:.75rem}
.dbg-body{display:grid;grid-template-columns:minmax(0,1fr) 13.5rem;flex:1}
.dbg-code{padding:.5rem 0}
.dbg-code .ln{height:1.55rem;display:grid;grid-template-columns:1.9rem 4.8rem 3.6rem minmax(0,1fr);align-items:center;padding-right:.8rem;border-left:3px solid transparent;white-space:nowrap}
.dbg-code .ln.cur{background:color-mix(in oklab,var(--accent) 22%,transparent);border-left-color:var(--accent)}
.dbg-code .gut{position:relative;align-self:stretch;cursor:pointer}
.dbg-code .gut::before{content:"";position:absolute;left:.35rem;top:50%;width:.55rem;height:.55rem;margin-top:-.275rem;border-radius:50%;background:var(--accent);opacity:0}
.dbg-code .gut:hover::before{opacity:.3}
.dbg-code .gut:focus-visible::before{opacity:.6}
.dbg-code .ln.bp .gut::before{opacity:1}
.dbg-code .ln.cur .gut::after{content:"\25B6";position:absolute;right:.2rem;top:0;color:var(--accent);font-size:.75rem;line-height:1.55rem}
.dbg-code .a{color:var(--muted)}
.dbg-code .m{color:var(--fg)}.dbg-code .m.c{color:var(--accent3)}.dbg-code .m.j{color:var(--accent)}
.dbg-code .o{overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.dbg-side{display:grid;align-content:start;gap:.8rem;padding:.7rem .85rem;border-left:1px solid var(--line)}
.dbg-h{margin:0 0 .25rem;color:var(--muted);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.dbg-regs{font-variant-numeric:tabular-nums;display:grid;grid-template-columns:auto 1fr;gap:0 .8rem}
.dbg-regs b{color:var(--accent2);font-weight:500}.dbg-regs span{color:var(--muted)}
.dbg-regs .chg{color:var(--accent3);font-weight:600}
.dbg-flags{display:flex;gap:.4rem}
.dbg-flags span{padding:0 .45rem;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.dbg-flags .on{color:var(--accent3);border-color:currentColor}
.dbg-stack .sk{display:flex;justify-content:space-between;gap:.6rem}
.dbg-stack .sk i{color:var(--muted);font-style:normal}.dbg-stack .sk small{color:var(--muted);font-size:.75rem}
.dbg-stack .none{color:var(--muted)}.dbg-stack #dbg-stack{min-height:4.65rem}.dbg-stack .sk{white-space:nowrap}
.dbg-mem{min-height:3.1rem;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1rem;padding:.55rem .85rem;border-top:1px solid var(--line)}
.dbg-mem .dbg-h{margin:0}
.dbg-bytes{display:flex;gap:.15rem}
.dbg-bytes span{padding:0 .3rem;border-radius:3px;color:var(--muted)}
.dbg-bytes .done{color:var(--accent2)}
.dbg-bytes .hit{background:color-mix(in oklab,var(--accent) 28%,transparent);color:var(--fg)}
.dbg-asc{color:var(--accent2);letter-spacing:.12em}
.dbg-foot{height:5.4rem;overflow:hidden;padding:.5rem .85rem;border-top:1px solid var(--line)}
.dbg-foot .note{color:var(--accent2)}.dbg-foot .eff{margin-top:.1rem;color:var(--muted);font-size:.75rem}
.dbg-cap{margin:0;padding:.55rem .85rem;border-top:1px dashed var(--line);font:.75rem/1.5 var(--body);color:var(--muted)}.dbg-cap b{color:var(--accent2)}.dbg-cap a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px}.dbg-cap a:hover{color:var(--accent)}
@media(max-width:1000px){.dbg-body{grid-template-columns:1fr}.dbg-side{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.dbg{font-size:.75rem}.dbg-code .ln{grid-template-columns:1.8rem 4.4rem 3.3rem minmax(0,1fr)}.dbg-stack,.dbg-hint{display:none}}
.dots{display:flex;gap:.3rem}.dots i{width:.55rem;height:.55rem;background:var(--muted);opacity:.4;border-radius:50%}
/* Below 1220px the debugger column is too narrow for its code and registers. */
@media(max-width:1220px){.hero-in{grid-template-columns:1fr}}

/* ticker */

/* BOSS cards */
.bosses{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.bosses.all{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.boss{--rc:var(--muted);position:relative;display:flex;flex-direction:column;gap:.6rem;padding:.8rem;background:var(--surface);border:2px solid var(--rc);box-shadow:5px 5px 0 var(--shadow);transition:transform .12s,box-shadow .12s;transform-style:preserve-3d;will-change:transform}
.boss:hover{box-shadow:8px 8px 0 var(--shadow),8px 8px 0 2px var(--rc)}
.boss.rare{--rc:var(--accent2)}.boss.epic{--rc:var(--accent)}.boss.legendary{--rc:var(--accent3)}
.boss.feat{grid-column:span 2;grid-row:span 2}.boss.feat h3{font-size:1.9rem}.boss.feat .b-img{aspect-ratio:auto;flex:1;min-height:300px}
.boss[hidden]{display:none}
.b-top{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted)}
.rar{color:var(--rc)}
.b-img{position:relative;aspect-ratio:16/10;overflow:hidden;border:2px solid var(--line);background:linear-gradient(135deg,var(--accent),var(--accent3));display:grid;place-items:center;font:700 2rem var(--mono);color:#fff8}
.b-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05);transition:.3s;image-rendering:auto}
.boss:hover .b-img img{filter:none;transform:scale(1.05)}
.b-img::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.boss h3{font-size:1.15rem;line-height:1.25;font-weight:600}
.boss:hover h3{color:var(--rc)}
.hp{display:flex;align-items:center;gap:.6rem}
.hp-bar{flex:1;height:.7rem;background:var(--code);border:2px solid var(--line);padding:1px}
.hp-bar b{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--rc) 0 5px,transparent 5px 7px);transition:width .6s}
.hp em{flex:none;font:600 .75rem var(--mono);color:var(--rc);font-style:normal;letter-spacing:.06em}
.boss.common .hp-bar b{background:repeating-linear-gradient(90deg,var(--muted) 0 5px,transparent 5px 7px)}
.b-foot{display:flex;justify-content:space-between;gap:.5rem;font:.75rem var(--mono);color:var(--muted);margin-top:auto}
.weak{color:var(--accent2);text-align:right}
@media(max-width:1000px){.bosses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bosses{grid-template-columns:1fr}.boss.feat{grid-column:auto;grid-row:auto}}
.tools{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
#q{width:100%;padding:.8rem 1rem;border:1px solid var(--hair);border-radius:8px;background:var(--surface);color:var(--fg);font:.92rem var(--mono);box-shadow:none;transition:border-color .15s,box-shadow .15s}
#q:focus{outline:none;border-color:color-mix(in oklab,var(--accent) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 12%,transparent)}
.empty{color:var(--muted);text-align:center;padding:3rem 0;font:1rem var(--body)}

/* character sheet */
@media(max-width:1000px){.sheet{grid-template-columns:1fr}.stat-row{grid-template-columns:9rem 1fr 2rem}}

/* inventory */

/* lobby */
.lobby{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2.4rem;border:2px dashed var(--accent);background:linear-gradient(135deg,color-mix(in oklab,var(--accent) 14%,var(--surface)),var(--surface))}
.lobby h2{font-size:clamp(1.6rem,3.4vw,2.6rem);text-transform:uppercase}
.lobby .btn{font-size:1.4rem;padding:1rem 2rem;animation:blink-bg 1.4s steps(1) infinite}
@keyframes blink-bg{50%{background:var(--accent3);border-color:var(--accent3)}}
@media(max-width:760px){.lobby{flex-direction:column;align-items:flex-start}}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-bottom:5rem}
.slot-card{position:relative;padding:1.35rem 1.4rem;background:var(--surface);border:1px solid var(--hair);border-radius:12px;box-shadow:none;min-height:185px;display:flex;flex-direction:column;gap:.45rem;transition:border-color .15s,translate .15s}
a.slot-card:hover{transform:none;translate:0 -2px;border-color:color-mix(in oklab,var(--accent) 42%,var(--line));box-shadow:none}
.slot-card .tag{font:.75rem/1 var(--mono);color:var(--accent);background:none;border:1px solid var(--hair);border-radius:4px;padding:.22rem .38rem;align-self:flex-start;letter-spacing:.06em}
.slot-card h3{font:600 1.15rem/1.3 var(--disp);letter-spacing:-.015em;margin:.35rem 0 0}.slot-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}
.slot-card small{margin-top:auto;padding-top:.8rem;font:.75rem var(--mono);color:var(--muted);letter-spacing:.08em}
.slot-card.me{border-color:color-mix(in oklab,var(--accent2) 45%,var(--line))}.slot-card.me small{color:var(--accent2)}
.slot-card.empty{border-style:dashed;opacity:.65}.slot-card.empty .tag{background:none}

/* 404 */
.died{min-height:38vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;gap:1rem;max-width:1200px;margin:0 auto;padding:4rem 1.25rem;background:none;animation:none}
.died h1{font:600 clamp(3rem,10vw,6rem)/.95 var(--disp);letter-spacing:-.05em;color:var(--fg);text-transform:none;text-shadow:none}
.died p{color:var(--muted);font:1rem/1.65 var(--body);margin:0;max-width:38rem}

/* article */
.article{max-width:56rem;margin:0 auto;padding:0 1.25rem}.article.narrow{max-width:800px}
.article.narrow .pagehead{max-width:44rem}
.ahead{padding:4rem 0 2rem;max-width:50rem}
.ahead>:last-child{margin-bottom:0}
.ahead+.share-row{margin-top:0}
.ahead h1{font-size:clamp(2.1rem,4.2vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;margin:1.1rem 0 1.2rem}
.ahead .dek{max-width:44rem;margin:-.2rem 0 1.3rem;font-size:1.05rem;line-height:1.65;color:var(--muted)}
.casebar{display:flex;flex-wrap:wrap;align-items:center;font:.75rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.casebar span{padding:0;border:0;color:inherit;background:none}
.casebar span+span::before{content:"·";margin:0 .55rem;color:var(--line)}
.casebar span:first-child{color:var(--accent);background:none;border:0}
.casebar b{color:var(--accent2);font-weight:600}
.cover{position:relative;margin:0 0 3rem;border:1px solid var(--hair);border-radius:12px;box-shadow:none;max-height:460px;overflow:hidden;background:var(--surface2)}
.cover img{width:100%;max-height:460px;object-fit:cover}
[id]{scroll-margin-top:84px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:2.5rem}
.layout>.prose{grid-column:1;grid-row:1}
.layout>.toc{grid-column:2;grid-row:1}
.layout:has(.toc[hidden]){grid-template-columns:minmax(0,44rem)}
.toc{position:sticky;top:5.5rem;align-self:start;font-size:.78rem;border-left:1px solid var(--hair);padding-left:1rem;max-height:calc(100dvh - 7rem);overflow:auto}
.toc[hidden]{display:none}
.toc p{font:500 .75rem var(--mono);letter-spacing:.1em;color:var(--muted);margin:0 0 .6rem}
.toc p button{all:unset;display:flex;align-items:center;gap:.4rem;min-height:24px;cursor:pointer;text-transform:uppercase}
.toc p button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.toc p button span{transition:rotate .15s}
.toc.min p{margin-bottom:0}.toc.min p button span{rotate:-90deg}.toc.min .toc-panel,.toc.min ol{display:none}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:.25rem}
.toc li.has-sub{display:flex;align-items:center;justify-content:space-between;gap:.25rem}
.toc li.has-sub>a{flex:1;min-width:0}
.toc .toc-sub-toggle{all:unset;display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;border-radius:4px;color:var(--muted);cursor:pointer;flex:none;font-size:.75rem;line-height:1}
.toc .toc-sub-toggle:hover{color:var(--fg);background:var(--surface2)}
.toc .toc-sub-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.toc .toc-sub-toggle span{display:inline-block;transition:rotate .15s}
.toc .toc-sub-toggle[aria-expanded=true] span{rotate:90deg}
.toc li.sub{display:none}.toc li.sub.open{display:block}
.toc a{color:var(--muted);display:flex;align-items:center;min-height:24px;line-height:1.35}.toc a:hover{color:var(--fg)}
.toc a.on,.toc a[aria-current=location]{color:var(--accent);font-weight:500}
.toc a.on::before,.toc a[aria-current=location]::before{content:"";display:inline-block;flex:none;width:2px;height:.8em;margin-right:.45rem;background:var(--accent);vertical-align:-.05em}
.toc .l3{padding-left:.8rem;font-size:.75rem}
/* On wide screens the list floats in the top-right corner and leaves the article column alone. */
@media(min-width:1440px){
  .layout{display:block;max-width:44rem}
  .toc{position:fixed;top:5.25rem;right:1.25rem;width:13rem;max-height:calc(100dvh - 7rem);padding:.2rem 0 .2rem 1rem;border:0;border-left:1px solid var(--hair);border-radius:0;background:none;backdrop-filter:none;z-index:20}
  .toc.min{width:auto}
}
@media(max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}.layout>.prose,.layout>.toc{grid-column:auto;grid-row:auto}.toc{display:none}}

.prose{font-size:1.05rem;line-height:1.75;max-width:44rem;min-width:0}
.prose>*+*{margin-top:1.2rem}
.prose h2{font-size:1.6rem;letter-spacing:-.02em;margin-top:2.8rem;padding-bottom:.45rem;border-bottom:1px solid var(--hair)}
.prose h3{font-size:1.28rem;letter-spacing:-.015em;margin-top:2.2rem}
.prose h4{font-size:1.05rem;margin-top:1.8rem}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.prose a:hover{color:color-mix(in oklab,var(--accent) 78%,var(--fg));text-decoration-color:var(--accent)}
.prose img{border:1px solid var(--hair);border-radius:8px;margin-inline:auto;box-shadow:none}
.prose figure{margin:2rem 0}.prose figcaption{text-align:center;color:var(--muted);font:.78rem var(--mono);margin-top:.7rem}
.prose ul,.prose ol{padding-left:1.35rem}.prose li+li{margin-top:.4rem}.prose li::marker{color:var(--muted)}
.prose blockquote{margin-left:0;padding:.2rem 1.2rem;border-left:2px solid var(--accent);color:var(--muted);font-style:normal;background:none}
.prose blockquote.pullquote{margin:2.5rem 0;padding:1.3rem 1.5rem;border-left-width:2px;border-radius:0 8px 8px 0;color:var(--fg);font-style:normal;font-size:1.08rem;line-height:1.65;background:var(--surface)}
.prose blockquote.pullquote cite{display:block;margin-top:.9rem;font:.75rem var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prose blockquote.pullquote cite::before{content:"";display:inline-block;width:1.4rem;height:1px;margin-right:.6rem;vertical-align:middle;background:currentColor}
@media(max-width:560px){.prose blockquote.pullquote{padding:1.1rem 1.1rem;font-size:1.02rem}}
.prose hr{border:0;border-top:1px solid var(--hair);margin:3rem 0}
.prose code{font:.87em var(--mono)}
.prose :not(pre)>code{background:var(--surface2);padding:.12em .38em;border:1px solid var(--hair);border-radius:4px;color:var(--fg);word-break:break-word}
.prose pre{background:var(--code);border:1px solid var(--hair);border-radius:10px;padding:2.2rem 2rem 1rem 1.1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:pre;overflow-wrap:normal;word-break:normal;font:.82rem/1.65 var(--mono);position:relative;tab-size:4;box-shadow:none;-webkit-mask-image:linear-gradient(180deg,#000 0 2.1rem,transparent 2.1rem),linear-gradient(90deg,#000 calc(100% - 2rem),transparent);mask-image:linear-gradient(180deg,#000 0 2.1rem,transparent 2.1rem),linear-gradient(90deg,#000 calc(100% - 2rem),transparent)}
.prose pre::before{content:attr(data-lang);position:absolute;top:0;left:0;right:0;padding:.42rem 1rem;background:var(--surface2);border-bottom:1px solid var(--hair);font:.75rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:right}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--fg);white-space:pre}
/* Syntax colours (code-highlight.js). Built from the theme variables so every theme keeps its palette. */
.prose .hljs-comment,.prose .hljs-quote{color:var(--muted);font-style:italic}
.prose .hljs-keyword,.prose .hljs-selector-tag,.prose .hljs-doctag{color:var(--accent2);font-weight:600}
.prose .hljs-type,.prose .hljs-built_in,.prose .hljs-class .hljs-title,.prose .hljs-title.class_{color:color-mix(in oklab,var(--accent2) 65%,var(--fg))}
.prose .hljs-title,.prose .hljs-title.function_,.prose .hljs-section,.prose .hljs-name{color:var(--accent)}
.prose .hljs-string,.prose .hljs-regexp,.prose .hljs-char.escape_,.prose .hljs-symbol{color:var(--accent3)}
.prose .hljs-number,.prose .hljs-literal{color:color-mix(in oklab,var(--accent) 55%,var(--accent3))}
.prose .hljs-meta,.prose .hljs-attr,.prose .hljs-attribute,.prose .hljs-variable,.prose .hljs-template-variable,.prose .hljs-params{color:color-mix(in oklab,var(--accent) 45%,var(--fg))}
.prose .hljs-meta .hljs-keyword{color:inherit}
.prose .hljs-emphasis{font-style:italic}.prose .hljs-strong{font-weight:700}
.prose .hcb_wrap{margin:1.6rem 0}
.prose .copy,.prose button.wrap{position:absolute;top:.3rem;min-height:24px;display:inline-flex;align-items:center;justify-content:center;padding:.05rem .45rem;margin:0;max-width:none;font:500 .75rem/1 var(--mono);border:1px solid var(--hair);border-radius:4px;background:var(--surface);color:var(--muted);cursor:pointer;z-index:1}
.prose .copy{left:.5rem;min-width:3.6rem}
.prose button.wrap{left:4.35rem;min-width:3.1rem}
.prose .copy:hover,.prose button.wrap:hover{color:var(--fg);background:var(--surface2);border-color:var(--line)}
.prose button.wrap[aria-pressed=true]{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,var(--line));background:color-mix(in oklab,var(--accent) 10%,var(--surface))}
.prose pre.is-wrapped,.prose pre.is-wrapped code,.prose pre.is-wrapped pre{white-space:pre-wrap!important;overflow-wrap:anywhere;word-break:break-word}
.prose pre.is-wrapped{overflow-x:hidden;-webkit-mask-image:none!important;mask-image:none!important}
.prose .tablewrap{overflow-x:auto;border:1px solid var(--hair);border-radius:8px;box-shadow:none}
.prose table{border-collapse:collapse;width:100%;font-size:.88rem;margin:0}
.prose td,.prose th{padding:.55rem .8rem;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.prose th{background:var(--surface2);font-family:var(--body);font-weight:600}
.prose tr:last-child td{border-bottom:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem}

.defeated{margin:4.5rem 0 0;max-width:44rem;padding:2rem 0;text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;border-top:1px solid var(--hair);background:none}
.defeated b{font:500 .75rem var(--mono);letter-spacing:.16em;color:var(--muted);text-shadow:none}
.defeated span{font:.8rem var(--mono);color:var(--muted)}
.defeated .btn{margin-left:auto}
.comments{max-width:44rem;margin:3.5rem 0 0}
.comments h2{font:600 1.3rem var(--disp);margin-bottom:1rem}.comments h2 small{color:var(--muted);font-weight:400}
.comment{padding:1rem 1.15rem;margin:.7rem 0;background:var(--surface);border:1px solid var(--hair);border-radius:10px}
.comment.reply{margin-left:2rem}.comment .who{display:flex;justify-content:space-between;font:600 .85rem var(--body);margin-bottom:.3rem}
.comment time{color:var(--muted);font:.75rem var(--mono)}.comment p{margin:.3rem 0}
.adjacent{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3.5rem 0 5rem}
.adjacent a{padding:1rem 1.2rem;border:1px solid var(--hair);border-radius:10px;background:var(--surface);box-shadow:none;transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:.35rem}
.adjacent a:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--line));transform:none;background:color-mix(in oklab,var(--accent) 3%,var(--surface))}
.adjacent small{color:var(--muted);font:.75rem var(--mono);letter-spacing:.08em;text-transform:uppercase}.adjacent span{font:600 1rem var(--disp);line-height:1.35}
.adjacent .r{text-align:right}
@media(max-width:700px){.adjacent{grid-template-columns:1fr}}

/* footer */
.foot{max-width:1200px;width:100%;margin:6rem auto 0;padding:2.5rem 1.25rem 2.5rem;border-top:1px solid var(--hair);display:grid;grid-template-columns:1.1fr 2fr;gap:2.5rem 4rem;color:var(--muted);font-size:.85rem;align-items:start}
.foot strong{display:block;color:var(--fg);font:600 1rem var(--disp);letter-spacing:-.01em}
#quip{display:block;margin-top:.5rem;max-width:24rem;line-height:1.65}
.foot .links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;font-family:var(--body);font-size:.85rem}
.foot-col{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.foot-label{font:.75rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.35rem}
.foot .links a,.foot .links button{color:var(--muted);font:inherit;text-align:left;border:0;background:none;padding:0;cursor:pointer;width:fit-content;display:inline-flex;align-items:center;min-height:24px}
.foot .links a:hover,.foot .links button:hover{color:var(--fg)}
.foot a,.linkish{display:inline-flex;align-items:center;min-height:24px}
.foot-note a,.foot-bottom a,.linkish{padding-block:3px;margin-block:-3px}
.foot a:hover{color:var(--fg)}
.foot-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;padding-top:1.5rem;border-top:1px solid var(--hair);font:.75rem var(--mono);color:var(--muted)}
.foot-soul{color:var(--muted)}
.konami-text{border:0;background:none;padding:0;color:var(--muted);font:.75rem var(--mono);letter-spacing:.12em;cursor:pointer}
.konami-text:hover{color:var(--accent)}
.foot-kbd{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}

/* palette + toast */
.toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,150%);z-index:110;background:var(--fg);color:var(--bg);font:500 .85rem var(--body);padding:.6rem 1rem;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px -12px rgba(0,0,0,.45);transition:transform .25s var(--ease);max-width:90vw}
.toast.show{transform:translate(-50%,0)}
.sakura{position:fixed;top:-2rem;z-index:97;pointer-events:none;font-size:1.4rem;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(540deg)}}
body.weeb{filter:hue-rotate(-30deg) saturate(1.25)}
body.shake{animation:shake .4s steps(4)}
@keyframes shake{25%{transform:translate(-6px,3px)}50%{transform:translate(6px,-3px)}75%{transform:translate(-4px,-2px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after,::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;transition:none!important}html{scroll-behavior:auto}.progress{display:none}}


/* ===== editorial layer ===== */
:root{
  --r-sm:8px;--r-md:12px;--r-lg:16px;
  --hair:color-mix(in oklab,var(--line) 70%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);
  --accent-ink:color-mix(in oklab,var(--accent) 72%,var(--fg));
}
body{background-image:none}
.crt{display:none}body.crt-on .crt{display:block}
.pill a{font:500 .92rem var(--body)}
.hero h1,.sechead h2,.lobby h2,.px,.btn,.pagehead h1{font-family:var(--disp)}
.eyebrow{color:var(--muted)}
.sechead h2,.lobby h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.btn{border-radius:8px;font:600 .94rem var(--body);box-shadow:none;letter-spacing:0;padding:.7rem 1.1rem;transition:background .15s,border-color .15s,color .15s}
.btn:hover{transform:none;filter:none;box-shadow:none}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:none}.btn.ghost:hover{border-color:var(--muted);box-shadow:none}
.btn.small{padding:.4rem .85rem;font-size:.85rem}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.9rem 0 0}
.chips a,.chips span{border-radius:6px;border-width:1px}
.chips span{padding:.18rem .6rem;border:1px solid var(--hair);font:.75rem var(--mono);color:var(--muted)}

/* hero */
.hero{overflow:visible}
.hero-in{padding:4.5rem 1.25rem 5rem;gap:4rem;align-items:center}
.hero h1{font-size:clamp(2.3rem,4vw,3.4rem);line-height:1.06;font-weight:600;margin:.5rem 0 0;text-wrap:balance;letter-spacing:-.03em}
.hero .lead{font-size:1.05rem;max-width:36rem;line-height:1.7}
.range{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.4rem 0 0;padding:0}.range span{padding:.2rem .7rem;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:.82rem}.range span:nth-child(3){border-color:var(--accent);color:var(--accent)}
.facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:1rem 2rem;margin:2.2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--hair)}
.facts div{margin:0}
.facts dt{font:600 2.2rem/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg)}.facts dd{max-width:9rem}.facts dd{margin:.3rem 0 0;color:var(--muted);font-size:.82rem}
.now{display:flex;align-items:center;gap:.55rem;margin:1.5rem 0 0;color:var(--muted);font:.78rem/1.6 var(--mono)}.now .live{display:inline-block;flex:none}

/* new here: profile router */
.who{display:grid;gap:.5rem}
.who-item{--who:var(--accent);border:1px solid var(--hair);border-radius:10px;background:var(--surface);overflow:hidden;transition:border-color .2s,background .2s}
.who-item:hover{border-color:var(--line)}
.who-item[open]{border-color:color-mix(in oklab,var(--who) 38%,var(--line));box-shadow:none;background:color-mix(in oklab,var(--who) 3%,var(--surface))}
.who-item summary{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto 1.5rem;align-items:center;column-gap:1rem;padding:1rem 1.15rem;cursor:pointer;list-style:none}
.who-item summary::-webkit-details-marker{display:none}
.who-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:10px}
.who-ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:7px;border:1px solid var(--hair);background:var(--surface2);color:var(--muted);font:600 .75rem/1 var(--mono);letter-spacing:-.02em;transition:background .2s,color .2s,border-color .2s}
.who-item[open] .who-ico{background:color-mix(in oklab,var(--who) 12%,transparent);color:var(--who);border-color:color-mix(in oklab,var(--who) 35%,var(--line))}
.who-name{font:600 1rem/1.3 var(--disp);color:var(--fg);letter-spacing:-.01em}
.who-name small{display:block;margin-top:.15rem;font:400 .8rem/1.4 var(--body);color:var(--muted);letter-spacing:0}
.who-tag{font:.75rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:0;border:0;white-space:nowrap}
.who-item[open] .who-tag{color:var(--who)}
.who-chev{justify-self:center;width:.5rem;height:.5rem;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-25%) rotate(45deg);transition:transform .2s,border-color .2s}
.who-item[open] .who-chev{transform:translateY(25%) rotate(-135deg);border-color:var(--who)}
.who-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.8rem;align-items:start;padding:.2rem 1.15rem 1.4rem calc(1.15rem + 2.5rem + 1rem);font-size:.98rem;line-height:1.7;color:var(--fg)}
.who-item[open] .who-body{animation:who-in .25s ease-out}
@keyframes who-in{from{opacity:0;transform:translateY(-3px)}}
.who-text p{margin:0 0 .8rem;max-width:58ch}
.who-text strong{color:var(--who)}
.who-body a{color:var(--who);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.who-body a:hover{text-decoration-color:currentColor}
.who-links{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.who-links a{padding:.32rem .7rem;border:1px solid var(--hair);border-radius:6px;font:500 .75rem var(--mono);color:var(--fg);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.who-links a::after{content:" →";color:var(--muted)}
.who-links a:hover{border-color:var(--line);color:var(--who);background:var(--surface2)}
/* the "injection" artifacts */
.who-art{margin:0;border:1px solid var(--line);border-radius:10px;background:var(--code);overflow:hidden;font:.85rem/1.65 var(--mono);color:var(--fg)}
.who-art figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .85rem;border-bottom:1px solid var(--line);background:var(--surface2);font-size:.75rem;color:var(--muted)}
.who-art figcaption span:first-child::before{content:"● ● ●  ";color:var(--who);letter-spacing:-.1em}
.who-art pre{margin:0;padding:.9rem 1rem;overflow-x:auto;font:inherit;white-space:pre}
.art-foot{margin:0;padding:.55rem .85rem;border-top:1px dashed var(--line);font-size:.75rem;line-height:1.5;color:var(--muted)}
.ctx-log{list-style:none;margin:0;padding:.5rem 0}
.ctx-log li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.6rem;padding:.35rem .85rem}
.ctx-log b{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;padding-top:.12rem;color:var(--muted)}
.ctx-log .r-sys b{color:var(--accent3)}.ctx-log .r-usr b{color:var(--accent2)}.ctx-log .r-ast b{color:var(--accent)}
.ctx-log .inj{background:repeating-linear-gradient(-45deg,color-mix(in oklab,var(--accent3) 9%,transparent) 0 8px,transparent 8px 16px)}
.ctx-log .inj span{text-decoration:line-through wavy color-mix(in oklab,var(--accent3) 70%,transparent);text-decoration-thickness:1px}
.ctx-log mark{display:inline-block;margin-left:.6rem;padding:0 .45rem;border-radius:4px;background:var(--accent3);color:var(--bg);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;vertical-align:.1em}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:.2em;vertical-align:-.15em;background:var(--accent);animation:blink 1s steps(1) infinite}
.yara .k{color:var(--accent2)}.yara .f{color:var(--accent);font-weight:600}.yara .v{color:var(--accent3)}.yara .s{color:var(--accent)}.yara .c{color:var(--muted);font-style:italic}
.yara .ok{color:var(--accent)}
.memo dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line)}
.memo dl div{padding:.8rem .9rem;background:var(--code)}
.memo dt{font:700 1.5rem/1 var(--disp);letter-spacing:-.02em;color:var(--who)}
.memo dd{margin:.3rem 0 0;font:.8rem/1.4 var(--body);color:var(--muted)}
.nixie-tubes{display:flex;justify-content:center;gap:.35rem;padding:1.2rem .8rem;background:radial-gradient(ellipse at 50% 120%,color-mix(in oklab,oklch(.75 .19 55) 18%,transparent),transparent 70%)}
.nixie-tubes span{display:grid;place-items:center;width:2.1rem;height:3.2rem;border-radius:1rem 1rem .35rem .35rem;border:1px solid color-mix(in oklab,oklch(.75 .19 55) 35%,var(--line));background:linear-gradient(color-mix(in oklab,oklch(.75 .19 55) 6%,oklch(.14 .01 60)),oklch(.1 .01 60));font:400 2rem/1 var(--mono);color:oklch(.82 .17 60);text-shadow:0 0 6px oklch(.75 .19 55),0 0 18px oklch(.7 .2 45)}
.nixie-tubes .dot{width:.9rem;border-color:transparent;background:none}
.who-item[open] .nixie-tubes span{animation:nixie .9s steps(6) both}
.who-item[open] .nixie-tubes span:nth-child(n+3){animation-delay:.08s}.who-item[open] .nixie-tubes span:nth-child(n+5){animation-delay:.16s}.who-item[open] .nixie-tubes span:nth-child(n+7){animation-delay:.24s}
@keyframes nixie{0%,60%{opacity:.25;text-shadow:none}70%{opacity:1}80%{opacity:.5}to{opacity:1}}
@media(max-width:900px){.who-body{grid-template-columns:1fr;gap:1.1rem}}
@media(max-width:620px){.who-hint,.who-tag{display:none}.who-item summary{grid-template-columns:2.3rem minmax(0,1fr) 1.2rem;column-gap:.8rem;padding:.8rem .9rem}.who-ico{width:2.3rem;height:2.3rem;font-size:.75rem}.who-body{padding:.2rem .9rem 1.1rem}.ctx-log li{grid-template-columns:1fr;gap:0}.nixie-tubes{gap:.2rem}.nixie-tubes span{width:1.7rem;height:2.7rem;font-size:1.6rem}.nixie-tubes .dot{width:.6rem}}
/* issue #12: all three paths stay visible on a phone, an opened summary
   never tucks under the sticky bar, and the YARA artifact wraps instead of clipping */
@media(max-width:760px){
  .who-item summary{scroll-margin-top:4rem}
  .who-art{font-size:.78rem}
  .who-art pre{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden}
}

/* article cards (blog + latest) */
.boss{--rc:var(--line);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:12px;box-shadow:none;padding:0;overflow:hidden;transform:none!important;transition:border-color .2s,translate .2s}
.boss:hover{translate:0 -2px;box-shadow:none;border-color:color-mix(in oklab,var(--accent) 42%,var(--line))}
.boss.rare,.boss.epic,.boss.legendary{--rc:var(--line)}
.b-img{position:relative;aspect-ratio:16/10;overflow:hidden;border:0;border-radius:0;background:var(--surface2);display:grid;place-items:center;font:600 1.6rem var(--mono);color:var(--muted)}
.b-img::after{display:none}.b-img img{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .5s var(--ease)}
.b-img .foil{display:none}
.boss:hover .b-img img{transform:scale(1.025)}
.b-body{display:flex;flex-direction:column;gap:.55rem;padding:1rem 1.1rem 1.1rem;flex:1}
.b-meta{display:flex;justify-content:space-between;gap:1rem;margin:0;font:.75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.b-cat{color:var(--accent)}
.boss h2{font:600 1.02rem/1.35 var(--disp);letter-spacing:-.015em;margin:0;text-wrap:pretty}
.boss:hover h2{color:var(--accent)}
.b-foot{display:flex;justify-content:space-between;gap:.75rem;margin:auto 0 0;padding-top:.7rem;border-top:1px solid var(--hair);font:.75rem var(--mono);color:var(--muted)}
.bosses{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.bosses{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bosses{grid-template-columns:1fr}}
.bosses.all{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}

/* featured research */
.featured{display:grid;grid-template-columns:1.35fr 1fr;gap:1.1rem}
.fcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:12px;overflow:hidden;transition:border-color .2s,translate .2s}
.fcard:hover{border-color:color-mix(in oklab,var(--accent) 42%,var(--line));translate:0 -2px}
.fcard .fimg{aspect-ratio:16/9;overflow:hidden;background:var(--surface2)}
.fcard .fimg img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.fit-contain img{object-fit:contain!important;padding:4%}
.cover.fit-contain img{height:min(460px,60vw)}
.fcard:hover .fimg img{transform:scale(1.025)}
.fbody{padding:1.15rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.fmeta{margin:0;font:.75rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.fcard h3{font-size:1.08rem;line-height:1.35;letter-spacing:-.015em}.lead-card h3{font-size:1.55rem;line-height:1.2}
.fsum{margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}
.fcard .chips span{border:0;padding:0;font-size:.75rem;color:var(--muted)}
.fcard .chips span+span::before{content:"·";margin:0 .4rem;color:var(--line)}
.lead-card{grid-row:span 2}
.fcard:not(.lead-card){flex-direction:row}
.fcard:not(.lead-card) .fimg{width:38%;aspect-ratio:auto;flex:none}
.fcard:not(.lead-card) .fsum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.featured{grid-template-columns:1fr}.lead-card{grid-row:auto}}
@media(max-width:560px){.fcard:not(.lead-card){flex-direction:column}.fcard:not(.lead-card) .fimg{width:100%;aspect-ratio:16/9}}
.families{margin:1.8rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;font-size:.85rem}
.families a{padding:0;border:0;border-radius:0;color:var(--muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--hair);transition:color .15s,text-decoration-color .15s}
.families a:hover{border-color:transparent;color:var(--accent);text-decoration-color:var(--accent)}

/* projects */
.role{display:inline-block;vertical-align:middle;margin-left:.5rem;padding:.1rem .6rem;border-radius:99px;background:color-mix(in oklab,var(--accent) 18%,transparent);color:var(--accent);font:600 .75rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tag-line{margin:.15rem 0 0;color:var(--muted)}
.showcase{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:1.8rem;margin-bottom:1.4rem}
.sc-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.sc-head>div:nth-of-type(1){flex:1;min-width:220px}
.sc-icon{border-radius:12px;border:1px solid var(--line)}
.showcase h3{font-size:1.6rem}
.sc-links{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.stars{font:600 .9rem var(--mono);color:var(--accent3)}
.sc-body{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;margin-top:1.4rem}
.sc-body p{margin:0}
.feat{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.2rem;font-size:.92rem}
.feat li{padding-left:1.2rem;position:relative;color:var(--muted)}
.feat li::before{content:"✓";position:absolute;left:0;color:var(--accent)}
.games{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.games b{font:500 .82rem var(--mono);padding:.15rem .7rem;border:1px solid var(--line);border-radius:99px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.shots figure{margin:0}.shots figure:first-child{grid-column:1/-1}
.shots img{width:100%;height:auto;border-radius:12px;border-color:var(--line);border:1px solid var(--line);transition:.2s}
.shots a:hover img{border-color:var(--accent)}
.shots figcaption{font:.78rem var(--mono);color:var(--muted);margin-top:.4rem}
.minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.2rem}
.mini{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.mini header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mini h3{font-size:1.3rem}.mini p{margin:0;font-size:.95rem}.mini .chips{margin-top:.2rem}
.mini .sc-links{margin-top:auto;padding-top:.6rem}
@media(max-width:800px){.sc-body{grid-template-columns:1fr}.feat{grid-template-columns:1fr}.shots{grid-template-columns:1fr}}

.focus{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;counter-reset:focus}
.focus>div{padding:1.2rem 0 0;border-top:1px solid var(--hair);counter-increment:focus}
.focus>div::before{content:"0" counter(focus);display:block;margin-bottom:.9rem;font:.75rem var(--mono);letter-spacing:.08em;color:var(--muted)}
.focus h3{font-size:1.05rem;margin-bottom:.45rem}.focus p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.65}
.lobby{border:1px solid var(--hair);border-radius:16px;background:var(--surface)}
.lobby .btn{animation:none;font-size:.94rem;padding:.7rem 1.1rem}
.sec{margin-top:6rem}

.specs{grid-column:1/-1;margin:0;font:.8rem var(--mono);color:var(--muted)}

.subhead{font:600 .85rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:3rem 0 1rem}
.mini.retired{opacity:.92;border-style:dashed}.muted-role{background:var(--surface2);color:var(--muted)}
.period{display:block;margin-top:.15rem;font:.78rem var(--mono);color:var(--muted)}
.about .pagehead h1{max-width:22ch}
.about-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:3.5rem;margin-bottom:5rem}
.about-side{position:sticky;top:6rem;align-self:start}
.about-side dl{margin:0 0 1.4rem;display:grid;gap:1rem}.about-side dt{font:.75rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.about-side dd{margin:.1rem 0 0;font:700 1.8rem/1.1 var(--disp);letter-spacing:-.02em}
.about .pagehead h1{max-width:46rem;font-size:clamp(2rem,4.4vw,3.2rem)}
.prose .timeline{list-style:none;padding:0;margin:1.4rem 0 0}
.prose .timeline li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;margin:0;padding:0 0 1.5rem 1.8rem;position:relative}
/* dot, then a line segment from this dot down to the next one */
.timeline li::before{content:"";position:absolute;z-index:1;left:0;top:.55rem;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.timeline li::after{content:"";position:absolute;left:4px;top:.55rem;width:2px;height:100%;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li:nth-last-child(2):has(+ .next)::after{background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 8px)}
.timeline .next::before{background:var(--bg);border:2px solid var(--accent);box-sizing:border-box}
.timeline .next{color:var(--muted)}
.timeline time{font:600 .9rem var(--mono);color:var(--accent);padding-top:.1rem}
.about-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem!important}
.about-body cite{display:block;margin-top:.4rem;font-style:normal;font:.85rem var(--mono)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:2rem}.about-side{position:static}.prose .timeline li{grid-template-columns:1fr;gap:.2rem}}

/* ===== Konami: glitch + demoscene overlay ===== */
html.glitching body{animation:g-hue 1.6s ease-in-out infinite alternate}
html.glitching main,html.glitching .bar,html.glitching .foot{animation:g-shake .22s steps(3) infinite}
html.glitching *{text-shadow:2px 0 rgba(255,0,90,.75),-2px 0 rgba(0,240,255,.75)}
html.glitching img{filter:contrast(1.3) saturate(2.2) hue-rotate(40deg);transform:translateX(3px)}
html.glitching::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px);animation:g-tear 2s steps(4) infinite}
@keyframes g-hue{from{filter:hue-rotate(-40deg) saturate(1.3)}to{filter:hue-rotate(60deg) saturate(1.5)}}
@keyframes g-shake{0%{transform:translate(0)}25%{transform:translate(-9px,2px) skewX(3deg)}50%{transform:translate(11px,-3px) skewX(-2deg)}75%{transform:translate(-5px,3px)}100%{transform:translate(7px,-2px) skewX(2deg)}}
@keyframes g-tear{0%{clip-path:inset(0 0 80% 0)}25%{clip-path:inset(30% 0 40% 0)}50%{clip-path:inset(60% 0 10% 0)}75%{clip-path:inset(10% 0 70% 0)}100%{clip-path:inset(0)}}
#demo{position:fixed;inset:0;z-index:200;background:#000;display:grid;place-items:center}
#demo canvas{display:block;width:100%;height:100%;background:#000;touch-action:none}
#demo:not(.ui){cursor:none}
.demo-bar{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:.4rem;max-width:calc(100vw - 1rem);padding:.4rem .6rem;background:#090b10e6;border:1px solid #fff5;border-radius:99px;transition:opacity .4s}
#demo:not(.ui) .demo-bar:not(:focus-within){opacity:0}
.demo-btn{min-height:32px;padding:.35rem .7rem;border-radius:99px;background:#fff2;border:1px solid #fff5;color:#fff;font:600 .78rem/1.2 var(--mono);white-space:nowrap;cursor:pointer}
.demo-btn:hover{background:#fff4}
.demo-btn:focus-visible{outline:2px solid #2ee6b8;outline-offset:2px}
.demo-btn[aria-pressed=true]{background:#2ee6b8;border-color:#2ee6b8;color:#06100d}
@media(prefers-reduced-motion:reduce){html.glitching *{animation:none!important}}

/* ===== Terminal (Ctrl+K) ===== */
/* Kloude Code terminal */
.term-wrap{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:2vh 2vw}
.term-wrap[hidden]{display:none}
.term{--tbg:#101010;--tbg2:#171717;--tfg:#e8e5df;--tdim:#8b8780;--tline:#2b2b2b;--taccent:#d97757;--twarn:#e6b450;width:min(920px,100%);height:min(720px,90vh);display:flex;flex-direction:column;background:var(--tbg);color:var(--tfg);border:1px solid #2f2f2f;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.7);font:14px/1.55 var(--mono);overflow:hidden;animation:term-in .18s ease-out}
@keyframes term-in{from{opacity:0;transform:translateY(8px)}}
.term-chrome{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.45rem .75rem;background:var(--tbg2);border-bottom:1px solid var(--tline)}
.tl{position:absolute;left:0;display:flex;align-items:center;gap:.45rem}
.tl i{width:.78rem;height:.78rem;border-radius:50%;display:block}
.tl button{border:0;padding:0;margin:0;font:inherit;appearance:none;cursor:pointer}
.tl button.r{width:44px;height:44px;margin-right:-19.5px;border-radius:6px;background:transparent;display:inline-flex;align-items:center;padding-left:.75rem}
.tl button.r::before{content:"";width:.78rem;height:.78rem;border-radius:50%;background:#ff5f57;flex:none}
.tl button:focus-visible{outline:2px solid var(--taccent);outline-offset:-4px}
.tl .y{background:#febc2e}.tl .g{background:#28c840}
.term-title{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 .75rem var(--mono);color:#9a968f}
.term-size{position:absolute;right:.8rem;font:.75rem var(--mono);color:#8b8780}
.term-body{flex:1;overflow:auto;padding:1.1rem 1.4rem 1rem;scrollbar-width:thin;scrollbar-color:#3a3a3a transparent;overscroll-behavior:contain}
/* welcome */
.cc-welcome{max-width:60rem;margin:0 auto;padding:0 .2rem}
.cc-boot{display:flex;align-items:flex-start;gap:1.15rem}
.cc-cloud{flex:none;display:block;width:68px;height:auto;margin-top:.15rem;color:var(--taccent);overflow:visible}
.cc-cloud path{fill:currentColor}
.cc-cloud .cc-eye{fill:var(--tbg);animation:cc-blink 5.6s steps(1,end) infinite}
.cc-cloud .cc-spark{fill:#f1c7a8;animation:cc-spark 3.4s steps(1,end) infinite}
.cc-cloud .cc-drop{fill:currentColor;opacity:.45;animation:cc-rain 2.8s steps(5,end) infinite}
.cc-cloud .cc-bob{animation:cc-bob 3.8s steps(1,end) infinite}
@keyframes cc-bob{0%,49%{transform:translateY(0)}50%,100%{transform:translateY(-1px)}}
@keyframes cc-blink{0%,93%,100%{opacity:1}94%,97%{opacity:0}}
@keyframes cc-spark{0%,71%,100%{opacity:0}72%,81%{opacity:1}82%,100%{opacity:0}}
@keyframes cc-rain{0%{transform:translateY(0);opacity:0}8%,74%{opacity:.45}100%{transform:translateY(8px);opacity:0}}
.cc-ident{display:grid;gap:.1rem;min-width:0}
.cc-title{margin:0;color:var(--tfg);font:600 .95rem/1.35 var(--mono)}
.cc-title span{color:var(--tdim);font-weight:400}
.cc-sub{margin:0;color:var(--tdim);font:.88rem/1.5 var(--mono)}
.cc-news{display:grid;gap:1.2rem;margin:1.55rem 0 0}
.cc-line{margin:0;color:var(--tfg);font:.88rem/1.65 var(--mono)}
.cc-line a{color:var(--tdim);text-decoration:none}
.cc-line a:hover,.cc-line a:focus-visible{color:var(--taccent);text-decoration:underline;text-underline-offset:2px}
.cc-warn{margin:0;color:var(--twarn);font:.88rem/1.6 var(--mono)}
.cc-warn b{font-weight:500}
.cc-warn-ico{font-size:1.1em;font-weight:400}
.cc-tip{margin:1.35rem 0 0;color:#8b8780;font:.75rem/1.6 var(--mono)}
/* messages */
.kmsg{max-width:60rem;margin:0 auto .8rem}
.kuser{display:flex;gap:.6rem;margin-top:1.1rem;color:var(--tfg);font-size:.88rem;font-weight:500;overflow-wrap:anywhere}
.kprompt{color:var(--tdim);font-weight:400}
.kassistant{font-size:.88rem;color:var(--tfg)}
.ktools{display:grid;gap:.15rem;margin:.15rem 0 .45rem}
.ktool{display:flex;gap:.5rem;color:var(--tdim);font:.78rem/1.5 var(--mono)}
.kdot{flex:none;color:#7fb98a;font-size:.75rem;line-height:1.5}
.ktext{display:grid;gap:.35rem;font:.88rem/1.65 var(--mono)}
.ktext p{margin:0}
.ktext a{color:var(--taccent);text-decoration:underline;text-underline-offset:2px}
.ktext b{font-weight:600}
.kdim{color:var(--tdim)}
.kspin{display:flex;gap:.55rem;color:var(--tdim);font:.82rem/1.5 var(--mono)}
.kspin .spark{color:var(--taccent);animation:kblink .9s steps(2) infinite}
@keyframes kblink{50%{opacity:.35}}
.khelp{display:grid;gap:.25rem;color:var(--tfg);font:.82rem/1.5 var(--mono)}
.khelp div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.6rem}
.khelp span{color:var(--taccent)}
.khelp em{font-style:normal;color:var(--tdim)}
/* input */
.cc-form{flex:none;padding:0;background:var(--tbg)}
.cc-effort-row{display:flex;justify-content:flex-end;padding:.25rem 1.4rem .35rem}
.cc-effort{border:0;background:none;padding:.2rem .35rem;min-height:28px;display:inline-flex;align-items:center;gap:.25rem;color:var(--tdim);font:.75rem/1.4 var(--mono);cursor:pointer}
.cc-effort:hover{color:var(--tfg)}
.cc-effort:focus-visible{outline:1px solid var(--taccent);outline-offset:2px}
.cc-suggest{display:grid;width:calc(100% - 2.8rem);max-width:60rem;margin:0 auto .4rem;border:1px solid var(--tline);border-radius:6px;background:var(--tbg2);overflow:hidden}
.cc-suggest[hidden]{display:none}
.cc-sug{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:32px;padding:.35rem .6rem;border:0;background:none;color:var(--tfg);font:.75rem var(--mono);text-align:left;cursor:pointer}
.cc-sug span{color:var(--tdim)}
.cc-sug:hover,.cc-sug:focus-visible{background:#202020}
.cc-input-row{padding:.55rem 1.4rem;border-top:1px solid var(--tline);border-bottom:1px solid var(--tline);transition:border-color .12s}
.cc-input-row:focus-within{border-color:#4c4c4c}
.cc-input{display:flex;align-items:center;gap:.6rem;max-width:60rem;margin:0 auto}
.cc-prompt{flex:none;color:var(--tfg);font-weight:400}
.term-input{position:relative;flex:1;min-width:0}
.term-input input,.term-hl{width:100%;margin:0;padding:0;border:0;background:transparent;font:inherit;line-height:1.5;letter-spacing:normal;white-space:pre}
.term-input input{position:relative;display:block;color:transparent;caret-color:var(--taccent);outline:none}
.term-input input:disabled{opacity:1}
.term-input input::placeholder{color:#8b8780;opacity:1}
.term-hl{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--tfg)}
.kcmd{color:var(--taccent)}
.cc-foot{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:.35rem 1.4rem .45rem;color:var(--twarn);font:.75rem/1.5 var(--mono)}
.cc-auto{border:0;background:none;padding:.2rem 0;min-height:28px;display:inline-flex;align-items:center;gap:.3rem;color:inherit;font:inherit;cursor:pointer;text-align:left}
.cc-auto:hover{color:#f0c66d}
.cc-auto:focus-visible{outline:1px solid var(--taccent);outline-offset:2px}
.cc-auto span{color:var(--tdim)}
.cc-foot-hint{color:#8b8780}
@media(max-width:760px){
  .term-input input,.term-hl{font-size:16px}
  .cc-effort,.cc-auto{min-height:36px}
  .cc-sug{min-height:44px}
}
@media(max-width:720px){
  .term-wrap{padding:0}
  .term{width:100%;height:100dvh;border:0;border-radius:0}
  .term-body{padding:1rem .8rem .6rem}
  .cc-input-row{padding:.5rem .9rem}
  .cc-effort-row{padding:.2rem .9rem .3rem}
  .cc-suggest{width:calc(100% - 1.8rem)}
  .cc-foot{padding:.3rem .9rem .45rem}
  .cc-cloud{width:56px}
  .cc-boot{gap:.85rem}
  .cc-title{font-size:.9rem}
  .cc-sub{font-size:.76rem}
  .term-size{display:none}
  .cc-warn,.cc-line{font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){.term,.kspin .spark,.cc-cloud *{animation:none!important}}

/* skip link + screen-reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-5rem;z-index:200;padding:.6rem 1rem;background:var(--accent);color:var(--bg);border:1px solid var(--accent);border-radius:6px;box-shadow:0 8px 24px -10px rgba(0,0,0,.4);font:600 .9rem var(--body);transition:top .12s}
.skip:focus,.skip:focus-visible{top:.6rem;color:var(--bg)}

/* header: one desktop row, collapsible panel on phones */
.navwrap{display:flex;align-items:center;gap:1.25rem;min-width:0}
.nav-desc{display:none}
.term-btn-top{display:inline-flex;align-items:center;gap:.42rem}
.ico.menu{display:none}
.nav-scrim{display:none}
.nav-scrim[hidden]{display:none}
@media(max-width:980px){.navwrap{gap:.55rem}.pill{gap:.12rem}.pill a{padding:.3rem .45rem;font-size:.88rem}.tools-r{gap:.25rem}.ico{width:2.2rem;height:2.2rem}}
@media(min-width:761px) and (max-width:860px){.logo{font-size:1.2rem}.pill a{padding:.3rem .35rem;font-size:.85rem}.ico{width:2.1rem;height:2.1rem}}
@media(max-width:760px){
  .bar{flex-wrap:nowrap;gap:.5rem;padding:.6rem 1rem}
  .bar.menu-open{background:var(--bg);box-shadow:none}
  .ico.menu{display:grid;place-items:center;margin-left:0;width:2.75rem;height:2.75rem}
  .bar.menu-open #menu-toggle{background:var(--accent);color:var(--bg);border-color:var(--accent)}
  .navwrap{display:none}
  body.nav-open,html.nav-open{overflow:hidden}
  .nav-scrim{position:fixed;inset:0;z-index:55;background:rgba(8,8,12,.52);backdrop-filter:blur(2px)}
  body.nav-open .nav-scrim{display:block}
  .bar.menu-open .navwrap{position:absolute;top:100%;left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:stretch;flex:none;gap:.5rem;margin:0;padding:1rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--line);background:var(--bg);box-shadow:0 24px 50px -20px rgba(0,0,0,.45);max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow:auto;overscroll-behavior:contain}
  .bar.menu-open .pill{flex-direction:column;gap:.15rem}
  .bar.menu-open .pill a{display:flex;align-items:center;min-height:44px;padding:.6rem .7rem;font-size:1rem;border:1px solid transparent;border-radius:8px}
  .bar.menu-open .pill a.has-desc{flex-direction:column;align-items:flex-start;justify-content:center;gap:.12rem}
  .bar.menu-open .nav-desc{display:block;font:400 .75rem/1.3 var(--body);color:var(--muted);white-space:normal;text-align:left}
  .bar.menu-open .pill a:hover{background:var(--surface)}
  .bar.menu-open .pill a[aria-current]{box-shadow:none;border-color:transparent;background:var(--surface);color:var(--fg)}
  .bar.menu-open .pill a[aria-current]::after{display:none}
  .bar.menu-open .tools-r{display:flex;gap:.4rem}
  .bar.menu-open .tools-r .search-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;flex:1;width:auto;height:2.9rem;min-height:44px}
  .bar.menu-open .tools-r .ico{flex:1;width:auto;height:2.9rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
  .bar.menu-open .tools-r .ico-label{display:inline;font:500 .95rem var(--body)}
}

/* buttons: never inherit the prose link colour */
.prose a.btn{color:var(--bg);text-decoration:none;border-bottom:0}
.prose a.btn:hover{color:var(--bg);text-decoration:none}
.prose a.btn.ghost,.prose a.btn.ghost:hover{color:var(--fg)}
.about-cta .btn{color:var(--bg)}
.about-cta .btn.ghost{color:var(--fg)}

/* search dialog */
.search-wrap{position:fixed;inset:0;z-index:105;display:grid;place-items:start center;padding:min(9vh,5rem) 1rem 1rem;background:color-mix(in oklab,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.1);overflow-y:auto;overscroll-behavior:contain}
.search-wrap[hidden]{display:none}
.search{width:min(760px,100%);max-height:85dvh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden;animation:term-in .18s ease-out}
.search-bar{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--surface2);border-bottom:1px solid var(--line)}
.search-bar:focus-within{border-bottom-color:var(--accent)}
.search-icon{flex:none;color:var(--accent);font:1.15rem var(--mono)}
#search-input{flex:1;min-width:0;padding:.3rem 0;border:0;background:transparent;color:var(--fg);font:1.02rem var(--mono)}
#search-input:focus{outline:none}
#search-input::-webkit-search-cancel-button,#search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
#search-input::placeholder{color:var(--muted);opacity:.85}
.search-close{flex:none;width:2.2rem;height:2.2rem;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:1rem var(--mono);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center}
.search-close:hover{border-color:var(--accent);color:var(--accent)}
.search-hint{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .55rem;margin:0;padding:.5rem 1rem;border-bottom:1px solid var(--line);color:var(--muted);font:.75rem var(--mono)}
.search-help{margin:0;color:var(--muted);font:.75rem/1.5 var(--mono)}
.search-examples{padding:.45rem 1rem 0}
.search-touch-hint{display:none}
.search-count{margin:0;padding:.5rem 1rem 0;color:var(--muted);font:.75rem var(--mono);letter-spacing:.03em}
.search-count:empty{display:none}
.search-results{flex:1 1 auto;min-height:0;margin:0;padding:.4rem .55rem .6rem;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.search-results::-webkit-scrollbar{width:9px}
.search-results::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.search-results::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.search-hit{margin:0;padding:.6rem .7rem;border:1px solid transparent;border-radius:10px;color:var(--fg);cursor:pointer}
.search-hit+.search-hit{margin-top:.15rem}
.search-hit a{display:block;color:inherit;text-decoration:none}
.search-hit b,.search-hit strong{display:block;color:var(--fg);font:600 1rem/1.3 var(--disp)}
.search-hit small,.search-hit time{display:block;margin-top:.15rem;color:var(--muted);font:.75rem var(--mono)}
.search-hit .search-meta{display:block;margin-top:.1rem;color:var(--muted);font:.75rem var(--mono)}
.search-hit .search-snippet{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.2rem;color:var(--muted);font:.84rem/1.45 var(--body)}
.search-hit p{margin:.25rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-hit mark{padding:0 .1em;border-radius:3px;background:color-mix(in oklab,var(--accent3) 45%,transparent);color:var(--fg)}
.search-hit:hover,.search-hit.on{background:color-mix(in oklab,var(--accent) 13%,transparent);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.search-hit.on{box-shadow:inset 3px 0 0 var(--accent)}
.search-results:empty{flex:0 0 auto;padding:0}
.search-empty{margin:0;padding:1rem 1rem 2rem;color:var(--muted);font:.9rem var(--mono);text-align:left}
.search-empty[hidden]{display:none}
@media(max-width:600px){
  .search-wrap{padding:0;place-items:stretch;background:var(--bg)}
  .search{width:100%;max-width:100%;height:100vh;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .search-results{padding:.3rem .4rem .5rem}
  .search-hit{padding:.65rem .6rem}
}

/* share row */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.8rem 0 2rem;color:var(--muted);font-size:.9rem}
.share-row a,.share-row button{display:inline-flex;align-items:center;gap:.4rem;min-height:2.4rem;padding:.4rem .8rem;border:1px solid var(--hair);border-radius:6px;background:transparent;color:var(--muted);font:.75rem var(--mono);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.share-row a:hover,.share-row button:hover{border-color:var(--line);color:var(--fg);background:var(--surface)}

/* related posts */
.related{margin:4rem 0 0;padding-top:2rem;border-top:1px solid var(--hair)}
.related>h2{font:600 1.45rem var(--disp);margin:0 0 1.2rem}
.related ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1rem;margin:0;padding:0;list-style:none}
.related li{min-width:0}
.related li>a{display:block;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--hair);border-radius:10px;transition:border-color .15s,color .15s}
.related li>a:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--line));color:var(--fg)}
.related small{display:block;margin-bottom:.3rem;color:var(--muted);font:.75rem var(--mono);text-transform:uppercase;letter-spacing:.05em}

/* archived-article banner */
.archived-banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;margin:1.4rem 0 2rem;padding:.85rem 1.1rem;border-left:2px solid var(--accent3);border-radius:0 8px 8px 0;background:color-mix(in oklab,var(--accent3) 8%,var(--surface));font-size:.9rem}
.archived-banner b{color:var(--accent)}

/* heading anchors */
.anchor{padding-left:.4rem;color:var(--muted);font:400 .8em var(--mono);text-decoration:none;opacity:0;transition:opacity .15s}
.prose a.anchor{color:var(--muted);text-decoration:none}
.anchor:hover,.anchor:focus-visible{opacity:1;color:var(--accent)}
.prose a.anchor:hover,.prose a.anchor:focus-visible{color:var(--accent)}
.prose :is(h2,h3,h4):hover .anchor{opacity:.7}

/* archive years, glossary, tag lists */
.yeargroup{margin:3rem 0 0}
.yeargroup>h2,.yeargroup>h3{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0 0 1.1rem;color:var(--accent);font:600 1.05rem var(--mono);letter-spacing:.06em}
.yeargroup>h2 a,.yeargroup>h3 a{color:inherit}
.yeargroup>h2::after,.yeargroup>h3::after{content:"";flex:1;height:1px;background:var(--line)}
.yeargroup>ul{display:grid;gap:.1rem;margin:0;padding:0;list-style:none}
.yeargroup li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1rem;padding:.45rem 0;border-bottom:1px solid color-mix(in oklab,var(--line) 45%,transparent)}
.yeargroup li time{flex:none;min-width:5.4rem;color:var(--muted);font:.78rem var(--mono)}
.yeargroup li a{color:var(--fg)}
.yeargroup li a:hover{color:var(--accent)}
.prose dl{margin:2rem 0}
.prose dt{margin-top:1.2rem;font:600 1.05rem var(--disp)}
.prose dd{margin:.25rem 0 0;color:var(--muted)}
.prose dt:first-child{margin-top:0}
.chips a{max-width:100%;overflow-wrap:anywhere}

/* blog cards may use h2 */
.boss h2{font-size:1.02rem;line-height:1.35;font-weight:600;letter-spacing:-.015em}
.boss.feat h2{font-size:1.5rem}
.boss:hover h2{color:var(--accent)}
.fcard h2{font-size:1.08rem;line-height:1.35}
.lead-card h2{font-size:1.55rem}

/* narrow screens: never force a min width wider than the viewport */
.minis{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.bosses.all{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.prose iframe,.prose video,.prose object,.prose .tablewrap{max-width:100%}

/* code blocks: visible scrollbar, focus ring, larger copy target */
.prose pre{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.prose pre::-webkit-scrollbar{height:10px}
.prose pre::-webkit-scrollbar-track{background:color-mix(in oklab,var(--line) 30%,transparent)}
.prose pre::-webkit-scrollbar-thumb{background:var(--muted);border:2px solid var(--code);border-radius:99px}
.prose pre::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.prose pre:focus{outline:none}
.prose pre:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prose .copy,.prose button.wrap{min-height:1.55rem;font-size:.75rem}

.toast:empty{display:none}

/* text-only / data-saver mode */
html.data-saver .b-img,html.data-saver .fimg,html.data-saver .cover,html.data-saver .dbg,
html.data-saver main img,html.data-saver main picture,html.data-saver main video,html.data-saver main canvas.decor,html.data-saver main #rain,
html[data-saver] main img,html[data-saver] main picture,html[data-saver] main video,html[data-saver] main canvas.decor,html[data-saver] main #rain{display:none!important}
html.data-saver main,html.data-saver main *,html[data-saver] main,html[data-saver] main *{background-image:none!important}
html.data-saver .shots img{display:none}
html.data-saver .hero-in{grid-template-columns:1fr}
#saver[aria-pressed=true],#saver.on{color:var(--accent)}

/* footer: wrapping links and a text-only button */
.foot-note{margin:.45rem 0 0;overflow-wrap:anywhere}
.linkish{display:inline;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;line-height:inherit;text-align:left;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer}
.linkish:hover{color:var(--accent);text-decoration-style:solid}
.foot .links .linkish{display:inline-flex;align-items:center;padding:0;margin:0;text-decoration:none;white-space:nowrap}
.foot .links .linkish:hover{color:var(--fg);text-decoration:none}

/* ===== print ===== */
@media print{
  @page{margin:1.5cm}
  html,body{background:#fff!important;color:#000!important;background-image:none!important}
  body{font-size:11pt;line-height:1.5}
  body::before{display:none!important}
  *{box-shadow:none!important;text-shadow:none!important}
  .bar,.foot,.toc,.progress,.crt,.dbg,.share-row,.copy,.search-wrap,.term-wrap,.skip,.saver,.toast,.sakura,#demo{display:none!important}
  a{color:#000!important;text-decoration:underline}
  main{color:#000}
  .wrap,.article{max-width:none;padding:0;margin:0}
  .layout,.about-grid,.hero-in,.sc-body,.featured,.shots{display:block}
  .about-side{display:none!important}
  .prose{max-width:none;font-size:11pt}
  .prose,.prose *{color:#000!important}
  .prose pre{white-space:pre-wrap;overflow:visible;overflow-wrap:anywhere;word-break:break-word;padding:.7rem;border:1px solid #999;background:#f6f6f6!important;font-size:9pt}
  .prose pre::before{display:none!important}
  .prose pre code{color:#000!important;background:none!important}
  .prose :not(pre)>code{background:#eee!important;border:1px solid #ccc!important}
  .prose blockquote{border-left:3px solid #777;background:none!important}
  .prose h2{border-bottom:1px solid #999}
  .archived-banner{border-left:4px solid #999;background:none!important}
  .prose .tablewrap{overflow:visible;border:0}
  .prose td,.prose th{border-bottom:1px solid #999}
  .prose th{background:#eee!important}
  .prose img{border:0}
  .lead,.eyebrow,.muted,.fmeta,.fsum,.b-foot,.hp em,.casebar span{color:#333!important}
  .casebar span,.chips a,.chips span,.btn,.boss,.fcard,.slot-card,.showcase,.adjacent a{border:1px solid #888!important;background:none!important;color:#000!important}
  .btn{padding:.2rem .6rem}
  pre,figure,table,blockquote{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3,h4{break-after:avoid;page-break-after:avoid}
}

.died{margin:0 auto;width:100%;padding:5rem 1.25rem;overflow:hidden;background:none}
.died h1{max-width:100%;font-size:clamp(2.6rem,8vw,5rem);letter-spacing:-.05em;color:var(--fg);text-shadow:none;overflow-wrap:anywhere}
.died .lead{max-width:36rem}
@media(max-width:560px){.died h1{font-size:clamp(2.2rem,12vw,3.2rem);letter-spacing:-.04em}}
.lightbox{z-index:130;background:color-mix(in oklab,var(--bg) 94%,transparent);backdrop-filter:blur(6px)}
.lightbox figure{gap:.65rem}
.lightbox img{border:1px solid var(--hair);border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.45);background:var(--code)}
.lightbox figcaption{max-width:72ch;color:var(--muted);font:.8rem/1.5 var(--mono)}
.lightbox > button{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--hair);border-radius:50%;background:var(--surface);color:var(--fg);font-size:1.4rem}
.lightbox > button:hover,.lightbox > button:focus-visible{border-color:var(--accent);color:var(--accent)}
html.lightbox-open{overflow:hidden}
.mobile-search{display:none}
@media(max-width:760px){
  .mobile-search{display:grid;place-items:center;margin-left:auto;width:2.75rem;height:2.75rem}
  .ico.menu{margin-left:.2rem}
}

/* long URLs and hashes in imported prose must wrap, not widen the page */
.prose :where(p,li,ul,ol,em,strong,span,a,td,th,blockquote,figcaption,dt,dd){overflow-wrap:anywhere}
.prose pre{max-width:100%;overflow:auto hidden;contain:inline-size}
.prose .wp-caption,.prose dl.wp-caption{max-width:100%!important;width:auto!important}
.prose .wp-caption img,.prose dl.wp-caption img{width:100%!important;height:auto!important}
.prose{overflow-wrap:anywhere}
.prose h2,.prose h3,.prose h4{overflow-wrap:anywhere}
.comments,.comment,.comment *{overflow-wrap:anywhere}
.search-btn svg{width:1.05rem;height:1.05rem;display:block}
.bar.menu-open #menu-toggle{font-size:0;position:relative}
.bar.menu-open #menu-toggle::before,.bar.menu-open #menu-toggle::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;background:currentColor;border-radius:2px}
.bar.menu-open #menu-toggle::before{transform:rotate(45deg)}
.bar.menu-open #menu-toggle::after{transform:rotate(-45deg)}
.slot-card small,.stars,.lead .dim{color:var(--accent2)}
.archived-banner b{color:var(--accent)}
@media(max-width:1000px){
  .layout{display:flex;flex-direction:column}
  .toc{display:block;order:-1;position:static;max-height:35vh;overflow:auto;margin:0 0 1.2rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
  .toc p{margin-bottom:.5rem}
  .toc ol{grid-template-columns:1fr 1fr;gap:.3rem .8rem}
}
@media(max-width:560px){.toc ol{grid-template-columns:1fr}}
html.data-saver .prose img,html.data-saver .prose figure:has(img){display:none}
.bar.menu-open .mobile-search::after{content:none}

/* contrast: remove translucent/legacy inline colours on light themes */
.chips a span{opacity:1;color:inherit}
.role{color:var(--fg)}
.prose :not(pre)>code{color:var(--accent2)}
.prose [style*="color"]{color:inherit!important}
/* 24px minimum for standalone chips, footer links and anchors */
.chips a,.foot .links a,.foot .links button{min-height:1.5rem;display:inline-flex;align-items:center}
.anchor{min-width:1.5rem;display:inline-block;text-align:center}
/* print end matter */
@media print{
  .defeated{background:none!important;border-color:#999!important}
  .defeated b,.defeated span,.related small,.related li>a,.adjacent small,.archived-banner b{color:#000!important}
  .related li>a{border:1px solid #999!important;background:none!important}
}
@media print{*{transition:none!important;animation:none!important}}


/* author box */
.author-box{display:flex;gap:1.2rem;align-items:flex-start;margin:4rem 0 0;padding:1.4rem;border:1px solid var(--hair);border-radius:12px;background:var(--surface)}
.author-mark{flex:none;display:grid;place-items:center;width:2.7rem;height:2.7rem;border:1px solid var(--line);border-radius:8px;color:var(--muted);font:600 1.05rem var(--disp)}
.author-copy{min-width:0}
.author-box h2{font-size:1.2rem}.author-box h2 a{color:var(--fg)}
.author-box p{margin:.4rem 0 0;color:var(--muted);font-size:.9rem;max-width:48rem}
@media(max-width:560px){.author-box{padding:1.1rem}.author-mark{width:2.5rem;height:2.5rem}}

/* projects */
.security-list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.security-list a{display:flex;flex-direction:column;gap:.25rem;height:100%;padding:1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:.15s}
.security-list a:hover{border-color:var(--accent);translate:0 -2px}
.security-list b{font:600 1rem var(--disp)}
.security-list span{font:.75rem var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.security-list small{color:var(--muted);font-size:.88rem;line-height:1.5}
.security-card{max-width:100%;margin-bottom:.8rem}
.project-specs{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0 0}
.project-specs span{padding:.12rem .55rem;border:1px solid var(--line);border-radius:99px;font:.75rem var(--mono);color:var(--muted);background:var(--surface2)}
.mini h2{font-size:1.3rem}
.mini.retired .project-specs span:first-child{color:var(--accent)}
.project-note{max-width:52rem;margin:1.2rem 0 0}
@media(max-width:760px){.security-list{grid-template-columns:1fr}}

/* inline search form on /search/ (phones have no Ctrl+K) */
.search-page-form{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 .5rem}
.search-page-form input{flex:1;min-width:min(100%,320px);padding:.75rem 1rem;border:1px solid var(--hair);border-radius:8px;background:var(--surface);color:var(--fg);font:.92rem var(--mono)}
.search-page-form input:focus{outline:none;border-color:color-mix(in oklab,var(--accent) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 12%,transparent)}

/* mobile pass: a 411x731 phone (Pixel XL class) */
@media(max-width:760px){
  .pagehead{padding:2.4rem 0 1.4rem}
  .pagehead h1{font-size:clamp(1.9rem,9vw,2.4rem);line-height:1.03}
  .hero-in{padding:2.4rem 1.25rem 2.6rem}
  .hero h1{font-size:clamp(1.95rem,8.4vw,2.5rem)}
  .hero .lead{font-size:1rem;line-height:1.55}
  .lead{font-size:1rem;line-height:1.55}
  .facts{grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:1.4rem;padding-top:1rem}
  .facts dt{font-size:1.55rem}
  .facts dd{font-size:.75rem;line-height:1.3}
  .foot{grid-template-columns:1fr;gap:2rem;margin-top:3rem;padding:2rem 1.25rem}
  .foot .links{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem;width:100%;font-family:var(--body);font-size:.9rem;margin-top:0}
  .foot-col{gap:0}
  .foot-col:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.2rem}
  .foot-col:last-child .foot-label{grid-column:1/-1}
  .foot .links a,.foot .links button{min-height:44px;display:flex;align-items:center;width:100%;font-family:var(--body);font-size:.9rem;border-bottom:1px solid var(--hair)}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:.65rem;padding-top:1.2rem}
  .logo{min-height:44px}
  .bar{padding-top:.35rem;padding-bottom:.35rem}
}
@media(max-width:400px){
  .facts dt{font-size:1.35rem}
}

@media(max-width:760px){
  .btn{min-height:44px}
  .foot .links a,.foot .links button{min-height:44px}
  .navwrap .pill a{min-height:44px;display:flex;align-items:center}
  .facts dd{font-size:.8rem}
  .role{font-size:.75rem}
  .chips a,.chips span{font-size:.8rem}
}

@media(max-width:760px){
  .bar{background:var(--surface)}
}

/* dead drop resolver figure + mobile tables */
.ddr-flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin:1.4rem 0;padding:0}
.ddr-flow li{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:1rem .8rem;text-align:center}
.ddr-flow li:not(:last-child)::after{content:"→";position:absolute;right:-1.15rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:1.1rem}
.ddr-flow b{display:block;font:600 .9rem var(--mono)}
.ddr-flow span{display:block;margin-top:.25rem;color:var(--muted);font-size:.78rem;line-height:1.35}
@media(max-width:760px){
  .ddr-flow{grid-template-columns:1fr;gap:1.5rem}
  .ddr-flow li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-1.25rem;transform:translateX(-50%)}
  .prose .tablewrap table{width:640px;min-width:640px}
}

.table-hint{display:none;margin:.3rem 0 .6rem;font:.78rem var(--mono);color:var(--muted)}
@media(max-width:760px){.table-hint{display:block}}

/* the record: work cards */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.work-card{display:flex;flex-direction:column;gap:.55rem;padding:1.25rem 1.3rem;border:1px solid var(--hair);border-radius:12px;background:var(--surface);color:var(--fg);text-decoration:none;transition:border-color .2s,translate .2s}
.work-card:hover{border-color:color-mix(in oklab,var(--accent) 42%,var(--line));translate:0 -2px}
.work-top{display:flex;justify-content:space-between;gap:1rem;font:.75rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.work-kind{color:var(--accent)}
.work-card h3{margin:.15rem 0 0;font:600 1.05rem/1.35 var(--disp);letter-spacing:-.015em}
.work-card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65;flex:1}
.work-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.7rem;border-top:1px solid var(--hair);font:.75rem var(--mono);color:var(--muted)}
.work-arrow{color:var(--muted);font-size:.95rem}
.work-card:hover .work-arrow{color:var(--accent)}
.work-note{max-width:70ch;margin:1.5rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.7}
.work-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.work-grid-full{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.work-page .sec{margin-top:2rem}
.who-agent{margin:1rem 0 0;font:.84rem var(--mono);color:var(--muted)}
.who-agent a{color:var(--accent)}
@media(max-width:620px){.who-agent{font-size:.78rem}}

/* issue #2: 44px touch targets on tablets (761px up to, but not including, desktop >=1100px) */
@media(min-width:761px) and (max-width:1099.98px){
  .pill a{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;white-space:nowrap}
  .ico{width:44px;height:44px}
  .logo{min-height:44px}
  .foot .links a,.foot .links button{min-height:44px;min-width:44px;display:flex;align-items:center}
  .foot-note a,.foot-bottom a{display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
  .konami-text{display:inline-flex;align-items:center;min-height:44px}
  .chips a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* search on touch: 16px inputs, 44px labelled close, no keyboard hints */
@media(max-width:760px){
  #q,.apple-search-box #q,.search-page-form input,#search-input{font-size:16px}
  .search-hint{display:none}
  .search-touch-hint{display:block;margin:0;padding:.5rem 1rem;border-bottom:1px solid var(--hair);color:var(--muted);font:.75rem/1.5 var(--body)}
  .search-close{width:auto;min-width:44px;height:44px;padding:0 .75rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:.8rem var(--body)}
  .search-close::after{content:"Cancel"}
  .search-page-form .btn{width:100%;justify-content:center}
  .kbd-help{display:none}
  .tools>.search-help{margin-top:-.55rem}
}

/* ===== issue #4: research filters on phones ===== */
#filters[hidden],#count[hidden]{display:none}
@media(max-width:760px){
  .tools{gap:.55rem}
  #count{margin:0;font-size:.82rem}
  #filters{display:flex;flex-wrap:wrap;overflow-x:visible;gap:.4rem;padding:.75rem .9rem;min-width:0;max-width:100%;width:100%;mask-image:none;-webkit-mask-image:none}
  #filters a{flex:0 1 auto;max-width:100%;min-height:44px;display:inline-flex;align-items:center;padding:.3rem .7rem}
}

/* ===== issue #5: long code blocks on phones and tablets =====
   Touch browsers hide the code scrollbar, so a long line silently disappeared. The block
   now wraps through the audit's tablet-landscape width instead of scrolling sideways.
   Desktop (>1024px) keeps its scroll. */
@media screen and (max-width:1024px){
  /* Article code only. Interactive toys keep their own compact styles. */
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *){
    white-space:pre;
    overflow-wrap:normal;
    word-break:normal;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    contain:inline-size;
    max-width:100%;
    font-size:14px;
    line-height:1.65;
    padding:calc(44px + .9rem) 2rem 1rem .9rem;
    -webkit-mask-image:linear-gradient(180deg,#000 0 44px,transparent 44px),linear-gradient(90deg,#000 calc(100% - 2rem),transparent);
    mask-image:linear-gradient(180deg,#000 0 44px,transparent 44px),linear-gradient(90deg,#000 calc(100% - 2rem),transparent);
  }
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) code{white-space:pre;overflow-wrap:normal;word-break:normal}
  /* 44px header row: COPY on the left, language label on the right */
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *)::before{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    height:44px;
    padding:0 .9rem;
    font-size:.75rem;
    line-height:1;
  }
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > .copy,
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > button.wrap{
    top:0;
    height:44px;
    min-height:44px;
    padding:0 .8rem;
    border:0;
    border-right:1px solid var(--hair);
    background:transparent;
    font-size:.75rem;
    z-index:1;
  }
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > .copy{
    left:0;
    min-width:4.5rem;
    border-radius:10px 0 0 0;
  }
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > button.wrap{
    left:4.5rem;
    min-width:44px;
    border-radius:0;
  }
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > .copy:hover,
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > button.wrap:hover{background:var(--surface2);border-right-color:var(--line)}
  .prose pre:not(:is(.toy, .hyr, .hrl, .hcv, .hyx-static) *) > button.wrap[aria-pressed=true]{color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent)}
  /* imported posts sometimes nest a second <pre>; keep one frame and one COPY control */
  .prose pre pre{
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    text-indent:0;
    overflow:visible;
    font-size:inherit;
  }
  .prose pre pre::before,.prose pre pre > .copy,.prose pre pre > button.wrap{display:none}
}

/* issue #6: touch lightbox — dark scrim, fit-to-screen, tap-to-zoom, bottom nav */
.lightbox > button[hidden]{display:none!important}
.lightbox .lightbox-zoom{display:none}

@media(max-width:1100px){
  .lightbox{background:#050508;backdrop-filter:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:.55rem;padding:3.75rem .55rem .55rem;place-items:stretch}
  .lightbox.has-many{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lightbox figure{grid-column:1/-1;grid-row:1;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.55rem;max-width:none;max-height:none;min-height:0;overflow:auto;padding:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .lightbox img{max-width:100%;max-height:calc(100vh - 12.5rem);max-height:calc(100dvh - 12.5rem);width:auto;height:auto;flex:none;margin:auto auto 0;border:0;border-radius:4px;box-shadow:0 12px 40px rgba(0,0,0,.55);background:#111}
  .lightbox figcaption{max-width:70ch;margin:0 auto auto;color:#cfcfda;font:.78rem/1.45 var(--mono);text-align:center}
  .lightbox.is-zoomed figure{align-items:flex-start}
  .lightbox.is-zoomed img{max-width:none;max-height:none;margin:0;border-radius:0}
  .lightbox > button{display:flex;align-items:center;justify-content:center;gap:.35rem;width:auto;height:auto;min-width:44px;min-height:44px;padding:0 .9rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-size:1.35rem;line-height:1;position:static;transform:none;justify-self:stretch}
  .lightbox .lightbox-close{position:absolute;top:.55rem;right:.55rem;width:44px;height:44px;justify-self:auto;background:rgba(255,255,255,.1)}
  .lightbox .lightbox-prev{grid-row:2;grid-column:1}
  .lightbox .lightbox-zoom{display:flex;grid-row:2;grid-column:2;font:500 .8rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
  .lightbox:not(.has-many) .lightbox-zoom{grid-column:1/-1}
  .lightbox .lightbox-next{grid-row:2;grid-column:3}
  .lightbox .lightbox-prev::after{content:"Prev";font:500 .78rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
  .lightbox .lightbox-next::after{content:"Next";font:500 .78rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
  .lightbox > button:hover,.lightbox > button:focus-visible{border-color:#fff;background:rgba(255,255,255,.2);color:#fff}
}

/* ===== 7. Article TOC: compact control above the cover, never overlapping body or code ===== */
.toc .toc-fade{display:none}
@media(max-width:1000px){
  /* The JS moves #toc after .ahead on this breakpoint; keep it in flow so it never covers code or banners. */
  .toc{
    position:relative;
    top:auto;
    z-index:30;
    display:block;
    align-self:flex-start;
    width:max-content;
    max-width:100%;
    max-height:none;
    margin:0 0 1rem;
    padding:0;
    overflow:visible;
    border:1px solid var(--line);
    border-radius:999px;
    background:color-mix(in oklab,var(--bg) 92%,transparent);
    backdrop-filter:blur(14px) saturate(1.05);
    box-shadow:0 10px 26px -18px rgba(0,0,0,.55);
    font-size:.88rem;
  }
  .toc p{margin:0;padding:0}
  .toc p button{
    display:flex;
    align-items:center;
    gap:.45rem;
    width:100%;
    min-height:44px;
    box-sizing:border-box;
    padding:.55rem .9rem;
    font:500 .75rem/1 var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .toc-panel{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:min(30rem,calc(100vw - 2.5rem));
    max-height:calc(100dvh - var(--bar-h,3.5rem) - 78px);
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
    box-shadow:0 12px 28px -12px rgba(0,0,0,.45);
    z-index:1;
  }
  .toc:not(.min) .toc-panel{display:flex;flex-direction:column}
  .toc ol{
    display:grid;
    grid-template-columns:1fr;
    gap:.05rem;
    margin:0;
    padding:.35rem .55rem .6rem;
    max-height:calc(100dvh - var(--bar-h,3.5rem) - 78px);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .toc a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:.3rem .4rem;
    border-radius:6px;
    font-size:.88rem;
    line-height:1.3;
  }
  .toc a:hover{background:var(--surface2)}
  .toc .l3{padding-left:1.2rem;font-size:.82rem}
  /* Anchors land below the sticky control, not under the header. */
  .prose :where(h2,h3,h4){scroll-margin-top:calc(var(--bar-h,3.5rem) + 4rem)}
  .toc.scrollable:not(.at-end) .toc-fade{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3rem;
    padding-bottom:.25rem;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,var(--surface) 72%);
    border-radius:0 0 12px 12px;
  }
  .toc .toc-fade span{
    font:600 .75rem/1 var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    background:var(--surface);
    border:1px solid var(--hair);
    border-radius:999px;
    padding:.22rem .5rem;
  }
}
/* Phones: pull the cover down to a banner so the TOC and the opening text are close. */
@media(max-width:760px){
  .ahead{padding:1.25rem 0 .75rem}
  .ahead h1{font-size:clamp(1.5rem,6.2vw,1.95rem);line-height:1.15;margin:.35rem 0}
  .ahead .lead{font-size:.92rem;line-height:1.45;margin:.4rem 0}
  .ahead .fmeta{margin-bottom:.35rem}
  .ahead .chips{margin-top:.45rem}
  .cover{max-height:150px;margin-bottom:1rem}
  .cover img{max-height:150px}
}
/* Tablets in portrait: keep the cover from filling the first screen. */
@media(min-width:761px) and (max-width:1000px){
  .cover{max-height:280px;margin-bottom:2rem}
  .cover img{max-height:280px}
}

@media(max-width:1024px){.share-row a,.share-row button{min-height:44px}}

/* ===== #10: Beyond — scroll over canvases, touch camera, visible 4K play/exit ===== */
@media(max-width:760px),(any-pointer:coarse){
  /* toy controls are finger-sized; beat .toy-controls .toy-btn in beyond-demoscene.css */
  .hobby .toy .toy-btn{min-height:44px}
  .hobby .toy input[type="range"]{min-height:44px}
  .konami-play{margin:1.2rem 0 0}
  /* footer launcher: 157x14 text becomes a 44px target */
  .konami-text{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:.35rem .5rem;margin:-.35rem -.5rem}
}
@media(hover:none),(pointer:coarse){
  /* touch screens have no pointer to wake the toolbar, so it stays visible */
  #demo:not(.ui){cursor:auto}
  #demo .demo-bar{opacity:1!important;flex-wrap:wrap;justify-content:center;border-radius:14px}
  .demo-btn{min-height:44px}
}

/* 11. card metadata and wide screenshot art stay legible on phone/tablet */
@media(max-width:1024px){
  .fmeta,.b-meta,.b-foot,.work-top,.work-foot,.slot-card .tag,.slot-card small,.search-hit small,.search-hit time,.search-hit .search-meta,.fcard .chips span{font-size:.75rem;letter-spacing:.04em}
  .b-img.fit-contain,.fimg.fit-contain{aspect-ratio:2/1}
  .b-img.fit-contain img,.fimg.fit-contain img{object-fit:contain;padding:4%}
}

/* 13. hero fits a phone: a smaller debugger panel and tighter copy leave room
   for the start of the research section in the first screen. */
@media(max-width:760px){
  .hero-in{padding:1.75rem 1.25rem 2rem;gap:1.5rem}
  .hero h1{font-size:clamp(1.8rem,7.4vw,2.2rem)}
  .hero .lead{font-size:.96rem;line-height:1.5}
  .hero .cta{gap:.55rem;margin-top:1.3rem}
  .hero .cta .btn{padding:.6rem .85rem;font-size:.9rem}
  .hero .now{margin-top:1rem;font-size:.75rem}
  .hero .disk{height:220px}
  .hero + .sec{margin-top:2.5rem}
}

/* 13. tablet landscape keeps the hero side by side, so the panel stays above
   the 768px fold and the copy column is not left half empty. */
@media(min-width:900px) and (max-width:1024px){
  .hero-in{grid-template-columns:1.05fr .95fr;gap:2rem}
  .hero .disk{height:340px}
}

/* 14. tablet: no 3+1 orphan rows; About stats and prose use the width */
@media(min-width:761px) and (max-width:1015px){
  .work-grid,.focus{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:761px) and (max-width:900px){
  .about-side dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 65ch in Inter is 715px, wider than the current 704px; 33em renders ~65 characters */
  .about-body{max-width:33em}
}

/* issue #15: archive rows share one date/title grid on phones */
@media(max-width:760px){
  .yeargroup li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);align-items:baseline;gap:.15rem 1rem}
  .yeargroup li time{min-width:0}
  .yeargroup>h2>a,.yeargroup>h3>a{display:inline-flex;align-items:center;min-height:44px}
}

/* ===== issue #16: glossary jump index + back to top (mobile) ===== */
.glossary-jump,.glossary-top{display:none}
@media(max-width:1024px){
  .glossary-jump{display:block;margin:1.2rem 0 1.8rem;border:1px solid var(--hair);border-radius:10px;background:var(--surface);overflow:hidden}
  .glossary-jump summary{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.6rem 1rem;cursor:pointer;list-style:none;font:.8rem/1.3 var(--mono);letter-spacing:.02em;color:var(--muted)}
  .glossary-jump summary::-webkit-details-marker{display:none}
  .glossary-jump summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:9px}
  .glossary-jump summary::after{content:"▾";margin-left:auto;transition:rotate .2s}
  .glossary-jump[open] summary::after{rotate:180deg}
  .glossary-jump summary:hover,.glossary-jump[open] summary{color:var(--fg)}
  .glossary-jump[open] summary{border-bottom:1px solid var(--hair)}
  .glossary-jump ul{columns:2;column-gap:1.1rem;margin:0;padding:.7rem 1rem .8rem 1.9rem;font-size:.88rem}
  .glossary-jump li{margin:.1rem 0;break-inside:avoid}
  .glossary-jump a{display:flex;align-items:center;min-height:44px;padding:.25rem 0;color:var(--fg);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:2px;overflow-wrap:anywhere}
  .glossary-jump a:hover{color:var(--accent);text-decoration-color:currentColor}
  .glossary-top{display:inline-flex;align-items:center;justify-content:center;position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:50;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;background:color-mix(in oklab,var(--surface) 92%,transparent);backdrop-filter:blur(8px);color:var(--fg);font:600 1.1rem/1 var(--mono);text-decoration:none;box-shadow:0 10px 26px -12px rgba(0,0,0,.55)}
  .glossary-top[hidden]{display:none}
  .glossary-top:hover{border-color:var(--accent);color:var(--accent)}
}

/* 17. tag pages: one 44px way back to every tag, counts that read as numbers */
.tag-switch{display:none}
.chips a span{padding:0;border:0;background:none;color:inherit;margin-left:.4rem}
@media(max-width:760px){
  .tag-switch{display:block;margin:1.1rem 0 0}
  .tag-switch .btn{width:100%;justify-content:center}
  .tag-lead-link{display:none}
  .chips.big a{min-height:44px}
}

/* 18. share: one row and one copy action on a phone */
@media(max-width:760px){
  .share-row--top{display:none}
  #defeated .btn{display:none}
  .share-row [data-share]{order:-1}
}

@media(max-width:760px){
  .slots{gap:1rem}
  .slot-card{min-height:150px;padding:.9rem 1.1rem;gap:.25rem}
  .slot-card h3{margin-top:0}
  .slot-card p{line-height:1.42}
  .slot-card .tag,.slot-card small{font-size:.75rem}
  .slot-card small{padding-top:.35rem}
}

/* 404: drop the blank block and keep recovery links above the fold */
@media(max-width:760px){
  .died{min-height:0;padding:2.5rem 1.25rem}
  .chips.big a{min-height:44px;display:inline-flex;align-items:center}
}

/* ===== issue #21: one-tap back to top, touch-only footer hints ===== */
.to-top{display:none;align-items:center;justify-content:center;gap:.4rem;min-width:44px;min-height:44px;padding:.5rem .85rem;border:1px solid var(--hair);border-radius:6px;background:transparent;color:var(--muted);font:.75rem var(--mono);letter-spacing:.04em;cursor:pointer}
.to-top:hover,.to-top:focus-visible{color:var(--fg);border-color:var(--line);background:var(--surface)}
.to-top-float{display:none}
@media(max-width:760px),(pointer:coarse){
  .foot-kbd{display:none}
  .konami-text{min-height:44px;display:inline-flex;align-items:center}
  .to-top{display:inline-flex}
  .to-top-float{display:none;place-items:center;position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:50;width:44px;height:44px;padding:0;border:1px solid var(--hair);border-radius:50%;background:var(--surface);color:var(--muted);box-shadow:0 8px 24px -12px rgba(0,0,0,.4);opacity:0;visibility:hidden;pointer-events:none;cursor:pointer}
  .to-top-float.show{display:grid;opacity:1;visibility:visible;pointer-events:auto}
  .to-top-float:hover,.to-top-float:focus-visible{color:var(--fg);border-color:var(--line)}
}
body:has(.glossary-top) .to-top-float{display:none!important}
@media print{.to-top,.to-top-float{display:none!important}}

/* ===== Fumik0 Clean-Room Disassembly Design System ===== */
:root{
  --pix:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --disp:"Space Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --ease:cubic-bezier(.22,1,.36,1);
}

[data-theme=neon]{
  --bg:#08090d;
  --bg2:#0d0f16;
  --surface:#12151f;
  --surface2:#191d2a;
  --line:#262b3d;
  --hair:rgba(255,255,255,.09);
  --spec:rgba(255,255,255,.14);
  --t-page:#08090d;
  --t-soft:#10131c;
  --t-ink:#141824;
  --t-card:#171b28;
  --t-border:rgba(255,255,255,.10);
  --ap-tile:#10131c;
  --ap-tile-elev:#171b28;
  --ap-panel:#171b28;
  --ap-line:rgba(255,255,255,.10);
  --fg:#f2f4f8;
  --muted:#949bb0;
  --accent:#2ee6b8;
  --accent2:#38bdf8;
  --accent3:#f5a623;
  --t-link:#2ee6b8;
  --t-ink-link:#2ee6b8;
  --focus:#2ee6b8;
  --code:#0b0d13;
  --shadow:rgba(0,0,0,.78);
  --seg-track:rgba(255,255,255,.06);
  --seg-thumb:#191d2a;
  --seg-border:rgba(255,255,255,.18);
  --seg-shadow:0 2px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);
}

[data-theme=paper]{
  --bg:#f6f4ef;
  --bg2:#ffffff;
  --surface:#ffffff;
  --surface2:#edeae2;
  --line:#d5d0c5;
  --hair:rgba(20,22,30,.08);
  --spec:rgba(255,255,255,.9);
  --t-page:#fbfaf7;
  --t-soft:#f1eee7;
  --t-ink:#10131c;
  --t-card:#ffffff;
  --t-border:rgba(20,22,30,.09);
  --ap-tile:#f1eee7;
  --ap-tile-elev:#ffffff;
  --ap-panel:#ffffff;
  --ap-line:rgba(20,22,30,.09);
  --fg:#141720;
  --muted:#525869;
  --accent:#07634d;
  --accent2:#035382;
  --accent3:#8c3d07;
  --t-link:#07634d;
  --focus:#07634d;
  --code:#f1eee7;
  --shadow:rgba(20,22,30,.08);
  --seg-track:color-mix(in oklab,var(--surface2) 88%,transparent);
  --seg-thumb:#ffffff;
  --seg-border:rgba(20,22,30,.09);
  --seg-shadow:0 2px 8px -2px rgba(20,22,30,.12),0 0 0 1px rgba(20,22,30,.05);
}

body::before{display:none!important}

/* Frosted glass Clean-Room navigation bar */
.bar{
  background:var(--surface);
  border-bottom:1px solid var(--hair);
  font-family:var(--body);
}
.logo{
  font-family:var(--disp);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-.025em;
  gap:.55rem;
}
.apple-mark{
  width:26px;
  height:26px;
  color:var(--t-link,#0b7a60);
  display:inline-grid;
  place-items:center;
  flex:none;
  transition:transform .2s var(--ease),filter .2s var(--ease);
}
.apple-mark svg{display:block;width:26px;height:26px}
.apple-mark .mark-glyph{fill:#fff}
html[data-theme="neon"] .apple-mark .mark-glyph{fill:#04140f}
.logo em{color:var(--t-link,#0b7a60)}
.logo:hover .apple-mark{
  transform:translateY(-1px);
  filter:brightness(1.1);
}
.foot-brand strong em{color:var(--t-link,#0b7a60);font-style:normal}
.pill{
  background:var(--seg-track);
  padding:.24rem;
  border-radius:999px;
  border:1px solid var(--hair);
  gap:.18rem;
}
.pill a{
  border-radius:999px;
  padding:.4rem .9rem;
  font-family:var(--body);
  font-size:.88rem;
  font-weight:500;
  letter-spacing:-.01em;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.pill a[aria-current]{
  background:var(--seg-thumb);
  color:var(--fg);
  font-weight:600;
  box-shadow:var(--seg-shadow);
}
.pill a[aria-current]::after{display:none}
.ico{
  border-radius:999px;
  font-family:var(--body);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ico[hidden]{
  display:none!important;
}
.search-kbd{
  display:none;
}
.term-btn .term-glyph{
  font:700 .78rem/1 var(--mono);
  letter-spacing:-.04em;
  color:var(--accent);
}
.term-btn:hover .term-glyph{
  color:var(--fg);
}
.mobile-search{
  display:none;
}
@media(max-width:760px){
  .mobile-search{
    display:inline-flex;
  }
  .bar.menu-open{
    z-index:65;
  }
  .bar.menu-open .navwrap{
    box-sizing:border-box;
    width:100%;
    max-width:100vw;
    overflow-x:hidden;
  }
  .bar.menu-open .pill{
    border-radius:12px;
    padding:.25rem;
    gap:.15rem;
  }
  .bar.menu-open .pill a{
    border-radius:8px;
  }
  .bar.menu-open .tools-r{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    width:100%;
  }
  .bar.menu-open .tools-r .ico,
  .bar.menu-open .tools-r .search-btn{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    padding:0 .55rem;
    border-radius:10px;
    box-sizing:border-box;
  }
  .bar.menu-open .tools-r .ico-label{
    font-size:.82rem;
    white-space:nowrap;
  }
  .bar.menu-open .tools-r .term-btn.has-desc{
    flex:1 1 100%;
    height:auto;
    min-height:48px;
    padding:.5rem .7rem;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:.14rem;
  }
}
@media(min-width:961px){
  .tools-r .apple-search-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    height:36px;
    padding:0 .65rem 0 .82rem;
    gap:.42rem;
    background:var(--seg-track);
    border:1px solid var(--hair);
  }
  .tools-r .apple-search-pill .ico-label{
    display:inline;
    font:500 .82rem/1 var(--body);
    color:var(--muted);
    white-space:nowrap;
  }
  .tools-r .apple-search-pill .search-kbd{
    display:inline-block;
    margin-left:.15rem;
    padding:.16rem .38rem;
    border-radius:5px;
    border:1px solid var(--hair);
    background:color-mix(in oklab,var(--fg) 6%,transparent);
    font:600 .75rem/1 var(--mono);
    color:var(--muted);
  }
  .tools-r .apple-search-pill:hover .ico-label,
  .tools-r .apple-search-pill:hover .search-kbd{
    color:var(--fg);
  }
}
@media(min-width:761px) and (max-width:1100px){
  .bar{gap:.6rem;padding-inline:1rem}
  .navwrap{gap:.5rem}
  .pill{gap:.1rem;padding:.2rem}
  .pill a{padding:.35rem .58rem;font-size:.84rem;white-space:nowrap}
}
@media(min-width:761px) and (max-width:900px){
  .pill a{padding:.32rem .46rem;font-size:.82rem}
}


.btn{
  border-radius:999px;
  padding:.72rem 1.4rem;
  font-family:var(--body);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:-.01em;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.btn:hover{transform:scale(1.015)}
.apple-btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg)!important;
  font-weight:600;
}
.apple-btn-primary:hover{
  background:color-mix(in oklab,var(--accent) 85%,var(--fg));
  border-color:color-mix(in oklab,var(--accent) 85%,var(--fg));
}
.apple-chevron-link{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  color:var(--accent);
  font:500 .95rem/1.3 var(--body);
  text-decoration:none;
}
.apple-chevron-link:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Fix footer button letter-spacing */
.konami-text{
  letter-spacing:-.005em;
  text-transform:none;
  font-family:var(--body);
}

/* Technical Clean-Room Metadata & Eyebrows */
.fmeta,.b-meta,.b-foot,.work-top,.work-foot,.slot-card .tag,.slot-card small,.foot-label,.foot-bottom,.ai-board-stat span,.adjacent a small,.article-topics-label{
  font-family:var(--mono);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font:600 .78rem/1.3 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t-link,var(--accent));
}
.casebar{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.1rem;
  margin-bottom:.35rem;
  padding:.32rem .75rem;
  border-radius:8px;
  background:color-mix(in oklab,var(--surface2) 75%,transparent);
  border:1px solid var(--hair);
  font:600 .75rem/1.4 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.casebar span:first-child{
  color:var(--accent);
  font-weight:700;
}

.apple-link-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem 1.1rem;
  min-height:40px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--hair);
  box-shadow:0 2px 8px -3px var(--shadow);
  color:var(--accent)!important;
  font:600 .86rem var(--body)!important;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.apple-link-pill:hover{
  background:var(--surface2);
  border-color:color-mix(in oklab,var(--accent) 45%,var(--line));
  transform:translateY(-1px);
}

/* Bento Cards & Featured Grid */
.fcard,.boss,.work-card,.bento-card,.slot-card,.taste-card,.taste-stat,.author-box,.adjacent a,.comment{
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 0 var(--spec),0 10px 30px -12px var(--shadow);
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease);
}
.fcard,.boss,.work-card,.bento-card,.slot-card,.taste-card,.taste-stat{
  border-radius:0;
}
.fcard:hover,.boss:hover,.work-card:hover,.slot-card:hover,.adjacent a:hover{
  transform:translateY(-3px);
  translate:0 0;
  border-color:color-mix(in oklab,var(--accent) 55%,var(--line));
  box-shadow:inset 0 1px 0 0 var(--spec),0 18px 40px -14px var(--shadow);
}
.fmeta{
  font-size:.76rem;
  color:var(--muted);
}
.flevel{
  color:var(--accent);
  font-weight:600;
}
.fcard .chips span{
  border-radius:999px;
  padding:.2rem .65rem;
  background:var(--surface2);
  border:1px solid var(--hair);
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--muted);
}
.fcard-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:auto;
  padding-top:.65rem;
}
.fcard-cta,.boss .b-cta{
  font:600 .78rem/1.2 var(--mono);
  letter-spacing:.03em;
  color:var(--accent);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}

.bento-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
  align-items:stretch;
}
.bento-card{
  padding:1.75rem 1.85rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:1.15rem;
}
.bento-card-head h3,.beyond-spot h3{
  font-size:1.32rem;
  font-weight:650;
  letter-spacing:-.025em;
  margin:.25rem 0 .45rem;
}
.bento-card-head p{
  margin:0;
  line-height:1.55;
}
.families-card .families{
  margin:.25rem 0;
  gap:.55rem;
}
.families-card .families a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.45rem 1rem;
  border-radius:999px;
  background:var(--surface2);
  border:1px solid var(--hair);
  color:var(--fg);
  font:500 .88rem var(--body);
  text-decoration:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.families-card .families a:hover{
  background:color-mix(in oklab,var(--accent) 12%,var(--surface2));
  border-color:color-mix(in oklab,var(--accent) 45%,var(--line));
  color:var(--accent);
}
.bento-card-foot{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.4rem;
  align-items:center;
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid var(--hair);
}

/* Segmented Control (Used on /posts/ topic switcher) */
.focus-dock{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem;
  border-radius:999px;
  background:var(--seg-track);
  border:1px solid var(--hair);
  box-shadow:0 4px 16px -8px var(--shadow);
  max-width:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:.35rem;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.focus-dock::-webkit-scrollbar{display:none}
@media(max-width:900px){
  .focus-dock.blog-focus-dock{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.8rem,#000 calc(100% - 1.8rem),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 1.8rem,#000 calc(100% - 1.8rem),transparent);
  }
  .focus-dock.blog-focus-dock.at-start{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 2.2rem),transparent);
  }
  .focus-dock.blog-focus-dock.at-end{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.8rem,#000 100%);
    mask-image:linear-gradient(90deg,transparent,#000 1.8rem,#000 100%);
  }
  .focus-dock.blog-focus-dock.at-start.at-end{
    -webkit-mask-image:none;
    mask-image:none;
  }
}
.focus-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  font:500 .88rem/1.2 var(--body);
  letter-spacing:-.01em;
  padding:.55rem 1rem;
  min-height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  flex:none;
  scroll-snap-align:start;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.focus-tab:hover{
  color:var(--fg);
}
.focus-tab.is-active{
  background:var(--seg-thumb);
  color:var(--fg);
  box-shadow:var(--seg-shadow);
}
.focus-tab-label{
  font-weight:600;
  color:inherit;
}
.focus-tab-badge{
  font:600 .75rem/1 var(--mono);
  padding:.22rem .52rem;
  border-radius:999px;
  background:color-mix(in oklab,var(--fg) 10%,transparent);
  color:var(--muted);
}
[data-theme=paper] .focus-tab-badge{
  color:#3e4352;
}
.focus-tab.is-active .focus-tab-badge{
  background:color-mix(in oklab,var(--accent) 18%,transparent);
  color:var(--accent);
}

/* Blog / Research Page (/posts/) Category Switcher & Dossier Grid */
.pagehead,.apple-pagehead{
  border-bottom:0;
  margin-bottom:1.5rem;
  padding:2.8rem 0 .5rem;
}
.pagehead h1{
  font-size:clamp(2.1rem,4.2vw,3.2rem);
  font-weight:700;
  letter-spacing:-.034em;
}
.apple-blog-tools{
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:2rem;
}
.apple-cat-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.apple-search-box{
  flex:1;
  min-width:240px;
  max-width:340px;
}
.apple-search-box #q{
  border-radius:999px;
  padding:.68rem 1.15rem;
  background:var(--surface);
  border:1px solid var(--hair);
  box-shadow:0 2px 10px -4px var(--shadow);
  font:.9rem var(--body);
}

/* Plain-English Category Spotlight Banner */
.apple-cat-banner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  padding:1.35rem 1.6rem;
  border-radius:0;
  background:var(--surface);
  border:1px solid color-mix(in oklab,var(--accent) 28%,var(--hair));
  box-shadow:0 8px 28px -12px var(--shadow);
  animation:apple-focus-in .28s var(--ease) both;
}
.apple-cat-banner[hidden]{
  display:none!important;
}
.apple-cat-banner-copy{
  max-width:48rem;
}
.apple-cat-banner-eyebrow{
  margin:0 0 .25rem;
  font:600 .75rem var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent);
}
.apple-cat-banner-title{
  margin:0 0 .35rem;
  font:700 1.25rem/1.2 var(--disp);
  letter-spacing:-.02em;
}
.apple-cat-banner-desc{
  margin:0;
  color:var(--muted);
  font:.92rem/1.55 var(--body);
}

/* Filter Status & Collapsible Technical Tag Drawer */
.apple-filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1.25rem;
}
.apple-filter-bar > *{
  min-width:0;
  max-width:100%;
}
.apple-filter-status{
  margin:0;
  font:500 .86rem var(--body);
}
.apple-topic-drawer{
  font-family:var(--body);
  min-width:0;
  max-width:100%;
}
.apple-topic-drawer[open]{
  width:100%;
}
.apple-topic-drawer summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.38rem .85rem;
  min-height:36px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--hair);
  color:var(--muted);
  font:500 .82rem var(--body);
  list-style:none;
  user-select:none;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.apple-topic-drawer summary::-webkit-details-marker{display:none}
.apple-topic-drawer summary::after{
  content:"▾";
  font-size:.75rem;
  transition:transform .2s var(--ease);
}
.apple-topic-drawer[open] summary::after{
  transform:rotate(180deg);
}
.apple-topic-drawer summary:hover{
  color:var(--fg);
  border-color:var(--line);
}
.apple-tag-strip{
  display:flex;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  width:100%;
  margin-top:.75rem;
  padding:.85rem 1rem;
  border-radius:0;
  background:var(--surface);
  border:1px solid var(--hair);
}
.apple-tag-strip a{
  border-radius:999px;
  padding:.3rem .75rem;
  font-family:var(--mono);
  font-size:.76rem;
}
.apple-empty{
  padding:2.5rem 1.5rem;
  border-radius:0;
  background:var(--surface);
  border:1px solid var(--hair);
  text-align:center;
}

.apple-blog-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.slots{
  gap:10px;
}
.boss .b-body{
  padding:1.3rem 1.4rem 1.4rem;
  gap:.65rem;
}
.boss .b-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  font:500 .75rem/1.3 var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
  text-transform:none;
}
.boss .b-cat{
  display:inline-flex;
  align-items:center;
  padding:.22rem .58rem;
  border-radius:6px;
  background:color-mix(in oklab,var(--accent) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  color:var(--accent);
  font:600 .75rem/1.2 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.boss .b-read{
  font:500 .75rem/1.2 var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.boss h2{
  font-size:1.15rem;
  line-height:1.3;
  letter-spacing:-.02em;
}
.b-sum{
  margin:0;
  color:var(--muted);
  font-size:.89rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.boss .b-foot{
  margin-top:auto;
  padding-top:.65rem;
  border-top:1px solid var(--hair);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:500 .75rem/1.3 var(--mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  text-transform:none;
}
@media(min-width:920px){
  .apple-blog-grid .boss.is-lead{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    align-items:stretch;
  }
  .apple-blog-grid .boss.is-lead .b-img{
    aspect-ratio:16/9;
    height:100%;
  }
  .apple-blog-grid .boss.is-lead .b-body{
    padding:2rem 2.2rem;
    justify-content:center;
  }
  .apple-blog-grid .boss.is-lead h2{
    font-size:clamp(1.45rem,2.4vw,1.9rem);
    line-height:1.18;
  }
  .apple-blog-grid .boss.is-lead .b-sum{
    -webkit-line-clamp:3;
    font-size:.96rem;
  }
}

/* Single Article Clean-Room Dossier Reader Polish */
.article-back{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  font:500 .82rem var(--mono);
}
.article-back-link{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:.3rem .8rem;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--hair);
  color:var(--fg);
  text-decoration:none;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.article-back-link:hover{
  color:var(--accent);
  background:var(--surface2);
  border-color:color-mix(in oklab,var(--accent) 40%,var(--line));
}
.article-back-sep{
  color:var(--muted);
}
.article-cat-pill{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:.28rem .78rem;
  border-radius:8px;
  background:color-mix(in oklab,var(--accent) 12%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  color:var(--accent);
  font:600 .75rem/1.2 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
.article-cat-pill:hover{
  background:color-mix(in oklab,var(--accent) 20%,transparent);
}
.article-topics{
  max-width:var(--measure);
  margin:2rem auto 0;
  padding-top:1.25rem;
  border-top:1px solid var(--hair);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem 1rem;
}
.article-topics-label{
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
}
.article-topics .chips{
  margin:0;
}
.article-topics .chips a{
  border-radius:999px;
  padding:.28rem .75rem;
  font-family:var(--body);
  font-size:.8rem;
}
.cover{
  border-radius:var(--r-lg);
}
.share-row a,.share-row button{
  border-radius:999px;
  font-family:var(--body);
}
.defeated{
  padding:1.25rem 1.5rem;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--hair);
}
.related-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem 1rem;
  margin:2.25rem 0 0;
  padding-top:1.5rem;
  border-top:1px solid var(--hair);
}
.related-tags-label{
  font:600 .75rem/1.2 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.more-archive{
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--hair);
}
#more-archive-title{
  margin-block:1.5rem 1.25rem;
  font-size:clamp(1.35rem,2.4vw,1.75rem);
}

/* Inner Pages Cohesion (/about/, /contact/, /beyond/) */
.about-side{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:var(--r-lg);
  padding:1.5rem;
  box-shadow:0 6px 24px -10px var(--shadow);
}
.slot-card{
  padding:1.5rem 1.65rem;
}
.slot-card .tag{
  border-radius:999px;
  padding:.22rem .65rem;
  font-size:.76rem;
  font-weight:600;
}
.hobby-card{
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--hair);
  box-shadow:0 6px 24px -10px var(--shadow);
}
.hobby-no,.hobby-card small{
  font-family:var(--body);
  letter-spacing:-.005em;
  text-transform:none;
  font-weight:600;
  color:var(--accent);
}

.bento-card,.fcard,.boss,.work-card,.bento-split > *,.bento-ai-grid > *,.bento-beyond-grid > *,.apple-directory-grid > *,.apple-guide-grid > *,.apple-section-explainer > *{
  min-width:0;
}

@media(max-width:1040px){
  .apple-directory-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .apple-featured-3col,.apple-guide-grid,.apple-section-explainer{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .bento-split,.bento-ai-grid,.bento-beyond-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .apple-blog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .apple-search-box{
    max-width:none;
    width:100%;
  }
  .apple-chapter-track{
    justify-content:flex-start;
  }
}

@media(max-width:760px){
  .apple-chapter-bar{
    position:static;
  }
  .apple-chapter-track{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.35rem;
    padding:.55rem .9rem;
    overflow:visible;
  }
  .apple-chapter-item{
    min-width:0;
    padding:.45rem .35rem;
    border-radius:12px;
  }
  .apple-chapter-sub{
    display:none;
  }
  .apple-chapter-label{
    font-size:.75rem;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .apple-hero-in{
    padding:2rem 1.25rem 0;
    gap:1.6rem;
    text-align:left;
    align-items:flex-start;
  }
  .apple-hero-copy{
    align-items:flex-start;
  }
  .apple-hero-copy .eyebrow{
    justify-content:flex-start;
  }
  .apple-hero-links{
    justify-content:flex-start;
  }
  .apple-directory-grid,.apple-featured-3col,.apple-guide-grid,.apple-section-explainer{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .apple-billboard{
    padding:2.8rem 0;
  }
  .apple-billboard-head{
    text-align:left;
    align-items:flex-start;
    margin-bottom:1.8rem;
  }
  .apple-billboard-links{
    justify-content:flex-start;
  }
  .apple-link-pill,.apple-focus-btn{
    min-height:44px;
  }
  .families-card .families a{
    min-height:44px;
  }
  .apple-search-box #q{
    font-size:16px;
  }
  .apple-topic-drawer{
    min-width:0;
    max-width:100%;
    width:100%;
  }
  .apple-topic-drawer summary{
    min-height:44px;
  }
  .article-back-link,.article-cat-pill{
    min-height:44px;
  }
  .ai-board-strip{
    grid-template-columns:1fr;
  }
  .apple-blog-grid{
    grid-template-columns:1fr;
  }
  .bento-card,.apple-guide-card,.apple-dir-card{
    padding:1.25rem;
  }
}

/* Small interface labels never drop below 12px */
.search-help,.search-hint,.term-title,.term-size,.cc-effort,.cc-sep,.cc-auto,.cc-auto span,.cc-foot-hint{font-size:12px}
@media(max-width:600px){#pal-q{font-size:16px}}