/* ==========================================================================
   Components — chrome, controls, cards. Flat fills and hairlines only.
   ========================================================================== */

/* --- Preloader ------------------------------------------------------------ */
.preloader {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--void);
}
.preloader[data-done] { pointer-events: none; }
.preloader__inner {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: clamp(2rem, 6vw, 3.25rem);
  width: min(90vw, 420px);
}

/* The machine draws itself inside a ring that fills as the assets arrive. */
.preloader__ring {
  position: relative;
  width: min(58vw, 260px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.preloader__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.preloader__ring circle { fill: none; stroke-width: 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring__track { stroke: var(--line); }
.ring__arc {
  stroke: var(--gold); stroke-linecap: round; opacity: 0;
  transition: stroke-dashoffset 240ms linear;
}

/* Qubits streaming out of the machine, drawn behind the line work. */
.preloader__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.preloader__meta { width: 100%; display: grid; justify-items: center; gap: 0.75rem; }
.preloader__status {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-3);
}
.preloader__count {
  display: flex; align-items: baseline; gap: 0.2rem;
  font-family: var(--font-mono); line-height: 1;
}
.preloader__pct {
  font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 500;
  color: var(--gold); font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.preloader__count small { font-size: var(--step--1); color: var(--paper-3); }
.preloader__bar { width: min(100%, 260px); height: 1px; background: var(--line); position: relative; }
.preloader__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold); transition: width 200ms linear; }
.preloader__name {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-3);
}

/* The curtain that lifts. Two panels so it reads as a shutter, not a fade. */
.preloader__curtain { position: fixed; inset: 0; z-index: 499; pointer-events: none; }
.preloader__curtain span { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--void); }

html.is-loading { overflow: hidden; }

/* --- Scroll progress ------------------------------------------------------- */
.scroll-rail {
  position: fixed; inset-inline: 0; top: 0; height: 2px;
  z-index: 120; pointer-events: none;
  background: var(--line-paper);
}
.scroll-rail__fill { height: 100%; width: 0; background: var(--gold); transition: width 90ms linear; }
.scroll-rail__qubit {
  position: absolute; top: 50%; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  translate: -50% -50%;
  background: var(--gold-lit);
  transition: left 90ms linear;
}

/* --- Navigation ------------------------------------------------------------ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 110;
  height: var(--nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--void) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav__inner {
  width: min(100% - 2.5rem, var(--container-wide));
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--sp-5);
}
.nav__brand {
  display: flex; align-items: center; gap: 0.65rem;
  text-decoration: none; color: var(--paper);
  font-weight: 600; letter-spacing: -0.02em;
  margin-right: auto;
}
.nav__brand img { width: 30px; height: 30px; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.nav__brand-text small {
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper-3);
}

.nav__menu { display: flex; align-items: center; gap: 0.1rem; list-style: none; padding: 0; margin: 0; }
.nav__link {
  position: relative;
  display: block; padding: 0.5rem 0.85rem;
  font-size: var(--step--1); font-weight: 500;
  color: var(--paper-2); text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem;
  height: 1px; background: var(--gold);
  scale: 0 1; transform-origin: left;
  transition: scale var(--dur-2) var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--paper); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link.is-active::after { scale: 1 1; }
.nav__link[aria-current="page"], .nav__link.is-active { color: var(--paper); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; }

.theme-toggle {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line); color: var(--paper-2);
  transition: color var(--dur-1), border-color var(--dur-1);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--line-strong); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* The bars are laid out by the grid rather than pinned to absolute offsets, so
   the button can grow to a 44px touch target without the icon drifting off
   centre — which is what happened the first time it was resized. */
.nav__burger {
  display: none; width: 38px; height: 38px;
  place-content: center; justify-items: center;
  gap: 4px;
  border: 1px solid var(--line);
}
.nav__burger span {
  display: block; width: 17px; height: 1px;
  background: var(--paper);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav__burger { display: grid; }

  .nav__menu {
    position: fixed; inset: var(--nav-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Room for a home-gesture bar or a rounded corner. */
    padding: var(--sp-3) max(var(--sp-5), env(safe-area-inset-left))
             calc(var(--sp-5) + env(safe-area-inset-bottom));
    background: var(--void);
    border-bottom: 1px solid var(--line-strong);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-3) var(--ease-out);
  }
  .nav__menu.is-open { clip-path: inset(0 0 0 0); }

  /* The panel stops partway down the page, so the remainder is scrimmed: it
     reads as behind the menu rather than beside it, and it is a large, obvious
     place to tap to dismiss. Painted by the bar, not the panel, so it can
     cover the whole viewport without the panel having to be full height. */
  .nav::after {
    content: "";
    position: fixed; inset: var(--nav-h) 0 0;
    background: color-mix(in srgb, var(--void) 76%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
    z-index: -1;
  }
  .nav--menu-open::after { opacity: 1; pointer-events: auto; }

  .nav__link {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 3.25rem;                    /* a comfortable thumb target */
    padding: 0.55rem 0.2rem;
    font-size: var(--step-0);
    /* Full strength here: on a desktop bar these are secondary to the page,
       but in the panel the list *is* the content. */
    color: var(--paper);
    border-bottom: 1px solid var(--line);
  }
  /* A chevron, so a row reads as somewhere to go rather than a label. */
  .nav__link::before {
    content: "";
    order: 2;
    width: 7px; height: 7px;
    border-top: 1px solid var(--gold-dim);
    border-right: 1px solid var(--gold-dim);
    rotate: 45deg;
    opacity: 0.7;
  }
  .nav__link::after { display: none; }
  .nav__menu li:last-child .nav__link { border-bottom: 0; }

  /* The current section is named on the left edge rather than by an underline,
     which is invisible on a stacked list. */
  .nav__link[aria-current="page"], .nav__link.is-active {
    box-shadow: inset 2px 0 0 var(--gold);
    padding-left: 0.85rem;
  }

  /* Each item arrives just after the panel does, so the list reads as opening
     rather than as already being there. */
  .nav__menu li {
    opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  }
  .nav__menu.is-open li { opacity: 1; transform: none; }
  .nav__menu.is-open li:nth-child(1) { transition-delay: 60ms; }
  .nav__menu.is-open li:nth-child(2) { transition-delay: 100ms; }
  .nav__menu.is-open li:nth-child(3) { transition-delay: 140ms; }
  .nav__menu.is-open li:nth-child(4) { transition-delay: 180ms; }
  .nav__menu.is-open li:nth-child(5) { transition-delay: 220ms; }
  .nav__menu.is-open li:nth-child(6) { transition-delay: 260ms; }
  .nav__menu.is-open li:nth-child(7) { transition-delay: 300ms; }

  /* Touch targets. 36 and 38px were both under the 44px minimum, and the
     Register button was 34px tall — the smallest thing in the bar was also
     the most important. */
  .theme-toggle { width: 44px; height: 44px; }
  .nav__burger { width: 44px; height: 44px; }
  .nav__actions .btn--sm { min-height: 44px; padding-inline: 1rem; }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .nav__menu li { opacity: 1; transform: none; transition: none; }
  .nav__menu { transition: none; }
  .nav::after { transition: none; }
}

/* At the very narrow end the bar cannot hold the wordmark, the theme toggle,
   the button and the burger at once. The badge alone still links home, and
   dropping the text is better than dropping the primary action. */
@media (max-width: 380px) {
  .nav__brand-text { display: none; }
  .nav__inner { gap: var(--sp-2); }
  .nav__actions { gap: 0.35rem; }
}

@media (max-width: 560px) {
  .nav__inner { gap: var(--sp-3); }
  .nav__brand { font-size: 0.95rem; }
  .nav__brand-text small { display: none; }
}

/* --- Buttons ---------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.9em 1.7em;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em;
  color: var(--on-gold); text-decoration: none;
  background: var(--gold);
  border: 1px solid var(--gold);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.btn:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: var(--on-gold); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn--ghost { background: transparent; color: var(--paper); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--gold); border-color: var(--gold); }

.btn--lg { padding: 1.05em 2.1em; font-size: var(--step-0); }
.btn--sm { padding: 0.6em 1.15em; font-size: var(--step--2); }
.btn--block { display: flex; width: 100%; }

/* --- Chips ------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.35em 0.85em;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-2);
  border: 1px solid var(--line);
}
.chip--gold    { color: var(--gold);    border-color: var(--line-strong); }
.chip--magenta { color: var(--magenta); border-color: color-mix(in srgb, var(--magenta) 34%, transparent); }

.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip--live .chip__dot { animation: pulse-dot 2s var(--ease-in-out) infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* --- Cards ------------------------------------------------------------------- */
.card {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.card:hover { border-color: var(--line-strong); background: var(--ink-3); }
.card__num {
  display: block; margin-bottom: var(--sp-5);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.2em; color: var(--gold-dim);
}
.card h3 { margin-bottom: var(--sp-3); font-size: var(--step-1); }
.card p { color: var(--paper-2); font-size: var(--step--1); }

/* --- Figures (the numbers row) ------------------------------------------------ */
.figure-row {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--line);
}
.figure {
  padding: var(--sp-6) var(--sp-5) var(--sp-6) 0;
  border-bottom: 1px solid var(--line);
}
.figure__value {
  display: block;
  font-size: var(--step-4); font-weight: 600; letter-spacing: -0.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.figure__value small { font-size: 0.42em; letter-spacing: 0.08em; color: var(--gold-dim); margin-left: 0.35em; }
.figure__label {
  display: block; margin-top: var(--sp-3);
  font-size: var(--step--1); color: var(--paper-2);
}
.figure__note {
  display: block; margin-top: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.06em; color: var(--paper-3);
}

/* --- Marquee ------------------------------------------------------------------- */
.marquee {
  --speed: 52s;
  overflow: hidden; position: relative;
  border-block: 1px solid var(--line);
  padding-block: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; gap: 3rem; animation: marquee var(--speed) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-3);
  white-space: nowrap;
}
.marquee__item b { color: var(--gold); font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Accordion --------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%; display: flex; align-items: baseline; gap: var(--sp-4);
  padding: 1.35rem 0.25rem; text-align: left;
  font-size: var(--step-1); font-weight: 500; color: var(--paper);
  transition: color var(--dur-1);
}
.accordion__trigger:hover { color: var(--gold); }
.accordion__trigger span:first-child {
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--gold-dim);
  min-width: 2.6em;
}
.accordion__trigger .accordion__q { flex: 1; }
.accordion__sign { position: relative; width: 14px; height: 14px; flex: none; align-self: center; }
.accordion__sign::before, .accordion__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px;
  background: currentColor; translate: 0 -50%;
  transition: rotate var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.accordion__sign::after { rotate: 90deg; }
.accordion__trigger[aria-expanded="true"] .accordion__sign::after { rotate: 0deg; opacity: 0; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.accordion__trigger[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { color: var(--paper-2); font-size: var(--step-0); padding: 0 3rem 1.6rem 3.4rem; max-width: 74ch; }

/* --- Scroll reveals ------------------------------------------------------------
   Everything arrives from above and settles, as though it dropped into place. */
[data-drop] {
  opacity: 0;
  transform: translate3d(0, -28px, 0);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-drop);
  transition-delay: var(--drop-delay, 0ms);
}
[data-drop].is-in { opacity: 1; transform: none; }

[data-drop="rise"] { transform: translate3d(0, 34px, 0); }

/* The "line" variant slides in from the left. It must NOT clip the element
   itself: a clip-path of zero area makes the target invisible to
   IntersectionObserver, which would deadlock the reveal that sets it. The rule
   underneath wipes across via a pseudo-element instead. */
[data-drop="line"] { transform: translate3d(-14px, 0, 0); }

@media (prefers-reduced-motion: reduce) {
  [data-drop] { opacity: 1; transform: none; }
}

/* Split-line headings: each line drops on its own beat. */
.split-line { display: block; overflow: hidden; }
.split-line > span {
  display: block;
  transform: translate3d(0, -110%, 0);
  transition: transform var(--dur-4) var(--ease-drop);
  transition-delay: var(--drop-delay, 0ms);
}
.is-in .split-line > span, .split-line.is-in > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .split-line > span { transform: none; } }

/* --- The drawing ---------------------------------------------------------
   A single element for the whole first act: it is born in the preloader, moves
   into a fixed stage, and js/saga.js drives its focus, scale and framing from
   scroll until the render takes over. Never duplicated, never cross-faded. */
.qc-draw { display: block; will-change: transform; }
.qc-draw svg { width: 100%; height: auto; color: var(--gold); overflow: visible; }

/* A definite box, and the SVG letterboxes itself inside it via its viewBox.
   Sizing the wrapper from the SVG instead is circular — the SVG's width comes
   from its height, which comes from the wrapper — and collapses to zero. */
.preloader .qc-draw { width: 100%; height: 72%; opacity: 0; }
.preloader .qc-draw svg { width: 100%; height: 100%; }

.qc-stage {
  position: fixed; inset: 0;
  z-index: 0;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  will-change: filter, opacity;
  contain: strict;
}
.qc-stage .qc-draw {
  width: auto; height: min(74vh, 660px);
  will-change: transform;
}
.qc-stage .qc-draw svg { width: auto; height: 100%; stroke-width: var(--qc-stroke, 2.4); }

/* Without JS or WebGL the drawing simply sits still behind the page. */
.qc-stage[data-static] { opacity: 1; }

/* --- Ambient canvas -------------------------------------------------------- */
.ambient {
  position: fixed; inset: 0;
  /* <canvas> is a replaced element: `inset: 0` alone will not stretch it. */
  width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
  opacity: 0.85;
}

/* Page content rides above the fixed drawing behind it.
   `.nav` is deliberately *not* in this list. It needs `position: fixed` and a
   z-index above the page, and this rule — same specificity, later in the file —
   was quietly overriding both: the navbar had stopped being fixed at all, on
   every page and every width, and on mobile the open menu painted underneath
   the hero. `.nav` sets its own stacking above. */
main, .footer { position: relative; z-index: 1; }

/* --- Hero entrance ---------------------------------------------------------- */
[data-hero-in] {
  opacity: 0; transform: translate3d(0, -22px, 0);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-drop);
  transition-delay: var(--drop-delay, 0ms);
}
[data-hero-in].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-hero-in] { opacity: 1; transform: none; } }

/* --- Code blocks ------------------------------------------------------------ */
.codeblock {
  overflow-x: auto;
  padding: 1rem 1.1rem;
  margin-top: 0.9rem;
  background: var(--void);
  border: 1px solid var(--line);
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--paper-2);
}
.codeblock code { color: inherit; }

/* The landing page's loading screen has no drawing to trace — it is short,
   because there is nothing heavy behind it. */
.preloader--light .preloader__ring { width: min(44vw, 190px); }
.preloader__badge { width: 58%; height: auto; opacity: 0.9; }

/* --- The drawing, kept behind the landing page ----------------------------
   Same node the preloader traced, handed over on the hand-off and left there.
   Unlike `.qc-stage` on the machine page — where scroll drives its focus and
   framing until the render takes over — this one just stays: a large, quiet
   object the copy sits in front of for the whole page. */
.qc-backdrop {
  position: fixed; inset: 0;
  z-index: 0;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  contain: strict;
  transition: opacity 1.4s var(--ease-out);
}
.qc-backdrop.is-in { opacity: 1; }
/* The drift lives on the container, not the drawing: the hand-off FLIPs the
   drawing with an inline transform, which would win over anything set here. */
.qc-backdrop {
  transform: translate3d(0, var(--qc-shift, 0px), 0);
  will-change: transform, opacity;
}
.qc-backdrop .qc-draw {
  width: auto; height: min(104vh, 980px);
  /* Out of focus and very faint: the copy has to win. Same treatment the
     machine page gives it behind its own hero, which is what makes the two
     pages read as one object seen twice. */
  opacity: 0.13;
  filter: blur(2px);
}
.qc-backdrop .qc-draw svg {
  width: auto; height: 100%;
  stroke-width: 1.1;
  color: var(--gold);
}
/* Darkest through the middle, where the type is. */
.qc-backdrop::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 46% at 50% 46%,
    rgb(from var(--ink) r g b / 0.92) 0%,
    rgb(from var(--ink) r g b / 0.55) 55%,
    transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .qc-backdrop { transform: none; }
}
@media (max-width: 760px) {
  /* Narrower than the drawing, so it reads as texture rather than a subject
     the copy is fighting. */
  .qc-backdrop .qc-draw { height: min(86vh, 680px); opacity: 0.1; }
}

/* --- The two calls to action ----------------------------------------------
   Register is the point of the page and the machine is the thing people came
   back to tell us they loved, so both are headline buttons. They are the same
   size and weight and differ only in fill: solid gold commits, outlined gold
   invites. */
.btn--hero { box-shadow: 0 0 0 6px rgb(from var(--gold) r g b / 0.10); }
.btn--hero:hover { box-shadow: 0 0 0 9px rgb(from var(--gold) r g b / 0.14); }

.btn--machine {
  background: rgb(from var(--gold) r g b / 0.07);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 6px rgb(from var(--gold) r g b / 0.06);
}
.btn--machine:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 0 0 9px rgb(from var(--gold) r g b / 0.14);
}
/* A qubit, sitting in the button, keeping time. */
.btn__pulse {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.btn__pulse::after {
  content: '';
  position: absolute; inset: -5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  animation: btn-pulse 2.4s var(--ease-out) infinite;
}
@keyframes btn-pulse {
  0%   { opacity: 0.85; transform: scale(0.6); }
  70%  { opacity: 0;    transform: scale(1.5); }
  100% { opacity: 0;    transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .btn__pulse::after { animation: none; opacity: 0.5; }
}