/* PLAYCARD - Swiss industrial print on a cartridge shell. Light shell in both schemes: deliberate theme lock (the shell is a
   physical object), color-scheme: light. One accent (power-LED red) = "running right now" only. One signature device: the
   cartridge chamfer (top-right 45-degree cut). No radius, no gradients, no glow. */
@font-face{font-family:Geist;font-weight:700;font-display:swap;src:url(/assets/fonts/geist-700.woff2) format("woff2")}
@font-face{font-family:Geist;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-500.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/geist-mono-400.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(/assets/fonts/geist-mono-500.woff2) format("woff2")}
@font-face{font-family:Silkscreen;font-weight:400;font-display:swap;src:url(/assets/fonts/silkscreen-400.woff2) format("woff2")}
:root{
  color-scheme:light;
  --shell:#E2E1DD;--raised:#F5F5F2;--slab:#D8D6D0;--ink:#121212;--ink2:#45433F;--ink3:#63615D;--hair:rgba(18,18,18,.16);--hair-s:#B9B8B4;
  --red:#E0201B;--red-t:#B3150F;--shadow:rgba(60,55,45,.28);
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--px:Silkscreen,var(--mono);
  --w:1200px;--gut:16px;--gap:88px;--ease:cubic-bezier(.2,.8,.2,1)
}
@media (min-width:768px){:root{--gut:24px}}
@media (min-width:1024px){:root{--gap:136px}}
/* theme lock: same shell when the OS is dark (documented deliberate choice) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:light;--shell:#E2E1DD}}
:root[data-theme="dark"]{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--shell);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:url(/assets/img/stipple.png);opacity:.55}
main,header,footer{position:relative;z-index:1}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:calc(var(--w) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.px{font-family:var(--px);letter-spacing:.06em;text-transform:uppercase}
.i2{color:var(--ink2)}.i3{color:var(--ink3)}
.live{color:var(--red-t)}
/* two lines on desktop (mockup); 4 short lines at 390 (mockup) */
.h1{font:700 clamp(36px,9.6vw,44px)/1 var(--sans);letter-spacing:-.04em;margin:0}
@media (min-width:600px){.h1{font-size:clamp(44px,5vw,74px)}}
.h1 .l2{display:block;color:var(--ink2);text-wrap:balance}
.h2{text-wrap:balance}
.h2{font:700 clamp(32px,3.6vw,48px)/1.02 var(--sans);letter-spacing:-.04em;margin:0}
.h3{font:700 22px/1.15 var(--sans);letter-spacing:-.02em;margin:0}
.lede{font-size:18px;line-height:1.45;margin:0}
.small{font-size:15px}.tiny{font-size:13px}
.eyebrow{font:400 13px/1.2 var(--mono);color:var(--ink3);margin:0 0 6px}
section{position:relative}
.sec{margin-top:var(--gap)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- the chamfer ---------- */
.ch{--c:8px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.ch4{--c:4px}.ch8{--c:8px}.ch24{--c:24px}.ch48{--c:48px}
/* elevation lives on an unclipped wrapper (clip-path would cut a box-shadow) */
.cw{display:inline-block;filter:drop-shadow(0 10px 12px rgba(60,55,45,.16)) drop-shadow(0 2px 2px rgba(60,55,45,.12));transition:transform .18s var(--ease),filter .18s var(--ease)}
.cw.flat{filter:none}
.cw.block{display:block}
/* 2px ink focus ring that follows the chamfer: drawn by drop-shadows on the wrapper around the clipped child */
.cw:has(> :focus-visible),.cw:has(> * > :focus-visible){filter:drop-shadow(2px 0 0 var(--shell)) drop-shadow(-2px 0 0 var(--shell)) drop-shadow(0 2px 0 var(--shell)) drop-shadow(0 -2px 0 var(--shell)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.cw > :focus-visible,.cw > * > :focus-visible{outline:none}
/* 1px stroke following the chamfer: stroke = background, fill = ::before inset 1px */
.stroke{position:relative;background:var(--hair-s)}
.stroke::before{content:"";position:absolute;inset:1px;background:var(--fill,var(--raised));clip-path:polygon(0 0,calc(100% - var(--c) + .42px) 0,100% calc(var(--c) - .42px),100% 100%,0 100%);z-index:0}
.stroke > *{position:relative;z-index:1}
/* divider: hairline ending in a 45-degree tick */
.rule{position:relative;height:1px;background:var(--hair);border:0;margin:0}
.rule::after{content:"";position:absolute;right:3px;top:-5px;width:1px;height:8px;background:var(--ink3);transform:rotate(45deg);transform-origin:bottom}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border:0;background:var(--ink);color:var(--shell);font:500 17px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease)}
.btn:hover{text-decoration:none}
.cw:hover:has(> .btn:not([disabled])){transform:translateY(-2px);filter:drop-shadow(0 14px 14px rgba(60,55,45,.22)) drop-shadow(0 2px 2px rgba(60,55,45,.14))}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--ink3);cursor:not-allowed}
.btn.light{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-s)}
.btn.sm{height:44px;padding:0 18px;font-size:15px}
.link{font:500 17px/1.3 var(--sans);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.link svg{width:16px;height:16px}
.textbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font:inherit;min-height:44px}
.field{display:grid;gap:8px}
.field label,.label{font:500 15px/1.2 var(--sans)}
.input{--c:8px;display:block;width:100%;height:48px;padding:0 16px;border:0;background:transparent;font:400 16px/1 var(--mono);color:var(--ink)}
.input::placeholder{color:var(--ink3);opacity:1}
.input:focus{outline:none}
textarea.input{height:auto;min-height:96px;padding:14px 16px;line-height:1.45;resize:vertical;font-family:var(--sans)}
.inbox{display:block;width:100%}
.inbox .stroke{display:block}
.cw.block:has(> .stroke > .input:focus){filter:drop-shadow(2px 0 0 var(--shell)) drop-shadow(-2px 0 0 var(--shell)) drop-shadow(0 2px 0 var(--shell)) drop-shadow(0 -2px 0 var(--shell)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.err{display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--ink);margin:6px 0 0}
.err::before{content:"";flex:none;width:4px;height:12px;background:var(--red);transform:translateY(1px)}
.err:empty{display:none}
.counter{font:400 13px/1 var(--mono);color:var(--ink3);justify-self:end}
/* stamps / chips: raised, 4px chamfer, mono 13, one line */
.stamp{--c:4px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;font:400 13px/1 var(--mono);color:var(--ink2);white-space:nowrap;vertical-align:middle}
.stamp.dk{color:var(--ink)}
button.stamp{border:0;cursor:pointer;height:28px}
.led{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;display:inline-block}
@media (prefers-reduced-motion:no-preference){.led.blink{animation:led 1.6s steps(2,end) infinite}}
@keyframes led{50%{opacity:.35}}
.icon{width:18px;height:18px;flex:none}

/* ---------- header ---------- */
.top:is(header),.sheet > .top{height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
@media (min-width:1024px){header.top{height:72px}}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:700 20px/1 var(--sans);letter-spacing:-.02em;min-height:44px}
.brand svg{width:30px;height:30px}
.nav{display:none;gap:44px}
.nav a{font:500 17px/1 var(--sans);text-decoration:none;padding:12px 0;position:relative}
.nav a[aria-current="page"]::after,.nav a:hover::after{content:"";position:absolute;left:0;right:6px;bottom:6px;height:1px;background:var(--ink)}
.nav a[aria-current="page"]::before{content:"";position:absolute;right:0;bottom:4px;width:1px;height:6px;background:var(--ink);transform:rotate(45deg)}
.top-r{display:flex;align-items:center;gap:14px}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0}
.menu-btn span{display:block;width:30px;height:2px;background:var(--ink);box-shadow:0 9px 0 var(--ink);transform:translateY(-4px)}
.make-top{display:none}
@media (min-width:1024px){.nav{display:flex}.menu-btn,.top-stamp{display:none}.make-top{display:inline-block}}
.sheet{position:fixed;inset:0;z-index:50;background:var(--shell);display:none;flex-direction:column;padding:0 var(--gut)}
.sheet[data-open="1"]{display:flex}
.sheet nav{display:grid;margin-top:12px}
.sheet nav a{font:700 34px/1.1 var(--sans);letter-spacing:-.03em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--hair)}
.sheet .close{align-self:flex-end;width:44px;height:44px;border:0;background:none;cursor:pointer;font:400 15px/1 var(--mono)}
@media (min-width:1024px){.sheet{display:none!important}}

/* ---------- hero ---------- */
.hero{padding-top:28px}
@media (min-width:1024px){.hero{padding-top:36px}}
.hero .rule{margin-top:28px}
.hero-grid{display:grid;gap:28px;margin-top:24px}
.sub{font:500 18px/1.4 var(--sans);margin:0;max-width:30ch}
.sub .i2{font-weight:400}
.makebox{display:grid;gap:14px;margin-top:28px;max-width:380px}
.makebox .btn{justify-self:start}
.orreply{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:17px;color:var(--ink2)}
.statusline{display:flex;gap:10px;align-items:baseline;font-size:17px;margin-top:40px;max-width:46ch}
.statusline .led{transform:translateY(1px)}
.statusline .mono{font-size:16px}
.thread{position:relative;display:grid;gap:22px;padding-left:0;align-content:start;align-self:start;padding-top:8px}
.post{position:relative;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start}
.post .who{font:500 16px/1.2 var(--sans)}
.post .who .i3{font-weight:400}
.post p{margin:4px 0 0;font-size:17px;line-height:1.3}
.post .meta{display:block;font:400 14px/1.4 var(--mono);color:var(--ink3);margin-top:4px}
.av{width:32px;height:32px;display:block}
.thread::before{content:"";position:absolute;left:-14px;top:18px;bottom:22px;width:1px;background:var(--hair)}
.post::before{content:"";position:absolute;left:-14px;top:16px;width:10px;height:1px;background:var(--hair)}
.thread .leader{display:none}
.post .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.post .stampslot{margin-left:auto}
.card{position:relative;background:transparent}
.cart{--c:48px;background:var(--raised);display:flex;flex-direction:column}
.cart .screen{position:relative;aspect-ratio:1/1;width:100%;background:var(--raised)}
.cart iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--raised)}
.cart .foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 16px;padding:16px 24px 18px;border-top:1px solid var(--hair)}
.cart .foot .fmeta{display:flex;align-items:center;gap:12px;grid-column:1;min-height:24px}
.cart .foot > .plays,.cart .foot > .cw{grid-column:1}
.cart .foot .title{font:400 22px/1.1 var(--px);letter-spacing:.06em;grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart .foot .plays{font:400 15px/1 var(--mono)}
.cart .foot .share{grid-column:2;grid-row:1 / span 2;align-self:end;min-height:44px;font-size:16px}
.cart .hint{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font:400 13px/1 var(--mono);color:var(--ink3)}
.focusable-card{cursor:pointer}
/* SOUL 2026-10-10: the hero is one grid with named areas; the post grows into a level (.level) next to the card */
.hero .heroL{display:contents}
.hero .sub{grid-area:sub}.hero .makebox{grid-area:form}.hero .statusline{grid-area:st}.hero .thread{grid-area:thr}.hero .card{grid-area:card}.hero .level{grid-area:lvl}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"sub" "thr" "lvl" "card" "form" "st"}
  .hero .thread{margin-left:14px}
  .hero .makebox{margin-top:4px;max-width:none}.hero .statusline{margin-top:0}
  .makebox .btn,.makebox .cw{width:100%}
  .hero .card{width:100%;max-width:520px;justify-self:center}
  .makebox .cw .btn{width:100%}
}
@media (min-width:1024px){
  .hero-grid{margin-top:0;column-gap:40px;row-gap:0;grid-template-columns:minmax(0,1fr) 440px;grid-template-areas:"sub card" "form card" "thr card" "lvl lvl" "st st"}
  .hero .sub{margin-top:48px}
  .hero .thread{padding:36px 0 0 20px}
  .hero .card{margin-top:-18px;align-self:start}
  .hero .level{margin-top:40px}
  .thread .leader{display:none}
}
@media (min-width:1280px){
  .hero-grid{column-gap:32px;grid-template-columns:352px minmax(0,1fr) 480px;grid-template-rows:auto auto 1fr auto;grid-template-areas:"sub thr card" "form thr card" "lvl lvl card" "st st card"}
  .hero .thread{padding:56px 0 0 20px}
  .hero .level{align-self:end;margin-top:36px}
  .hero .statusline{margin-top:20px}
  .thread .leader{display:block;position:absolute;right:-34px;bottom:30px;width:36px;height:1px;background:var(--hair);transform:rotate(-38deg);transform-origin:left}
}
/* the level: one ink step per word of the post, the runner climbs them */
.level{--u:14px;margin-top:8px;min-width:0}
@media (min-width:768px){.level{--u:22px}}
.lvpost{font:500 13px/1.4 var(--mono);color:var(--ink);margin:0 0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvpost q{quotes:"\201C" "\201D"}
.stairs{position:relative;display:flex;align-items:flex-end;gap:2px;height:calc(var(--u) * 6 + 34px);border-bottom:1px solid var(--ink);cursor:pointer}
.stair{flex:3 1 0;min-width:0;display:flex;justify-content:center;align-items:flex-start;padding:7px 3px 0;background:var(--ink);color:var(--raised);font:400 11px/1 var(--px);letter-spacing:.02em;white-space:nowrap;overflow:hidden;transform-origin:50% 100%}
@media (min-width:768px){.stair{font-size:15px;letter-spacing:.05em;padding-top:9px}}
.L2{flex-grow:4}.L3{flex-grow:5}.L4{flex-grow:6}.L5{flex-grow:7}.L6{flex-grow:8}.L7{flex-grow:9}.L8{flex-grow:10}.L9{flex-grow:11}.L10{flex-grow:12}
.s1{height:calc(var(--u) * 1 + 22px)}.s2{height:calc(var(--u) * 2 + 22px)}.s3{height:calc(var(--u) * 3 + 22px)}.s4{height:calc(var(--u) * 4 + 22px)}.s5{height:calc(var(--u) * 5 + 22px)}.s6{height:calc(var(--u) * 6 + 22px)}
@media (prefers-reduced-motion:no-preference){
  .stair{animation:grow .55s var(--ease) both}
  .s2{animation-delay:.09s}.s3{animation-delay:.18s}.s4{animation-delay:.27s}.s5{animation-delay:.36s}.s6{animation-delay:.45s}
}
@keyframes grow{from{transform:scaleY(0)}}
.runner{position:absolute;right:6px;width:24px;height:28px;background:url(/assets/img/runner.svg) 0 0/100% 100% no-repeat;image-rendering:pixelated;pointer-events:none;will-change:transform}
@media (min-width:768px){.runner{width:30px;height:35px}}
.stairs[data-n="1"] .runner{bottom:calc(var(--u) * 1 + 22px)}.stairs[data-n="2"] .runner{bottom:calc(var(--u) * 2 + 22px)}.stairs[data-n="3"] .runner{bottom:calc(var(--u) * 3 + 22px)}
.stairs[data-n="4"] .runner{bottom:calc(var(--u) * 4 + 22px)}.stairs[data-n="5"] .runner{bottom:calc(var(--u) * 5 + 22px)}.stairs[data-n="6"] .runner{bottom:calc(var(--u) * 6 + 22px)}
.lvcap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:10px 0 0;font:500 13px/1.3 var(--mono);color:var(--ink)}
.lvcap .textbtn{font:500 15px/1 var(--sans)}
.lvcap .cw{margin-left:auto}

/* ---------- section heads ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.shead .h2{display:inline}
.shead .stamp{margin-left:10px;transform:translateY(-6px)}

/* ---------- cartridges (shelf) ---------- */
.row{display:flex;gap:0;margin-top:22px;padding:14px 0 18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row > .cw{flex:0 0 78%;scroll-snap-align:center;margin-right:-8px}
.row > .cw:last-child{margin-right:0}
@media (min-width:768px){.row > .cw{flex-basis:calc(40% + 8px)}}
@media (max-width:1023px){.row{margin-inline:calc(-1 * var(--gut));padding-inline:11%;scroll-padding-inline:11%}}
@media (min-width:1024px){.row{overflow:visible;padding-top:16px}.row > .cw{flex:0 0 calc((100% + 32px) / 5);min-width:0}}
.cartridge{--c:24px;display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;background:var(--raised);text-decoration:none;color:var(--ink);height:100%;min-height:100%}
.cartridge .still{position:relative;border:1px solid var(--ink);aspect-ratio:4/3;overflow:hidden;background:var(--raised)}
.cartridge .still img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;image-rendering:pixelated}
.cartridge .t{font:400 17px/1.1 var(--px);letter-spacing:.07em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartridge .fp{font:400 13px/1.35 var(--mono);color:var(--ink2)}
.cartridge .pl{font:500 14px/1 var(--mono)}
.cartridge .coins{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px;min-height:26px}
.cartridge .nocoin{font:400 13px/1 var(--mono);color:var(--ink2)}
.row .cw{transition:transform .18s var(--ease)}
.row .cw:hover,.row .cw:focus-within,.row .cw.top{transform:translateY(-12px)}
.row .cw.top .cartridge::after,.grid .cw.top .cartridge::after{content:"";position:absolute;right:0;top:0;width:34px;height:2px;background:var(--red);transform:rotate(45deg);transform-origin:right top;translate:-1px 0}
.cartridge{position:relative}
@media (prefers-reduced-motion:reduce){.row .cw,.row .cw:hover,.row .cw.top{transform:none}}
.skel .still,.skel .t,.skel .fp{background:var(--slab);border-color:var(--hair);color:transparent}
.empty-cart{--c:24px;display:grid;place-items:center;min-height:260px;padding:24px;text-align:center;font:400 15px/1.4 var(--mono);color:var(--ink2)}
.row-rule{margin-top:-6px}
.hottest{margin-top:34px}
.hottest .h3{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.hottest .h3 .cw{transform:none}

/* ---------- printed tables ---------- */
.ptable{width:100%;border-collapse:collapse;font-size:17px}
.ptable caption{text-align:left}
.ptable th{font:400 13px/1.2 var(--mono);color:var(--ink3);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--hair)}
.ptable td{padding:14px 12px 0 0;vertical-align:baseline}
.ptable td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ptable .r{text-align:right;padding-right:0}
.ptable tr.run td{color:var(--red-t)}
.ptable tr.run td:first-child{position:relative}
.ptable tr.run td:first-child::before{content:"";position:absolute;left:-14px;top:16px;width:4px;height:18px;background:var(--red)}
.caption{font-size:15px;color:var(--ink2);margin:18px 0 0}
@media (max-width:599px){
  .burn thead{display:none}
  .burn tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:12px 0;border-bottom:1px solid var(--hair)}
  .burn td{padding:0!important;white-space:nowrap;font-size:14px}
  .burn td:nth-child(1){grid-column:1;grid-row:1;font-weight:500;color:var(--ink)}
  .burn td:nth-child(4){grid-column:2;grid-row:1;text-align:right}
  .burn td:nth-child(2){grid-column:1;grid-row:2;color:var(--ink2)}
  .burn td:nth-child(3){grid-column:2;grid-row:2;text-align:right;color:var(--ink2)}
  .burn tr:not(.run) td:nth-child(3):not(:empty)::after{content:" burned"}
  .burn tr.run td{color:var(--red-t)}
  .burn tr.run td:first-child::before{left:-12px;top:2px;height:16px}
  .burn td:empty{display:none}
}
.hot td:nth-child(1){width:48px}
@media (max-width:767px){
  .hot thead{display:none}.hot tr{display:grid;grid-template-columns:28px 1fr auto;column-gap:10px;padding-top:14px}
  .hot td{padding:0}.hot td:nth-child(1){grid-row:span 2}.hot td:nth-child(2){grid-column:2}.hot td:nth-child(3),.hot td:nth-child(4){grid-column:2;display:inline;font:400 14px/1.5 var(--mono);color:var(--ink2)}
  .hot tr td:nth-child(3){grid-row:2}.hot tr td:nth-child(4){display:none}.hot td:nth-child(5){grid-column:3;grid-row:1}
}

/* ---------- how ---------- */
.how{display:grid;gap:40px}
.tl{list-style:none;margin:22px 0 0;padding:0 0 0 18px;border-left:1px solid var(--ink3);display:grid;gap:12px}
.tl li{display:grid;grid-template-columns:104px 1fr;gap:12px;font-size:16px;line-height:1.35;transition:color .2s}
.tl li .num{white-space:nowrap}
@media (max-width:480px){.tl{padding-left:14px}.tl li{grid-template-columns:96px 1fr;gap:10px;font-size:15px}.tl li .num{font-size:13.5px}}
.tl li .num{font-size:15px;color:var(--ink2)}
.tl li.cur,.tl li.cur .num{color:var(--red-t)}
.devline{font-size:15px;color:var(--ink2);margin:16px 0 0}
.stage{position:relative;min-height:440px}
.build{--c:24px;background:var(--raised);padding:22px 24px 18px;width:100%;max-width:360px;margin-left:auto}
.build .bh{font:400 15px/1 var(--px);letter-spacing:.08em}
.build canvas{display:block;width:100%;height:auto;image-rendering:pixelated;margin:14px 0 10px}
.build .bf{display:flex;justify-content:space-between;gap:12px;font:400 13px/1 var(--mono);color:var(--ink2)}
.build .bf .px{color:var(--ink);font-size:14px}
.brag-w{position:absolute;left:-40px;top:150px;width:256px}
.brag{--c:24px;width:100%;background:var(--raised);padding:16px 18px;transform:rotate(-4deg);transform-origin:center}
.brag .bt{font-size:15px;line-height:1.3;margin:8px 0 10px}
.brag .mini{border:1px solid var(--ink3);padding:10px}
.brag .mini canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
.brag .bm{display:flex;align-items:center;gap:10px;font:400 13px/1 var(--mono);color:var(--ink3)}
@media (min-width:1024px){.how{grid-template-columns:1fr 520px;gap:48px;align-items:start}.stage{margin-top:-20px}}
@media (max-width:1023px){.stage{min-height:0;display:grid;gap:24px}.build{max-width:none}.brag-w{position:relative;top:auto;left:auto;margin:18px 0 0 24px;width:min(300px,82%)}}

/* ---------- fees / burn ---------- */
.fees{display:grid;gap:36px;margin-top:20px}
.split3{font:400 19px/1.3 var(--mono);margin:0}
.cfg{font:400 15px/1.75 var(--mono);margin-top:16px}
.cfg .k{color:var(--ink2)}
.cfg dl{display:grid;grid-template-columns:auto auto 1fr;column-gap:24px;margin:6px 0 0}
.cfg dt,.cfg dd{margin:0}
.burnfoot{font-size:15px;color:var(--ink2);margin:16px 0 0}
.burnfoot .num{color:var(--ink)}
@media (min-width:1024px){.fees{grid-template-columns:1fr 1.05fr;gap:64px}}

/* ---------- token / tier ---------- */
.token{display:grid;gap:40px}
.token .lines{display:grid;gap:8px;margin:14px 0 26px;font-size:18px}
.token .lines p{margin:0}
.btnrow{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.tier{--c:24px;background:var(--raised);padding:26px 28px 22px}
.tier .px{font-size:17px}
.tier table{width:100%;border-collapse:collapse;margin-top:12px;font-size:17px}
.tier th{font:400 13px/1.2 var(--mono);color:var(--ink3);text-align:left;padding:0 0 10px;border-bottom:1px solid var(--hair)}
.tier td{padding:12px 12px 0 0;vertical-align:baseline}
.tier .note{font-size:15px;color:var(--ink2);margin:18px 0 0}
.tier .me{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;font-size:16px}
@media (min-width:1024px){.token{grid-template-columns:1fr 600px;gap:48px;align-items:start}}
@media (max-width:1023px){.btnrow .cw,.btnrow .cw .btn{width:100%}.btnrow{justify-content:center}}

/* ---------- buy strip + footer ---------- */
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:18px 0 8px}
.strip .k{font:400 15px/1 var(--mono);color:var(--ink3)}
.strip .ca{font:400 16px/1.3 var(--mono);word-break:break-all}
.strip .live-on{margin-left:auto;font:400 13px/1 var(--mono);letter-spacing:.06em;color:var(--ink2)}
.copy{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:0}
.copied{font:400 13px/1 var(--mono);color:var(--ink2)}
.slab{--c:24px;background:var(--slab);margin:22px 0 40px;padding:28px 32px}
.slab .fr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 28px;align-items:center}
.slab nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.slab nav a{font-size:16px;min-height:44px;display:inline-flex;align-items:center}
.slab p{margin:10px 0 0;font-size:15px;color:var(--ink2);line-height:1.4}
.linkrow{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
@media (max-width:599px){.slab{padding:24px 20px}.slab nav{gap:2px 20px}}
.slab .ca2{font:400 13px/1.4 var(--mono);color:var(--ink3);word-break:break-all;margin-top:8px}

/* ---------- inner pages ---------- */
.page{padding-top:40px;padding-bottom:20px}
.page-head{display:grid;gap:12px}
.tabs{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;border-bottom:1px solid var(--hair)}
.tabs a{font:500 16px/1 var(--sans);text-decoration:none;padding:12px 0 14px;position:relative;white-space:nowrap}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chips a{text-decoration:none}
.chips a[aria-current="true"] .stamp{color:var(--ink);font-weight:500}
.chips a[aria-current="true"]{--fill:var(--shell)}
.stats{display:flex;flex-wrap:wrap;gap:8px 28px;font:400 15px/1.4 var(--mono);color:var(--ink2);margin-top:20px}
.stats b{font-weight:500;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;margin-top:22px}
.grid > .cw{transition:transform .18s var(--ease)}
.grid > .cw:hover,.grid > .cw:focus-within{transform:translateY(-8px)}
@media (max-width:389px){.grid{gap:12px 8px}.grid .cartridge{padding:10px}.grid .cartridge .fp{display:none}}
@media (min-width:768px){.grid{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1300px){.grid{grid-template-columns:repeat(4,1fr)}}
.more{display:flex;justify-content:center;margin-top:30px}
.gamepage{display:grid;gap:36px;margin-top:20px}
.gcard{width:100%;max-width:560px}
.gside{display:grid;gap:22px;align-content:start}
.board{list-style:none;margin:8px 0 0;padding:0;font:400 15px/1.2 var(--mono)}
.board li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:8px 0}
.board li:first-child{padding-top:6px}
@media (min-width:1024px){.gamepage{grid-template-columns:560px 1fr;gap:56px}}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:16px;margin:0}
.kv dt{color:var(--ink3);font:400 14px/1.6 var(--mono)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.callout{font-size:16px;color:var(--ink2);margin:0}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:26px;counter-reset:s}
.steps > li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.steps > li > .sn{font:500 15px/1 var(--mono);width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--ink3)}
.steps > li.done > .sn{background:var(--ink);color:var(--shell);border-color:var(--ink)}
.steps > li.now > .sn{border-color:var(--ink);border-width:2px}
.steps .body{display:grid;gap:12px;max-width:620px}
.ixlist{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.ixlist li{display:grid;gap:2px}
.ixlist .pid{font:400 13px/1.3 var(--mono);color:var(--ink3);word-break:break-all}
.logs{font:400 12px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;background:var(--raised);padding:12px;max-height:240px;overflow:auto;margin:8px 0 0}
.docs{display:grid;gap:28px;margin-top:24px}
.docs nav.side{display:none}
.docs nav.side a{display:block;text-decoration:none;padding:8px 0;font-size:16px}
.docs nav.side a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.docs article{max-width:72ch}
.docs article h2{font:700 28px/1.1 var(--sans);letter-spacing:-.03em;margin:34px 0 10px}
.docs article h2:first-child{margin-top:0}
.docs article h3{font:600 19px/1.2 var(--sans);margin:22px 0 6px}
.docs article p,.docs article li{font-size:17px;line-height:1.55}
.docs article code{font:400 15px/1 var(--mono);background:var(--raised);padding:1px 4px}
.docs select{width:100%}
@media (min-width:1024px){.docs{grid-template-columns:220px 1fr;gap:56px}.docs nav.side{display:block}.docs .dsel{display:none}}
.statusgrid{display:grid;gap:4px;margin-top:20px}
.sheetbox{--c:24px;background:var(--raised);padding:26px 26px 24px;max-width:520px;margin:28px auto}
.dlg{position:fixed;inset:0;z-index:60;display:none;place-items:center;background:rgba(226,225,221,.92);padding:16px}
.dlg[data-open="1"]{display:grid}
.dlg .sheetbox{margin:0;width:100%;max-height:92vh;overflow:auto}
.progress{font:400 15px/1.5 var(--mono)}
.notfound{min-height:50vh;display:grid;align-content:center;gap:16px}
/* number roll on change (transform only) */
@media (prefers-reduced-motion:no-preference){.roll{display:inline-block;animation:roll .32s var(--ease)}}
@keyframes roll{from{transform:translateY(-35%);opacity:.3}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.fees > div,.token > div,.how > div{min-width:0}
@media (max-width:480px){.ptable{font-size:15px}.ptable td{padding-right:8px}.ptable td.n{font-size:14px}.split3{font-size:16px}.cfg{font-size:14px}.cfg dl{column-gap:14px}}
@media (min-width:1024px){.stage .build .bf{padding-left:52px}}
/* build footer: the title never breaks mid-name; a long title pushes the state to its own right-aligned line */
.build .bf{flex-wrap:wrap;row-gap:6px}
.build .bf .px{min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.build .bf > span:last-child{margin-left:auto;white-space:nowrap}
/* taste pass 2026-10-10: canvas colour on short pages, spacing after ledes, phone tabs + shelf grid type */
html{background:var(--shell)}
.kv.sec{margin-top:28px}
.notfound{min-height:calc(100dvh - 420px)}
@media (max-width:767px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);gap:20px}
  .tabs::-webkit-scrollbar{display:none}
  .grid .cartridge{gap:6px;padding:12px 12px 14px}
  .grid .cartridge .t{font-size:14px;letter-spacing:.04em}
  .grid .cartridge .fp{font-size:12px}
  .grid .cartridge .fp br{display:none}
}

/* taste pass 2 (2026-10-10, audit vs approved mockups) */
p,li,.caption{text-wrap:pretty}
/* hero thread: the demo stamp stays on the handle line at every width (it wrapped under the handle at 1280+) */
.post .who{flex-wrap:nowrap;min-width:0}
.post .who > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.post .stampslot{flex:none}
.post > div{min-width:0}
/* tier card, signed out: one sentence, wraps like a sentence */
.tier .me-out{margin:16px 0 0;font-size:16px;line-height:1.45}
/* docs: section picker breathes above the article on phones */
.docs .dsel{margin-bottom:10px}
.nw{white-space:nowrap}
@media (max-width:399px){
  .cart .foot{padding:14px 18px 16px}
  .cart .foot .title{font-size:18px;letter-spacing:.04em}
  .slab nav{gap:2px 14px}.slab nav a{font-size:15px}
}
/* QA 2026-10-10: .dlg sheets live inside <main>, and main/footer are sibling z-index:1 stacking contexts, so the footer painted over an open sheet (Report / Share score / demo wallet buttons unclickable when scrolled to the bottom). Lift main while a sheet is open. */
main:has(.dlg[data-open="1"]){z-index:70}

/* ---------- SOUL 2026-10-10: voice lines, device test sheet, demo receipts stamp, the manual, the runner around the page ---------- */
.voice{font:500 18px/1.4 var(--sans);color:var(--ink2);margin:16px 0 0;max-width:56ch}
.devtest{display:grid;gap:40px}
.devtest .h2{max-width:20ch}
.devs{margin-top:32px}
.devs td.pass{color:var(--ink);font-weight:500}
.devs td.wait{color:var(--ink2)}
.devs td.pass::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--ink)}
.devs td.wait::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;box-shadow:inset 0 0 0 1px var(--ink3)}
.testcart{max-width:340px;text-decoration:none;transform:rotate(2deg);transition:transform .18s var(--ease),filter .18s var(--ease)}
.testcart:hover,.testcart:focus-visible{transform:rotate(0) translateY(-8px)}
.testcart .t{font-size:20px}
@media (min-width:1024px){.devtest{grid-template-columns:minmax(0,1fr) 340px;gap:96px;align-items:center}}
@media (max-width:1023px){.testcart{justify-self:center;width:min(300px,86%)}.devs thead{display:none}.devs tr{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:12px 0 0}.devs td{padding:0}.devs td:nth-child(2){grid-row:2;font-size:14px}.devs td:nth-child(3){grid-column:2;grid-row:1}}
.burnwrap{position:relative}
.rubber{position:absolute;right:0;bottom:4px;z-index:2;transform:rotate(-7deg);font:400 17px/1 var(--px);letter-spacing:.08em;color:var(--ink);padding:8px 12px;box-shadow:inset 0 0 0 2px var(--ink);background:rgba(226,225,221,.82);pointer-events:none}
@media (max-width:599px){.rubber{bottom:auto;top:-34px;font-size:14px}}
.booklet{display:grid;margin-top:40px}
.bpage{--c:24px;background:var(--raised);padding:26px 28px 18px;height:100%}
.bpage .px{font-size:15px}
.toc{list-style:none;margin:14px 0 0;padding:0}
.toc a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:11px 0;text-decoration:none;border-top:1px solid var(--hair)}
.toc li:first-child a{border-top:0}
.toc .tt{font:500 17px/1.25 var(--sans)}
.toc .dl{grid-column:1;font-size:15px;line-height:1.35}
.toc .pg{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:15px;color:var(--ink2)}
.toc a:hover .tt{text-decoration:underline;text-underline-offset:3px}
@media (min-width:1024px){.booklet{grid-template-columns:1fr 1fr}.booklet > .cw:first-child .bpage{clip-path:none;box-shadow:inset -1px 0 0 var(--hair)}.bpage{padding:30px 40px 22px}}
@media (max-width:1023px){.booklet{gap:16px}}
/* the runner stands on the running cartridge of the rack (desktop, where the rack is not a scroll track) */
@media (min-width:1024px){.row .cw.top::before{content:"";position:absolute;left:22px;top:-30px;width:24px;height:28px;background:url(/assets/img/runner.svg) 0 0/100% 100% no-repeat;image-rendering:pixelated;z-index:3}}
/* footer: the runner asleep on the back of the cartridge */
.slab .insert{display:flex;align-items:center;gap:14px;margin:18px 0 4px}
.slab .insert a{font:400 15px/1 var(--px);letter-spacing:.08em;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.sleeper{width:28px;height:24px;flex:none;background:url(/assets/img/runner-ink.svg) 50% 50%/24px 28px no-repeat;transform:rotate(90deg);image-rendering:pixelated}