/* Balkard — a drafting sheet. Deep navy ground, one cyan accent, a ring of seat notches as the instrument. */
:root{
  --ground:#050A14; --ink:#DCE7F5; --accent:#2FC8FF;
  --paper:#08101F; --line:#16304A; --line-soft:#0E2036; --faint:#6E88A6; --snap:#F2704B;
  --grid:rgba(47,200,255,.055);
  --dsp:"Chakra Petch", "Space Grotesk", system-ui, sans-serif;
  --bdy:"Space Grotesk", system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* class rules below set display; without this, hidden loses */
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink); font-family:var(--bdy);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
}
a{color:inherit}
code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}

/* ---- the sheet ---- */
.draft{max-width:560px;margin:0 auto;padding:14px 12px 24px;position:relative;min-height:100vh;display:flex;flex-direction:column;gap:14px}
.draft::before{content:"";position:absolute;inset:6px;border:1px solid var(--line-soft);pointer-events:none}
.corner-tick{position:absolute;width:13px;height:13px;border:0 solid var(--accent);opacity:.5;pointer-events:none}
.corner-tick.tl{top:6px;left:6px;border-top-width:1px;border-left-width:1px}
.corner-tick.tr{top:6px;right:6px;border-top-width:1px;border-right-width:1px}
.corner-tick.bl{bottom:6px;left:6px;border-bottom-width:1px;border-left-width:1px}
.corner-tick.br{bottom:6px;right:6px;border-bottom-width:1px;border-right-width:1px}
.stage{flex:1;padding:8px 6px 0;display:flex;flex-direction:column;gap:14px}

/* ---- spec callouts: the three numbers that matter, as dimension labels ---- */
.spec{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--paper)}
.spec-cell{padding:9px 10px;border-right:1px solid var(--line-soft);min-width:0}
.spec-cell:last-child{border-right:0}
.spec-k{font-family:var(--dsp);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.spec-n{font-family:var(--dsp);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spec-n.hot{color:var(--accent)}
.spec-u{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- the instrument ---- */
.gauge{position:relative;display:flex;flex-direction:column;align-items:center}
.gauge-svg{width:100%;max-width:352px;height:auto;display:block;touch-action:manipulation}
.gauge-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:0 22%}
.gauge-phase{font-family:var(--dsp);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.gauge-phase.live{color:var(--accent)}
.gauge-bell{font-family:var(--dsp);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:3px 0 2px}
.gauge-note{font-size:11.5px;color:var(--faint);line-height:1.35}
.gauge-note b{color:var(--ink);font-weight:500}
.notch{transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .4s}
.notch-lit{fill:var(--accent)}
.notch-broke{fill:none;stroke:var(--snap);stroke-width:2;stroke-dasharray:3 3}
.notch-mine{stroke:var(--ink);stroke-width:1.5;fill:var(--accent)}
.notch-hit{cursor:pointer}
.notch-ghost{fill:var(--line)}

/* ---- the vise: the one action ---- */
.vise{border:1px solid var(--line);background:var(--paper)}
.vise-say{padding:10px 12px;font-size:12.5px;color:var(--faint);border-bottom:1px solid var(--line-soft);line-height:1.45}
.vise-say b{color:var(--ink);font-weight:500}
.vise-say em{color:var(--accent);font-style:normal;font-weight:500}
.vise-go{display:block;width:100%;border:0;background:var(--accent);color:#03121B;font-family:var(--dsp);font-weight:700;
  font-size:17px;letter-spacing:.1em;text-transform:uppercase;padding:16px 12px;cursor:pointer}
.vise-go:disabled{background:var(--line);color:var(--faint);cursor:default}
.vise-go.snap{background:var(--snap);color:#1B0A04}
.vise-fine{padding:9px 12px;font-size:11px;color:var(--faint);border-top:1px solid var(--line-soft)}

/* ---- the murmur: what just happened ---- */
.murmur{border:1px solid var(--line-soft);background:var(--paper)}
.murmur-h{font-family:var(--dsp);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);padding:8px 10px 6px}
.murmur-line{display:flex;gap:8px;align-items:baseline;padding:5px 10px;font-size:12px;border-top:1px solid var(--line-soft)}
.murmur-line code{color:var(--faint);font-size:11px}
.murmur-act{font-family:var(--dsp);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);flex:none}
.murmur-act.snapped{color:var(--snap)}
.murmur-when{margin-left:auto;color:var(--faint);font-size:11px;flex:none}

/* ---- folio: the ledger of settled rounds ---- */
.folio{border:1px solid var(--line);background:var(--paper)}
.folio-head{display:grid;grid-template-columns:38px 1fr 1fr 1fr;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);
  font-family:var(--dsp);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.folio-line{display:grid;grid-template-columns:38px 1fr 1fr 1fr;gap:6px;padding:10px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.folio-line:last-child{border-bottom:0}
.folio-id{font-family:var(--dsp);font-weight:700;color:var(--faint)}
.folio-cell{font-size:12.5px;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis}
.folio-cell b{font-family:var(--dsp);font-size:14px;font-weight:700;display:block}
.folio-cell span{font-size:10px;color:var(--faint);display:block}
.folio-line.dead{background:rgba(242,112,75,.05)}
.folio-line.dead .folio-id{color:var(--snap)}
.folio-tag{grid-column:2/5;font-family:var(--dsp);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--snap)}
.folio-tag.void{color:var(--faint)}

/* ---- reservoir: the carry ---- */
.reservoir{border:1px solid var(--accent);background:linear-gradient(180deg,rgba(47,200,255,.09),transparent 70%);padding:18px 14px;text-align:center}
.reservoir-k{font-family:var(--dsp);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.reservoir-n{font-family:var(--dsp);font-weight:700;font-size:40px;line-height:1.05;color:var(--accent);font-variant-numeric:tabular-nums;margin:4px 0 2px;word-break:break-all}
.reservoir-note{font-size:12px;color:var(--faint);max-width:34ch;margin:6px auto 0;line-height:1.45}

/* ---- clauses: the rules ---- */
.clause{border-left:2px solid var(--accent);padding:2px 0 2px 12px;margin:0 0 16px}
.clause-h{font-family:var(--dsp);font-weight:700;font-size:15px;letter-spacing:.02em;margin:0 0 4px}
.clause-p{margin:0;font-size:13.5px;color:var(--faint);line-height:1.55}
.clause-p b{color:var(--ink);font-weight:500}

/* ---- headings and empties ---- */
.leaf-h{font-family:var(--dsp);font-weight:700;font-size:23px;letter-spacing:-.01em;margin:0}
.leaf-p{margin:4px 0 0;font-size:13px;color:var(--faint);line-height:1.5}
.nilnote{border:1px dashed var(--line);padding:22px 14px;text-align:center;color:var(--faint);font-size:13px}

/* ---- title block ---- */
.titleblock{border:1px solid var(--line);background:var(--paper);margin-top:auto}
.tb-ident{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid var(--line)}
.tb-seal{width:34px;height:34px;flex:none;border:1px solid var(--line-soft)}
.tb-name{font-family:var(--dsp);font-weight:700;font-size:17px;letter-spacing:.06em;line-height:1.1}
.tb-sub{font-size:10.5px;color:var(--faint)}
.tb-hand{margin-left:auto;flex:none;background:transparent;border:1px solid var(--accent);color:var(--accent);
  font-family:var(--dsp);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;cursor:pointer}
.tb-hand.held{border-color:var(--line);color:var(--faint)}
.tb-index{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.tb-index.wide{grid-template-columns:repeat(5,1fr)}
.tb-index a{display:flex;flex-direction:column;gap:1px;padding:8px 6px;text-decoration:none;border-right:1px solid var(--line-soft);
  font-family:var(--dsp);font-size:11.5px;letter-spacing:.06em;color:var(--faint)}
.tb-index a:last-child{border-right:0}
.tb-index a span{font-size:8.5px;letter-spacing:.14em;opacity:.65}
.tb-index a.here{color:var(--accent);background:rgba(47,200,255,.07)}
.tb-coin{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.tb-k{font-family:var(--dsp);font-size:9px;letter-spacing:.16em;color:var(--faint);flex:none}
.tb-ca{font-size:10.5px;color:var(--ink);word-break:break-all;flex:1 1 150px;min-width:0}
.tb-copy{background:transparent;border:1px solid var(--line);color:var(--faint);font-size:10px;padding:4px 7px;cursor:pointer;flex:none}
.tb-buy{flex:none;background:var(--accent);color:#03121B;text-decoration:none;font-family:var(--dsp);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 10px}
.tb-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;font-size:10.5px;color:var(--faint)}
.tb-foot a{color:var(--faint)}
.tb-motto{margin-left:auto;font-style:italic;opacity:.75}

/* ---- drawer ---- */
.drawer{position:fixed;inset:0;background:rgba(2,6,12,.82);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.drawer-box{background:var(--paper);border:1px solid var(--line);width:100%;max-width:440px;max-height:86vh;overflow:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--line);
  font-family:var(--dsp);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.drawer-head button{background:transparent;border:0;color:var(--faint);font-size:16px;cursor:pointer;padding:0 4px}
.drawer-body{padding:12px}
.handshake{display:flex;flex-direction:column;gap:8px}
.handshake button{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:11px;cursor:pointer;font-family:var(--bdy);font-size:14px;text-align:left}
.handshake img{width:22px;height:22px}
.stamp{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--accent);color:#03121B;
  font-family:var(--dsp);font-size:12px;letter-spacing:.06em;padding:9px 14px;z-index:60;max-width:90vw;text-align:center}

@media (min-width:600px){
  .draft{max-width:600px;padding:22px 18px 30px}
  .gauge-svg{max-width:400px}
  .gauge-bell{font-size:52px}
}