/* Micklerow — the rows. Pixel trays on a near-black ground, one magenta accent, a fixed rail that carries
   the buy control at every width. */
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#0A0710; --ink:#F2ECF5; --dim:#8B7C96; --faint:#5C4E68;
  --hot:#FF2E88; --hot-soft:rgba(255,46,136,.16); --hot-line:rgba(255,46,136,.34);
  --pane:#130C1B; --pane2:#1A1024; --edge:#251733; --edge2:#33204480;
  --rail:88px; --railw:212px;
  --disp:'Pixelify Sans',ui-monospace,monospace; --body:'IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-text-size-adjust:100%}
body{overflow-x:hidden;font-size:15px;line-height:1.5}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num,.fig{font-family:var(--body);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}

/* ---------------- the rail: identity, routes, and the buy control. Fixed at every width. --------------- */
#rail{position:fixed;z-index:40;background:#0D0814;border-color:var(--edge);display:flex}
@media (max-width:999px){
  #rail{left:0;right:0;bottom:0;height:var(--rail);border-top:1px solid var(--edge);
    align-items:center;gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 34px rgba(0,0,0,.6)}
}
@media (min-width:1000px){
  #rail{left:0;top:0;bottom:0;width:var(--railw);border-right:1px solid var(--edge);
    flex-direction:column;align-items:stretch;gap:16px;padding:20px 16px}
}
.mark{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.mark img{width:30px;height:30px;image-rendering:pixelated;display:block}
.mark b{font-family:var(--disp);font-size:19px;letter-spacing:.04em;font-weight:700}
@media (max-width:420px){.mark b{display:none}}
#routes{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden}
#routes a{font-family:var(--disp);font-size:14px;text-decoration:none;color:var(--faint);padding:6px 8px;border-radius:4px;white-space:nowrap}
@media (max-width:620px){
  #rail{gap:7px;padding-left:10px;padding-right:10px}
  /* the wordmark and sigil already head the page; on the bar the four routes and the buy pill are what matter */
  .mark{display:none}
  #routes a{font-size:13px;padding:5px 6px}
  #buy{min-width:0;padding:8px 10px}
  #buy b{font-size:13.5px}
  #buy span{font-size:9.5px;letter-spacing:.05em}
}
#routes a.on{color:var(--hot);background:var(--hot-soft)}
@media (min-width:1000px){
  #routes{flex-direction:column;gap:3px;flex:0 0 auto;overflow:visible}
  #routes a{font-size:16px;padding:7px 10px}
  #routes a:hover{color:var(--ink)}
}
#buy{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:1px;text-decoration:none;
  background:var(--hot);color:#12000A;border-radius:6px;padding:8px 13px;min-width:112px;text-align:center}
#buy b{font-family:var(--body);font-weight:700;font-size:15px;line-height:1.1;letter-spacing:.01em}
#buy span{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.72}
#buy.dark{background:transparent;color:var(--dim);border:1px dashed var(--hot-line)}
#buy.dark b{color:var(--hot)}
@media (min-width:1000px){#buy{margin-top:auto;padding:13px}}
#wal{display:none}
@media (min-width:1000px){
  #wal{display:block;font-size:12px;color:var(--faint);border-top:1px solid var(--edge);padding-top:12px;word-break:break-all}
  #wal b{color:var(--dim);font-weight:600}
}

/* ---------------- page frame ---------------- */
#page{padding:0 0 calc(var(--rail) + 14px)}
@media (min-width:1000px){#page{padding:0 0 30px var(--railw)}}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}

#crest{padding:22px 0 14px}
#crest h1{font-family:var(--disp);font-weight:700;margin:0;letter-spacing:.01em;
  font-size:clamp(30px,8.2vw,44px);line-height:1.02}
#crest p{margin:9px 0 0;color:var(--dim);max-width:60ch;font-size:14.5px}
#crest .hot{color:var(--hot)}
@media (min-width:1000px){
  #crest{padding:34px 0 18px}
  #crest h1{font-size:54px}
  #crest p{font-size:16px}
}

#body{display:block}
@media (min-width:1000px){
  #body{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:26px;align-items:start}
}
#ledger{margin-top:22px}
@media (min-width:1000px){#ledger{margin-top:0;position:sticky;top:26px}}

/* ---------------- panels ---------------- */
.slab{background:var(--pane);border:1px solid var(--edge);border-radius:10px;margin:0 0 14px;overflow:hidden}
.slab > h2{font-family:var(--disp);font-size:15px;font-weight:600;margin:0;padding:11px 14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--edge);display:flex;justify-content:space-between;gap:10px}
.slab > h2 em{font-style:normal;color:var(--hot);font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:none;white-space:nowrap}
.pad{padding:14px}

/* ---------------- the six trays: the one object ---------------- */
.trays{display:flex;flex-direction:column;gap:9px}
.tray{position:relative;background:var(--pane);border:1px solid var(--edge);border-radius:9px;padding:11px 12px 12px;
  cursor:pointer;transition:border-color .13s,background .13s}
.tray:hover{border-color:var(--hot-line)}
.tray.on{border-color:var(--hot);background:#1B0A16}
.tray.mine::after{content:'';position:absolute;left:0;top:11px;bottom:11px;width:3px;background:var(--hot);border-radius:0 3px 3px 0}
.tline{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.tname{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--hot);min-width:34px}
.tfacts{font-size:12px;color:var(--dim);display:flex;gap:9px;flex-wrap:wrap;flex:1 1 auto}
.tfacts b{color:var(--ink);font-weight:600}
.tpull{margin-left:auto;text-align:right;white-space:nowrap}
.tpull .n{font-family:var(--body);font-weight:700;font-variant-numeric:tabular-nums;font-size:21px;line-height:1}
.tpull .l{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

.counters{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;min-height:30px;padding:2px 0 4px}
.ctr{--u:1;width:calc(9px + var(--u) * 11px);height:28px;border-radius:3px;background:var(--hot);opacity:.86;display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:700;font-size:12px;color:#14000A;animation:pop .22s ease-out}
.ctr.me{outline:2px solid var(--ink);outline-offset:1px}
.ctr.ghost{background:var(--hot-soft);border:1px dashed var(--hot-line);color:var(--hot)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:.86}}
.empty-run{font-size:12.5px;color:var(--faint);padding:6px 0 8px;font-style:italic}

.meter{display:flex;gap:3px;margin-top:6px}
.seg{flex:1 1 0;height:7px;border-radius:2px;background:#251733;overflow:hidden}
.seg i{display:block;height:100%;background:var(--hot);transform-origin:left;transition:transform .3s ease}
.mline{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:5px;letter-spacing:.04em}
.mline b{color:var(--dim);font-weight:600}
.mline .cap{color:var(--hot)}

@media (min-width:1000px){
  /* a 28px counter and a 21px figure look lost on a 27-inch screen — the object grows with the room */
  .ctr{width:calc(13px + var(--u) * 17px);height:38px;font-size:14px}
  .counters{gap:6px;min-height:40px;padding:4px 0 6px}
  .tray{padding:14px 16px 15px}
  .tname{font-size:26px;min-width:46px}
  .tfacts{font-size:13.5px;gap:14px}
  .tpull .n{font-size:28px}
  .seg{height:9px}
  .mline{font-size:12px}
}

/* ---------------- the keypad: the only control ---------------- */
.pad{background:var(--pane2);border:1px solid var(--edge);border-radius:10px;padding:13px}
.padhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.padhead .q{font-size:12.5px;color:var(--dim)}
.padhead .q b{color:var(--hot);font-family:var(--disp);font-size:17px}
.readout{font-family:var(--body);font-weight:700;font-variant-numeric:tabular-nums;font-size:40px;line-height:1;color:var(--ink);text-align:right}
.readout small{font-family:var(--disp);font-weight:400;font-size:13px;color:var(--faint);display:block;letter-spacing:.06em}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:11px 0}
.keys button{background:#221434;border:1px solid var(--edge);border-radius:6px;padding:12px 0;
  font-family:var(--body);font-weight:700;font-size:20px;text-align:center}
.keys button:active{background:var(--hot);color:#12000A}
.keys button.wide{grid-column:span 2}
.commit{width:100%;background:var(--hot);color:#12000A;border-radius:7px;padding:13px;
  font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:.01em}
.commit[disabled]{background:#2A1B38;color:var(--faint);cursor:not-allowed}
.padnote{font-size:12px;color:var(--faint);margin-top:9px;line-height:1.45}
.padnote b{color:var(--dim)}

/* ---------------- ledger column ---------------- */
.tape{list-style:none;margin:0;padding:0}
.tape li{display:flex;gap:9px;align-items:baseline;padding:8px 14px;border-bottom:1px solid var(--edge2);font-size:13px}
.tape li:last-child{border-bottom:0}
.tape .w{color:var(--dim);font-family:var(--body);font-weight:600;font-size:12.5px}
.tape .r{color:var(--hot);font-family:var(--disp)}
.tape .t{margin-left:auto;color:var(--faint);font-size:11.5px}
.quiet{padding:14px;color:var(--faint);font-size:13px;font-style:italic}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge)}
.facts div{background:var(--pane);padding:11px 13px}
.facts .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.facts .v{font-family:var(--body);font-weight:700;font-variant-numeric:tabular-nums;font-size:22px;margin-top:2px}
.primer{font-size:13.5px;color:var(--dim);line-height:1.6}
.primer p{margin:0 0 9px}
.primer p:last-child{margin:0}
.primer b{color:var(--ink);font-weight:600}
.primer .hot{color:var(--hot)}

/* ---------------- tables and prose ---------------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:440px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--edge2);white-space:nowrap}
th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600}
td.n{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums}
td.me{color:var(--hot)}
.prose{font-size:15px;line-height:1.65;color:var(--dim);max-width:66ch}
.prose h3{font-family:var(--disp);color:var(--ink);font-size:20px;margin:20px 0 7px;font-weight:600}
.prose h3:first-child{margin-top:0}
.prose b{color:var(--ink);font-weight:600}
.prose code{font-family:var(--body);font-weight:700;color:var(--hot);font-size:15px}
.worked{background:var(--pane2);border:1px solid var(--edge);border-left:3px solid var(--hot);border-radius:0 8px 8px 0;padding:13px 15px;margin:14px 0;font-size:13.5px;color:var(--dim)}
.worked b{color:var(--ink)}

/* ---------------- foot, sheet, toast ---------------- */
#foot{margin-top:26px;padding:18px 0 8px;border-top:1px solid var(--edge);color:var(--faint);font-size:12px;line-height:1.7}
#foot .ln{word-break:break-all}
#foot .ln b{color:var(--dim);font-weight:600}
#foot a{color:var(--dim)}
#sheet{position:fixed;inset:0;z-index:60;background:rgba(5,2,9,.82);display:flex;align-items:flex-end;justify-content:center}
@media (min-width:720px){#sheet{align-items:center}}
.sheetbox{background:var(--pane);border:1px solid var(--hot-line);border-radius:12px 12px 0 0;width:100%;max-width:440px;padding:16px}
@media (min-width:720px){.sheetbox{border-radius:12px}}
.sheetbox h4{font-family:var(--disp);margin:0 0 11px;font-size:18px;display:flex;justify-content:space-between}
.wl{display:flex;flex-direction:column;gap:7px}
.wl button{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--edge);border-radius:8px;background:var(--pane2)}
.wl img{width:22px;height:22px;border-radius:5px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--rail) + 16px);z-index:80;
  background:var(--hot);color:#12000A;padding:10px 16px;border-radius:7px;font-weight:600;font-size:13.5px;max-width:88vw;text-align:center}
@media (min-width:1000px){.toast{bottom:22px;left:calc(50% + var(--railw)/2)}}