/* Heftward — the bank. Brutalist slab type, one acid accent, a fixed strip that always carries the buy. */
:root{
  --ground:#0C0D09; --ink:#F2F4EA; --acid:#C6F400; --dim:#8A8F7E;
  --line:#22251B; --panel:#131510; --deep:#090A07;
  --strip:52px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-top:var(--strip); overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%}
.mono{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-ligatures:none}

/* ---------- the fixed strip: identity, clock, buy ---------- */
#strip{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--strip);
  display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--deep); border-bottom:2px solid var(--acid);
}
#strip .ident{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto;min-width:0}
#strip .ident img{width:26px;height:26px;display:block}
#strip .ident b{font-family:Syne,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:559px){ #strip .ident b{display:none} .buy{font-size:12px;padding:0 10px;max-width:68%} .buy i{font-size:10px} .stripbell{font-size:12px;letter-spacing:.04em} }
.stripbell{
  flex:1 1 auto; min-width:0; text-align:center; color:var(--dim);
  font-family:"Roboto Mono",monospace; font-size:13px; letter-spacing:.08em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stripbell.ticking{color:var(--acid)}
.buy{
  flex:0 0 auto; max-width:56%; height:36px; overflow:hidden;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--acid); color:#0B0C08; text-decoration:none;
  font-family:Syne,sans-serif; font-weight:800; font-size:13px; letter-spacing:.01em;
  padding:0 12px; border:0; white-space:nowrap;
}
.buy i{font-style:normal;font-family:Inter,sans-serif;font-weight:500;font-size:11px;opacity:.72}
.buy.armed i{font-family:"Roboto Mono",monospace}

/* ---------- stage ---------- */
#stage{max-width:620px;margin:0 auto;padding:16px 12px 0}
.object{border:2px solid var(--line);background:var(--panel)}
.waiting{padding:48px 16px;text-align:center;color:var(--dim);font-family:"Roboto Mono",monospace;font-size:13px}

.bellhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:2px solid var(--line)}
.bellhead .no{font-family:Syne,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em}
.bellhead .no .n{font-family:"Roboto Mono",monospace;font-weight:700;font-size:17px}
.bellhead .meta{color:var(--dim);font-family:"Roboto Mono",monospace;font-size:12px}
.bellhead .phase{margin-left:auto;font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acid)}
.bellhead .phase.cold{color:var(--dim)}

/* the hero: the slack figure */
.hero{padding:20px 14px 16px;border-bottom:2px solid var(--line);background:var(--deep)}
.hero .cap{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero .fig{font-family:"Roboto Mono",monospace;font-weight:700;font-size:clamp(40px,13vw,62px);line-height:1;color:var(--acid);letter-spacing:-.03em;margin:6px 0 4px;word-break:break-all}
.hero .fig.hush{font-size:clamp(24px,6vw,34px);color:var(--dim);letter-spacing:0}
.hero .sub{color:var(--dim);font-size:13px;max-width:44ch}
.hero .sub b{color:var(--ink);font-weight:600}

/* the bank of levers */
.bank{padding:6px 0}
.lever{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:11px 14px;cursor:pointer;color:inherit;font:inherit}
.lever:last-child{border-bottom:0}
.lever .top{display:flex;align-items:baseline;gap:9px;width:100%}
.lever .tag{font-family:Syne,sans-serif;font-weight:800;font-size:22px;width:1.1em;color:var(--dim);letter-spacing:-.02em}
.lever .wt{font-family:"Roboto Mono",monospace;font-weight:500;font-size:16px}
.lever .hands{margin-left:auto;font-family:"Roboto Mono",monospace;font-size:11px;color:var(--dim)}
.rail{display:block;position:relative;height:9px;margin-top:8px;background:#1B1E15;overflow:hidden}
.rail i{position:absolute;inset:0 auto 0 0;background:#3E4630;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.lever.lead .tag{color:var(--acid)}
.lever.lead .rail i{background:var(--acid)}
.lever.on{background:#181B12;box-shadow:inset 3px 0 0 var(--acid)}
.lever .pay{display:block;margin-top:7px;font-family:"Roboto Mono",monospace;font-size:11px;color:var(--dim)}
.lever .pay b{color:var(--ink);font-weight:500}
.lever .pay .up{color:var(--acid)}

/* the action */
.act{border-top:2px solid var(--line);padding:12px 14px;background:var(--deep)}
.act .lbl{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.actrow{display:flex;gap:8px}
.actrow input{
  flex:1 1 auto;min-width:0;background:var(--panel);border:2px solid var(--line);color:var(--ink);
  font-family:"Roboto Mono",monospace;font-size:17px;padding:11px 12px;
}
.actrow input:focus{outline:0;border-color:var(--acid)}
.push{
  flex:0 0 auto;background:var(--acid);color:#0B0C08;border:0;cursor:pointer;
  font-family:Syne,sans-serif;font-weight:800;font-size:15px;padding:11px 18px;letter-spacing:.01em;
}
.push[disabled]{background:#2B3021;color:#6E7563;cursor:not-allowed}
.actnote{margin-top:9px;color:var(--dim);font-size:12px}
.actnote b{color:var(--ink);font-weight:500}

/* the view switcher, hung on the base of the object */
.seg{display:flex;margin:0 0 20px;border:2px solid var(--line);border-top:0;background:var(--deep)}
.seg a{
  flex:1 1 0;text-align:center;text-decoration:none;color:var(--dim);
  font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:11px 2px;border-right:1px solid var(--line);
}
.seg a:last-child{border-right:0}
.seg a.here{color:#0B0C08;background:var(--acid);font-weight:700}

/* ---------- generic blocks used by the inner views ---------- */
.slab{border:2px solid var(--line);background:var(--panel);margin-bottom:12px}
.slab h3{margin:0;padding:11px 14px;border-bottom:2px solid var(--line);font-family:Syne,sans-serif;font-weight:800;font-size:14px;letter-spacing:.01em}
.slab .body{padding:12px 14px}
.rowline{display:flex;gap:10px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line);font-size:13px}
.rowline:last-child{border-bottom:0}
.rowline .k{color:var(--dim);font-family:"Roboto Mono",monospace;font-size:12px}
.rowline .v{margin-left:auto;font-family:"Roboto Mono",monospace}
.rowline .v.up{color:var(--acid)}
.crossing{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px}
.crossing .side{border:2px solid var(--line);padding:10px;min-width:0}
.crossing .side .cap{font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crossing .side .fig{font-family:"Roboto Mono",monospace;font-size:19px;margin-top:4px;word-break:break-all}
.crossing .side.won{border-color:var(--acid)}
.crossing .arrows{font-family:"Roboto Mono",monospace;font-size:19px;color:var(--acid);text-align:center;line-height:1.25}
.empty{padding:22px 14px;color:var(--dim);font-family:"Roboto Mono",monospace;font-size:12px;text-align:center}
.prose p{margin:0 0 11px}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--acid);font-weight:600}
.addr{font-family:"Roboto Mono",monospace;font-size:11px;word-break:break-all;color:var(--dim)}
.pill{display:inline-block;font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--acid);color:var(--acid);padding:1px 6px;margin-left:6px}

/* ---------- the aside column ---------- */
#aside{max-width:none;margin:0;padding:0 0 28px}
.primer{border:2px solid var(--acid);background:var(--panel);padding:13px 14px;margin-bottom:12px}
.primer h3{margin:0 0 8px;font-family:Syne,sans-serif;font-weight:800;font-size:14px}
.primer p{margin:0 0 8px;font-size:13px;color:#CFD3C2}
.primer p b{color:var(--acid);font-weight:600}
.primer .fine{font-size:12px;color:var(--dim)}
.primerlink{display:inline-block;margin-top:2px;font-family:"Roboto Mono",monospace;font-size:11px;color:var(--acid);text-decoration:none;letter-spacing:.05em}
.tapeline{display:flex;gap:9px;align-items:baseline;padding:8px 14px;border-bottom:1px solid var(--line);font-family:"Roboto Mono",monospace;font-size:12px}
.tapeline:last-child{border-bottom:0}
.tapeline .who{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapeline .lv{color:var(--acid);font-weight:700}
.tapeline .amt{margin-left:auto;white-space:nowrap}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.stat{background:var(--panel);padding:11px 12px}
.stat .k{font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stat .v{font-family:"Roboto Mono",monospace;font-size:17px;margin-top:3px;word-break:break-all}

/* ---------- plinth ---------- */
.plinth{max-width:620px;margin:0 auto;padding:16px 12px 34px;border-top:2px solid var(--line)}
.pcol{display:flex;flex-direction:column;gap:2px;margin-bottom:11px}
.plab{font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pval{font-size:12px;word-break:break-all}
.pval a{color:var(--acid);text-decoration:none}
.pnote{margin:10px 0 0;color:var(--dim);font-size:12px}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:90;background:rgba(6,7,5,.82);display:flex;align-items:flex-end;justify-content:center}
.drawer[hidden]{display:none!important}
.drawerbox{width:100%;max-width:560px;background:var(--panel);border:2px solid var(--acid);border-bottom:0}
.drawertop{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:2px solid var(--line);font-family:Syne,sans-serif;font-weight:800;font-size:14px}
.drawertop button{background:none;border:0;color:var(--dim);font-size:17px;cursor:pointer}
#drawerBody{padding:12px 14px;max-height:62vh;overflow:auto}
.wl{display:flex;flex-direction:column;gap:8px}
.wl button{display:flex;align-items:center;gap:10px;background:var(--deep);border:2px solid var(--line);color:var(--ink);padding:11px;font:inherit;cursor:pointer}
.wl img{width:22px;height:22px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:120;background:var(--acid);color:#0B0C08;font-family:"Roboto Mono",monospace;font-size:12px;padding:10px 14px;max-width:88vw}

/* ---------- 720px and up: a wider measure, bigger instrument ---------- */
@media (min-width:720px){
  body{font-size:16px}
  #stage,.plinth{max-width:760px;padding-left:20px;padding-right:20px}
  #strip{padding:0 20px;gap:14px}
  #strip .ident b{font-size:19px}
  .stripbell{font-size:13px}
  .buy{font-size:14px;padding:0 15px;height:38px}
  .hero{padding:26px 18px 20px}
  .hero .fig{font-size:clamp(54px,8vw,74px)}
  .lever{padding:14px 18px}
  .lever .tag{font-size:26px}
  .lever .wt{font-size:18px}
  .bellhead,.act,.slab h3,.slab .body,.rowline,.tapeline{padding-left:18px;padding-right:18px}
  .stats{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 1000px and up: recompose into instrument + activity ---------- */
@media (min-width:1000px){
  body{padding-top:var(--strip)}
  #stage{
    max-width:1180px; margin:0 auto; padding:26px 24px 0;
    display:grid; grid-template-columns:minmax(0,1fr) 360px; grid-column-gap:24px;
    grid-template-areas:"object aside" "seg aside";
    align-items:start;
  }
  #object{grid-area:object}
  #seg{grid-area:seg;margin-bottom:0}
  #aside{
    grid-area:aside; max-width:none; margin:0; padding:0;
    position:sticky; top:calc(var(--strip) + 26px);
    max-height:calc(100vh - var(--strip) - 52px); overflow:auto;
  }
  .plinth{max-width:1180px;padding:26px 24px 40px;margin-top:28px}
  .plinth{display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:24px}
  .pnote{grid-column:1/-1}
  .hero .fig{font-size:76px}
  .hero .sub{font-size:14px}
  .lever{padding:16px 20px}
  .lever .tag{font-size:30px}
  .lever .wt{font-size:20px}
  .rail{height:11px}
  .bellhead,.act,.slab h3,.slab .body,.rowline,.tapeline{padding-left:20px;padding-right:20px}
  .stats{grid-template-columns:1fr 1fr}
}