/* Wedgery — five ledger strips on a near-black sheet. One accent, one serif, one mono. */
:root{
  --ground:#08070A; --ink:#E9E4EC; --dim:#7C7684; --edge:#1B1720; --edge2:#241E2C;
  --hot:#FF4FD8; --hot-dim:#6B1F58; --warn:#FFC34F;
  --strip:78px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--ground);color:var(--ink)}
body{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased;padding-bottom:88px;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.plate{max-width:720px;margin:0 auto;padding:14px 14px 0}

/* ---- crest: the identity lives inside the object, not in a bar ---- */
.crest{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 0 14px}
.mark{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.mark svg{display:block}
.clock{display:flex;align-items:baseline;gap:9px}
.phase{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.count{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.count.hot{color:var(--hot)}

/* ---- the headline: the one serif on the page ---- */
.say{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:33px;line-height:1.02;
  letter-spacing:-.015em;margin:0 0 6px}
.say em{font-style:normal;color:var(--hot)}
.under{color:var(--dim);margin:0 0 18px;max-width:46ch}

/* ---- the ledger: five strips, the whole instrument ---- */
.ledger{border-top:1px solid var(--edge)}
.strip{border-bottom:1px solid var(--edge);padding:11px 0 12px;position:relative}
.strip.pick{background:linear-gradient(90deg,rgba(255,79,216,.07),transparent 72%)}
.strip.starve .roman{color:var(--warn)}
.rowtop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.roman{font-family:"DM Serif Display",Georgia,serif;font-size:21px;line-height:1;width:34px;flex:none;color:var(--ink)}
.stat{flex:1;color:var(--dim);font-size:11px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mult{font-size:19px;font-variant-numeric:tabular-nums;color:var(--hot);flex:none}
.mult.flat{color:var(--dim)}
.crowd{position:relative;height:14px;margin:9px 0 8px;background:var(--edge);overflow:hidden}
.crowd i{position:absolute;top:0;bottom:0;left:0;display:block;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.crowd .fill{background:var(--hot-dim)}
.crowd .mine{top:auto;bottom:0;height:5px;background:var(--hot);box-shadow:0 0 0 1px var(--ground)}
.crowd .seed{right:0;left:auto;background:repeating-linear-gradient(90deg,var(--warn) 0 2px,transparent 2px 5px);opacity:.55}
.rowbot{display:flex;align-items:center;gap:8px}
.step{width:46px;height:34px;border:1px solid var(--edge2);color:var(--dim);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex:none}
.step:active{background:var(--edge2);color:var(--ink)}
.step[disabled]{opacity:.28}
.step.plus{border-color:var(--hot-dim);color:var(--hot)}
.yours{flex:1;text-align:center;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.yours b{color:var(--ink);font-weight:400}

/* ---- the budget counter and the commit bar ---- */
.budget{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0 10px}
.left{display:flex;align-items:baseline;gap:8px}
.left .n{font-family:"DM Serif Display",Georgia,serif;font-size:34px;line-height:1}
.left .n.zero{color:var(--hot)}
.left .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.reset{font-size:11px;color:var(--dim);letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px}
.commit{display:block;width:100%;padding:17px 14px;background:var(--hot);color:#0A0208;text-align:center;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;border:0}
.commit[disabled]{background:transparent;color:var(--dim);border:1px solid var(--edge2)}
.commit.ghost{background:transparent;color:var(--hot);border:1px solid var(--hot)}
.note{min-height:18px;margin:10px 0 0;font-size:11px;color:var(--dim)}
.note.bad{color:var(--warn)}

/* ---- panes: the small print blocks under the instrument ---- */
.pane{margin:22px 0 0;border-top:1px solid var(--edge);padding-top:14px}
.pane h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400;font-size:23px;margin:0 0 8px}
.pane p{margin:0 0 12px;color:var(--dim);max-width:60ch}
.pane p b{color:var(--ink);font-weight:400}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge)}
.fact{background:var(--ground);padding:12px}
.fact .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fact .v{font-size:19px;font-variant-numeric:tabular-nums;margin-top:3px}
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;position:relative;padding:0 0 12px 30px;color:var(--dim)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;font-family:"DM Serif Display",Georgia,serif;
  font-size:16px;color:var(--hot)}

/* ---- tape of finished rounds ---- */
.tape{margin-top:10px}
.past{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--edge);font-size:12px}
.past .id{font-family:"DM Serif Display",Georgia,serif;font-size:18px;width:46px;flex:none;color:var(--dim)}
.past .bars{flex:1;display:flex;gap:3px;align-items:flex-end;height:26px}
.past .bars i{flex:1;background:var(--hot-dim);min-height:2px}
.past .bars i.top{background:var(--hot)}
.past .bars i.none{background:var(--warn);opacity:.5}
.past .rt{width:78px;text-align:right;flex:none;font-variant-numeric:tabular-nums;color:var(--dim)}
.past .rt b{color:var(--ink);font-weight:400}
.void{color:var(--warn)}

.carve{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--edge);font-size:11px;color:var(--dim)}
.carve .who{width:92px;flex:none;color:var(--ink)}
.carve .pips{flex:1;display:flex;gap:2px}
.carve .pips i{flex:1;height:14px;background:var(--edge2)}
.carve .pips i.on{background:var(--hot-dim)}
.carve .tag{flex:none;color:var(--hot);font-variant-numeric:tabular-nums}
.carve .tag.carried{color:var(--warn)}

/* ---- the dock: the only chrome, floating, bottom ---- */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:20;display:flex;align-items:center;gap:2px;
  padding:4px;background:rgba(14,12,18,.94);border:1px solid var(--edge2);border-radius:999px;
  backdrop-filter:blur(8px);max-width:calc(100vw - 20px)}
.dock a,.dock button{padding:9px 13px;border-radius:999px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;white-space:nowrap}
.dock a.on{background:var(--hot);color:#0A0208}
.dock .plug{color:var(--hot)}
.dock .plug.tied{color:var(--dim)}

.foot{margin:26px 0 0;padding:14px 0 6px;border-top:1px solid var(--edge);color:var(--dim);font-size:11px}
.foot .ca{word-break:break-all;color:var(--ink)}
.foot a{color:var(--hot)}
.foot .gm{display:inline-block;margin-top:10px;padding:10px 16px;border:1px solid var(--hot);color:var(--hot);
  text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:11px}

.demo{display:inline-block;margin:0 0 10px;padding:4px 9px;border:1px solid var(--warn);color:var(--warn);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase}

@media (min-width:640px){
  .plate{padding-top:22px}
  .say{font-size:58px}
  .facts{grid-template-columns:repeat(4,1fr)}
  .roman{width:44px;font-size:25px}
  .stat{font-size:12px}
}