@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400..800;1,400..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;600;800&display=swap');

/* ─────────────────────────────────────────────────────────────────────
 * VOTE
 *
 * Two accents doing two jobs, and never swapping:
 *   gold is money. The pot, balances, anything denominated.
 *   lime is power. Your weight, your vote, whatever is winning.
 *
 * Everything else is a grey. If a third colour shows up it is a group
 * hue on a card edge, at low saturation, carrying one bit of meaning.
 * ───────────────────────────────────────────────────────────────────── */

:root {
  --ink:      #06070B;
  --ink-2:    #090B11;
  --pane:     #0E1119;
  --pane-2:   #141826;
  --pane-3:   #1B2132;
  --line:     #1C2231;
  --line-2:   #2B3349;

  --txt:      #E9EDF6;
  --txt-2:    #A6B0C4;
  --dim:      #79839A;
  --dim-2:    #555E72;

  --lime:     #B8FF35;
  --lime-dim: #7FB524;
  --lime-glow: rgba(184, 255, 53, .14);
  --gold:     #FFC24B;
  --gold-dim: #B98A2E;
  --red:      #FF5470;
  --blue:     #5AD1FF;

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* One easing for everything that moves. Fluid, slightly overshooting
     at the end, which is what makes a reflow read as liquid instead of
     as a jump cut. */
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --ease-2: cubic-bezier(.34, 1.56, .44, 1);
  --t:     .5s var(--ease);
  --t-fast: .26s var(--ease);

  --shell: 1180px;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

/* `height:100%` plus `overflow-x:hidden` on the body is the classic way to
   break a sticky header: the constrained height makes the hidden overflow
   turn body into its own scroll container, so the page scrolls inside body
   and `position:sticky` anchors to that scrollport instead of the viewport.
   The header then strands itself mid-page behind a dead black band.
   `overflow-x: clip` clips without creating a scroll container, and nothing
   here needs a full-height body. */
html { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--txt);
  font: 400 15px/1.55 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The room the whole site sits in. A slow drifting mesh plus a pointer
   light, both fixed, both behind everything, neither ever scrolling.
 *
 * Deliberately ONE element with stacked background layers and no blend
 * mode. An earlier version put the grain on a ::after at inset:-50% with
 * mix-blend-mode:overlay, which made a viewport-and-a-half-sized blended
 * layer under a backdrop-filtered sticky bar. Chrome gave up compositing
 * it: scrolling left a dead black band and stranded the header mid-page.
 * Grain is not worth a repaint bug, so it is a plain background layer. */
.room {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    radial-gradient(900px 600px at var(--mx, 50%) var(--my, 20%), rgba(184,255,53,.055), transparent 62%),
    radial-gradient(1100px 700px at 88% 8%,  rgba(255,194,75,.05),  transparent 60%),
    radial-gradient(800px 800px at 8% 82%,   rgba(90,209,255,.035), transparent 60%);
}

/* .btn and friends set an explicit display, which beats the user agent's
   [hidden] rule. Without this the Buy button shows with no link behind it. */
[hidden] { display: none !important; }

.shell { width: min(var(--shell), calc(100vw - 40px)); margin: 0 auto; position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── top bar ─────────────────────────────────────────────────────── */

.bar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(20px) saturate(150%);
  background: linear-gradient(to bottom, rgba(6,7,11,.94), rgba(6,7,11,.72));
  border-bottom: 1px solid var(--line);
}
.bar-in { display: flex; align-items: center; gap: 18px; height: 62px; position: relative; }

/* ── contract address ────────────────────────────────────────────────
   Dead centre of the bar. Absolutely positioned rather than flexed into
   the row, because the groups either side are different widths and a
   spacer-based centre would drift as the badge and pill change. */
.ca {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--pane);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.ca:hover { border-color: var(--line-2); background: var(--pane-2); }
.ca:active { transform: translateX(-50%) scale(.98); }

.ca-lab {
  font-size: 9.5px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim-2);
}
.ca-val { font-size: 12.5px; color: var(--txt-2); letter-spacing: -.02em; }
.ca-ico { width: 13px; height: 13px; color: var(--dim-2); flex-shrink: 0; }
.ca:hover .ca-ico { color: var(--txt-2); }
.ca .i-done { display: none; }

/* copied */
.ca.done { border-color: var(--lime); background: rgba(184, 255, 53, .09); }
.ca.done .ca-lab, .ca.done .ca-val, .ca.done .ca-ico { color: var(--lime); }
.ca.done .i-copy { display: none; }
.ca.done .i-done { display: block; }

/* before the token exists there is nothing to copy, so it stops being a
   button and just says so */
.ca.soon { cursor: default; }
.ca.soon:hover { border-color: var(--line); background: var(--pane); }
.ca.soon .ca-ico { display: none; }
.ca.soon .ca-val { color: var(--dim-2); }

.mark { display: flex; align-items: center; flex-shrink: 0; }
.mark b {
  font-size: 20px; font-weight: 800; letter-spacing: -.055em;
  background: linear-gradient(100deg, var(--txt) 26%, var(--lime));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-flex; align-items: center;
}
/* The $ is its own mark: taller than the word and kicked over to -25deg.
   Stroked rather than filled, so its weight is set by stroke-width and
   reads lighter than the 800 wordmark beside it.
   `color` has to be set here because the parent is transparent for the
   background-clip:text gradient, and currentColor would inherit that. */
.mark-s {
  width: 1.3em; height: 1.3em; flex-shrink: 0;
  color: var(--lime);
  transform: rotate(-25deg);
  margin-right: .04em;
  overflow: visible;
}

/* The nav pill physically slides between tabs rather than fading. */
.nav { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--pane); border: 1px solid var(--line); }
.nav button {
  position: relative; z-index: 1; padding: 7px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--dim);
  transition: color var(--t-fast);
  white-space: nowrap;              /* "The Floor" must never break in two */
}
.nav button[aria-selected="true"] { color: var(--ink); }
.nav button:hover { color: var(--txt); }
.nav button[aria-selected="true"]:hover { color: var(--ink); }
.nav .pill {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px); border-radius: 999px;
  background: var(--lime); z-index: 0;
  transition: transform .52s var(--ease-2), width .52s var(--ease-2);
  will-change: transform, width;
}
.nav .dot {
  position: absolute; top: 5px; right: 7px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); z-index: 2; pointer-events: none;
}

.bar-sp { flex: 1; }

.live {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dim);
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--pane);
}
/* No icon and no blinking dot: just the count and the words. */
.live #online { color: var(--txt-2); font-weight: 600; }

/* ── buttons ─────────────────────────────────────────────────────── */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; letter-spacing: -.01em;
  border: 1px solid var(--line-2); background: var(--pane-2); color: var(--txt);
  transition: background var(--t-fast), border-color var(--t-fast), transform .18s var(--ease), color var(--t-fast);
}
.btn:hover { background: var(--pane-3); border-color: #3A455F; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled] { opacity: .42; pointer-events: none; }

.btn-key { background: var(--lime); border-color: var(--lime); color: #0A1200; font-weight: 750; }
.btn-key:hover { background: #C9FF5C; border-color: #C9FF5C; box-shadow: 0 8px 30px -8px rgba(184,255,53,.5); }
.btn-bad { background: var(--red); border-color: var(--red); color: #2C0009; font-weight: 750; }
.btn-bad:hover { background: #FF6E86; border-color: #FF6E86; box-shadow: 0 8px 30px -8px rgba(255,84,112,.5); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #1A1200; font-weight: 750; }
.btn-gold:hover { background: #FFD070; border-color: #FFD070; box-shadow: 0 8px 30px -8px rgba(255,194,75,.45); }
.btn-sm { padding: 7px 13px; font-size: 12.5px; }

/* A press sends a ring out from the click point. */
.btn .ripple {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: currentColor; opacity: .28; pointer-events: none;
  animation: ripple .62s var(--ease) forwards;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }

/* ── your power badge ────────────────────────────────────────────── */

.me {
  display: flex; align-items: center; gap: 10px; padding: 5px 6px 5px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--pane);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  cursor: pointer;            /* it is a button, so say so */
  font: inherit; color: inherit; text-align: left; flex-shrink: 0;
}
.me-txt { display: block; }
.me-w, .me-l { display: block; }

/* X, sitting between Buy and your profile. */
.xlink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--pane); color: var(--dim);
  transition: all var(--t-fast);
}
.xlink svg { width: 14px; height: 14px; }
.xlink:hover { color: var(--txt); border-color: var(--line-2); background: var(--pane-2); }
.me:hover { border-color: var(--line-2); }
.me.up { animation: rankup 1.1s var(--ease); }
@keyframes rankup {
  0%   { box-shadow: 0 0 0 0 rgba(184,255,53,.7); }
  55%  { box-shadow: 0 0 0 18px rgba(184,255,53,0); background: rgba(184,255,53,.1); }
  100% { box-shadow: 0 0 0 0 rgba(184,255,53,0); }
}
.me-w { font-family: var(--mono); font-weight: 800; font-size: 14px; color: var(--lime); line-height: 1; }
.me-l { font-size: 10px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .1em; line-height: 1; margin-top: 3px; }

/* Before you have a name there is no score worth showing, so the badge
   stops being a readout and becomes the ask. Outlined rather than solid
   so it does not fight the gold Buy button for the eye. */
.me.anon {
  padding: 8px 15px;
  border-color: rgba(184, 255, 53, .45);
  background: rgba(184, 255, 53, .07);
}
.me.anon:hover { border-color: var(--lime); background: rgba(184, 255, 53, .13); }
.me.anon .me-w {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
}
.me.anon .me-l, .me.anon .me-av { display: none; }
.me-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--pane-3); flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--dim);
  overflow: hidden; border: 1px solid var(--line-2);
}
.me-av img { width: 100%; height: 100%; object-fit: cover; }

/* ── hero / the pot ──────────────────────────────────────────────── */

.hero { padding: 46px 0 30px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }

.kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--pane);
}
.kicker b { color: var(--gold); font-family: var(--mono); letter-spacing: 0; }

h1.big {
  margin: 0 0 16px; font-size: clamp(38px, 5.4vw, 64px); line-height: .95;
  font-weight: 800; letter-spacing: -.045em;
  /* Stops the first line breaking as "...in one / pot." and leaving a
     one-word orphan. Ignored by browsers that do not support it. */
  text-wrap: balance;
}
h1.big em { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--gold); }

.lede { font-size: 16.5px; line-height: 1.6; color: var(--txt-2); max-width: 46ch; margin: 0 0 26px; }
.lede b { color: var(--txt); font-weight: 600; }

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* the vessel */
.pot { position: relative; aspect-ratio: 1 / .92; display: grid; place-items: center; }
.pot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The figure has to stay readable no matter how high the liquid is, so it
   carries its own soft scrim rather than relying on the gold staying low. */
.pot-face {
  position: relative; z-index: 3; text-align: center; pointer-events: none;
  padding: 26px 18px;
}
.pot-face::before {
  content: ''; position: absolute; inset: -6% -12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6,7,11,.88) 42%, rgba(6,7,11,.55) 72%, transparent 100%);
}
.pot-lab {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dim);
  font-weight: 700; margin-bottom: 6px;
}
.pot-num {
  font-family: var(--mono); font-weight: 800; font-size: clamp(40px, 6.2vw, 68px); line-height: 1;
  color: var(--gold); letter-spacing: -.055em;
  text-shadow: 0 0 46px rgba(255,194,75,.42);
}
.pot-num span { font-size: .42em; margin-left: 6px; opacity: .62; letter-spacing: 0; }
.pot-num .cur { font-size: .58em; margin: 0 2px 0 0; opacity: .72; vertical-align: .08em; }
.pot-native {
  margin-top: 7px; font-size: 15px; color: var(--gold-dim);
  font-family: var(--mono); font-weight: 600; letter-spacing: -.02em;
}
.pot-usd { margin-top: 8px; font-size: 14px; color: var(--dim); font-family: var(--mono); }

/* The gap between rounds. This text sits low in the vessel, right on the
   gold, so it carries its own dark plate instead of relying on the scrim
   further up. Lime on gold was unreadable. */
.pot-sub.breaking {
  display: inline-block; color: var(--lime);
  background: rgba(4, 6, 10, .93); border: 1px solid rgba(184, 255, 53, .3);
  padding: 6px 13px; border-radius: 999px; font-weight: 600;
  box-shadow: 0 6px 24px -8px rgba(0, 0, 0, .9);
}
.pot-sub .brk { font-family: var(--mono); font-weight: 800; color: var(--lime); }

/* A changed digit eases in rather than snapping. */
@keyframes flip {
  from { transform: translateY(-38%); opacity: .25; }
  to   { transform: none; opacity: 1; }
}
.clock b.flip { animation: flip .32s var(--ease); }
/* The pot is the balance; this is the slice on the table. */
.pot-slice {
  margin-top: 9px; font-size: 12.5px; color: var(--dim);
  padding-top: 9px; border-top: 1px solid rgba(255, 194, 75, .18);
}
.pot-slice b { color: var(--lime); font-family: var(--mono); font-weight: 700; }
.pot-slice span { color: var(--dim-2); }

.pot-sub { margin-top: 14px; font-size: 12.5px; color: var(--dim-2); }
.pot-sub b { color: var(--txt-2); font-weight: 600; }

/* countdown */
.clock { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.clock div {
  min-width: 54px; padding: 8px 6px; border-radius: var(--r-sm); overflow: hidden;
  background: rgba(6,8,13,.92); border: 1px solid var(--line-2);
}
.clock b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: -.04em; will-change: transform; }
.clock i { display: block; font-style: normal; font-size: 9.5px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .12em; margin-top: 5px; }
.clock.soon b { color: var(--red); }

/* ── section furniture ───────────────────────────────────────────── */

.pane { display: none; padding-bottom: 90px; }
.pane.on { display: block; animation: panein .46s var(--ease); }
@keyframes panein { from { opacity: 0; transform: translateY(14px); } }

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 12px 0 20px; flex-wrap: wrap; }
.head h2 { margin: 0 0 5px; font-size: 25px; font-weight: 750; letter-spacing: -.035em; }
.head p { margin: 0; color: var(--dim); font-size: 14px; max-width: 62ch; }

.tally { font-size: 13px; color: var(--dim); text-align: right; flex-shrink: 0; }
.tally b { color: var(--lime); font-size: 19px; }
.tally #totalC { color: var(--dim-2); }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--pane); color: var(--dim);
  transition: all var(--t-fast);
}
.chip:hover { color: var(--txt); border-color: var(--line-2); }
.chip[aria-pressed="true"] { background: var(--txt); border-color: var(--txt); color: var(--ink); }

/* ── the ballot ──────────────────────────────────────────────────── */

.ballot { display: flex; flex-direction: column; gap: 9px; }

.opt {
  --hue: 142; --pc: 0;
  position: relative; overflow: hidden; isolation: isolate;
  /* rank, body, numbers, button. Four items, so four tracks: with three
     the button wrapped onto its own row and doubled the card height. */
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: 18px; align-items: center;
  padding: 17px 20px; border-radius: var(--r);
  background: var(--pane); border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
/* .open is the pinned-by-the-popover state. It deliberately matches :hover
   exactly, so walking the pointer off the card and onto the popover changes
   nothing about how the card looks. */
.opt:hover, .opt.open { border-color: var(--line-2); background: var(--pane-2); }
.opt.mine { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(184,255,53,.28), 0 10px 40px -16px rgba(184,255,53,.5); }

/* The liquid behind the card. Width is the share of total voting power,
   and the right edge is a masked wave that keeps moving, so a card that
   is winning never looks like a static progress bar. */
.opt .fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--pc) * 1%);
  background: linear-gradient(90deg,
    hsl(var(--hue) 70% 50% / .10) 0%,
    hsl(var(--hue) 74% 54% / .20) 100%);
  z-index: -1;
  transition: width .95s var(--ease);
}
/* A long, shallow wave. Tight zigzags at this size stop reading as water
   and start reading as a row of chevrons, so the tile is tall and the
   amplitude small. */
.opt .fill::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -9px; width: 18px;
  background: linear-gradient(90deg, transparent, hsl(var(--hue) 92% 64% / .55));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='240' preserveAspectRatio='none'%3E%3Cpath d='M9 0 Q15 30 9 60 Q3 90 9 120 Q15 150 9 180 Q3 210 9 240 L18 240 L18 0 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='240' preserveAspectRatio='none'%3E%3Cpath d='M9 0 Q15 30 9 60 Q3 90 9 120 Q15 150 9 180 Q3 210 9 240 L18 240 L18 0 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 18px 150px; mask-size: 18px 150px;
  animation: wave 3.6s linear infinite;
}
@keyframes wave { to { -webkit-mask-position: 0 150px; mask-position: 0 150px; } }
.opt[data-pc="0"] .fill::after { opacity: 0; }

.opt-rank {
  font-family: var(--mono); font-size: 20px; font-weight: 800; letter-spacing: -.06em;
  color: var(--dim-2); text-align: center;
  transition: color var(--t);
}
.opt.lead .opt-rank { color: var(--lime); }

.opt-body { min-width: 0; }
.opt-tag {
  display: inline-block; font-size: 9.5px; font-weight: 750; letter-spacing: .13em;
  text-transform: uppercase; color: hsl(var(--hue) 72% 66%); margin-bottom: 4px;
}
.opt-tag.from { color: var(--gold); }
.opt h3 { margin: 0 0 4px; font-size: 17.5px; font-weight: 700; letter-spacing: -.028em; }
.opt p {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--dim);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}
.opt:hover p, .opt.mine p, .opt.open p { max-height: 80px; opacity: 1; margin-top: 6px; }

.opt-num { text-align: right; flex-shrink: 0; display: grid; gap: 3px; justify-items: end; }
.opt-pc {
  font-family: var(--mono); font-size: 21px; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  transition: color var(--t);
}
.opt.lead .opt-pc { color: var(--lime); }
.opt-vc { font-size: 11px; color: var(--dim-2); font-family: var(--mono); }

.opt-go {
  margin-left: 14px; padding: 9px 17px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--pane-2); color: var(--txt-2);
  transition: all var(--t-fast); white-space: nowrap;
  /* Fixed width so swapping "Your vote" for "Remove" does not make the
     button twitch under the cursor. */
  min-width: 92px; text-align: center;
}

/* Your own vote reads "Your vote" until you go near it, then admits what
   clicking it would actually do. */
.opt-go .sw i, .opt-go .sw u { font-style: normal; text-decoration: none; }
.opt-go .sw u { display: none; }
.opt.mine:hover .opt-go .sw i,
.opt.mine.open .opt-go .sw i { display: none; }
.opt.mine:hover .opt-go .sw u,
.opt.mine.open .opt-go .sw u { display: inline; }
.opt:hover .opt-go,
.opt.open .opt-go,
.opt.mine .opt-go { background: var(--lime); border-color: var(--lime); color: #0A1200; }

/* Must stay AFTER the lime rule. Your own card matches both at once, so
   this leans on source order rather than on out-specifying a selector
   list, which is easy to get wrong and miserable to debug. */
.opt.mine:hover .opt-go,
.opt.mine.open .opt-go {
  background: var(--red); border-color: var(--red); color: #2C0009;
}

/* the droplet that carries your weight into the card */
.drop {
  position: fixed; z-index: 200; pointer-events: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 24px 6px rgba(184,255,53,.6);
}
/* Above the page, below the modal veil, and never in the way of a click. */
.confetti { position: fixed; inset: 0; z-index: 210; pointer-events: none; }

/* ── confirm popover ─────────────────────────────────────────────────
   Anchored to the button that raised it, with an arrow pointing back at
   it, so the question never floats free of what it is asking about. */
.pop {
  position: fixed; z-index: 220; width: 286px; padding: 15px 16px 14px;
  border-radius: var(--r); background: var(--pane-2); border: 1px solid var(--line-2);
  box-shadow: 0 26px 70px -20px rgba(0, 0, 0, .95);
  animation: pop-in .3s var(--ease-2);
  transform-origin: var(--ax, 50%) 100%;
}
.pop.below { transform-origin: var(--ax, 50%) 0; }
@keyframes pop-in { from { opacity: 0; transform: translateY(7px) scale(.93); } }

.pop-arrow {
  position: absolute; left: var(--ax, 50%); bottom: -7px;
  width: 12px; height: 12px; margin-left: -6px;
  background: var(--pane-2);
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  transform: rotate(45deg);
}
.pop.below .pop-arrow { bottom: auto; top: -7px; transform: rotate(225deg); }

.pop-t { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 5px; }
.pop-s { font-size: 12.5px; line-height: 1.5; color: var(--dim); margin-bottom: 13px; }
.pop-s b { color: var(--txt); font-weight: 600; }
.pop-r { display: flex; gap: 7px; }
.pop-r .btn { flex: 1; justify-content: center; }

.shock {
  position: fixed; z-index: 199; pointer-events: none; border-radius: 999px;
  border: 2px solid var(--lime); transform: translate(-50%, -50%);
  animation: shock .85s var(--ease) forwards;
}
@keyframes shock {
  from { width: 10px; height: 10px; opacity: .9; }
  to   { width: 380px; height: 380px; opacity: 0; }
}

/* ── the floor ───────────────────────────────────────────────────── */

.compose {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--pane);
  padding: 18px; margin-bottom: 22px;
  transition: border-color var(--t), box-shadow var(--t);
}
.compose:focus-within { border-color: var(--line-2); box-shadow: 0 0 0 4px rgba(184,255,53,.06); }
.compose textarea {
  width: 100%; min-height: 58px; resize: none; border: 0; background: none; color: var(--txt);
  font: inherit; font-size: 16px; line-height: 1.5; outline: 0;
}
.compose textarea::placeholder { color: var(--dim-2); }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.count { font-family: var(--mono); font-size: 12px; color: var(--dim-2); }
.count.warn { color: var(--gold); }

/* ── the ideas round clock ───────────────────────────────────────────
   Its own timer, because this cycle has nothing to do with the ballot's,
   and one countdown standing for two different things would be worse
   than having none. */
.ideabar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 18px; padding: 15px 18px; border-radius: var(--r-lg);
  border: 1px solid rgba(184, 255, 53, .26);
  background: linear-gradient(100deg, rgba(184, 255, 53, .08), var(--pane) 62%);
}
.ideabar-lab { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ideabar-lab b { color: var(--txt-2); font-family: var(--mono); }
.ideabar-t {
  font-size: 30px; font-weight: 800; letter-spacing: -.05em; line-height: 1.1;
  color: var(--lime); font-variant-numeric: tabular-nums;
}
.ideabar-t.soon { color: var(--red); }
.ideabar-r { text-align: right; }
.ideabar-prize span {
  font-family: var(--mono); font-size: 18px; font-weight: 800; color: var(--gold);
  letter-spacing: -.03em;
}
.ideabar-prize i { display: block; font-style: normal; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.ideabar-rule { font-size: 11.5px; color: var(--dim-2); margin-top: 7px; max-width: 34ch; }

.back-n {
  font-family: var(--mono); font-size: 17px; font-weight: 800; color: var(--lime);
  min-width: 32px; text-align: center; line-height: 1;
}
.back-n i { display: block; font-style: normal; font-size: 9px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--dim-2); margin-top: 3px;
            font-family: 'Inter Tight', sans-serif; }

.rules {
  padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(255,194,75,.07), rgba(255,194,75,.02));
  border: 1px solid rgba(255,194,75,.24);
  font-size: 13.5px; line-height: 1.6; color: var(--txt-2);
}
.rules b { color: var(--gold); font-weight: 700; }
.rules i { color: var(--txt); font-style: normal; font-weight: 600; }

.fineprint {
  margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--dim-2); max-width: 74ch;
}

/* ── name + address sheet ────────────────────────────────────────── */

.field { margin-bottom: 10px; }
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim-2); margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--ink-2); border: 1px solid var(--line); color: var(--txt);
  font: inherit; font-size: 15px; outline: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(184,255,53,.09); }
.field input.mono { font-family: var(--mono); font-size: 13px; letter-spacing: -.01em; }
/* Hints are for things that actually happened: an error, or a confirmation.
   They start empty and take up no room, so the form is two boxes and a
   button rather than a wall of explanation nobody reads. */
.field .hint { margin-top: 7px; font-size: 12.5px; color: var(--dim-2); line-height: 1.5; }
.field .hint:empty { display: none; }
.field .hint.bad { color: var(--red); }
.field .hint.good { color: var(--lime); }

.micro {
  margin: 14px 0 0; font-size: 11.5px; color: var(--dim-2); text-align: center;
}

/* A destructive action that should be reachable but never look like the
   thing you are meant to press. */
.linky {
  display: block; margin: 12px auto 0; padding: 4px; font-size: 12px; color: var(--dim-2);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.linky:hover { color: var(--red); }

.locked {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: var(--pane);
  color: var(--dim); font-size: 14px; margin-bottom: 22px;
}
.locked b { color: var(--txt); font-weight: 600; }

.floor { display: grid; gap: 9px; }

.sug {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 16px 18px; border-radius: var(--r); background: var(--pane); border: 1px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t);
}
.sug:hover { border-color: var(--line-2); background: var(--pane-2); }
.sug.queued { border-color: var(--gold); background: linear-gradient(90deg, rgba(255,194,75,.07), var(--pane)); }
.sug.fresh { animation: drop-in .7s var(--ease); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-16px) scale(.98); } }

.sug-txt { font-size: 15px; line-height: 1.5; }
.sug-by { margin-top: 7px; font-size: 12px; color: var(--dim-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sug-by b { color: var(--txt-2); font-weight: 600; }
.badge {
  font-size: 9.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--pane-3); color: var(--dim);
}
.badge.gold { background: rgba(255,194,75,.14); color: var(--gold); }

.sec { display: flex; align-items: center; gap: 12px; }
.sec-note {
  font-size: 11.5px; color: var(--dim-2); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.sug.queued .sec-note, .sug.onballot .sec-note { color: var(--gold); }
.ring { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .bg { stroke: var(--line-2); }
.ring .fg { stroke: var(--lime); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.sug.queued .ring .fg { stroke: var(--gold); }
.ring b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}

/* ── the record ──────────────────────────────────────────────────── */

.rec { display: grid; gap: 10px; }
.rw {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 20px; align-items: center;
  padding: 18px 20px; border-radius: var(--r); background: var(--pane); border: 1px solid var(--line);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.rw:hover { border-color: var(--line-2); background: var(--pane-2); }
.rw-n { font-family: var(--mono); font-size: 13px; color: var(--dim-2); }
.rw-n b { display: block; font-size: 24px; font-weight: 800; color: var(--txt); letter-spacing: -.05em; }
.rw h4 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.025em; }
.rw h4 em { font-style: normal; color: var(--lime); }
.rw p { margin: 0; font-size: 13px; color: var(--dim); }
.rw-amt { text-align: right; font-family: var(--mono); }
.rw-amt b { display: block; font-size: 19px; font-weight: 800; color: var(--gold); letter-spacing: -.04em; }
.rw-carry { display: block; font-size: 11px; color: var(--dim-2); margin: 2px 0 3px; }
.rw-missing { font-size: 11.5px; color: var(--red); }
.rw-none { font-size: 11.5px; color: var(--dim-2); }
.rw-amt a { font-size: 11.5px; color: var(--dim-2); text-decoration: underline; text-underline-offset: 3px; }
.rw-amt a:hover { color: var(--blue); }

/* ── ideas from the floor that won ───────────────────────────────── */

.sub-h { margin: 0 0 4px; font-size: 16px; font-weight: 750; letter-spacing: -.025em; }
.sub-p { margin: 0 0 14px; font-size: 13px; color: var(--dim); max-width: 64ch; line-height: 1.55; }
#allH { margin-top: 34px; }

.won { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px; }
.wo {
  padding: 16px 17px; border-radius: var(--r);
  border: 1px solid rgba(255, 194, 75, .3);
  background: linear-gradient(150deg, rgba(255, 194, 75, .07), var(--pane) 58%);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.wo:hover { border-color: var(--gold); transform: translateY(-2px); }
.wo-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.wo-n { font-size: 10.5px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .1em; }
.wo-by { font-size: 11.5px; color: var(--dim); }
.wo-by b { color: var(--gold); font-weight: 650; }
.wo-s { font-size: 10.5px; color: var(--dim-2); }
.wo h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.025em; line-height: 1.3; }
.wo-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wo-amt { font-size: 15px; font-weight: 800; color: var(--gold); letter-spacing: -.03em; }
.wo-foot a { font-size: 11.5px; color: var(--dim-2); text-decoration: underline; text-underline-offset: 3px; }
.wo-foot a:hover { color: var(--blue); }

.from-tag {
  font-size: 9.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(255,194,75,.32);
  padding: 2px 7px; border-radius: 999px; vertical-align: 2px; margin-left: 4px;
}

/* ── ranks explainer ─────────────────────────────────────────────── */

.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px; margin-top: 12px; }
.rank {
  padding: 15px 16px; border-radius: var(--r); background: var(--pane); border: 1px solid var(--line);
  transition: all var(--t-fast);
}
.rank.you { border-color: var(--lime); background: linear-gradient(160deg, rgba(184,255,53,.08), var(--pane)); }
.rank b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--lime); letter-spacing: -.05em; line-height: 1; }
.rank i { display: block; font-style: normal; font-size: 14px; font-weight: 650; margin: 7px 0 3px; }
.rank span { font-size: 12px; color: var(--dim-2); }

/* ── ticker ──────────────────────────────────────────────────────── */

.ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; height: 40px;
  border-top: 1px solid var(--line); background: rgba(6,7,11,.9); backdrop-filter: blur(18px);
  display: flex; align-items: center; overflow: hidden;
}
/* Solid and above the track: the marquee slides left past this point, and
   without its own background the scrolling text showed straight through
   the label. */
.ticker-lab {
  position: relative; z-index: 1; background: var(--ink);
  flex-shrink: 0; padding: 0 14px; height: 100%; display: flex; align-items: center; gap: 7px;
  border-right: 1px solid var(--line); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2);
}
.ticker-lab b { font-family: var(--mono); font-size: 13px; font-weight: 800; color: var(--lime); }
.ticker-track { display: flex; gap: 30px; padding-left: 18px; white-space: nowrap; will-change: transform; }
.ev { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); }
.ev b { color: var(--txt-2); font-weight: 600; }
.ev u { text-decoration: none; color: var(--lime); font-family: var(--mono); font-weight: 700; }
.ev .g { color: var(--gold); }

/* ── toast ───────────────────────────────────────────────────────── */

.toasts { position: fixed; right: 20px; bottom: 56px; z-index: 300; display: grid; gap: 8px; justify-items: end; }
.toast {
  padding: 12px 17px; border-radius: var(--r); background: var(--pane-2); border: 1px solid var(--line-2);
  font-size: 13.5px; max-width: 340px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.9);
  animation: toast-in .45s var(--ease);
}
.toast.bad { border-color: var(--red); color: #FFD5DD; }
.toast.good { border-color: var(--lime); }
.toast.out { animation: toast-out .35s var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(24px) scale(.96); } }

/* ── modal ───────────────────────────────────────────────────────── */

.veil {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px;
  background: rgba(3,4,7,.78); backdrop-filter: blur(10px);
  animation: fade .3s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(460px, 100%); padding: 28px; border-radius: var(--r-xl);
  background: var(--pane); border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9);
  animation: modal-in .5s var(--ease);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(22px) scale(.97); } }
.modal h3 { margin: 0 0 8px; font-size: 22px; font-weight: 750; letter-spacing: -.035em; }
.modal p { margin: 0 0 18px; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.modal code {
  display: block; padding: 11px 13px; border-radius: var(--r-sm); background: var(--ink-2);
  border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--lime);
  margin: 10px 0; overflow-x: auto;
}
.modal-row { display: flex; gap: 9px; margin-top: 18px; }
.modal-row .btn { flex: 1; }

/* ── responsive ──────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
 * Phones
 *
 * The desktop layout is two columns with a lot of air. On a 375px screen
 * that air is the whole screen, so this is a rebuild of the same
 * components rather than a shrink: the pot becomes a header image instead
 * of a full page, the option cards lose their hover-only affordances
 * because there is no hover, and the two bottom bars get real clearance
 * so nothing important hides underneath them.
 * ───────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .shell { width: calc(100vw - 28px); }

  /* ── header ─────────────────────────────────────────────────────── */

  /* A non-none backdrop-filter makes an element a containing block for
     FIXED descendants, so the blur here was anchoring the bottom nav
     inside the header (top: -22px) rather than to the viewport. Dropping
     the blur hands the nav back to the screen; the bar goes solid to make
     up for the lost frost. */
  .bar { backdrop-filter: none; background: var(--ink-2); }
  .bar-in { min-height: 54px; height: auto; gap: 9px; flex-wrap: wrap; padding-bottom: 8px; }
  .mark b { font-size: 18px; }
  .me-l, .live { display: none; }
  /* On a phone the profile is just the avatar: the word beside it is the
     first thing to go when four things share a 375px row. */
  .me { padding: 4px; gap: 0; }
  .me .me-txt { display: none; }
  .me.anon { padding: 7px 12px; }
  .me.anon .me-txt { display: block; }
  #buy { padding: 8px 13px; }
  .xlink { width: 32px; height: 32px; }

  /* The bar is already full at 375px, so the address takes its own row.
     This is where people actually copy it from on a phone, so hiding it
     was never an option. */
  .ca {
    position: static; transform: none; order: 10;
    width: 100%; justify-content: center; padding: 7px 12px;
  }
  .ca:active { transform: scale(.99); }

  /* Thumb-reachable tabs, sitting above the ticker. */
  .nav {
    position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 58;
    box-shadow: 0 16px 50px -14px rgba(0,0,0,.9);
    background: rgba(14,17,25,.97); backdrop-filter: blur(16px);
  }
  .nav button { padding: 8px 15px; font-size: 13px; }

  /* ── hero ───────────────────────────────────────────────────────── */

  .hero { grid-template-columns: 1fr; gap: 20px; padding: 18px 0 26px; }
  h1.big { font-size: clamp(31px, 8.6vw, 42px); margin-bottom: 13px; }
  .lede { font-size: 15.5px; max-width: none; margin-bottom: 22px; }
  .kicker { margin-bottom: 14px; }
  .hero-cta .btn { flex: 1; justify-content: center; }

  /* A hero image, not the whole first screen. */
  .pot { order: -1; width: min(300px, 78vw); margin: 0 auto; }
  .pot-face { padding: 16px 10px; }
  .pot-num { font-size: clamp(30px, 10.5vw, 42px); }
  .pot-usd { font-size: 13px; margin-top: 6px; }
  .pot-slice { font-size: 11.5px; margin-top: 7px; padding-top: 7px; }
  .clock { gap: 5px; margin-top: 11px; }
  .clock div { min-width: 41px; padding: 5px 3px; }
  .clock b { font-size: 15px; }
  .clock i { font-size: 8px; }
  /* The chips already say DAYS / HRS / MIN / SEC, and at this size the
     caption fell outside the scrim and sat unreadable on the gold. */
  .pot-sub { display: none; }

  /* ── the board ──────────────────────────────────────────────────── */

  .head { margin: 6px 0 16px; gap: 12px; }
  .head h2 { font-size: 22px; }
  .head p { font-size: 13.5px; }
  /* Wrapped onto its own line, a right-aligned block just looks indented. */
  .tally { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .tally b { font-size: 17px; }

  /* No hover on a phone, so the description is always open and the whole
     card is the button. The Vote pill would only ever be decorative. */
  /* align-items:start, or the rank floats halfway down a tall card with
     nothing beside it. It should read as a number against the title. */
  .opt {
    grid-template-columns: 30px minmax(0, 1fr); gap: 11px; padding: 14px 15px;
    align-items: start;
  }
  .opt-rank { padding-top: 1px; }
  .opt-num {
    grid-column: 2; justify-items: start;
    flex-direction: row; align-items: baseline; gap: 9px;
    display: flex; margin-top: 9px;
  }
  .opt-go { display: none; }
  .opt p { max-height: 90px; opacity: 1; margin-top: 5px; font-size: 13px; }
  .opt h3 { font-size: 16px; }
  .opt-rank { font-size: 17px; }
  .opt-pc { font-size: 18px; }
  .opt.mine { position: relative; }
  /* The red "Remove" affordance lives on hover, which phones do not have,
     so your own card says so in the corner instead. */
  .opt.mine::after {
    content: 'YOUR VOTE · TAP TO CHANGE';
    position: absolute; right: 15px; top: 13px;
    font-size: 8.5px; font-weight: 750; letter-spacing: .1em; color: var(--lime);
  }

  .chips { gap: 6px; margin-bottom: 14px; }
  .chip { padding: 6px 12px; font-size: 12px; }

  /* ── floor, record, ranks ───────────────────────────────────────── */

  .sug { grid-template-columns: 1fr; gap: 12px; }
  .sec { justify-content: flex-start; }
  .rules { font-size: 12.5px; padding: 12px 14px; }
  .locked { flex-wrap: wrap; font-size: 13px; }
  .locked .btn { margin-left: 0 !important; width: 100%; }
  .rw { grid-template-columns: 46px 1fr; gap: 12px; padding: 15px 16px; }
  .rw-amt { grid-column: 2; text-align: left; }
  .rw-carry { display: inline; margin-left: 8px; }
  .ranks { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .rank { padding: 12px 13px; }
  .rank b { font-size: 19px; }

  /* ── the two bottom bars ────────────────────────────────────────── */

  /* Ticker (40) + nav (~40 at bottom:48) + breathing room, so the last
     card is never stuck behind furniture. */
  .pane { padding-bottom: 150px; }
  .toasts { right: 14px; left: 14px; bottom: 100px; justify-items: stretch; }
  .toast { max-width: none; }

  .modal { padding: 22px 20px; border-radius: var(--r-lg); }
  .modal h3 { font-size: 20px; }
  .pop { width: min(300px, calc(100vw - 28px)); }
}

/* Very narrow: the header cannot hold three things and a logo. */
@media (max-width: 400px) {
  .mark b { font-size: 17px; }
  #buy { padding: 8px 11px; font-size: 12.5px; }
  .nav button { padding: 8px 12px; font-size: 12.5px; }
  .ranks { grid-template-columns: 1fr 1fr; }
  .opt.mine::after { content: 'YOUR VOTE'; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}