:root{
    --bg:#1b1838;--bg2:#262150;--panel:#2f2a5e;--panel2:#3a3474;--ink:#f4efe1;--dim:#a59fc9;
    --line:#0d0b1f;--accent:#ff7a3d;--live:#5dff7a;--gold:#ffd23f;--silver:#d6dbe6;--bronze:#e08a4c;
    --pix:'Press Start 2P',monospace;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--mono);
       background-image:radial-gradient(#ffffff14 1px,transparent 1px);background-size:24px 24px}
  img{image-rendering:pixelated}
  a{color:inherit}
  .wrap{width:min(920px,100% - 32px);margin:0 auto}

  /* pixel box: hard 4px border + stepped corners via box-shadow */
  .px{background:var(--panel);box-shadow:0 -4px 0 var(--line),0 4px 0 var(--line),-4px 0 0 var(--line),4px 0 0 var(--line),
      inset 0 4px 0 #ffffff1a,inset 0 -4px 0 #0000004d}
  .btn{font:10px var(--pix);white-space:nowrap;color:#fff;background:var(--accent);border:0;padding:12px 14px;cursor:pointer;
       box-shadow:0 -4px 0 var(--line),0 4px 0 var(--line),-4px 0 0 var(--line),4px 0 0 var(--line),inset -4px -4px 0 #0005,inset 4px 4px 0 #fff4}
  .btn:active{transform:translateY(2px);box-shadow:0 -4px 0 var(--line),0 4px 0 var(--line),-4px 0 0 var(--line),4px 0 0 var(--line),inset 4px 4px 0 #0005}
  .btn.ghost{background:var(--panel2)}

  /* nav */
  nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0}
  .logo{font:14px var(--pix);letter-spacing:1px;text-decoration:none;white-space:nowrap}
  .logo b{color:var(--accent)}
  .livepill{font:9px var(--pix);color:var(--live);display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 20px}
  .dot{width:8px;height:8px;background:var(--live);display:inline-block;animation:blink 1s steps(1) infinite}

  /* hero */
  .hero{text-align:center;padding:36px 0 28px}
  h1{font:clamp(20px,5vw,36px)/1.4 var(--pix);margin:0 0 16px;text-shadow:4px 4px 0 var(--line)}
  h1 span{color:var(--gold)}
  .sub{color:var(--dim);max-width:560px;margin:0 auto 24px;font-size:15px}
  .cmd{display:inline-flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;font:700 15px var(--mono)}
  .cmd code::before{content:"$ ";color:var(--live)}
  .note{color:var(--dim);font-size:12px;margin-top:16px}
  .crowd{display:flex;justify-content:center;gap:6px;margin:28px 0 0;height:48px;align-items:flex-end}
  .crowd img{animation:bob .6s steps(1) infinite}
  .crowd img:nth-child(2n){animation-delay:.3s}

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0 36px}
  .stat{padding:16px;text-align:center}
  .stat .n{font:18px var(--pix);color:var(--gold);font-variant-numeric:tabular-nums}
  .stat .l{font-size:12px;color:var(--dim);margin-top:8px}

  /* board */
  .board{padding:20px 20px 12px}
  .bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;margin-bottom:20px}
  h2{font:13px var(--pix);margin:0}
  .tabs{display:flex;gap:8px;flex-wrap:wrap}
  .tab{font:9px var(--pix);color:var(--dim);background:var(--bg2);border:0;padding:9px 10px;cursor:pointer;box-shadow:0 0 0 3px var(--line)}
  .tab[aria-pressed=true]{background:var(--accent);color:#fff}
  .tabs.metric .tab[aria-pressed=true]{background:var(--gold);color:var(--line)}

  /* podium */
  .podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin:8px 0 24px}
  .pod{text-align:center;padding:14px 8px 0}
  .pod .av{margin:0 auto 10px}
  .pod .h{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pod .v{font:11px var(--pix);margin:6px 0 12px;font-variant-numeric:tabular-nums}
  .pod .step{font:16px var(--pix);color:var(--line);padding:10px 0}
  .p1 .step{background:var(--gold);height:76px}.p2 .step{background:var(--silver);height:54px}.p3 .step{background:var(--bronze);height:40px}
  .crown{font:12px var(--pix);color:var(--gold);height:16px}

  /* avatar: head-and-shoulders crop of a Pixel Office character, on a coloured tile */
  .av{display:block;width:44px;height:44px;overflow:hidden;position:relative;flex:none;box-shadow:0 0 0 3px var(--line)}
  .av img{position:absolute;left:50%;top:4px;transform:translateX(-50%)}
  .av.big{width:64px;height:64px}

  /* rows */
  .rows{list-style:none;margin:0;padding:0}
  .row{display:grid;grid-template-columns:48px 44px 1fr auto 110px;gap:14px;align-items:center;padding:10px 8px;border-top:3px dashed #ffffff12}
  .row:hover{background:#ffffff0a}
  .rank{font:11px var(--pix);color:var(--dim);text-align:right}
  .who{min-width:0}
  .who .h{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who .m{font-size:12px;color:var(--dim)}
  .youbar.out{grid-template-columns:48px 1fr auto}
  .youbar.out .h{white-space:normal}
  .tool{font:8px var(--pix);padding:5px 6px;background:var(--bg2);color:var(--dim);box-shadow:0 0 0 2px var(--line);white-space:nowrap}
  .val{font:11px var(--pix);text-align:right;font-variant-numeric:tabular-nums}
  .live{color:var(--live);font-size:12px;font-weight:700}
  .live .dot{width:6px;height:6px;margin-right:4px}
  .up{color:var(--live)}.down{color:#ff6b6b}
  .me{background:#ff7a3d22;box-shadow:inset 4px 0 0 var(--accent)}
  .more{display:block;margin:14px auto 6px}

  /* you bar */
  .youbar{position:sticky;bottom:12px;margin:20px 0 0;padding:10px 12px;display:grid;grid-template-columns:48px 44px 1fr auto;gap:14px;align-items:center;background:var(--panel2)}

  /* how it works */
  .how{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0}
  .how .px{padding:18px}
  .how .k{font:20px var(--pix);color:var(--accent)}
  .how h3{font:10px/1.6 var(--pix);margin:12px 0 8px}
  .how p{margin:0;color:var(--dim);font-size:13px}
  .soon{text-align:center;padding:24px;margin-bottom:40px}
  .soon h3{font:11px/1.8 var(--pix);margin:0 0 8px}
  .soon p{margin:0;color:var(--dim);font-size:13px}
  footer{color:var(--dim);text-align:center;font-size:12px;padding:20px 16px 36px}

  @keyframes blink{50%{opacity:.25}}
  @keyframes bob{50%{transform:translateY(-3px)}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important}}
  @media (max-width:640px){
    .stats,.how{grid-template-columns:1fr}
    .row,.youbar{grid-template-columns:34px 44px 1fr 84px;gap:10px}
    .youbar{grid-template-columns:34px 44px 1fr auto}
    .youbar.out{grid-template-columns:34px 1fr auto}
    .row .tool,.youbar .tool{display:none}
    .podium{gap:8px}.pod .v{font-size:9px}
    .cmd{font-size:13px}
  }
/* --- additions for the live site --- */
a.tab{display:inline-block;text-decoration:none}
.tab.off{opacity:.35;pointer-events:none}
.row[hidden]{display:none}
.notice{padding:12px 16px;margin:0 0 16px;color:var(--gold);font-size:12px}
.empty{text-align:center;padding:32px 12px;color:var(--dim)}
.navright{display:flex;align-items:center;gap:16px}
.navlink{font:9px var(--pix);white-space:nowrap;color:var(--dim);text-decoration:none;background:none;border:0;cursor:pointer;padding:0}
.page{padding:24px;margin:24px 0 40px}
.page h1{font:16px/1.6 var(--pix)}
.page h2{font:11px/1.6 var(--pix);margin:28px 0 10px}
.page p,.page li{color:var(--dim)}
.page code,.page pre{font:13px var(--mono);color:var(--ink)}
.page pre{background:var(--bg);padding:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.kv .px{padding:14px;text-align:center}
.machines{list-style:none;padding:0;margin:0}
.machines li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:3px dashed #ffffff12}
form.inline{display:inline}
input[type=text]{font:14px var(--mono);padding:10px;background:var(--bg);color:var(--ink);border:0;box-shadow:0 0 0 3px var(--line)}
@media (max-width:640px){.kv{grid-template-columns:1fr}}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.consent{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;padding:16px;z-index:10;
         display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.consent[hidden]{display:none}
.consent p{margin:0;flex:1 1 260px;color:var(--dim);font-size:13px}
.consent a{color:var(--ink)}
.consent-btns{display:flex;gap:12px}
a.btn{display:inline-block;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.soon .sponsor{margin-top:16px}
.soon .sponsor b{color:var(--gold)}
.interest{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:16px}
.interest input[type=email]{font:14px var(--mono);padding:10px;background:var(--bg);color:var(--ink);border:0;box-shadow:0 0 0 3px var(--line);flex:1 1 200px;max-width:300px;min-width:0}
.interest .hp{position:absolute;left:-9999px}