/* Cullmoot — cut-paper floor. Bone cards on a dark paper ground, one accent that only ever means "gone". */
:root{
  --ground:#100C0A; --paper:#171210; --card:#EFE9DD; --card2:#DED6C6;
  --ink:#EFE9DD; --dim:#9A8E82; --faint:#5C534C; --edge:#2A211C;
  --blue:#3D7BFF; --blue-soft:rgba(61,123,255,.16);
  --rail:60px; --gut:14px;
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)' opacity='.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground); color:var(--ink); font-family:"Work Sans",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5; overflow-x:hidden; padding-bottom:calc(var(--rail) + env(safe-area-inset-bottom));
  background-image:var(--fibre); background-size:160px 160px; background-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.dsp{font-family:"Big Shoulders Display","Work Sans",sans-serif;font-weight:900;line-height:.86;letter-spacing:.01em;text-transform:uppercase}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- the rail: fixed at every width, and it always carries the buy control ---------- */
.mootrail{
  position:fixed; z-index:40; left:0; right:0; bottom:0; height:calc(var(--rail) + env(safe-area-inset-bottom));
  padding:0 10px env(safe-area-inset-bottom); display:flex; align-items:center; gap:8px;
  background:#0B0806; border-top:1px solid var(--edge);
}
.mootrail-mark{display:none;align-items:center;gap:8px}
.mootrail-mark img{width:28px;height:28px;border-radius:5px;display:block}
.mootrail-links{display:flex;gap:2px;flex:1;min-width:0}
.mootrail-links a{
  flex:1; text-align:center; padding:9px 2px 8px; font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint); border-radius:6px; white-space:nowrap;
}
.mootrail-links a.on{color:var(--ink);background:#181310}
.mootrail-buy{
  flex:0 0 auto; display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:7px 13px; border-radius:7px; background:var(--blue); color:#FFF;
  box-shadow:3px 3px 0 #0B0806; min-width:104px;
}
.mootrail-buy[aria-disabled="true"]{background:#241C17;color:var(--dim);box-shadow:none;border:1px solid var(--edge)}
.mootrail-buy-k{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;opacity:.85}
.mootrail-buy-v{font-size:13px;font-weight:700;line-height:1.1}

/* ---------- stage ---------- */
.stage{width:100%;max-width:560px;margin:0 auto;padding:22px var(--gut) 34px}
.head{margin-bottom:20px}
.head h1{font-size:clamp(34px,10.6vw,50px);margin:0 0 10px}
.head h1 em{font-style:normal;color:var(--blue)}
.head p{color:var(--dim);font-size:14.5px;max-width:44ch}

/* clock strip */
.clock{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 14px;margin:0 0 16px;background:var(--paper);border:1px solid var(--edge);
  border-radius:3px 12px 4px 10px;
}
.clock-k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.clock-t{font-size:34px}
.clock-t.hot{color:var(--blue)}
.clock-s{color:var(--dim);font-size:13px;margin-left:auto}
.bar{height:3px;background:var(--edge);border-radius:2px;overflow:hidden;margin-top:10px;flex:1 0 100%}
.bar i{display:block;height:100%;background:var(--blue);transition:width .9s linear}

/* ---------- the floor ---------- */
.floor{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.pew{
  position:relative;text-align:left;width:100%;padding:11px 11px 10px;border-radius:2px 9px 3px 8px;
  background:var(--card);color:#1A1512;box-shadow:4px 5px 0 rgba(0,0,0,.55);
  transition:transform .14s ease, box-shadow .14s ease;
}
.pew.vacant{background:transparent;color:var(--dim);border:1px dashed #3A2F28;box-shadow:none}
.pew.mine{outline:2px solid var(--blue);outline-offset:2px}
.pew:active{transform:translate(2px,2px);box-shadow:2px 3px 0 rgba(0,0,0,.55)}
.pew-n{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.5}
.pew-pile{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:30px;line-height:.9;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.pew.vacant .pew-pile{color:var(--faint)}
.pew-who{font-size:11px;letter-spacing:.02em;opacity:.55;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.pew-tally{display:flex;gap:3px;align-items:center;min-height:18px;margin-top:9px}
.pew-tally i{width:3px;height:16px;background:var(--blue);border-radius:1px;transform:rotate(-8deg);flex:0 0 auto}
.pew-tally i:nth-child(5n){transform:rotate(66deg);margin-left:-9px;height:19px}
.pew-tally .vn{margin-left:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1A1512;opacity:.72;white-space:nowrap}
.pew-tally.none .vn{margin-left:0;opacity:.32}
.pew-lead:after{
  content:"leading the vote";position:absolute;top:-8px;right:8px;background:var(--blue);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:2px 6px;border-radius:2px;
}
.pew.gone{animation:tear .75s cubic-bezier(.4,0,.2,1) forwards}
@keyframes tear{
  0%{transform:none;opacity:1}
  25%{transform:rotate(-3deg) translate(-3px,-6px)}
  100%{transform:rotate(-16deg) translate(-28px,120px);opacity:0}
}

/* the commit drawer that opens inside a tapped card */
.commit{grid-column:1/-1;background:var(--paper);border:1px solid var(--blue);border-radius:3px 12px 4px 10px;padding:14px}
.commit h3{font-family:"Big Shoulders Display";font-weight:900;font-size:26px;text-transform:uppercase;line-height:.9;margin-bottom:5px}
.commit p{font-size:13px;color:var(--dim);margin-bottom:11px}
.commit p b{color:var(--ink);font-weight:600}
.commit-row{display:flex;gap:8px}
.go{flex:1;background:var(--blue);color:#fff;font-weight:700;padding:12px;border-radius:5px;box-shadow:3px 3px 0 #0B0806;font-size:14px}
.go[disabled]{opacity:.45;box-shadow:none}
.no{padding:12px 15px;border-radius:5px;border:1px solid var(--edge);color:var(--dim);font-size:14px}
.note{font-size:12px;color:var(--dim);margin-top:9px;word-break:break-word}
.note.bad{color:#FF9478}

/* ---------- aside: the same element in every state, empty copy included ---------- */
.aside{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.slab{background:var(--paper);border:1px solid var(--edge);border-radius:3px 12px 4px 10px;padding:14px}
.slab h2{font-family:"Big Shoulders Display";font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.slab .quiet{color:var(--faint);font-size:13px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted #2A211C;font-size:13.5px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--dim)}
.kv b{font-weight:600;font-variant-numeric:tabular-nums}
.kv b.hi{color:var(--blue)}
.cullrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dotted #2A211C;font-size:13px}
.cullrow:last-child{border-bottom:0}
.cullrow .r{font-family:"Big Shoulders Display";font-weight:900;font-size:19px;color:var(--faint);min-width:26px}
.cullrow .w{color:var(--dim);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.cullrow .p{color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:9px}
.steps li{list-style:none;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:13.5px;color:var(--dim)}
.steps li>div{min-width:0}
.steps li:before{counter-increment:s;content:counter(s);font-family:"Big Shoulders Display";font-weight:900;font-size:20px;color:var(--blue);line-height:1}
.steps li b{color:var(--ink);font-weight:600}

/* connect */
.conn{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.conn button{border:1px solid var(--edge);background:var(--paper);padding:9px 14px;border-radius:5px;font-size:13px;font-weight:600}
.conn .addr{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.conn .bal{font-size:12.5px;color:var(--faint);margin-left:auto}

/* tables on the secondary views */
.ledger{display:flex;flex-direction:column;gap:9px}
.lrow{background:var(--paper);border:1px solid var(--edge);border-radius:3px 10px 4px 9px;padding:12px 13px}
.lrow .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.lrow .t b{font-family:"Big Shoulders Display";font-weight:900;font-size:24px;text-transform:uppercase}
.lrow .t span{font-size:11.5px;color:var(--faint);letter-spacing:.06em}
.lrow .d{font-size:13px;color:var(--dim)}
.prose p{color:var(--dim);margin-bottom:12px;font-size:14.5px}
.prose h2{font-family:"Big Shoulders Display";font-weight:900;font-size:26px;text-transform:uppercase;margin:20px 0 8px}
.prose h2:first-child{margin-top:0}

.foot{max-width:560px;margin:0 auto;padding:6px var(--gut) 28px;font-size:11.5px;color:var(--faint);line-height:1.8}
.foot a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.foot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;word-break:break-all;color:var(--dim)}
.foot .fl{display:block}

/* ---------- 720–1000: still one column, but a wider measure and bigger everything ---------- */
@media (min-width:720px){
  :root{--gut:26px}
  body{font-size:16px}
  .stage,.foot{max-width:720px}
  .head h1{font-size:76px}
  .head p{font-size:17px}
  .floor{grid-template-columns:repeat(3,1fr);gap:12px}
  .pew{padding:14px}
  .pew-pile{font-size:36px}
  .clock-t{font-size:44px}
  .mootrail-links a{font-size:12px}
}

/* ---------- ≥1000: the page recomposes — floor left, the room's business in its own column ---------- */
@media (min-width:1000px){
  :root{--rail:104px}
  body{padding-bottom:0;padding-left:var(--rail)}
  .mootrail{
    top:0;right:auto;bottom:0;width:var(--rail);height:100dvh;flex-direction:column;
    align-items:stretch;gap:0;padding:20px 12px;border-top:0;border-right:1px solid var(--edge);
  }
  .mootrail-mark{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:26px}
  .mootrail-mark img{width:44px;height:44px;border-radius:8px}
  .mootrail-mark span{font-family:"Big Shoulders Display";font-weight:900;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
  .mootrail-links{flex-direction:column;flex:1;gap:3px}
  .mootrail-links a{text-align:center;padding:10px 4px;font-size:11.5px}
  .mootrail-buy{align-items:center;text-align:center;margin-top:auto;padding:12px 8px;min-width:0}
  .stage{max-width:1160px;padding:34px 34px 44px;display:grid;grid-template-columns:minmax(0,1fr) 352px;grid-template-rows:auto auto;column-gap:30px;align-items:start}
  .head{grid-column:1/-1;margin-bottom:24px}
  .head h1{font-size:92px;max-width:15ch}
  .head p{font-size:18px;max-width:58ch}
  .conn{grid-column:1/-1}
  .board{grid-column:1;min-width:0}
  .aside{grid-column:2;grid-row:3;margin-top:0;position:sticky;top:34px}
  .floor{grid-template-columns:repeat(3,1fr);gap:14px}
  .pew{padding:16px 15px}
  .pew-pile{font-size:42px}
  .pew-who{font-size:12px}
  .clock-t{font-size:52px}
  .foot{max-width:1160px;padding:0 34px 40px}
  .prose{max-width:66ch}
  .wide1{grid-column:1/-1}
}
@media (min-width:1280px){ .stage,.foot{max-width:1200px} }
@media (prefers-reduced-motion:reduce){ .pew.gone{animation:none;opacity:0} .bar i{transition:none} }