/* Playthrough: the page is a handheld. Four greens, honest pixels, integer scales only. */
@font-face{font-family:'Jersey 10';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Jersey10-latin-400.woff2) format('woff2')}
@font-face{font-family:'Tiny5';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Tiny5-latin-400.woff2) format('woff2')}
@font-face{font-family:'Chivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Chivo-latin-var.woff2) format('woff2')}
@font-face{font-family:'Chivo Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/ChivoMono-latin-var.woff2) format('woff2')}

:root{
  --g0:#E2EBB0; --g1:#A8BC5A; --g2:#4F6D2E; --g3:#1E3416;
  --px:'Tiny5',monospace; --disp:'Jersey 10',monospace; --body:'Chivo',system-ui,sans-serif; --mono:'Chivo Mono',ui-monospace,monospace;
  --notch:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  --gut:clamp(16px,3.4vw,48px); --max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--g0);color:var(--g3);font:400 17px/1.5 var(--body);overflow-x:hidden;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;background:url(/assets/art/tex-lcd.webp) 0 0/256px 256px repeat;opacity:.2;pointer-events:none;z-index:0}
body>*{position:relative;z-index:1}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
a{color:inherit}
a,button,[role=button],[role=tab],[onclick],summary,label,.ca-v,select,input[type=file]{cursor:pointer}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
.num{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl,dt{font-family:var(--px);text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--g2)}
.small{font-size:14px;color:var(--g2)}
.none{color:var(--g2);font-size:15px}
.skip{position:absolute;left:-999px;top:0;background:var(--g3);color:var(--g0);padding:8px 12px;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:4px solid var(--g2);outline-offset:2px}
.h1{font-family:var(--disp);font-weight:400;margin:0;line-height:.78;letter-spacing:2px}
.h2{font-family:var(--disp);font-weight:400;font-size:clamp(48px,5.6vw,80px);line-height:.9;margin:0;letter-spacing:1px}
.h3{font-family:var(--disp);font-weight:400;font-size:clamp(32px,3vw,44px);line-height:.95;margin:0 0 14px}
.sub{font-size:clamp(16px,1.3vw,19px);max-width:62ch;margin:12px 0 0;color:var(--g3)}

/* ---------------------------------------------------------------- buttons: pixel-notched plates */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 24px;font:400 16px/1 var(--px);text-transform:uppercase;letter-spacing:.06em;
  background:var(--g3);color:var(--g0);clip-path:var(--notch);text-decoration:none;white-space:nowrap;transition:transform 80ms steps(1)}
.btn:active{transform:translateY(4px)}
.btn:focus-visible{outline:0;background:var(--g2)}
.btn.sm{height:44px;padding:0 16px;font-size:14px}
.btn.ghost{background:transparent;color:var(--g3);box-shadow:inset 0 0 0 4px var(--g3)}
.btn.ghost:focus-visible{box-shadow:inset 0 0 0 4px var(--g2);background:var(--g1)}
.btn.inv{background:var(--g0);color:var(--g3)}
.btn.inv:focus-visible{background:var(--g1)}
.btn:disabled{opacity:.55;cursor:default}
.btn:hover{background:var(--g2)}
.btn.ghost:hover{background:var(--g1)}
.btn.inv:hover{background:var(--g1)}
.lnk{font-family:var(--px);text-transform:uppercase;letter-spacing:.06em;font-size:14px;text-underline-offset:4px}

/* ---------------------------------------------------------------- nav */
.nav{display:flex;align-items:center;gap:24px;height:64px;padding:0 var(--gut);background:var(--g0);position:sticky;top:0;z-index:20;border-bottom:4px solid var(--g3)}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:400 16px var(--px);letter-spacing:.06em}
.brand img{width:28px;height:28px}
.links{display:flex;gap:22px;margin-right:auto}
.links a{font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:6px 0}
.links a:hover{text-decoration:underline;text-underline-offset:6px}
.acts{display:flex;align-items:center;gap:10px;margin-left:auto}
.ca{display:none;align-items:center;gap:8px;font:400 14px var(--px)}
.ca.on{display:inline-flex}
.ca b{font-weight:400;color:var(--g2)}
.ca-v{font:400 14px var(--mono);padding:8px 10px;box-shadow:inset 0 0 0 2px var(--g3);min-height:40px}
.ca-v:hover{background:var(--g1)}
.menu-b{display:none}
.drawer{position:fixed;top:64px;left:0;right:0;z-index:19;background:var(--g0);border-bottom:4px solid var(--g3);display:flex;flex-direction:column;padding:8px var(--gut) 16px}
.drawer[hidden]{display:none}
.drawer a{font:400 16px var(--px);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--g1)}
@media (max-width:980px){.links{display:none}.menu-b{display:inline-flex}.nav .ca{display:none}}
@media (max-width:420px){.brand span{display:none}.acts .btn.sm{padding:0 12px}}

/* ---------------------------------------------------------------- the console (integer scale --s, crop --cx0..--cx1) */
.console-wrap{--s:3;--cx0:0;--cx1:270;width:calc((var(--cx1) - var(--cx0)) * var(--s) * 1px);overflow:hidden;flex:none;margin:0 auto}
.console{position:relative;width:calc(270px * var(--s));height:calc(405px * var(--s));margin-left:calc(var(--cx0) * var(--s) * -1px)}
.console-img{display:block;width:100%;height:100%}
.screen,.screen-fade{position:absolute;left:calc(55px * var(--s));top:calc(50px * var(--s));width:calc(160px * var(--s));height:calc(144px * var(--s));background:var(--g0)}
.screen-fade{background:transparent;pointer-events:none}
.fade{animation:gbfade 2.6s steps(1) forwards}
@keyframes gbfade{0%{background:var(--g3)}12%{background:var(--g2)}24%{background:var(--g1)}36%{background:var(--g0)}80%{background:var(--g0)}100%{background:transparent}}
.screen-link{position:absolute;left:calc(55px * var(--s));top:calc(50px * var(--s));width:calc(160px * var(--s));height:calc(144px * var(--s))}
.bezel-label{position:absolute;left:calc(55px * var(--s));top:calc(199px * var(--s));font:400 14px/1 var(--px);letter-spacing:.06em;color:var(--g0);text-transform:uppercase;white-space:nowrap}
.echo{position:absolute;left:calc(var(--x) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px);width:calc(var(--w) * var(--s) * 1px);height:calc(var(--h) * var(--s) * 1px);
  background:var(--g1) url(/assets/art/console.png) no-repeat;background-size:calc(270px * var(--s)) calc(405px * var(--s));
  background-position:calc(var(--x) * var(--s) * -1px) calc((1 - var(--y)) * var(--s) * 1px);image-rendering:pixelated;visibility:hidden;pointer-events:none}
.echo.on{visibility:visible}
.scrub{position:absolute;left:calc(max(27, var(--cx0) + 6) * var(--s) * 1px);top:calc(223px * var(--s));width:calc((min(243, var(--cx1) - 6) - max(27, var(--cx0) + 6)) * var(--s) * 1px);
  height:calc(11px * var(--s));display:flex;gap:6px;align-items:stretch}
.scrub-track{position:relative;flex:1;cursor:pointer;background:var(--g0);box-shadow:inset 0 0 0 2px var(--g3);overflow:hidden;touch-action:none;outline-offset:0}
.scrub-track .tick{position:absolute;top:50%;transform:translate(-50%,-50%);line-height:0}
.scrub-track .tick.w{width:2px;height:40%;background:var(--g2)}
.scrub-track .head{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--g3)}
.scrub-track .scrub-empty{position:absolute;inset:0;display:grid;place-items:center;font:400 12px var(--px);text-transform:uppercase;color:var(--g2)}
.scrub-live{font:400 12px var(--px);letter-spacing:.06em;padding:0 8px;background:var(--g3);color:var(--g0);clip-path:var(--notch);min-width:44px}
.scrub.rew .scrub-live{background:var(--g2)}
.key{display:inline-block;vertical-align:middle;image-rendering:pixelated}

/* ---------------------------------------------------------------- hero */
.hero{padding:clamp(16px,2vw,28px) 0 0;overflow:clip}
.hero .h1{font-size:clamp(56px,18.8vw,272px);text-align:center;white-space:nowrap;position:relative;z-index:1}
.col-l{justify-self:end;width:min(100%,360px);margin-top:calc(58px * 3)}
.lede{margin:0 0 22px;font-size:clamp(17px,1.35vw,20px);line-height:1.4;font-weight:600}
.stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(20px,2.4vw,40px);padding:0 var(--gut);margin-top:calc(clamp(56px,18.8vw,272px) * -0.17);position:relative;z-index:2;align-items:start;max-width:1600px;margin-inline:auto}
.inlog{margin-top:calc(58px * 3)}
.mind{width:100%;background:var(--g0);border:4px solid var(--g3);box-shadow:inset 0 0 0 4px var(--g0),inset 0 0 0 6px var(--g3);padding:20px 22px 22px;min-height:180px}
.mind-h{margin:0 0 8px;font:400 14px var(--px);letter-spacing:.06em;text-transform:uppercase;color:var(--g2)}
.mind-t{margin:0;font-size:18px;line-height:1.45;min-height:5.8em;word-break:break-word}
.inlog{justify-self:start;width:min(100%,340px)}
.inlog-h{margin:0 0 6px;font:400 14px var(--px);letter-spacing:.06em;text-transform:uppercase;color:var(--g2);display:flex;justify-content:space-between}
.inlog ol{list-style:none;margin:0;padding:0}
.inlog li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;border-bottom:1px solid var(--g1)}
.inlog li .ks{display:flex;gap:4px;align-items:center;min-height:28px}
.inlog li .mono{font-size:14px;color:var(--g2);text-align:right}
.inlog li.hi{background:var(--g1)}
.inlog li.demo .mono::after{content:" . demo"}
.wait{font:400 14px var(--px);color:var(--g2)}
.more{font:600 12px var(--body);color:var(--g2);margin-left:2px}
.bar{position:sticky;bottom:0;z-index:6;background:var(--g3);color:var(--g0);display:flex;align-items:center;gap:clamp(16px,3vw,48px);padding:14px var(--gut);min-height:88px;margin-top:-1px}
.chip{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;margin-right:auto}
.chip img{width:48px;height:48px;flex:none;background:var(--g0)}
.chip-t{display:flex;flex-direction:column;min-width:0}
.chip-t b{font:400 16px var(--px);letter-spacing:.06em}
.chip-t .mono{font-size:13px;color:var(--g1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-n{display:flex;gap:clamp(18px,3vw,44px);margin:0}
.bar-n div{display:flex;flex-direction:column}
.bar-n dt{color:var(--g1);font-size:14px}
.bar-n dd{margin:0;font-size:30px;line-height:1.1}
@media (max-width:1099px){
  .stage{grid-template-columns:1fr;justify-items:center;margin-top:calc(clamp(56px,18.8vw,272px) * -0.12)}
  .col-l{display:contents}
  .lede{order:1;margin:0;text-align:center;max-width:36ch}
  .mind,.inlog{margin-top:0;justify-self:center;width:min(100%,560px)}
  .mind{order:2}.inlog{order:3}
  .hero{padding-bottom:0}
}
@media (max-width:760px){
  .bar{flex-wrap:wrap;gap:12px 20px;padding:12px 16px}
  .chip{flex:1 1 100%}
  .bar-n{flex:1 1 auto;gap:18px}
  .bar-n dd{font-size:22px}
  .bar .btn{height:48px;padding:0 16px;font-size:14px}
}
@media (max-width:420px){.bar .btn{flex:1 1 100%}.bar-n{justify-content:space-between;width:100%}}

/* ---------------------------------------------------------------- sections */
.sec-head{padding:0 var(--gut);max-width:var(--max);margin:0 auto 28px}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.route,.wall{background:var(--g1);border-top:4px solid var(--g3);border-bottom:4px solid var(--g3);padding:clamp(56px,7vw,96px) 0}
.route{padding-bottom:clamp(40px,4vw,56px)}
.route .sub{max-width:70ch}
.map-rail{overflow-x:auto;overflow-y:hidden;scrollbar-color:var(--g3) var(--g1);border-top:4px solid var(--g3);border-bottom:4px solid var(--g3);overscroll-behavior-x:contain;cursor:grab}
.map-rail.drag{cursor:grabbing}
.map{--rs:3;position:relative;width:calc(480px * var(--rs));height:calc(160px * var(--rs));margin:0 auto}
.map-img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.node{position:absolute;left:calc(var(--x) * var(--rs) * 1px);top:calc(var(--y) * var(--rs) * 1px);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.node img{display:block}
.node.off img{opacity:.3}
.node .cnt,.node .nl{pointer-events:auto;background:var(--g0);box-shadow:inset 0 0 0 2px var(--g3);padding:3px 7px;font-size:12px;white-space:nowrap;text-decoration:none;line-height:1.25}
.node .nl{display:flex;flex-direction:column;align-items:center;padding:4px 8px}
.node .nl b{font-weight:600;font-size:13px}
.node .nl span{font-weight:600}
.node a.nl:hover{background:var(--g1)}
.node .cnt{position:absolute;top:-24px}
.node .nl{position:absolute;top:calc(100% + 4px)}
.node.up .nl{top:auto;bottom:calc(100% + 4px)}
.node.up .cnt{top:auto;bottom:-24px}
.node.pend .nl{background:var(--g3);color:var(--g0)}
.marker{position:absolute;left:calc(var(--x) * var(--rs) * 1px);top:calc(var(--y) * var(--rs) * 1px);transform:translate(-50%,calc(-100% - 26px));line-height:0;background:var(--g0);box-shadow:0 0 0 2px var(--g3);padding:2px}
.marker img{width:48px;height:48px}
.marker.below{transform:translate(-50%,26px)}
.route-empty{padding:16px var(--gut) 0;margin:0 auto;max-width:var(--max);font:400 16px var(--px);text-transform:uppercase;letter-spacing:.06em}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;padding:24px var(--gut) 0;margin:0 auto;max-width:var(--max);font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em}
.legend li{display:flex;align-items:center;gap:8px}
.legend b{font-family:var(--body);font-weight:600;letter-spacing:0}

.stuck{background:var(--g3);color:var(--g0);padding:clamp(56px,7vw,96px) var(--gut);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;justify-content:center}
.stuck-screen{position:relative;width:640px;height:576px;box-shadow:0 0 0 4px var(--g0);line-height:0}
.stuck-screen img{width:100%;height:100%}
.stuck-screen .wo-fade{position:absolute;inset:0}
.stuck .sub{color:var(--g0)}
.stuck-n{display:grid;grid-template-columns:repeat(3,auto);gap:12px 40px;margin:36px 0 0;justify-content:start}
.stuck-n dt{color:var(--g1)}
.stuck-n dd{margin:4px 0 0;font-size:44px;line-height:1}
.stuck-who{color:var(--g1);font-size:14px;margin:20px 0 0}
@media (max-width:1180px){.stuck{grid-template-columns:1fr}.stuck-screen{width:480px;height:432px}}
@media (max-width:560px){.stuck-screen{width:320px;height:288px}.stuck-n{grid-template-columns:repeat(2,auto)}.stuck-n dd{font-size:32px}}

.rewind{padding:clamp(56px,7vw,96px) 0}
.rw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 40px;padding:0 var(--gut);max-width:var(--max);margin:0 auto}
.rw-screen{position:relative;width:480px;height:432px;box-shadow:0 0 0 4px var(--g3);background:var(--g0)}
.rw-screen canvas{width:100%;height:100%;display:block}
.rw-tag{position:absolute;left:0;top:0;background:var(--g3);color:var(--g0);font:400 14px var(--px);padding:6px 10px;letter-spacing:.06em}
.rw-thought{font-size:20px;line-height:1.45;margin:0 0 18px;min-height:3em;max-width:52ch;border-left:4px solid var(--g3);padding-left:16px}
.rw-rows{list-style:none;margin:0;padding:0}
.rw-rows li{display:grid;grid-template-columns:44px auto 1fr auto;align-items:center;gap:12px;min-height:40px;border-bottom:1px solid var(--g1);font-size:14px}
.rw-rows li.hi{background:var(--g3);color:var(--g0)}
.rw-rows li.hi .mono,.rw-rows li.hi .t{color:var(--g0)}
.rw-rows .ks{display:flex;gap:3px}
.rw-rows .g,.rw-rows .t{color:var(--g2)}
.scrub.big{position:relative;left:auto;top:auto;width:auto;height:56px;grid-column:1/-1;display:flex;gap:10px;align-items:stretch}
.scrub.big .scrub-track{box-shadow:inset 0 0 0 4px var(--g3)}
.scrub.big .scrub-track .head{width:6px;margin-left:-3px}
.scrub.big .scrub-live{font-size:14px;padding:0 16px}
.scrub-cap{align-self:center;font:400 14px var(--px);text-transform:uppercase;color:var(--g2);white-space:nowrap}
.replay{max-width:var(--max);margin:clamp(48px,6vw,80px) auto 0;padding:0 var(--gut)}
.chain{display:flex;flex-direction:column;margin:22px 0}
.chain .link{display:grid;grid-template-columns:70px auto 1fr auto;gap:12px 20px;align-items:center;min-height:44px;border-bottom:1px solid var(--g1);font-size:14px}
.chain .tg{font:400 14px var(--px);text-transform:uppercase}
.chain .arr{color:var(--g2)}
.chain .onchain{color:var(--g2);font-size:13px;margin:10px 0 0}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{font:400 13px var(--px);text-transform:uppercase;letter-spacing:.06em;color:var(--g2);text-align:left;padding:8px 12px 8px 0;border-bottom:4px solid var(--g3);white-space:nowrap}
.tbl td{padding:9px 12px 9px 0;border-bottom:1px solid var(--g1);vertical-align:middle;white-space:nowrap}
.tbl td .ks{display:inline-flex;gap:3px;vertical-align:middle}
.cmd{display:flex;align-items:center;gap:12px;margin:22px 0 0;background:var(--g3);color:var(--g0);padding:10px 10px 10px 18px;clip-path:var(--notch)}
.cmd code{flex:1;font-size:14px;overflow-x:auto;white-space:nowrap}
.cmd .btn.ghost{color:var(--g0);box-shadow:inset 0 0 0 4px var(--g0)}
.cmd .btn.ghost:hover{background:var(--g2)}
.dl{display:flex;gap:24px;margin:14px 0 0;font:400 14px var(--px);text-transform:uppercase}
@media (max-width:1100px){.rw{grid-template-columns:1fr}.rw-screen{margin:0 auto}}
@media (max-width:560px){.cmd code{white-space:normal;word-break:break-all}.rw-screen{width:320px;height:288px}.rw-rows li{grid-template-columns:36px auto 1fr}.rw-rows .g{display:none}.chain .link{grid-template-columns:64px 1fr;row-gap:2px;padding:8px 0}.chain .link>*:not(.tg){grid-column:2}.chain .link .tg{grid-row:1/4}}

/* the wall */
.menu8{display:flex;gap:6px}
.menu8 button{font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;padding:0 14px 0 26px;min-height:44px;position:relative}
.menu8 button[aria-selected=true]::before{content:">";position:absolute;left:10px}
.menu8 button:hover{background:var(--g0)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(328px,1fr));gap:20px;padding:0 var(--gut);max-width:var(--max);margin:0 auto}
.tile{display:block;background:var(--g0);box-shadow:inset 0 0 0 4px var(--g3);padding:14px;text-decoration:none}
.tile:hover{background:#dfe8ab}
.tile:hover{background:var(--g0);box-shadow:inset 0 0 0 4px var(--g3),inset 0 0 0 6px var(--g0),inset 0 0 0 8px var(--g3)}
.tv{position:relative;width:320px;height:288px;margin:0 auto;background:var(--g0);box-shadow:0 0 0 2px var(--g3)}
.tv canvas{width:100%;height:100%;display:block}
.tile.asleep .tv canvas{opacity:.5}
.zz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:400 14px var(--px);text-transform:uppercase}
.zz b{font-weight:400;font-size:20px;background:var(--g3);color:var(--g0);padding:4px 10px}
.ld{display:flex;width:136px;height:16px;box-shadow:inset 0 0 0 2px var(--g3);padding:3px}
.ld i{display:block;height:100%;width:calc(var(--p) * 16px);background:var(--g3)}
.zz .num{font-size:14px}
.tl{display:grid;grid-template-columns:32px auto 1fr;align-items:center;gap:10px;margin:12px 0 8px}
.tl img{width:32px;height:32px}
.tl .tk{font:400 16px var(--px);letter-spacing:.06em}
.tl .md{font-size:13px;color:var(--g2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots{display:flex;gap:6px;flex-wrap:wrap}
.slots img{width:22px;height:22px;object-fit:none}
.slots img.dim{opacity:.3}
.tn{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 0}
.tn .tb{display:none}
.tn dt{font-size:12px}
.tn dd{margin:0;font-size:16px}
.tile.empty{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;max-width:380px}
.tile.empty .lcd{display:block;width:100%;height:100%;background:var(--g0)}
@media (max-width:760px){.tiles{grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}.tv{width:160px;height:144px}.tile{padding:8px}.tl{grid-template-columns:32px 1fr}.tl .md{display:none}.zz b{font-size:14px}.ld{width:104px;height:14px}.ld i{width:calc(var(--p) * 12px)}.zz>span:not(.ld):not(.num){display:none}.tn dd{font-size:14px}.slots{display:none}.tn{grid-template-columns:1fr 1fr}.tn .tb{display:block}}

/* power off: the lower half of the console as the footer object */
.poweroff{padding:clamp(56px,7vw,96px) var(--gut) 40px;display:flex;flex-direction:column;align-items:center}
.po-console{--s:3;position:relative;width:calc(270px * var(--s));height:calc(200px * var(--s))}
.po-console>img{position:absolute;left:0;top:calc(-205px * var(--s));width:calc(270px * var(--s));height:calc(405px * var(--s));clip-path:inset(calc(205px * var(--s)) 0 0 0)}
.po-btn{position:absolute;display:block}
.po-btn:hover,.po-btn:focus-visible{background:url(/assets/art/console.png) no-repeat var(--g1);background-size:calc(270px * var(--s)) calc(405px * var(--s));outline:0}
.po-start{left:calc(139px * var(--s));top:calc(123px * var(--s));width:calc(32px * var(--s));height:calc(17px * var(--s));background-position:calc(-139px * var(--s)) calc(-327px * var(--s)) !important}
.po-select{left:calc(97px * var(--s));top:calc(123px * var(--s));width:calc(32px * var(--s));height:calc(17px * var(--s));background-position:calc(-97px * var(--s)) calc(-327px * var(--s)) !important}
.po-a{left:calc(202px * var(--s));top:calc(39px * var(--s));width:calc(37px * var(--s));height:calc(37px * var(--s));border-radius:50%;background-position:calc(-202px * var(--s)) calc(-243px * var(--s)) !important}
.po-b{left:calc(162px * var(--s));top:calc(64px * var(--s));width:calc(37px * var(--s));height:calc(37px * var(--s));border-radius:50%;background-position:calc(-162px * var(--s)) calc(-268px * var(--s)) !important}
.po-l{position:absolute;font:400 18px var(--px);letter-spacing:.06em;white-space:nowrap;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;gap:10px}
.po-l::before{content:"";width:calc(var(--lw, 20) * 1px);height:2px;background:var(--g3);order:0}
.po-l i{font-style:normal;color:var(--g2)}
.l-a{left:calc(100% + 8px);top:calc(57px * var(--s));--lw:24}
.l-b{left:calc(100% + 8px);top:calc(87px * var(--s));--lw:24}
.l-start{left:calc(100% + 8px);top:calc(131px * var(--s));--lw:24}
.l-select{right:calc(100% + 8px);top:calc(131px * var(--s));flex-direction:row-reverse;--lw:24}
.po-ca{position:absolute;left:calc(20px * var(--s));top:calc(112px * var(--s))}
.po-line{display:flex;gap:28px;margin:28px 0 0;font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em}
.po-line a{text-decoration:none;padding:10px 0}
.po-line a:hover{text-decoration:underline;text-underline-offset:6px}
@media (max-width:1399px){.po-l{display:none}.po-legend{display:grid}}
@media (max-width:620px){.po-console{--s:1}.po-l{display:none}.po-ca{top:calc(100% + 12px);left:0}.po-legend{display:grid;margin-top:72px}}
.poweroff .po-ca.on{display:inline-flex}
.po-legend{display:none;grid-template-columns:1fr 1fr;gap:4px 24px;margin:20px 0 0;padding:0;list-style:none;width:min(100%,320px)}
.po-legend a{display:flex;gap:8px;align-items:center;min-height:44px;font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--g1)}
.po-legend i{font-style:normal;color:var(--g2)}

/* ---------------------------------------------------------------- inner pages */
.pg-head{padding:clamp(40px,6vw,80px) var(--gut) 28px;max-width:var(--max);margin:0 auto}
.imprint{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:28px var(--gut);background:var(--g3);color:var(--g0);margin-top:80px}
.imprint .pl{font:400 32px var(--disp);letter-spacing:1px;margin-right:auto}
.imprint .lk{display:flex;gap:22px;flex-wrap:wrap}
.imprint .lk a{font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:10px 0}
.imprint .ca b{color:var(--g1)}
.imprint .ca-v{box-shadow:inset 0 0 0 2px var(--g0)}
.imprint .ca-v:hover{background:var(--g2)}

.cp-head{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(28px,4vw,48px) var(--gut);max-width:var(--max);margin:0 auto}
.cp-art{width:96px;height:96px;box-shadow:0 0 0 4px var(--g3);background:var(--g0)}
.cp-id p{margin:6px 0 0}
.cp-id .mono{font-size:14px;color:var(--g2)}
.cp-ca{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cp-n{display:grid;grid-template-columns:repeat(4,auto);gap:8px 32px;margin:0}
.cp-n dd{margin:2px 0 0;font-size:30px;line-height:1.1}
.cp-live{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,48px);padding:0 var(--gut);max-width:var(--max);margin:0 auto;align-items:start}
.cp-con{margin:0}
.cp-side{display:flex;flex-direction:column;gap:28px}
.cp-side .mind,.cp-side .inlog{margin:0;width:100%;justify-self:stretch;max-width:none}
.party ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 20px}
.party li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;min-height:32px;font-size:15px}
.hp{display:block;height:12px;box-shadow:inset 0 0 0 2px var(--g3);padding:2px}
.hp i{display:block;height:100%;width:calc(var(--p) * 12.5%);background:var(--g3)}
.cp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:56px var(--gut) 0;max-width:var(--max);margin:0 auto}
.panel{background:var(--g0);box-shadow:inset 0 0 0 4px var(--g3);padding:24px 24px 26px;min-width:0}
.slots8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.slot{display:grid;place-items:center;aspect-ratio:1;box-shadow:inset 0 0 0 2px var(--g1);max-width:64px}
.slot img{opacity:.3}
.slot.on img,.slot.pend img{opacity:1}
.slot.pend{box-shadow:inset 0 0 0 2px var(--g3)}
.cnts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;margin:22px 0 0}
.cnts dd{margin:2px 0 0;font-size:22px}
.tabs{display:flex;gap:6px;margin:0 0 16px}
.tabs button{font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;min-height:44px;padding:0 16px;box-shadow:inset 0 0 0 2px var(--g3)}
.tabs button[aria-selected=true]{background:var(--g3);color:var(--g0)}
.fld{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.fld>span{font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;color:var(--g2)}
.fld input,.fld select{font:600 18px var(--body);font-variant-numeric:tabular-nums;height:52px;padding:0 14px;background:var(--g0);color:var(--g3);border:0;box-shadow:inset 0 0 0 4px var(--g3);border-radius:0;width:100%;appearance:none;-webkit-appearance:none}
.fld select{font:400 15px var(--mono);background:var(--g0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h12v2H0zM2 2h8v2H2zM4 4h4v2H4z' fill='%231E3416'/%3E%3C/svg%3E") no-repeat right 14px center}
.fld.file input{padding:13px 14px;font:400 15px var(--body)}
.fld input:focus,.fld select:focus{outline:0;box-shadow:inset 0 0 0 4px var(--g2);background-color:#d8e3a2}
.fld input:focus{background:var(--g0);box-shadow:inset 0 0 0 4px var(--g2),inset 0 0 0 6px var(--g0),inset 0 0 0 8px var(--g2)}
.ledger{list-style:none;margin:0;padding:0;max-height:440px;overflow:auto}
.ledger li{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--g1);font-size:15px}
.ledger .when{font-size:12px;color:var(--g2)}
.ledger li.k-set,.ledger li.k-burn{background:linear-gradient(var(--g1),var(--g1)) 0 0/4px 100% no-repeat;padding-left:10px}
.ledger li.k-burn b{font-weight:600}
.msn{display:inline-flex;align-items:center;gap:8px}
.tbl tr.pending td{background:var(--g1)}
.tbl tr.vetoed td{color:var(--g2);text-decoration:line-through}
@media (max-width:1100px){.cp-live{grid-template-columns:1fr}.cp-con{margin:0 auto}.cp-head{grid-template-columns:96px 1fr}.cp-n{grid-column:1/-1;grid-template-columns:repeat(4,auto);justify-content:start}}
@media (max-width:760px){.cp-grid{grid-template-columns:1fr;padding-top:36px}.cp-n{grid-template-columns:repeat(2,auto)}.cp-n dd{font-size:24px}.cp-head{grid-template-columns:64px 1fr;gap:16px}.cp-art{width:64px;height:64px}.panel{padding:18px}.cnts{grid-template-columns:repeat(2,1fr)}}

.launch{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(28px,5vw,80px);padding:0 var(--gut);max-width:var(--max);margin:0 auto;align-items:start}
.lform .btn{width:100%}
.err{background:var(--g3);color:var(--g0);padding:12px 14px;margin:0 0 16px;font-size:15px}
.where{background:var(--g3);color:var(--g0);padding:28px;clip-path:var(--notch)}
.where .small{color:var(--g1)}
.split{margin:0}
.split div{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--g2)}
.split dt{color:var(--g1)}
.split dd{margin:0}
.split dd.n{grid-column:1/-1;font-size:14px;color:var(--g1)}
.done{grid-column:1/-1}
.done .row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.launch{grid-template-columns:1fr}}

.killer{font-family:var(--body);font-size:clamp(22px,2.6vw,34px);line-height:1.3;max-width:42ch;margin:18px 0 0}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 28px;padding:0 var(--gut);max-width:var(--max);margin:0 auto}
.statgrid div{border-bottom:1px solid var(--g1);padding:16px 0}
.statgrid dd{margin:4px 0 0;font-size:30px}

.docs{display:grid;grid-template-columns:200px minmax(0,760px);gap:clamp(28px,5vw,72px);padding:0 var(--gut);max-width:var(--max);margin:0 auto}
.toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:4px}
.toc a{font:400 14px var(--px);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--g1)}
.doc h2{margin-top:44px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{max-width:68ch}
.dl2{padding-left:18px}
.dl2 li{margin:0 0 10px}
.params{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin:0}
.params div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--g1);padding:10px 0}
.params dd{margin:0}
.doc .tbl{margin:12px 0 0;max-width:520px}
@media (max-width:900px){.docs{grid-template-columns:1fr}.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 18px}.params{grid-template-columns:1fr}}

.lost{min-height:calc(100vh - 220px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:48px var(--gut);text-align:center}
.lost img{width:480px;height:320px;box-shadow:0 0 0 4px var(--g3)}
@media (max-width:560px){.lost img{width:240px;height:160px}}

/* ---------------------------------------------------------------- dialogs, toasts */
.dlg{border:0;padding:28px;background:var(--g0);color:var(--g3);box-shadow:inset 0 0 0 4px var(--g3);width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
.dlg::backdrop{background:rgba(30,52,22,.6)}
.dlg-x{position:absolute;right:12px;top:12px;width:44px;height:44px;font:400 16px var(--px);box-shadow:inset 0 0 0 2px var(--g3)}
.dlg-x:hover{background:var(--g1)}
.mine-claim{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 0 8px;padding:16px;background:var(--g1)}
.mine-claim div{display:flex;flex-direction:column}
.mine-claim b{font-size:26px}
.mine-list{list-style:none;padding:0;margin:8px 0 0}
.mine-list li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 0;border-bottom:1px solid var(--g1)}
.mine-list .tk{font:400 16px var(--px)}
.mine-list .feed{display:flex;gap:6px;margin-left:auto}
.mine-list input{width:90px;height:44px;font:600 15px var(--body);padding:0 8px;border:0;box-shadow:inset 0 0 0 2px var(--g3);background:var(--g0)}
.toasts{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;width:min(520px,calc(100vw - 32px))}
.toast{background:var(--g3);color:var(--g0);padding:12px 16px;font-size:15px;clip-path:var(--notch)}
.toast.err{background:var(--g0);color:var(--g3);box-shadow:inset 0 0 0 4px var(--g3)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:2000px){body{font-size:18px}}
.party li.none{display:block}
@media (max-width:379px){.stage{padding:0}.mind,.inlog,.lede{width:calc(100% - 32px)!important}}
.rw-side{min-height:432px}
.chain a.mono,.tbl a.mono,.ledger a.mono{display:inline-block;padding:8px 0}
@media (max-width:1100px){.rw-side{min-height:360px}}
@media (max-width:1099px){.console-wrap{--s:2}.po-console{--s:2}}
@media (max-width:619px){.po-console{--s:1}}
@media (max-width:599px){.console-wrap{--cx0:45;--cx1:225}}
@media (max-width:379px){.console-wrap{--cx0:55;--cx1:215}}
.console-wrap.cp-con{--s:2}
@media (max-width:599px){.console-wrap.cp-con{--cx0:45;--cx1:225}}
@media (max-width:379px){.console-wrap.cp-con{--cx0:55;--cx1:215}}
.brand{padding:0 8px 0 0}
.route .sub{min-height:3em}@media (max-width:760px){.route .sub{min-height:4.5em}}

/* ---------------------------------------------------------------- how it works (video) */
.how{padding:clamp(56px,7vw,96px) 0}
.how .vid{margin:0 auto;padding:0 var(--gut);max-width:var(--max)}
.how video{display:block;width:100%;max-width:1280px;height:auto;aspect-ratio:16/9;background:var(--g3);border:4px solid var(--g3);box-shadow:8px 8px 0 var(--g1)}
/* phone tap targets >= 32px (qa WARN 10-03): the scrubber strip and the power-off START / SELECT hit areas grow around their art slot */
.dl a{display:inline-block;padding:8px 0}
@media (max-width:1099px){.scrub{height:max(32px, calc(11px * var(--s)));top:calc(223px * var(--s) - (max(32px, calc(11px * var(--s))) - 11px * var(--s)) / 2)}}
@media (max-width:619px){
  .po-start,.po-select{top:calc(123px * var(--s) - 8px);height:calc(17px * var(--s) + 16px)}
  .po-start{background-position:calc(-139px * var(--s)) calc(-327px * var(--s) + 8px) !important}
  .po-select{background-position:calc(-97px * var(--s)) calc(-327px * var(--s) + 8px) !important}
}