/* ============================================================
   Quantum computing explainer — page.css
   Restrained line aesthetic. Accent (violet/cyan) appears only
   on quantum + interactive moments and as rare ambient spots.
   ============================================================ */

/* ---------- Reading progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--q-violet), var(--q-cyan));
  z-index:100; transition:width 80ms linear;
}

/* ---------- Layout scaffold ---------- */
.wrap{ max-width:1120px; margin:0 auto; padding:0 64px; }
@media (max-width:780px){ .wrap{ padding:0 28px; } }

.section{ padding:clamp(90px,14vh,160px) 0; position:relative; }
.section--tight{ padding:clamp(56px,8vh,96px) 0; }

.col{ max-width:680px; }
.col--center{ margin-inline:auto; text-align:center; }

.eyebrow{ display:inline-block; margin-bottom:26px; }

.h-display{ font-size:clamp(40px,6.2vw,82px); font-weight:200; line-height:1.02; letter-spacing:-0.02em; }
.h-section{ font-size:clamp(30px,4.4vw,52px); font-weight:300; line-height:1.06; letter-spacing:-0.015em; }
.h-sub{ font-size:clamp(22px,2.4vw,30px); font-weight:300; line-height:1.15; }
.accent-word{ color:var(--q-violet); font-weight:300; }
.accent-word--cyan{ color:var(--q-cyan); }

.lede{ font-family:var(--font-body); font-weight:400; color:var(--color-text-secondary);
       font-size:clamp(17px,1.5vw,20px); line-height:1.7; }
.lede + .lede{ margin-top:1.1em; }
.body{ font-family:var(--font-body); color:var(--color-text-secondary); font-size:17px; line-height:1.7; }
.caption{ font-family:var(--font-body); color:var(--color-text-tertiary); font-size:14px; line-height:1.55; }

/* ---------- Hairline ambient glow (rare, minimal) ---------- */
.glow-spot{ position:absolute; border-radius:50%; pointer-events:none;
            filter:blur(90px); opacity:0.14; z-index:0; }
.glow-spot--violet{ background:var(--q-violet); }
.glow-spot--cyan{ background:var(--q-cyan); opacity:0.10; }

/* keep content above glow */
.section > .wrap{ position:relative; z-index:1; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px);
         transition:opacity var(--duration-slow) var(--ease-standard),
                    transform var(--duration-slow) var(--ease-standard); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
       background:var(--color-bg-pure-black); position:relative; overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
@media (max-width:880px){ .hero__inner{ grid-template-columns:1fr; gap:8px; } }
.hero h1{ margin:18px 0 28px; }
.hero h1 .l2{ color:var(--q-violet); }
.hero__lede{ max-width:40ch; }
.hero__stage{ display:flex; align-items:center; justify-content:center; min-height:360px; position:relative; }
.scrollcue{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
            font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--color-text-tertiary);
            display:flex; flex-direction:column; align-items:center; gap:12px; }
.scrollcue .bar{ width:1px; height:40px; background:linear-gradient(var(--color-text-tertiary),transparent);
                 animation:cuePulse 2.4s var(--ease-standard) infinite; transform-origin:top; }
@keyframes cuePulse{ 0%,100%{ transform:scaleY(0.5); opacity:0.4 } 50%{ transform:scaleY(1); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .scrollcue .bar{ animation:none } }

/* Interactive qubit (hero) — a split-flap tile, the same board mechanic used
   for the classical bit below. Left to itself it never settles: it keeps
   flipping between 0 and 1, the way a qubit holds both at once. Click to
   measure and it lands on a single digit. */
.qflip{ position:relative; display:flex; flex-direction:column; align-items:center; gap:24px;
        cursor:pointer; outline:none; user-select:none; }
.splitflap{ position:relative; width:232px; height:300px; perspective:1100px;
            transition:box-shadow var(--duration-normal) var(--ease-standard); }

/* two static halves + two hinged leaves; each clips one half of a full-tile glyph */
.sf__half, .sf__leaf{ position:absolute; left:0; width:100%; height:50%; overflow:hidden;
                      background:#0E0E0E; backface-visibility:hidden; }
.sf__half--top, .sf__leaf--top{ top:0; border-radius:16px 16px 0 0;
                  border:1px solid var(--color-border-strong); border-bottom:none; }
.sf__half--bottom, .sf__leaf--bottom{ bottom:0; border-radius:0 0 16px 16px;
                  border:1px solid var(--color-border-strong); border-top:none; }
.qflip:hover .sf__half, .qflip:hover .sf__leaf{ border-color:rgba(255,255,255,0.26); }

.sf__digit{ position:absolute; left:0; width:100%; height:300px;
            display:flex; align-items:center; justify-content:center;
            font-family:var(--font-display); font-weight:200; font-size:248px; line-height:1; color:#fff; }
.sf__digit.q1{ color:var(--q-violet); }
.sf__half--top .sf__digit, .sf__leaf--top .sf__digit{ top:0; }
.sf__half--bottom .sf__digit, .sf__leaf--bottom .sf__digit{ bottom:0; }

.sf__leaf{ z-index:2; will-change:transform; }
.sf__leaf--top{ transform-origin:bottom center; }
.sf__leaf--bottom{ transform-origin:top center; transform:rotateX(90deg); }

/* the seam that defines a split-flap tile */
.sf__seam{ position:absolute; top:50%; left:0; right:0; height:2px; transform:translateY(-50%);
           background:#000; z-index:5; pointer-events:none; }
.sf__seam::after{ content:''; position:absolute; left:0; right:0; top:2px; height:1px;
           background:rgba(255,255,255,0.05); }
/* small node at the seam — a neutral dark-gray pivot that blends into the tile */
.sf__seam::before{ content:''; position:absolute; left:50%; top:0; width:7px; height:7px; border-radius:50%;
           background:#333333; transform:translate(-50%,-50%);
           z-index:6; transition:opacity var(--duration-normal) var(--ease-standard); }
.qflip[data-measured] .sf__seam::before{ opacity:0; }

.qflip.measuring .splitflap{ box-shadow:0 0 46px var(--q-glow-soft); }
.qflip:focus-visible .splitflap{ box-shadow:0 0 0 2px var(--q-violet); }

.qstate{ font-family:var(--font-body); font-size:15px; color:var(--color-text-secondary); letter-spacing:0.01em;
         min-height:1.4em; }
.qubit__hint{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--color-text-tertiary);
              min-height:1.2em; transition:color var(--duration-fast) var(--ease-standard); }
.qflip:hover .qubit__hint{ color:var(--color-text-secondary); }

/* ---------- Read-more diagrams (unlock cards) ---------- */
.cardfig{ margin-top:20px; border:1px solid var(--color-border); border-radius:14px; background:#0E0E0E;
          padding:20px 22px 16px; }
.cardfig svg{ width:100%; height:auto; display:block; }
.cardfig .ln{ stroke:rgba(255,255,255,0.42); stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cardfig .ln-dim{ stroke:rgba(255,255,255,0.22); stroke-width:1.2; fill:none; stroke-linecap:round; }
.cardfig .node{ fill:#0E0E0E; stroke:rgba(255,255,255,0.5); stroke-width:1.4; }
.cardfig .acc{ stroke:var(--q-violet); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cardfig .acc-fill{ fill:var(--q-violet); }
.cardfig .cy{ stroke:var(--q-cyan); stroke-width:1.6; fill:none; }
.cardfig text{ fill:rgba(255,255,255,0.5); font-family:var(--font-display); font-size:12px; letter-spacing:0.06em; }
.cardfig text.figbig{ fill:#fff; font-size:27px; font-weight:300; letter-spacing:0; }
.cardfig text.figacc{ fill:var(--q-violet); }

/* ---------- Read-more diagram motion (plays when a card opens) ---------- */
@media (prefers-reduced-motion: no-preference){
  .ucard .cardfig{ opacity:0; transform:translateY(10px);
    transition:opacity .55s var(--ease-standard), transform .55s var(--ease-standard); }
  .ucard.open .cardfig{ opacity:1; transform:none; transition-delay:.12s; }

  /* a pulse of light travels along the concept's accent path */
  .ucard.open .fig-flow{ stroke-dasharray:0.22 0.78; stroke-dashoffset:1;
    animation:figFlow 2.1s linear infinite; }
  .ucard.open .fig-flow--slow{ animation-duration:3.6s; animation-direction:reverse; }
  @keyframes figFlow{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

  /* the active site / electron gently pulses */
  .ucard.open .fig-pulse{ transform-box:fill-box; transform-origin:center;
    animation:figPulse 1.7s var(--ease-standard) infinite; }
  @keyframes figPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.55); opacity:.6; } }

  /* the padlock shackle swings open, then locks shut */
  .ucard.open .fig-lock{ transform-box:fill-box; transform-origin:100% 100%;
    animation:figLock 3.4s var(--ease-standard) infinite; }
  @keyframes figLock{
    0%,16%{ transform:translateY(0) rotate(0deg); }
    36%,64%{ transform:translateY(-4px) rotate(34deg); }
    84%,100%{ transform:translateY(0) rotate(0deg); }
  }
}

/* ============================================================
   Shared widget shell
   ============================================================ */
.widget{ margin-top:48px; border:1px solid var(--color-border); border-radius:var(--radius-card);
         background:var(--color-surface); padding:clamp(26px,3vw,42px); position:relative; overflow:hidden; }
.widget__label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--color-text-tertiary);
                margin-bottom:22px; }
.widget__readout{ font-family:var(--font-body); color:var(--color-text-secondary); font-size:15px; min-height:1.4em; }

.btn{ font-family:var(--font-display); font-size:13px; font-weight:500; letter-spacing:0.02em;
      padding:13px 24px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid transparent;
      transition:background var(--duration-fast) var(--ease-standard),
                 color var(--duration-fast) var(--ease-standard),
                 border-color var(--duration-fast) var(--ease-standard),
                 opacity var(--duration-fast) var(--ease-standard); }
.btn--primary{ background:#fff; color:#0A0A0A; border-color:#fff; }
.btn--primary:hover{ background:transparent; color:#fff; }
.btn--quantum{ background:transparent; color:var(--q-violet); border:1px solid var(--q-violet); }
.btn--quantum:hover{ background:var(--q-violet); color:#0A0A0A; }
.btn--ghost{ background:transparent; color:#fff; border:1px solid var(--color-border-strong); }
.btn--ghost:hover{ border-color:#fff; }
.btn:disabled{ opacity:0.32; cursor:default; pointer-events:none; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ---------- Classical bit — split-flap board ---------- */
.flipboard{ display:flex; gap:16px; cursor:pointer; outline:none; align-items:stretch; }
.flap{ position:relative; height:172px; border-radius:16px; background:#0E0E0E;
       border:1px solid var(--color-border-strong); perspective:900px;
       transition:border-color var(--duration-fast) var(--ease-standard); }
.flipboard:hover .flap{ border-color:rgba(255,255,255,0.26); }
.flap--digit{ flex:0 0 150px; }
.flap--word{ flex:1 1 auto; }
.flap__inner{ position:absolute; inset:0; transform-origin:center center;
              transition:transform 180ms var(--ease-standard); will-change:transform; }
.flap__face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
             font-family:var(--font-display); font-weight:200; color:#fff;
             border-radius:16px; }
.flap--digit .flap__face{ font-size:112px; line-height:1; }
.flap--word .flap__face{ font-size:clamp(48px,8vw,76px); letter-spacing:0.04em; }
.flap__seam{ position:absolute; top:50%; left:0; right:0; height:2px; transform:translateY(-50%);
             background:#000; z-index:3; pointer-events:none; }
.flap__seam::after{ content:''; position:absolute; left:0; right:0; top:2px; height:1px;
             background:rgba(255,255,255,0.05); }
.flipboard:focus-visible .flap{ border-color:var(--color-text-secondary); }
.flip-caption{ margin-top:22px; }
@media (prefers-reduced-motion:reduce){ .flap__inner{ transition:none } }

/* ---------- Quantum coin ---------- */
.coin-demo{ display:flex; gap:48px; align-items:center; flex-wrap:wrap; }
.coin-scene{ width:200px; height:200px; perspective:900px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.coin{ width:170px; height:170px; position:relative; transform-style:preserve-3d; transition:transform 0s; }
.coin.spin{ animation:coinspin 0.7s linear infinite; }
@keyframes coinspin{ to{ transform:rotateY(360deg) } }
.coin__face{ position:absolute; inset:0; border-radius:50%; backface-visibility:hidden;
             border:1px solid var(--color-border-strong); background:#0E0E0E;
             display:flex; align-items:center; justify-content:center;
             font-family:var(--font-display); font-weight:200; font-size:74px; color:#fff; }
.coin__face.back{ transform:rotateY(180deg); color:var(--q-violet); border-color:rgba(124,108,255,0.4); }
.coin.superposed .coin__face{ border-color:rgba(124,108,255,0.45); }
.coin-info{ flex:1 1 240px; min-width:240px; }
.prob{ margin-top:6px; }
.prob__row{ display:flex; align-items:center; gap:14px; margin:10px 0; }
.prob__key{ width:42px; font-family:var(--font-display); color:var(--color-text-secondary); font-size:15px; }
.prob__bar{ flex:1; height:8px; border-radius:var(--radius-pill); background:#0E0E0E;
            border:1px solid var(--color-border); overflow:hidden; }
.prob__fill{ height:100%; width:50%; border-radius:var(--radius-pill);
             background:var(--q-violet); transition:width var(--duration-normal) var(--ease-standard); }
.prob__fill.cyan{ background:var(--q-cyan); }
.prob__pct{ width:48px; text-align:right; font-family:var(--font-display); color:var(--color-text-secondary); font-size:14px; }
.tally{ display:flex; gap:6px; flex-wrap:wrap; margin-top:18px; }
.tally__chip{ width:26px; height:26px; border-radius:50%; border:1px solid var(--color-border);
              display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--color-text-secondary);
              font-family:var(--font-display); }
.tally__chip.one{ color:var(--q-violet); border-color:rgba(124,108,255,0.4); }

/* ---------- Bloch sphere ---------- */
.bloch-demo{ display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:center; }
@media (max-width:760px){ .bloch-demo{ grid-template-columns:1fr; gap:28px; } }
.bloch-stage{ position:relative; width:340px; height:340px; justify-self:center; touch-action:none; cursor:grab; }
.bloch-stage:active{ cursor:grabbing; }
.bloch-stage canvas{ width:100%; height:100%; display:block; }
.bloch-hint{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
             font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-tertiary); }
.bloch-state{ font-family:var(--font-display); font-size:15px; color:var(--color-text-secondary); margin-bottom:18px; }
.bloch-state b{ color:#fff; font-weight:400; }

/* ---------- Scaling ---------- */
.scale-demo{ }
.scale-qubits{ font-family:var(--font-display); font-size:15px; color:var(--color-text-secondary); margin-bottom:16px; }
.scale-qubits b{ color:#fff; font-weight:500; font-size:18px; }
.scale-grid{ display:flex; gap:34px; align-items:center; }
.scale-left{ flex:1 1 auto; min-width:0; }
.scale-dotbox{ flex:0 0 auto; width:258px; height:258px; position:relative; }
.scale-dotbox canvas{ width:100%; height:100%; display:block; }
@media (max-width:620px){ .scale-grid{ flex-direction:column; align-items:flex-start; gap:22px; }
  .scale-dotbox{ width:100%; height:220px; } }
.scale-number{ font-family:var(--font-display); font-weight:200; letter-spacing:-0.02em; line-height:1;
               font-size:clamp(40px,6vw,74px); }
.scale-number .accent-word{ font-weight:200; }
.scale-words{ color:var(--color-text-secondary); font-size:17px; margin-top:12px; min-height:1.6em; }
.scale-compare{ color:var(--color-text-tertiary); font-size:14px; margin-top:4px; min-height:1.4em; }
input[type=range].slider{ -webkit-appearance:none; appearance:none; width:100%; height:2px; margin:32px 0 6px;
  background:var(--color-border-strong); border-radius:2px; outline:none; }
input[type=range].slider::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--q-violet); cursor:pointer; box-shadow:0 0 0 5px rgba(124,108,255,0.16); border:none; }
input[type=range].slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--q-violet);
  cursor:pointer; border:none; box-shadow:0 0 0 5px rgba(124,108,255,0.16); }

/* ---------- Entanglement ---------- */
.ent-demo{ }
.ent-stage{ position:relative; height:248px; margin-bottom:46px; touch-action:none; }
.ent-wire{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:1; }
#entGrad .g0{ stop-color:#7C6CFF; } #entGrad .g1{ stop-color:#34E3FF; }
.ent-wire line{ stroke:var(--color-border-strong); stroke-width:2; stroke-dasharray:6 9; stroke-linecap:round;
  transition:stroke-width var(--duration-fast) var(--ease-standard); }
.ent-stage.linked .ent-wire line{ stroke:url(#entGrad); stroke-width:2.5; stroke-dasharray:10 9;
  filter:drop-shadow(0 0 5px rgba(124,108,255,0.5)); animation:entFlow 1.1s linear infinite; }
@keyframes entFlow{ to{ stroke-dashoffset:-19; } }
.ent-stage.flashwire .ent-wire line{ animation:entWireFlash 0.6s var(--ease-standard); }
@keyframes entWireFlash{
  0%{ filter:drop-shadow(0 0 5px rgba(124,108,255,0.5)); stroke-width:2.5; }
  24%{ filter:drop-shadow(0 0 16px rgba(124,108,255,1)); stroke-width:4.5; }
  100%{ filter:drop-shadow(0 0 5px rgba(124,108,255,0.5)); stroke-width:2.5; } }

.ent-q{ width:116px; height:116px; position:absolute; left:0; top:0; border-radius:50%; border:1px solid var(--color-border-strong);
        display:flex; align-items:center; justify-content:center; flex-direction:column;
        font-family:var(--font-display); background:#0E0E0E; z-index:2; }
.ent-q .val{ font-size:50px; font-weight:200; line-height:1; }
.ent-q .name{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-tertiary); margin-top:6px; }
.ent-q .loc{ position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-body); font-size:11px; color:var(--color-text-tertiary); }
.ent-q.q1 .val{ color:var(--q-violet); }
.ent-q.measuring{ animation:entPulse 0.5s var(--ease-standard); }
@keyframes entPulse{ 0%{ transform:scale(1) } 50%{ transform:scale(1.06) } 100%{ transform:scale(1) } }

/* draggable Qubit B */
.ent-q.q1{ cursor:grab; touch-action:none;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.ent-q.q1:hover{ border-color:rgba(124,108,255,0.5); }
.ent-q.q1.dragging{ cursor:grabbing; border-color:var(--q-violet); box-shadow:0 0 0 6px rgba(124,108,255,0.12); }
.ent-grip{ position:absolute; top:-7px; right:-7px; width:26px; height:26px; padding:5px; border-radius:50%;
  background:var(--color-surface); border:1px solid var(--color-border-strong); color:var(--color-text-tertiary);
  transition:color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.ent-q.q1:hover .ent-grip, .ent-q.q1.dragging .ent-grip{ color:var(--q-violet); border-color:var(--q-violet); }
.ent-hint{ position:absolute; z-index:3; pointer-events:none; white-space:nowrap; transform:translate(-50%,-50%);
  font-family:var(--font-body); font-size:11px; color:var(--q-violet);
  background:rgba(124,108,255,0.12); border:1px solid rgba(124,108,255,0.4); border-radius:var(--radius-pill); padding:4px 11px;
  transition:opacity var(--duration-normal) var(--ease-standard); }
.ent-hint.gone{ opacity:0; }

.ent-link{ position:absolute; z-index:3; pointer-events:none; transform:translate(-50%,-50%); }
.ent-link__tag{ display:block; white-space:nowrap;
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-secondary);
  background:var(--color-surface); padding:4px 13px; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); }
.ent-link:not(.linked) .ent-link__tag{ color:var(--color-text-tertiary); }

@media (prefers-reduced-motion:reduce){
  .ent-stage.linked .ent-wire line{ animation:none; }
}
.ent-trials{ display:flex; gap:8px; flex-wrap:nowrap; margin:6px 0 24px; align-items:center; min-height:54px; }
.ent-trials:empty::before{ content:'Your measurements will appear here'; font-family:var(--font-body);
  font-size:13px; color:var(--color-text-tertiary); }
.ent-trial{ display:flex; flex-direction:column; gap:4px; align-items:center; }
.ent-trial span{ width:24px; height:24px; border-radius:5px; border:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-family:var(--font-display); color:var(--color-text-secondary); }
.ent-summary{ font-size:15px; color:var(--color-text-secondary); margin-top:18px; min-height:1.5em; }
.ent-summary b{ color:#fff; font-weight:500; }
.toggle-pills{ display:inline-flex; border:1px solid var(--color-border-strong); border-radius:var(--radius-pill); padding:4px; gap:4px; }
.toggle-pills button{ font-family:var(--font-display); font-size:12px; font-weight:500; letter-spacing:0.04em;
  padding:8px 16px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--color-text-secondary); cursor:pointer;
  transition:all var(--duration-fast) var(--ease-standard); }
.toggle-pills button.active{ background:#fff; color:#0A0A0A; }

/* ---------- Search race ---------- */
.race{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:680px){ .race{ grid-template-columns:1fr; } }
.race-col h4{ font-size:15px; font-weight:500; margin-bottom:4px; }
.race-col .who{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-text-tertiary); margin-bottom:16px; }
.race-grid{ display:grid; grid-template-columns:repeat(16,1fr); gap:5px; }
.race-cell{ aspect-ratio:1; border-radius:5px; border:1px solid var(--color-border); background:#0E0E0E;
  transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast); }
.race-cell.checked{ background:#1C1C1C; border-color:var(--color-border-strong); }
.race-cell.amp{ background:rgba(124,108,255,0.16); border-color:rgba(124,108,255,0.35); }
.race-cell.found{ background:var(--q-cyan); border-color:var(--q-cyan); }
.race-count{ margin-top:16px; font-family:var(--font-display); font-size:14px; color:var(--color-text-secondary); }
.race-count b{ font-size:32px; font-weight:300; color:#fff; display:block; line-height:1.1; }

/* ---------- Unlock cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:48px; }
@media (max-width:680px){ .cards{ grid-template-columns:1fr; } }
.ucard{ border:1px solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface);
  padding:30px 30px 28px; cursor:pointer; transition:border-color var(--duration-fast) var(--ease-standard),
  background var(--duration-fast) var(--ease-standard); }
.ucard:hover{ border-color:var(--color-border-strong); background:var(--color-surface-hover); }
.ucard__icon{ width:34px; height:34px; color:var(--q-violet); margin-bottom:20px; }
.ucard__icon svg{ width:100%; height:100%; stroke:currentColor; stroke-width:1.4; fill:none; }
.ucard h4{ font-size:21px; font-weight:500; margin-bottom:8px; }
.ucard__teaser{ color:var(--color-text-secondary); font-size:15px; }
.ucard__more{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-normal) var(--ease-standard); }
.ucard__more > div{ overflow:hidden; }
.ucard.open .ucard__more{ grid-template-rows:1fr; }
.ucard__body{ color:var(--color-text-secondary); font-size:15px; line-height:1.65; padding-top:16px; }
.ucard__toggle{ margin-top:18px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--q-violet);
  display:flex; align-items:center; gap:8px; }
.ucard__toggle .pm{ transition:transform var(--duration-fast) var(--ease-standard); }
.ucard.open .ucard__toggle .pm{ transform:rotate(45deg); }

/* ---------- Closing ---------- */
.closing{ background:var(--color-bg-pure-black); overflow:hidden; }
.closing .h-section{ max-width:18ch; }
.closing__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px);
                gap:clamp(40px,5vw,80px); align-items:center; }
.closing__grid .col{ max-width:600px; }
/* Avoid single-word last lines (widows) in the closing copy at large viewports */
.closing__grid .col .lede{ text-wrap:pretty; }
@media (max-width:900px){
  .closing__grid{ grid-template-columns:1fr; gap:48px; }
}
.idea-anim{ position:relative; width:100%; height:440px; }
.idea-anim canvas{ width:100%; height:100%; display:block; }
@media (max-width:900px){ .idea-anim{ height:320px; } }
.foot{ border-top:1px solid var(--color-border); padding:40px 0; }
.foot .wrap{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot__note{ font-size:13px; color:var(--color-text-tertiary); max-width:54ch; line-height:1.55; }