:root {
  --paper: #f5f3ed;
  --ink: #171717;
  --muted: #77756e;
  --line: #d9d6cd;
  --acid: #d7f36a;
  --white: #fffefa;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); min-height: 100vh; }
.topbar, footer { display:flex; justify-content:space-between; align-items:center; padding:25px clamp(20px, 6vw, 88px); }
.topbar { border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); text-decoration:none; font-size:24px; font-weight:950; letter-spacing:-1.7px; }
.wordmark span { color:#91b52d; }
.top-note, .eyebrow, .experiment-number, .counter-label, .archive-heading, footer, .microcopy, .share-button {
  font-size:10px; letter-spacing:1.25px; font-weight:750;
}
.top-note, .muted, .subhead, .microcopy, footer { color:var(--muted); }
main { width:min(760px, calc(100% - 40px)); margin:0 auto; }
.experiment { text-align:center; padding:clamp(62px, 10vh, 108px) 0 78px; }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:9px; color:#65635c; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#91b52d; box-shadow:0 0 0 4px #91b52d22; }
.experiment-number { margin:24px 0 16px; color:#929087; font-size:9px; }
h1 { max-width:720px; margin:0 auto; font-size:clamp(34px, 6.5vw,  sixty); font-size:clamp(34px, 6.5vw,  sixty); font-size:clamp(34px, 6.5vw, 62px); line-height:1.04; letter-spacing:-2.7px; font-weight:850; }
.subhead { margin:20px auto 32px; max-width:520px; font-size:15px; line-height:1.55; }
.counter-panel { display:inline-flex; min-width:210px; flex-direction:column; align-items:center; gap:5px; padding:20px 35px 18px; margin:0 auto 22px; background:var(--white); border:1px solid #e9e6dd; border-radius:13px; }
.counter-number { font-size:clamp(38px, 7vw, 54px); line-height:1; font-weight:850; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.counter-label { color:#77756e; font-size:9px; }
.vote-button { width:min(420px, 100%); display:flex; justify-content:space-between; align-items:center; margin:0 auto; border:0; border-radius:9px; padding:21px 23px; background:var(--acid); color:var(--ink); font-size:15px; font-weight:900; letter-spacing:.5px; cursor:pointer; transition:transform .15s ease, filter .15s ease; }
.vote-button:hover { transform:translateY(-2px); filter:saturate(1.08); }
.vote-button:disabled { cursor:default; opacity:.72; transform:none; }
.arrow { font-size:20px; }
.microcopy { margin:13px 0 0; font-size:9px; letter-spacing:.6px; font-weight:600; }
.feedback { min-height:24px; margin:12px 0 0; font-size:13px; font-weight:700; }
.share-button { margin-top:18px; padding:10px 0; border:0; border-bottom:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; font-size:9px; }
.archive { border-top:1px solid var(--line); padding:25px 0 55px; }
.archive-heading { display:flex; justify-content:space-between; color:#77756e; font-size:9px; }
.history-list { margin-top:14px; }
.history-item { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); font-size:13px; }
.history-item strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.muted { font-size:12px; }
footer { border-top:1px solid var(--line); font-size:9px; letter-spacing:.6px; font-weight:600; }
@media (max-width:560px) {
  .top-note { max-width:135px; text-align:right; line-height:1.5; font-size:8px; }
  .topbar, footer { padding:19px 20px; }
  h1 { letter-spacing:-1.6px; }
  .history-item { font-size:12px; }
}