/* $BPILL — Dose Blue is #3D6FE8. Never Base's own brand blue, and never a
   rounded square (their brand guide: "Do not create your own square!").
   The forbidden hex is deliberately not written anywhere in this repo outside
   content/banned.json, so the acceptance grep stays a clean pass/fail.
   Three theme states: bare :root is the complete light palette; the media query
   redefines tokens only, guarded so an explicit light choice beats a dark OS;
   [data-theme="dark"] redefines again so the toggle wins both ways. No color is
   ever declared solely inside a media or [data-theme] block. */

:root {
  --ink:#0F1117; --ink-2:#565D6E; --ink-3:#878E9E;
  --paper:#F1F2F6; --surface:#FFFFFF; --rule:#D7DBE3; --rule-hard:#0F1117;
  --blue:#3D6FE8; --blue-deep:#1B3A82; --blue-lift:#7FA2F5; --blue-wash:#E7EEFD;
  --foil-hi:#EDEFF3; --foil:#C3C9D4; --foil-lo:#8A93A3;
  --red:#C8453F; --red-wash:#FBEDEC;
  --s1:.35rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4.5rem; --s7:7rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#E9EBF2; --ink-2:#99A0B2; --ink-3:#6A7185;
    --paper:#0B0D12; --surface:#141821; --rule:#272C38; --rule-hard:#E9EBF2;
    --blue:#7FA2F5; --blue-deep:#A9C0F8; --blue-lift:#3D6FE8; --blue-wash:#18213A;
    --foil-hi:#5D6575; --foil:#454C5B; --foil-lo:#2C323E;
    --red:#E88A85; --red-wash:#2C1A19;
  }
}
:root[data-theme="dark"] {
  --ink:#E9EBF2; --ink-2:#99A0B2; --ink-3:#6A7185;
  --paper:#0B0D12; --surface:#141821; --rule:#272C38; --rule-hard:#E9EBF2;
  --blue:#7FA2F5; --blue-deep:#A9C0F8; --blue-lift:#3D6FE8; --blue-wash:#18213A;
  --foil-hi:#5D6575; --foil:#454C5B; --foil-lo:#2C323E;
  --red:#E88A85; --red-wash:#2C1A19;
}

* { box-sizing: border-box; }

body {
  background-color: var(--paper); color: var(--ink);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255,255,255,.16), transparent 58%),
    radial-gradient(ellipse 85% 70% at 50% 118%, rgba(15,17,23,.07), transparent 55%);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.6; margin: 0;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--s4); }

/* ---------- nav ---------- */
nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; }
nav .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--ink); text-decoration: none; }
nav .links { display: flex; gap: var(--s3); flex-wrap: wrap; }
nav a { color: var(--ink-2); text-decoration: none; }
nav a:hover { color: var(--blue); }
nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- hero ---------- */
.hero {
  padding: var(--s6) 0 var(--s5); display: grid; gap: var(--s5);
  position: relative;
}
.hero::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: calc(var(--s4) * -1);
  right: calc(var(--s4) * -1);
  top: 0; bottom: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 80% at 78% 48%, rgba(255,255,255,.2), transparent 62%),
    radial-gradient(ellipse 40% 60% at 18% 30%, rgba(15,17,23,.035), transparent 70%);
}
.hero > * { position: relative; z-index: 1; }
@media (min-width: 880px) { .hero { grid-template-columns: 1.08fr .92fr; align-items: center; gap: var(--s6); } }

h1 { font-size: clamp(2.8rem, 10.5vw, 5.4rem); font-weight: 900;
  letter-spacing: -.05em; line-height: .9; margin: 0 0 var(--s3); text-wrap: balance; }
h1 .em { color: var(--blue); }
.kicker { font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin: 0 0 var(--s3); }
.hero .sub { font-size: 1.22rem; line-height: 1.45; color: var(--ink-2); max-width: 36ch; margin: 0 0 var(--s4); }
.hero .sub strong { color: var(--ink); font-weight: 700; }

/* ---------- buttons ---------- */
.linkrow { display: flex; gap: var(--s2); flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: .5rem;
  font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .85rem 1.15rem; border: 1.5px solid var(--ink); color: var(--ink);
  text-decoration: none; background: none; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: none; color: var(--ink); }

.anychain { margin: var(--s2) 0 0; font-size: .9rem; color: var(--ink-3); }

/* ---------- blister ---------- */
.pack { display: flex; flex-direction: column; gap: var(--s2); }
.pack-card {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(165deg,
      rgba(255,255,255,.4) 0%,
      rgba(255,255,255,.08) 16%,
      transparent 42%,
      rgba(15,17,23,.06) 72%,
      rgba(15,17,23,.16) 100%),
    linear-gradient(128deg,
      var(--foil-hi) 0%,
      var(--foil) 16%,
      var(--foil-hi) 32%,
      var(--foil) 48%,
      var(--foil-lo) 64%,
      var(--foil) 80%,
      var(--foil-hi) 100%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, 12% 40%;
  border: 1px solid var(--foil-lo);
  border-radius: 14px;
  padding: clamp(1rem, 3vw, 1.6rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 2vw, 1rem);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 10px rgba(15,17,23,.18),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 1px 2px rgba(15,17,23,.1),
    0 14px 32px -14px rgba(15,17,23,.42),
    0 32px 56px -28px rgba(15,17,23,.28);
  animation: foil-shift 16s ease-in-out infinite alternate;
}
.pack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    98deg,
    transparent 0 1px,
    rgba(255,255,255,.28) 1px 2px,
    transparent 2px 5px,
    rgba(15,17,23,.1) 5px 6px
  );
}
.pack-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 60%,
    transparent 68%
  );
  background-size: 240% 100%;
  background-position: 130% 0;
  mix-blend-mode: overlay;
  animation: foil-sheen 7.2s ease-in-out infinite;
}
@keyframes foil-shift {
  from { background-position: 0 0, 8% 35%; }
  to   { background-position: 0 0, 78% 62%; }
}
@keyframes foil-sheen {
  0%   { background-position: 140% 0; }
  100% { background-position: -45% 0; }
}
.bub {
  appearance: none; border: 0; padding: 0; cursor: pointer; background: none;
  display: block; width: 100%; aspect-ratio: 5 / 6; border-radius: 999px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 5px 7px rgba(15,17,23,.28)) drop-shadow(0 1px 0 rgba(255,255,255,.45));
  transition: filter .36s ease, box-shadow .36s ease, transform .36s cubic-bezier(.18,.82,.22,1), background .36s ease;
}
.bub svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.bub:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }
.bub[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  left: 16%; top: 10%;
  width: 42%; height: 30%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at 36% 34%, rgba(255,255,255,.5), transparent 70%);
}
.bub .dome, .bub .cavity, .bub .cap {
  transition: opacity .38s cubic-bezier(.22,.7,.2,1), transform .38s cubic-bezier(.22,.7,.2,1), filter .38s ease;
}
.bub[aria-pressed="false"] .cavity { opacity: 0; }
.bub[aria-pressed="true"]  .cavity { opacity: 1; }
.bub[aria-pressed="true"]  .dome   { opacity: 0; transform: scale(.97); }
.bub[aria-pressed="true"]  .cap    {
  opacity: 0;
  transform: scale(.4) translateY(12%);
  transform-origin: center;
  filter: blur(.4px);
}
.bub[aria-pressed="true"] {
  cursor: default;
  transform: scale(.985);
  filter: none;
  background:
    radial-gradient(ellipse 64% 56% at 50% 36%, rgba(15,17,23,.42), rgba(15,17,23,.14) 52%, transparent 72%);
  box-shadow:
    inset 0 10px 16px rgba(15,17,23,.48),
    inset 0 -2px 3px rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(15,17,23,.28);
}
.bub:hover[aria-pressed="false"] .cap { transform: scale(1.07); transform-origin: center; }
.bub:hover[aria-pressed="false"] {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 9px 14px rgba(15,17,23,.34)) drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
@media (prefers-reduced-motion: reduce) {
  .pack-card { animation: none; background-position: 0 0, 40% 50%; }
  .pack-card::after { animation: none; background-position: 42% 0; opacity: .28; }
  .bub, .bub .dome, .bub .cavity, .bub .cap { transition: none; }
  .bub:hover[aria-pressed="false"] { transform: none; }
  .bub:hover[aria-pressed="false"] .cap { transform: none; }
}

.pack-meta { display: flex; justify-content: space-between; gap: var(--s2); flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace; font-size: .66rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.pack-meta b { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
#rank { color: var(--ink); }

/* ---------- sections ---------- */
section { padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.sec-label { font-family: "JetBrains Mono", monospace; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s3); }
h2 { font-size: clamp(1.8rem, 6vw, 2.9rem); font-weight: 900; letter-spacing: -.042em;
  line-height: 1.02; margin: 0 0 var(--s3); text-wrap: balance; max-width: 18ch; }
p { margin: 0 0 var(--s3); max-width: 60ch; }
p:last-child { margin-bottom: 0; }
.big { font-size: 1.18rem; line-height: 1.5; }
strong { font-weight: 700; }
em { font-style: italic; }

/* ---------- the choice ---------- */
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); max-width: 620px; }
.pillbtn { appearance: none; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-top: 5px solid var(--blue);
  padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2);
  font-family: inherit; color: var(--ink); transition: transform .15s ease; }
.pillbtn.red { border-top-color: var(--red); }
.pillbtn:hover { transform: translateY(-3px); }
.pillbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pillbtn:hover { transform: none; } }
.pillbtn svg { width: 44px; height: 56px; }
.pillbtn .t { font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; }
.pillbtn .d { font-size: .92rem; color: var(--ink-2); }

#choiceOut { margin-top: var(--s4); min-height: 3.2rem; max-width: 60ch; }
.verdict { background: var(--surface);
  border: 1px solid var(--rule); border-left: 4px solid var(--blue); padding: var(--s3);
  font-size: 1.05rem; }
.verdict.red { border-left-color: var(--red); }
.verdict b { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: .25rem; }

/* ---------- counter ---------- */
.counter { background: var(--surface); border: 2px solid var(--rule-hard); padding: var(--s4) var(--s3);
  display: flex; flex-direction: column; gap: var(--s2); align-items: center; text-align: center; }
.counter .num { font-family: "JetBrains Mono", monospace; font-weight: 700;
  font-size: clamp(2rem, 9vw, 4.2rem); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--blue); }
.counter .lbl { font-family: "JetBrains Mono", monospace; font-size: .66rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.tick { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--blue); margin-left: .4rem; vertical-align: middle; }
.tick.on { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tick.on { animation: none; opacity: .8; } }

/* ---------- ranks ---------- */
.ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.rk { background: var(--surface); padding: var(--s3); display: flex; flex-direction: column; gap: .2rem; }
.rk.now { background: var(--blue-wash); }
.rk .n { font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.rk .t { font-weight: 700; font-size: .98rem; letter-spacing: -.015em; }

/* ---------- generator ---------- */
.gen { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--blue);
  padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s3); max-width: 60ch; }
#genLine { font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.2; margin: 0; min-height: 2.4em; display: flex; align-items: center; }

/* ---------- facts ---------- */
.facts { border: 2px solid var(--rule-hard); background: var(--surface); }
.facts-head { border-bottom: 6px solid var(--rule-hard); padding: var(--s3);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.facts-head h3 { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.03em; }
.facts-head span { font-family: "JetBrains Mono", monospace; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.facts dl { margin: 0; }
.frow { display: grid; grid-template-columns: minmax(0,9rem) minmax(0,1fr);
  gap: var(--s2) var(--s3); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule); align-items: baseline; }
.frow:last-child { border-bottom: 0; }
.frow dt { font-family: "JetBrains Mono", monospace; font-size: .63rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.frow dd { margin: 0; font-size: .95rem; }
.frow dd.mono { font-family: "JetBrains Mono", monospace; font-size: .82rem; word-break: break-all; }
.pending { color: var(--ink-3); font-style: italic; }

/* ---------- warnings ---------- */
.warns { border: 2px solid var(--rule-hard); background: var(--surface); max-width: 62ch; }
.warns-head { border-bottom: 6px solid var(--rule-hard); padding: var(--s2) var(--s3);
  font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; }
.warns ul { margin: 0; padding: var(--s3) var(--s3) var(--s3) 2.2rem; }
.warns li { margin-bottom: var(--s2); font-size: .97rem; }
.warns li:last-child { margin-bottom: 0; }
.warns li strong { font-weight: 700; }

/* ---------- join ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); }
.step { background: var(--surface); padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.step .n { font-family: "JetBrains Mono", monospace; font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; color: var(--blue); }
.step h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.step p { margin: 0; font-size: .93rem; color: var(--ink-2); }

footer { border-top: 6px solid var(--rule-hard); margin-top: var(--s6);
  padding: var(--s4) 0 var(--s6);
  font-family: "JetBrains Mono", monospace; font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }

/* ---------- specification page ---------- */
.paper { padding: var(--s5) 0 var(--s7); }
.paper h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); margin-bottom: var(--s2); }
.paper h2 { max-width: 28ch; margin-top: var(--s6); }
.paper h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em;
  margin: var(--s4) 0 var(--s2); }
.paper .lede { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.25; max-width: 28ch; margin: 0 0 var(--s4); }
.status { border: 2px solid var(--rule-hard); background: var(--surface);
  padding: var(--s3); margin: 0 0 var(--s5); max-width: 62ch; }
.status b { display: block; font-size: 1.02rem; font-weight: 800; margin-bottom: .35rem; }
.paper table { width: 100%; max-width: 62ch; border-collapse: collapse;
  margin: 0 0 var(--s4); font-size: .95rem; }
.paper th, .paper td { text-align: left; padding: .55rem .15rem .55rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top; }
.paper th { font-family: "JetBrains Mono", monospace; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.paper td.mono, .paper .mono { font-family: "JetBrains Mono", monospace;
  font-size: .82rem; word-break: break-all; }
.paper ol, .paper ul { margin: 0 0 var(--s4); padding-left: 1.3rem; max-width: 60ch; }
.paper li { margin-bottom: .45rem; }
.toc { display: flex; flex-wrap: wrap; gap: .35rem var(--s3); margin: 0 0 var(--s5);
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--blue); }

.glitch { filter: saturate(.15) contrast(1.1); transition: filter .25s ease; }
@media (prefers-reduced-motion: reduce) { .glitch { transition: none; } }

/* Red-pill cinematic — full-screen procedural canvas, built and torn down by
   app.js. Sits above everything (page z-indexes top out at 2). Cinematic
   black on purpose in both themes: it plays as a video, not as UI. */
.cine { position: fixed; inset: 0; z-index: 60; background: #050308;
  opacity: 0; transition: opacity .35s ease; cursor: pointer; }
.cine.in { opacity: 1; }
.cine.out { opacity: 0; }
.cine canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cine-skip { position: absolute; right: 18px; bottom: 16px; z-index: 1;
  background: none; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  color: rgba(255,255,255,.75); padding: 8px 14px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; }
.cine-skip:hover, .cine-skip:focus-visible { border-color: #fff; color: #fff; }
@media (prefers-reduced-motion: reduce) { .cine { display: none; } }