@font-face { font-family:"Hanken Grotesk"; font-weight:100 900; font-style:normal; font-display:swap;
             src:url("/blog/assets/fonts/HankenGrotesk-Variable.ttf") format("truetype"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:400 500; font-display:swap; src:url("/blog/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:600; font-display:swap; src:url("/blog/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-weight:700; font-display:swap; src:url("/blog/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2"); }
:root{--bg:#06090d;--panel:#0b1015;--panel-hi:#11171c;--row:#090d11;--line:#222a32;--line-hi:#353e48;--text:#dad7d0;--dim:#7e8791;
--mute:#5b646f;--accent:#49de78;--accent-mid:#349e54;--amber:#edb345;--green:#5dc879;--red:#ef6661;--blue:#5eaceb;--violet:#ab8be3;
--mono:"IBM Plex Mono",ui-monospace,monospace;--voice:"Hanken Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--bg)}
body{color:var(--text);font-family:var(--voice);font-size:15px;line-height:1.4;min-width:0;overflow-x:hidden}
[hidden]{display:none!important}
.mono{font-family:var(--mono)}
header.top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
header.top .nm{font:700 12px var(--mono);letter-spacing:.1em;color:var(--text);text-decoration:none}
header.top nav{display:flex;gap:14px;margin-left:auto;font:600 12px var(--mono);letter-spacing:.06em;white-space:nowrap}
header.top nav a{color:var(--dim);text-decoration:none}header.top nav a.on{color:var(--text)}
.sharebtn{font:700 12px var(--mono);letter-spacing:.06em;color:var(--bg);background:var(--accent);border:0;border-radius:5px;padding:7px 11px;white-space:nowrap;cursor:pointer}
@media (max-width:440px){header.top .nm,header.top .hide-s{display:none}header.top nav{gap:10px;font-size:12px}}
main{max-width:1180px;margin:0 auto;padding:20px 16px 40px}
.k{font:600 12px var(--mono);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.k b{color:var(--text);font-weight:600}
h1{font:700 27px/1.08 var(--voice);letter-spacing:-.03em;margin-top:6px;text-wrap:pretty}
.tapline,.boardcap,.ph>.k:first-child{text-wrap:balance}.nw{white-space:nowrap}
.dek{color:var(--dim);font-size:14.5px;margin-top:12px;max-width:640px}
.dek b{color:var(--text);font-weight:600}
.msg{font:500 12.5px/1.5 var(--mono);color:var(--dim);margin-top:10px;min-height:0}
.msg a{color:var(--text)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
@media (min-width:900px){.grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:22px;align-items:start}
  h1{font-size:34px}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;min-width:0}
.panel+.panel{margin-top:14px}
.ph{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 8px}.ph>.k:last-child{white-space:nowrap}
.seg{display:inline-flex;border:1px solid var(--line-hi);border-radius:5px;margin-top:14px;font:600 12px var(--mono)}
.seg span{padding:7px 12px;color:var(--dim)}.seg span.on{background:var(--panel-hi);color:var(--text);border-radius:4px}
.prog{display:flex;align-items:center;gap:10px;margin-top:14px;font:600 12.5px var(--mono);color:var(--dim)}
.prog i{flex:1;height:4px;background:var(--line);border-radius:3px;overflow:hidden;display:flex}
.prog i b{display:block;background:var(--text)}
.h2h{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:start;margin-top:6px}
.side{display:block;width:100%;font:inherit;color:inherit;background:transparent;text-align:center;border:1px solid transparent;border-radius:10px;padding:6px 4px 10px;min-width:0;cursor:pointer}
.side:disabled{cursor:default}
.side img{width:100%;max-width:190px;display:block;margin:0 auto 2px;aspect-ratio:1;object-fit:contain}
.side img.l{transform:scaleX(-1)}
.side .pn{display:block;font:700 19px var(--voice);letter-spacing:-.02em;margin-top:1px}
.side .pos{display:block;font:600 12px var(--mono);letter-spacing:.06em;color:var(--dim)}
.side.pick{border-color:var(--line-hi);background:rgba(218,215,208,.035)}
.side.dim{opacity:.55}
.vs{font:600 12px var(--mono);color:var(--mute);text-align:center;padding-top:62px}
.yours{display:inline-block;font:700 12px var(--mono);letter-spacing:.08em;color:var(--bg);background:var(--text);border-radius:4px;padding:1px 6px;margin-top:6px}
.conf{display:flex;justify-content:center;gap:5px;margin-top:6px;align-items:center}
.conf i{width:7px;height:7px;border-radius:50%;border:1.3px solid var(--dim)}.conf i.f{background:var(--text);border-color:var(--text)}
.conf em{font:500 12px var(--mono);color:var(--dim);font-style:normal;margin-left:4px}
.tapline{font:500 12px var(--mono);color:var(--dim);text-align:center;margin-top:8px}
.hw{display:block;position:relative;max-width:190px;margin:0 auto}
.gd{position:absolute;width:8%;aspect-ratio:1;border-radius:50%;top:27%;transform:translate(-50%,-50%);background:#1a2128;box-shadow:0 0 0 1.5px #2a333c}
.gd.r{left:24%}.gd.l{left:76%}
.gd.on{background:#49de78;box-shadow:none}
.dotb{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--mono);letter-spacing:.08em;color:var(--accent);white-space:nowrap}
.dotb::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.dotb.off{color:var(--mute)}.dotb.off::before{background:transparent;border:1.5px solid var(--mute);width:6px;height:6px}
.board{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;margin-top:8px}
.board .cell{display:flex;justify-content:center}
.board svg{display:block;max-width:100%;height:auto}
.board .mid{font:600 12px/1.25 var(--mono);color:var(--dim);text-align:center}
.boards{display:grid}.boards>*{grid-area:1/1}
.boardcap{font:500 12.5px var(--mono);color:var(--dim);text-align:center;margin-top:6px}
.deskchip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin-top:10px;border-top:1px solid var(--line);padding-top:9px;font:500 12px var(--mono);color:var(--dim)}
.deskchip b{color:var(--text);font-weight:600}.deskchip .nw{white-space:nowrap}
.says{text-wrap:pretty;font-size:14px;color:var(--text);margin-top:9px}
.says span{color:var(--dim)}
.cp{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.cp:first-child{margin-top:0;border-top:0;padding-top:0}
.cp .row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px}
.cp img{width:44px;height:44px;display:block}.cp img.l{transform:scaleX(-1)}
.cp .nm2{display:flex;justify-content:space-between;font:600 14px var(--voice);gap:6px}
.bar{position:relative;height:10px;background:var(--line);border-radius:3px;margin-top:5px}
.bar b{position:absolute;left:0;top:0;bottom:0;background:var(--dim);border-radius:3px 0 0 3px}
.bar u{position:absolute;left:50%;top:-3px;bottom:-3px;border-left:1.5px dashed var(--line-hi)}
.pcts{display:flex;justify-content:space-between;gap:6px;font:600 12.5px var(--mono);color:var(--dim);margin-top:4px}
.pcts .y{color:var(--text)}
table{width:100%;border-collapse:collapse;font:500 12px var(--mono);margin-top:8px}
th{font:600 12px var(--mono);letter-spacing:.08em;color:var(--mute);text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
td.r,th.r{text-align:right}
td:first-child{white-space:nowrap}
@media (max-width:440px){td,th{padding-left:3px;padding-right:3px}.hide-s{display:none}}
td small{display:block;color:var(--dim);font-size:12px}
.lock{color:var(--mute)}
.note{font:500 12.5px/1.5 var(--mono);color:var(--dim);margin-top:10px}
.note b{color:var(--text);font-weight:600}
.optin{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;cursor:pointer;min-height:44px;padding:10px 0;margin:-10px 0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.optin.nobox{display:block;cursor:default}
.optin input{width:22px;height:22px;margin:0;accent-color:var(--text)}
.foot{font:500 12px/1.6 var(--mono);color:var(--mute);margin-top:22px;border-top:1px solid var(--line);padding-top:12px}
.foot a{color:var(--mute)}
@media (prefers-reduced-motion:no-preference){
  .side{transition:opacity 200ms ease-out,border-color 200ms ease-out}
  .reveal .side.pick{animation:dip 260ms ease-out both}
  .reveal .gd.on{animation:lit 200ms ease-out 260ms both}
  .reveal .boards .wait{animation:out 360ms linear 700ms both}
  .reveal .boards .final{animation:in 360ms linear 700ms both}
  .reveal .deskchip{animation:in 320ms ease-out 1300ms both}
  .reveal .says{animation:in 320ms ease-out 1900ms both}
}
@keyframes dip{0%{transform:scale(1)}40%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes lit{from{background:#1a2128;box-shadow:0 0 0 1.5px #2a333c}to{background:#49de78;box-shadow:none}}
@keyframes in{from{opacity:0}to{opacity:1}}
@keyframes out{from{opacity:1}to{opacity:0}}
/* (2026-11-07) visitors view: the sides are not a control, and the sign-up link sits where the tap line would */
.side.ro{cursor:default}
.tapline a.join{display:inline-block;font:700 12px var(--mono);letter-spacing:.06em;color:var(--bg);background:var(--accent);border-radius:5px;padding:8px 12px;text-decoration:none}
.note a{color:var(--text)}