/* Q-Day · base v2: tokens, type, surfaces, the shell (bar, nav, pill, HUD, tab bar, footer, marquee), shared
   components, and the styles of the FX layer (js/fx/).

   Palette v2: a near-black ground, white-hot light, ember heat, steel for cool states. One meaning per signal:
     --hot / --ember   exposed keys, open upgrades (heat)
     --cool / --steel  no signature found, locked upgrades, P-256
     --alarm           a real canary claim, nothing else
   Type: Mona Sans only. Display is wide and heavy (wdth 125, wght 800 to 900), body is normal width (wdth 100,
   wght 400 to 560), JetBrains Mono carries data and labels. Glow is crisp: a white-hot fill under layered shadows
   (a tight white edge, a mid ember halo, a wide ember bloom), never a blurred fill.
   Motion: one easing family (--ease-out, --ease-io). Under reduced motion nothing moves. */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@property --qfx-gb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  /* v2 palette */
  --bg: #050403;
  --white-hot: #fff6ea;
  --ember: #ff5a1f;
  --flame: #ff9a3c;
  --deep-red: #b3200e;
  --steel: #8fb3ff;

  /* ground and surfaces (the old names stay, pages use them) */
  --soot: var(--bg);
  --panel: #0b0806;
  --panel-2: #110c09;
  --panel-3: #1a130f;
  --hair: rgba(255, 214, 170, 0.09);
  --hair-2: rgba(255, 214, 170, 0.15);
  --hair-3: rgba(255, 214, 170, 0.26);

  /* ink: --ink-3 and --ink-4 keep AA (4.5:1) on the ground */
  --ink: #f7efe6;
  --ink-2: rgba(247, 239, 230, 0.78);
  --ink-3: rgba(247, 239, 230, 0.6);
  --ink-4: rgba(247, 239, 230, 0.5);

  /* black-body ramp (Planck's law through the CIE 1931 observer), used by the hero and the charts */
  --k1000: #ff3f00; --k1500: #ff7000; --k1900: #ff8700; --k2500: #ffa64a; --k3200: #ffbf7a;
  --k4000: #ffd4a5; --k5000: #ffe7d0; --k6500: #fff9fe; --k10000: #cdd9ff; --k15000: #b5c9ff;
  --core: #fff7f9;
  --heat: linear-gradient(90deg, var(--k1000), var(--k1500) 13%, var(--k1900) 21%, var(--k2500) 30%, var(--k3200) 39%, var(--k4000) 47%, var(--k5000) 55%, var(--k6500) 64%, var(--k10000) 80%, var(--k15000));

  /* signals */
  --hot: var(--ember);
  --hot-glow: rgba(255, 90, 31, 0.55);
  --cool: var(--steel);
  --cool-glow: rgba(143, 179, 255, 0.5);
  --warm: #ffd4a5;
  --alarm: #ff2e4d;

  /* crisp glow: tight white edge, mid ember halo, wide ember bloom */
  --glow-hot: 0 0 1px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 246, 234, 0.45), 0 0 14px rgba(255, 90, 31, 0.36), 0 0 52px rgba(255, 90, 31, 0.2);
  --glow-ember: 0 0 1px rgba(255, 214, 170, 0.85), 0 0 12px rgba(255, 90, 31, 0.5), 0 0 48px rgba(255, 90, 31, 0.28);
  --glow-steel: 0 0 1px rgba(240, 245, 255, 0.85), 0 0 12px rgba(143, 179, 255, 0.45), 0 0 44px rgba(143, 179, 255, 0.24);
  --glow-alarm: 0 0 1px rgba(255, 220, 225, 0.9), 0 0 12px rgba(255, 46, 77, 0.55), 0 0 44px rgba(255, 46, 77, 0.3);

  /* fine noise for glass, and the film grain */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");

  /* type */
  --sans: "Mona Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(50px, 8.6vw, 136px);
  --fs-h1: clamp(42px, 6.2vw, 96px);
  --fs-h2: clamp(34px, 4.5vw, 66px);
  --fs-h3: clamp(20px, 1.8vw, 26px);
  --fs-lead: clamp(16px, 0.55vw + 13px, 19px);
  --fs-body: 16px;
  --fs-sm: 13.5px;
  --fs-label: 11px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.7, 0, 0.3, 1);
  --t-fast: 0.18s;
  --t-med: 0.36s;
  --t-slow: 0.7s;

  /* layout */
  --bar-h: 58px;
  --tab-h: 62px;
  --gut: 16px;
  --maxw: 1320px;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%;
  /* a page element wider than the screen must never widen the phone layout viewport (it would push the fixed tab
     bar off screen): clip, which unlike hidden makes no scroll container, so the sticky bar keeps working */
  overflow-x: clip;
  scroll-padding-top: calc(var(--bar-h) + 12px);
  scrollbar-color: rgba(255, 180, 130, 0.22) transparent;
}
/* body stays transparent so the ambient and cursor light layers (z-index -1 and -2) show on the ground */
body {
  margin: 0; min-height: 100svh; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; font-weight: 430; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
}
::selection { background: rgba(255, 90, 31, 0.4); color: #fff; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
b, strong { font-weight: 650; }
code, .mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--white-hot); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.22); }
main:focus { outline: none; box-shadow: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--white-hot); color: var(--bg); font-weight: 700; }
.skip:focus { left: 8px; }
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin: 0 auto; }

/* ================================================================ type */
.display {
  margin: 0; font-stretch: 125%; font-weight: 900; font-size: var(--fs-display); line-height: 0.9; letter-spacing: -0.034em;
  color: var(--white-hot); text-wrap: balance;
}
.h-sec {
  margin: 0; font-stretch: 125%; font-weight: 860; font-size: var(--fs-h2); line-height: 0.96; letter-spacing: -0.028em;
  color: var(--white-hot); text-wrap: balance;
}
.h-sec.sm { font-size: clamp(28px, 3.1vw, 44px); line-height: 1; letter-spacing: -0.022em; }
.h3 { margin: 0; font-stretch: 112%; font-weight: 760; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.012em; color: var(--white-hot); }

/* glow utilities: a sharp white-hot (or ember, steel) fill under layered shadows */
.glow, .glow-hot, .h-sec .glow { color: var(--white-hot); text-shadow: var(--glow-hot); }
.glow-ember { color: #ff8f45; text-shadow: var(--glow-ember); }
.glow-steel { color: #d4e1ff; text-shadow: var(--glow-steel); }
.glow-alarm { color: #ff7d91; text-shadow: var(--glow-alarm); }
/* hot metal: white at the top, cooling to flame at the foot. The glow is a filter, so the gradient fill stays clean */
.text-heat {
  background: linear-gradient(180deg, #ffffff 6%, var(--white-hot) 36%, #ffc28a 70%, #ff8a3d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 90, 31, 0.3)) drop-shadow(0 0 40px rgba(255, 90, 31, 0.16));
}
/* a slow light sweep across white-hot type (animates on desktop only) */
.text-sheen {
  background: linear-gradient(100deg, var(--white-hot) 0%, var(--white-hot) 40%, #ffffff 46%, #ffc99a 50%, var(--white-hot) 55%, var(--white-hot) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(255, 90, 31, 0.3)) drop-shadow(0 0 40px rgba(255, 90, 31, 0.15));
}
html.fx-fine:not(.fx-lite):not(.reduced) .text-sheen { animation: qfx-sheen 7s var(--ease-io) infinite; }
@keyframes qfx-sheen { 0%, 52% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

.kicker {
  margin: 0 0 14px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap;
  font-family: var(--mono); font-size: 11px; line-height: 1.45; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.kicker b { font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; color: var(--white-hot); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.kicker .dot {
  flex: none; width: 6px; height: 6px; margin-top: calc((1.45em - 6px) / 2); border-radius: 50%; background: var(--white-hot);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.16), 0 0 10px 1px rgba(255, 90, 31, 0.85);
}
.beat .kicker .dot.live { animation: thump 0.62s ease-out 1; }
.lead { margin: 16px 0 0; font-size: var(--fs-lead); line-height: 1.55; font-weight: 420; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.fine { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.caps { font-family: var(--mono); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
/* one small data caption per visual, at most */
.caption { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.tnum { font-variant-numeric: tabular-nums; }

/* ================================================================ surfaces */
.glass {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(255, 238, 220, 0.06), rgba(255, 238, 220, 0.016) 55%, rgba(255, 238, 220, 0.03)), var(--noise), rgba(9, 7, 5, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.08), inset 0 0 50px -24px rgba(255, 90, 31, 0.22), 0 24px 70px -36px rgba(0, 0, 0, 0.95);
}
html.fx-fine:not(.fx-lite) .glass { -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); }
.rule-hot { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, rgba(255, 154, 60, 0.5) 30%, rgba(255, 246, 234, 0.7) 50%, rgba(255, 154, 60, 0.5) 70%, transparent); }

/* ================================================================ buttons, chips, status tags */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 20px;
  border-radius: 12px; border: 1px solid var(--hair-3);
  background: linear-gradient(180deg, rgba(255, 246, 234, 0.07), rgba(255, 246, 234, 0.02)), rgba(12, 9, 7, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.08), 0 8px 24px -14px rgba(0, 0, 0, 0.9);
  font-weight: 640; font-size: 14.5px; font-stretch: 104%; letter-spacing: 0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; color: var(--ink);
  transition: border-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), color var(--t-med), transform var(--t-fast) var(--ease-out), translate 0.45s var(--ease-out);
}
.btn:hover { border-color: rgba(255, 196, 150, 0.55); box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.12), 0 0 0 1px rgba(255, 90, 31, 0.12), 0 0 26px -6px rgba(255, 90, 31, 0.5); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn .ic { width: 15px; height: 15px; }
.btn.primary {
  border: 0; overflow: hidden; color: #1c0d04;
  background: radial-gradient(130% 160% at 22% 0%, #ffffff 0%, var(--white-hot) 42%, #ffd6ae 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), inset 0 -2px 8px rgba(255, 130, 50, 0.28), 0 12px 32px -12px rgba(255, 90, 31, 0.8), 0 0 44px -10px rgba(255, 154, 60, 0.6);
  font-weight: 760; font-stretch: 112%; letter-spacing: 0.01em;
}
.btn.primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.95) 48%, rgba(255, 220, 190, 0.5) 54%, transparent 68%);
  translate: -110% 0; transition: translate 0.8s var(--ease-out);
}
.btn.primary:hover { box-shadow: inset 0 0 0 1px #fff, inset 0 -2px 8px rgba(255, 130, 50, 0.3), 0 14px 38px -10px rgba(255, 90, 31, 0.95), 0 0 64px -8px rgba(255, 154, 60, 0.75); }
.btn.primary:hover::after { translate: 110% 0; }
.btn[disabled], .btn.is-off { opacity: 0.45; pointer-events: none; }
.btn.copied { border-color: var(--cool); color: var(--cool); }
.linkish { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: copy; overflow-wrap: anywhere; }
.linkish:hover { color: #fff; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--hair-2); background: linear-gradient(180deg, rgba(255, 246, 234, 0.05), rgba(255, 246, 234, 0.015)), rgba(10, 8, 6, 0.7);
  font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
}
.chip b { color: var(--white-hot); font-weight: 600; font-family: var(--mono); font-size: 12px; }
.ustat {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px;
  font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; vertical-align: 1px;
  color: var(--ink-2); border: 1px solid var(--hair-3);
}
.ustat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.ustat[data-u="open"], .ustat[data-u="proxy"] { color: #ff7a3d; border-color: rgba(255, 90, 31, 0.55); box-shadow: 0 0 16px -6px var(--hot-glow); }
.ustat[data-u="locked"] { color: var(--cool); border-color: rgba(143, 179, 255, 0.55); box-shadow: 0 0 16px -6px var(--cool-glow); }
.ustat[data-u="not-deployed"], .ustat[data-u="unknown"] { color: var(--ink-3); border-style: dashed; }
.ustat[data-u="not-deployed"]::before, .ustat[data-u="unknown"]::before { box-shadow: none; }
.ustat[data-u="none"] { color: var(--warm); }
.ustat[data-u="nocode"], .ustat[data-u="error"] { color: var(--ink-3); }
/* the canary address runs code other than the reviewed build (js/data/chain.js). Hot, not --alarm: that color is
   kept for a real claim. */
.ustat[data-u="mismatch"] { color: var(--hot); border-color: var(--hot); box-shadow: 0 0 16px -6px var(--hot-glow); font-weight: 800; }
.tagdash {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); border: 1px dashed var(--hair-3); border-radius: 6px; padding: 3px 7px; white-space: nowrap;
}
.tagdash.cool { color: var(--steel); border-color: rgba(143, 179, 255, 0.5); }
.tagdash.hot { color: var(--flame); border-color: rgba(255, 154, 60, 0.55); }
.is-off { opacity: 0.5; cursor: default; }

/* ================================================================ top bar */
.bar {
  position: sticky; top: 0; z-index: 40; height: var(--bar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 var(--gut);
  background: linear-gradient(180deg, rgba(5, 4, 3, 0.86), rgba(5, 4, 3, 0.64));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  animation: qfx-drop 0.9s var(--ease-out) both;
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 214, 170, 0.04), rgba(255, 214, 170, 0.13) 25%, rgba(255, 154, 60, 0.3) 50%, rgba(255, 214, 170, 0.13) 75%, rgba(255, 214, 170, 0.04));
}
@keyframes qfx-drop { from { opacity: 0; translate: 0 -8px; } }

/* the brand lockup: the Q mark and the wordmark, whose hyphen is the TODAY to Q-DAY scrubber */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; justify-self: start; color: var(--white-hot); }
.mark { width: 28px; height: 28px; flex: none; display: block; object-fit: contain; filter: drop-shadow(0 0 7px rgba(255, 90, 31, 0.45)); transition: filter var(--t-med); }
.brand:hover .mark { filter: drop-shadow(0 0 9px rgba(255, 154, 60, 0.75)) drop-shadow(0 0 2px rgba(255, 246, 234, 0.6)); }
.beat .bar .mark { animation: markbeat 0.62s ease-out 1; }
@keyframes markbeat { 12% { filter: drop-shadow(0 0 8px rgba(255, 246, 234, 0.9)) drop-shadow(0 0 16px rgba(255, 90, 31, 0.8)); } }
.qwm {
  display: inline-block; white-space: nowrap; font-family: var(--sans); font-stretch: 125%; font-weight: 900; font-size: 16px; line-height: 1;
  letter-spacing: 0.012em; color: var(--white-hot); text-shadow: 0 0 1px rgba(255, 255, 255, 0.55), 0 0 12px rgba(255, 90, 31, 0.3);
}
.qwm-scrub {
  position: relative; display: inline-block; vertical-align: 0.27em; width: 0.8em; height: 0.17em; margin: 0 0.1em 0 0.15em; border-radius: 1em;
  background: linear-gradient(90deg, var(--white-hot) 0%, #ffc48f 30%, #ff7a2e 66%, #e2401a 100%);
  box-shadow: 0 0 0.3em rgba(255, 90, 31, 0.75), 0 0 0.8em rgba(255, 90, 31, 0.32);
}
.qwm-knob {
  position: absolute; left: -0.05em; top: 50%; width: 0.3em; height: 0.3em; margin-top: -0.15em; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0.045em rgba(255, 246, 234, 0.4), 0 0 0.28em #fff, 0 0 0.7em rgba(255, 90, 31, 0.95);
  transition: left 0.9s var(--ease-out), box-shadow 0.4s;
}
.brand:hover .qwm-knob, .foot-giant:hover .qwm-knob { left: calc(100% - 0.25em); }
.beat .bar .qwm-knob { animation: knobbeat 0.62s ease-out 1; }
@keyframes knobbeat { 14% { box-shadow: 0 0 0 0.09em rgba(255, 246, 234, 0.55), 0 0 0.45em #fff, 0 0 1.1em rgba(255, 90, 31, 1); } }

/* desktop nav: a segmented track with a sliding pill (js/fx/nav.js sets --x and --w) */
.nav { display: none; }
.nav-ind, .nav-hov { position: absolute; left: 0; top: 4px; bottom: 4px; width: var(--w, 0px); transform: translateX(var(--x, 0px)); border-radius: 999px; pointer-events: none; opacity: 0; }
.nav-live .nav-ind, .nav-live .nav-hov { transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), opacity var(--t-med); }
.nav-ind {
  z-index: 0;
  background: radial-gradient(90% 120% at 50% 130%, rgba(255, 90, 31, 0.42), rgba(255, 90, 31, 0) 70%), rgba(255, 246, 234, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 150, 0.24), inset 0 1px 0 rgba(255, 246, 234, 0.14), 0 0 26px -6px rgba(255, 90, 31, 0.6);
}
.nav-ind::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px;
  background: var(--white-hot); box-shadow: 0 0 6px #fff, 0 0 14px rgba(255, 90, 31, 0.95);
}
.nav-hov { z-index: 0; background: rgba(255, 246, 234, 0.045); }
.nav-ind.on, .nav-hov.on { opacity: 1; }

.bar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 11px; min-width: 0;
  border-radius: 999px; border: 1px solid var(--hair-2);
  background: radial-gradient(120% 140% at 0% 50%, rgba(255, 246, 234, 0.08), rgba(255, 246, 234, 0) 60%), rgba(12, 9, 7, 0.78);
  font-family: var(--mono); font-weight: 650; font-size: 10.5px; letter-spacing: 0.12em; white-space: nowrap; color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.06), 0 0 24px -10px rgba(255, 196, 150, 0.4);
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.pill:hover, .pill[aria-expanded="true"] { border-color: rgba(255, 196, 150, 0.5); box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.1), 0 0 28px -6px rgba(255, 90, 31, 0.5); }
.pill-sep { opacity: 0.35; }
.pill-state { color: var(--white-hot); }
.pill-val { color: var(--ink-2); font-family: var(--mono); font-weight: 500; letter-spacing: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.beat-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 90, 31, 0.8); }
.pill[data-state="none"] .beat-dot, .pill[data-state="loading"] .beat-dot, .pill[data-state="error"] .beat-dot { background: transparent; border: 1.5px solid var(--ink-3); box-shadow: none; }
.pill[data-state="alive"] { border-color: rgba(255, 196, 150, 0.4); }
.pill[data-state="alive"] .beat-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255, 154, 60, 0.7);
  animation: qfx-ping 2.4s var(--ease-out) infinite;
}
@keyframes qfx-ping { 0% { transform: scale(0.4); opacity: 1; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.beat .pill[data-state="alive"] .beat-dot { animation: thump 0.62s ease-out 1; }
.pill[data-state="claimed"] { border-color: var(--alarm); box-shadow: 0 0 26px -4px rgba(255, 46, 77, 0.7); }
.pill[data-state="claimed"] .beat-dot { background: var(--alarm); box-shadow: 0 0 10px var(--alarm); animation: alarm 1s ease-in-out infinite; }
.pill[data-state="claimed"] .pill-state { color: #fff; }
@keyframes thump {
  0% { transform: scale(1); } 12% { transform: scale(1.9); box-shadow: 0 0 10px #fff, 0 0 26px var(--core), 0 0 40px rgba(255, 90, 31, 0.85); }
  30% { transform: scale(1.1); } 42% { transform: scale(1.55); } 100% { transform: scale(1); }
}
@keyframes alarm { 50% { opacity: 0.35; } }
.chip-token {
  display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 999px;
  border: 1px solid rgba(255, 154, 60, 0.32);
  background: linear-gradient(180deg, rgba(255, 90, 31, 0.16), rgba(255, 90, 31, 0.04)), rgba(12, 9, 7, 0.7);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; color: #ffd5b3; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 214, 170, 0.12);
  transition: border-color var(--t-med), box-shadow var(--t-med), color var(--t-med);
}
.chip-token:hover { color: #fff; border-color: rgba(255, 154, 60, 0.7); box-shadow: inset 0 1px 0 rgba(255, 214, 170, 0.18), 0 0 22px -6px rgba(255, 90, 31, 0.7); }
.connect {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; width: 38px; padding: 0;
  border-radius: 11px; border: 1px solid var(--hair-3); background: rgba(12, 9, 7, 0.6); color: var(--ink);
  font-weight: 700; font-size: 14px; font-stretch: 110%;
  transition: border-color var(--t-med), box-shadow var(--t-med), translate 0.45s var(--ease-out);
}
.connect span { display: none; }
.connect .ic { width: 17px; height: 17px; }
.connect:hover { border-color: rgba(255, 196, 150, 0.6); box-shadow: 0 0 20px -6px rgba(255, 90, 31, 0.6); }
.connect.on { width: auto; padding: 0 11px; border-color: rgba(143, 179, 255, 0.45); }
.connect.on span { display: inline; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.you-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cool); box-shadow: 0 0 8px var(--cool-glow); }
/* the head-block line: fills over each 12 s slot, resets on every new block (js/shell.js) */
.blockline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; }
.blockline i {
  position: relative; display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(255, 90, 31, 0), rgba(255, 90, 31, 0.55) 45%, #ffc48f 85%, #fff);
  box-shadow: 0 0 8px rgba(255, 90, 31, 0.6);
}
.blockline i::after { content: ""; position: absolute; top: -1px; right: -2px; width: 4px; height: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px #fff, 0 0 14px rgba(255, 90, 31, 0.9); }
.reduced .blockline { display: none; }
.alarm .bar::after { background: linear-gradient(90deg, rgba(255, 46, 77, 0.1), rgba(255, 46, 77, 0.7) 50%, rgba(255, 46, 77, 0.1)); }

/* the canary HUD popover */
.hud {
  position: absolute; right: var(--gut); top: calc(var(--bar-h) + 8px); z-index: 50;
  width: min(560px, calc(100vw - 2 * var(--gut))); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 238, 220, 0.06), rgba(255, 238, 220, 0.015)), var(--noise), rgba(10, 8, 6, 0.985);
  border: 1px solid var(--hair-2);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.08), 0 30px 70px -24px rgba(0, 0, 0, 0.95), 0 0 50px -20px rgba(255, 90, 31, 0.4);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 15px 17px 13px; font-size: 13px;
  animation: qfx-pop 0.36s var(--ease-out) both;
}
@keyframes qfx-pop { from { opacity: 0; translate: 0 -6px; scale: 0.985; } }
.hud header { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-2); margin-bottom: 11px; }
.hud header em { font-style: normal; color: var(--flame); border: 1px dashed rgba(255, 154, 60, 0.5); padding: 2px 6px; border-radius: 5px; letter-spacing: 0.12em; }
.hud header em[data-tag="LIVE"] { color: var(--white-hot); border-style: solid; border-color: rgba(255, 246, 234, 0.45); }
.hud header em[data-tag="CLAIMED"] { color: #fff; background: var(--alarm); border-color: var(--alarm); }
.hud dl { display: grid; grid-template-columns: 88px 1fr; gap: 7px 12px; margin: 0; }
.hud dt { color: var(--ink-3); }
.hud dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.hud dd.mono, .hud .mono { font-size: 12px; color: var(--k5000); }
.hud .fine { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); }
.hud .fine a { color: var(--ink); }

/* ================================================================ phone tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.74), rgba(5, 4, 3, 0.94));
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--hair);
  animation: qfx-rise 0.9s var(--ease-out) 0.1s both;
}
.tabbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 154, 60, 0.35) 50%, transparent);
}
@keyframes qfx-rise { from { opacity: 0; translate: 0 14px; } }
.tab-ind { position: absolute; left: 0; top: 0; width: calc(100% / 6); height: var(--tab-h); pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%)); opacity: 0; }
.nav-live .tab-ind { transition: transform 0.5s var(--ease-out), opacity var(--t-med); }
.tab-ind.on { opacity: 1; }
.tab-ind::before {
  content: ""; position: absolute; left: 50%; top: 8px; width: 50px; height: 30px; margin-left: -25px; border-radius: 11px;
  background: radial-gradient(90% 120% at 50% 130%, rgba(255, 90, 31, 0.5), rgba(255, 90, 31, 0) 70%), rgba(255, 246, 234, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 150, 0.22), inset 0 1px 0 rgba(255, 246, 234, 0.14), 0 0 22px -6px rgba(255, 90, 31, 0.7);
}
.tab-ind::after {
  content: ""; position: absolute; left: 50%; top: -1px; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px;
  background: var(--white-hot); box-shadow: 0 0 6px #fff, 0 0 14px rgba(255, 90, 31, 0.95);
}
.tabbar a {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding-top: 13px;
  text-decoration: none; color: var(--ink-3); font-size: 10.5px; font-weight: 620; font-stretch: 106%; letter-spacing: 0.02em;
  transition: color var(--t-med); -webkit-tap-highlight-color: transparent;
}
.tabbar svg { width: 20px; height: 20px; transition: transform var(--t-fast) var(--ease-out), filter var(--t-med); }
.tabbar a:active svg { transform: scale(0.88); }
.tabbar a[aria-current] { color: var(--white-hot); }
.tabbar a[aria-current] svg { filter: drop-shadow(0 0 4px rgba(255, 246, 234, 0.7)) drop-shadow(0 0 10px rgba(255, 90, 31, 0.8)); }

/* ================================================================ live marquee (data-marquee, js/fx/marquee.js) */
.qm {
  position: relative; display: flex; align-items: center; height: 42px; overflow: hidden;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  border-block: 1px solid var(--hair);
  background: linear-gradient(90deg, rgba(255, 90, 31, 0.06), rgba(255, 246, 234, 0.015) 50%, rgba(255, 90, 31, 0.06));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.qm-track { display: flex; flex: none; width: max-content; will-change: transform; }
.qm-run .qm-track { animation: qfx-marquee var(--qm-dur, 40s) linear infinite; animation-play-state: paused; }
.qm-run.qm-on .qm-track { animation-play-state: running; }
.qm-run.qm-on:hover .qm-track, .fx-paused .qm-run .qm-track { animation-play-state: paused; }
@keyframes qfx-marquee { to { transform: translate3d(calc(-1 * var(--qm-w, 50%)), 0, 0); } }
.qm-group { display: flex; flex: none; align-items: center; }
.qm-item { display: inline-flex; align-items: center; gap: 9px; flex: none; white-space: nowrap; padding: 0 20px 0 0; }
.qm-item::before {
  content: ""; flex: none; width: 4px; height: 4px; margin-right: 11px; transform: rotate(45deg);
  background: var(--flame); box-shadow: 0 0 6px rgba(255, 90, 31, 0.9); opacity: 0.85;
}
.qm-item b { color: var(--white-hot); font-weight: 700; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.qm-live { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 90, 31, 0.9); }
.qm-beat .qm-live { animation: thump 0.62s ease-out 1; }
.reduced .qm { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
.reduced .qm::-webkit-scrollbar { display: none; }

/* ================================================================ footer */
.foot { position: relative; margin-top: 80px; overflow: hidden; }
.foot::before {
  content: ""; position: absolute; left: 50%; bottom: -30%; width: 140%; height: 90%; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 90, 31, 0.12), rgba(179, 32, 14, 0.05) 45%, transparent 70%);
}
.foot-strip { margin: 0; }
.foot-in { width: min(100% - 2 * var(--gut), var(--maxw)); margin: 46px auto 0; display: grid; gap: 36px; }
.foot-brand .qwm { font-size: 22px; }
.foot-brand .mark { width: 34px; height: 34px; }
.foot-brand p { margin: 16px 0 18px; max-width: 30em; color: var(--ink-3); font-size: 14.5px; line-height: 1.55; }
.foot-x {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-3);
  background: rgba(255, 246, 234, 0.03); text-decoration: none; font-weight: 650; font-size: 13.5px; color: var(--ink);
  transition: border-color var(--t-med), box-shadow var(--t-med), translate 0.45s var(--ease-out);
}
.foot-x .x-logo { width: 14px; height: 14px; }
.foot-x:hover { border-color: rgba(255, 196, 150, 0.6); box-shadow: 0 0 24px -8px rgba(255, 90, 31, 0.7); }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.foot-nav div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14.5px; }
.foot-nav b { font-family: var(--mono); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.foot-nav a { position: relative; color: var(--ink-2); text-decoration: none; transition: color var(--t-med); }
.foot-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--white-hot), var(--ember)); transition: transform 0.5s var(--ease-out);
}
.foot-nav a:hover { color: #fff; }
.foot-nav a:hover::after { transform: scaleX(1); }
.foot-nav .is-off { color: var(--ink-4); }
.foot-nav small { color: var(--ink-4); font-size: 12px; }
.foot-live { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.foot-live b { display: block; margin-top: 2px; color: var(--white-hot); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.foot-base { width: min(100% - 2 * var(--gut), var(--maxw)); margin: 40px auto 0; padding-top: 18px; border-top: 1px solid var(--hair); display: grid; gap: 8px; }
.foot-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); max-width: 62em; }
.foot-chain { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-4); }
/* the signature: the wordmark at full width, sinking into the ground; its scrubber knob slides on hover */
/* --gw is the wrap width; the wordmark is sized to span it. Mona Sans: ascent 1.09em, descent 0.32em, caps 0.74em,
   so in a 1em line box the caps run from 14.5% to 88.5%. The box is lifted 0.105em and cropped at about 75% of the caps. */
.foot-giant {
  --gw: min(100vw - 2 * var(--gut), var(--maxw)); --gf: calc(var(--gw) * 0.2368);
  position: relative; width: min(100% - 2 * var(--gut), var(--maxw)); margin: 26px auto 0; height: calc(var(--gf) * 0.6); overflow: hidden;
}
.foot-giant .qwm {
  position: absolute; left: 50%; top: -0.105em; transform: translateX(-50%); font-size: var(--gf); line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 13%, var(--white-hot) 24%, #ffc48f 40%, #ff7a2e 55%, rgba(255, 90, 31, 0.38) 67%, rgba(179, 32, 14, 0) 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(255, 90, 31, 0.28));
}
.foot-giant .qwm-scrub { width: 0.86em; height: 0.1em; vertical-align: 0.32em; box-shadow: 0 0 0.1em rgba(255, 90, 31, 0.85), 0 0 0.36em rgba(255, 90, 31, 0.4); }
.foot-giant .qwm-knob { width: 0.19em; height: 0.19em; margin-top: -0.095em; box-shadow: 0 0 0 0.018em rgba(255, 246, 234, 0.5), 0 0 0.1em #fff, 0 0 0.3em rgba(255, 90, 31, 0.95); transition-duration: 1.4s; }
.foot-giant:hover .qwm-knob { left: calc(100% - 0.15em); }
.foot-giant::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 154, 60, 0.55) 30%, rgba(255, 246, 234, 0.8) 50%, rgba(255, 154, 60, 0.55) 70%, transparent);
  box-shadow: 0 0 18px rgba(255, 90, 31, 0.7);
}

/* ================================================================ toast and sheet */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translate(-50%, 8px);
  max-width: min(520px, calc(100vw - 2 * var(--gut))); padding: 11px 15px; border-radius: 13px;
  border: 1px solid var(--hair-3); background: linear-gradient(180deg, rgba(255, 238, 220, 0.06), rgba(255, 238, 220, 0.02)), rgba(14, 10, 8, 0.97); color: var(--ink); font-size: 13.5px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.08), 0 16px 40px -18px rgba(0, 0, 0, 0.9), 0 0 30px -14px rgba(255, 90, 31, 0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="warn"] { border-color: rgba(255, 154, 60, 0.6); }
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: qfx-fade 0.3s var(--ease-out) both; }
@keyframes qfx-fade { from { opacity: 0; } }
.sheet-box {
  width: min(460px, 100%); margin: 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0; border: 1px solid var(--hair-2); border-bottom: 0;
  background: linear-gradient(180deg, rgba(255, 238, 220, 0.06), rgba(255, 238, 220, 0.015)), var(--noise), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.08), 0 -20px 60px -20px rgba(0, 0, 0, 0.9), 0 0 50px -20px rgba(255, 90, 31, 0.45);
  animation: qfx-sheet 0.5s var(--ease-out) both;
}
@keyframes qfx-sheet { from { translate: 0 30px; opacity: 0; } }
.sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-top b { font-stretch: 115%; font-weight: 760; font-size: 15px; }
.sheet .x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--hair-2); background: none; font-size: 20px; line-height: 1; color: var(--ink-2); }
.wallets { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wallets button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--panel-2); font-weight: 620; font-size: 15px; text-align: left; transition: border-color var(--t-med), box-shadow var(--t-med); }
.wallets button:hover { border-color: rgba(255, 196, 150, 0.55); box-shadow: 0 0 22px -8px rgba(255, 90, 31, 0.6); }
.wallets img { border-radius: 7px; }
.wicon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--panel-3); }
.wicon .ic { width: 16px; height: 16px; }
.sheet-note { margin: 12px 2px 0; font-size: 12.5px; color: var(--ink-3); }
.addr-full { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--hair); font-size: 12.5px; overflow-wrap: anywhere; color: var(--k5000); }
.sheet-actions { display: grid; gap: 8px; }

/* ================================================================ page enter and page error */
/* opacity only: a transform here would make the page the containing block of any position: fixed child */
.page.page-in { animation: qfx-page-in 0.7s var(--ease-out) both; }
@keyframes qfx-page-in { from { opacity: 0; } }
.page-error { padding: 90px 0; }
.page-error h1 { font-stretch: 125%; font-weight: 860; letter-spacing: -0.025em; font-size: clamp(34px, 5vw, 56px); margin: 0 0 10px; }

/* ================================================================ FX layer: global layers (index.html) */
/* ambient light on the ground, tinted per page (html[data-page] is set by the router) */
.fx-amb {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% -12%, rgba(255, 90, 31, 0.13), rgba(255, 90, 31, 0) 70%),
    radial-gradient(44% 36% at 104% 108%, rgba(179, 32, 14, 0.12), rgba(179, 32, 14, 0) 70%),
    radial-gradient(40% 30% at -6% 70%, rgba(255, 154, 60, 0.05), rgba(255, 154, 60, 0) 70%);
}
html[data-page="scan"] .fx-amb {
  background:
    radial-gradient(56% 44% at 82% -10%, rgba(143, 179, 255, 0.1), rgba(143, 179, 255, 0) 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(255, 90, 31, 0.1), rgba(255, 90, 31, 0) 70%);
}
html[data-page="lots"] .fx-amb {
  background:
    radial-gradient(60% 48% at 18% -12%, rgba(255, 154, 60, 0.13), rgba(255, 154, 60, 0) 70%),
    radial-gradient(46% 36% at 100% 104%, rgba(179, 32, 14, 0.14), rgba(179, 32, 14, 0) 70%);
}
html[data-page="canary"] .fx-amb {
  background:
    radial-gradient(54% 44% at 50% -14%, rgba(255, 246, 234, 0.08), rgba(255, 246, 234, 0) 70%),
    radial-gradient(40% 34% at 100% 100%, rgba(143, 179, 255, 0.07), rgba(143, 179, 255, 0) 70%),
    radial-gradient(40% 34% at 0% 100%, rgba(255, 90, 31, 0.09), rgba(255, 90, 31, 0) 70%);
}
html[data-page="lab"] .fx-amb {
  background:
    radial-gradient(60% 40% at 50% 112%, rgba(255, 90, 31, 0.13), rgba(255, 90, 31, 0) 70%),
    radial-gradient(40% 30% at 0% -6%, rgba(255, 154, 60, 0.07), rgba(255, 154, 60, 0) 70%);
}
html[data-page="rules"] .fx-amb {
  background: radial-gradient(50% 40% at 0% -10%, rgba(255, 90, 31, 0.09), rgba(255, 90, 31, 0) 70%);
}
html.alarm .fx-amb { background: radial-gradient(70% 50% at 50% -12%, rgba(255, 46, 77, 0.16), rgba(255, 46, 77, 0) 70%); }

/* the cursor light: an ember pool on the ground that follows the mouse (desktop, js/fx/overlay.js) */
.fx-light {
  position: fixed; left: 0; top: 0; z-index: -1; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none;
  border-radius: 50%; opacity: 0; transition: opacity 0.8s var(--ease-out); will-change: transform;
  background: radial-gradient(closest-side, rgba(255, 130, 50, 0.13), rgba(255, 90, 31, 0.06) 42%, rgba(255, 90, 31, 0.02) 70%, rgba(255, 90, 31, 0));
}
.fx-light.on { opacity: 1; }

/* film grain over everything: overlay blend on desktop, a faint static layer on phones and slow devices */
.fx-grain {
  position: fixed; inset: -120px; z-index: 98; pointer-events: none;
  background-image: var(--grain); background-size: 240px 240px;
  opacity: 0.045;
}
html.fx-fine:not(.fx-lite) .fx-grain { opacity: 0.12; mix-blend-mode: overlay; animation: qfx-grain 0.9s steps(1) infinite; }
@keyframes qfx-grain {
  0% { transform: translate3d(0, 0, 0); } 14% { transform: translate3d(-38px, 22px, 0); } 28% { transform: translate3d(26px, -46px, 0); }
  42% { transform: translate3d(-64px, -18px, 0); } 57% { transform: translate3d(44px, 58px, 0); } 71% { transform: translate3d(-12px, 74px, 0); }
  85% { transform: translate3d(70px, -30px, 0); }
}
/* the vignette: a cinematic falloff at the edges, kept under the bar and the tab bar */
.fx-vig {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(150% 105% at 50% 42%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.32) 100%);
}
@media (min-width: 900px) {
  .fx-vig { background: radial-gradient(120% 95% at 50% 45%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0.45) 100%); }
}

/* route flash: a white-hot burst that collapses into the tap (js/fx/overlay.js flash()) */
.fx-flash {
  position: fixed; z-index: 95; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, #ffffff 0%, rgba(255, 250, 242, 0.96) 3%, rgba(255, 220, 180, 0.72) 8%, rgba(255, 160, 80, 0.42) 18%, rgba(255, 110, 45, 0.2) 32%, rgba(255, 90, 31, 0.07) 50%, rgba(255, 90, 31, 0) 68%);
  mix-blend-mode: screen;
}
.fx-flash-line {
  position: fixed; z-index: 96; height: 2px; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(255, 90, 31, 0), rgba(255, 154, 60, 0.7) 28%, #ffffff 50%, rgba(255, 154, 60, 0.7) 72%, rgba(255, 90, 31, 0));
  box-shadow: 0 0 10px rgba(255, 246, 234, 0.9), 0 0 26px rgba(255, 90, 31, 0.85);
  mix-blend-mode: screen;
}
.fx-veil { position: fixed; inset: 0; z-index: 94; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(120% 90% at 50% 45%, rgba(255, 236, 214, 0.14), rgba(255, 110, 45, 0.07) 55%, rgba(255, 90, 31, 0.02)); }
/* shockwave: an expanding ring and a soft pulse (qfx.shockwave(x, y, color)) */
.fx-shock {
  position: fixed; z-index: 94; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform, opacity; mix-blend-mode: screen;
  border: 2px solid color-mix(in srgb, var(--c, #ff5a1f) 55%, #fff);
  box-shadow: 0 0 18px var(--c, var(--ember)), 0 0 46px color-mix(in srgb, var(--c, #ff5a1f) 60%, transparent), inset 0 0 30px color-mix(in srgb, var(--c, #ff5a1f) 55%, transparent);
}
.fx-shock-glow {
  position: fixed; z-index: 93; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform, opacity; mix-blend-mode: screen;
  background: radial-gradient(closest-side, #fff 0%, color-mix(in srgb, var(--c, #ff5a1f) 85%, #fff) 8%, color-mix(in srgb, var(--c, #ff5a1f) 55%, transparent) 24%, color-mix(in srgb, var(--c, #ff5a1f) 18%, transparent) 46%, transparent 70%);
}

/* ================================================================ FX layer: attribute behaviors */
/* data-reveal (js/fx/reveal.js): hidden only once the FX layer runs (html.fx-reveal), never without JS.
   A waiting element is transparent, so it stays in the accessibility tree and the tab order. It carries no filter
   or transform, and a canvas, video or iframe inside it isn't painted until the reveal: a page that redraws a
   canvas every frame inside a transparent card would otherwise make the compositor redo that card every frame.
   The rise and the blur to sharp run as a one-shot animation while it reveals; after that nothing is left on it. */
html.fx-reveal [data-reveal]:not(.is-in) { opacity: 0; }
html.fx-reveal [data-reveal]:not(.is-in) :is(canvas, video, iframe) { visibility: hidden; }
html.fx-reveal [data-reveal].is-in:not(.is-done) { animation: qfx-reveal 0.9s var(--ease-out) var(--qfx-rd, 0ms) both; }
html.fx-reveal [data-reveal="fade"].is-in:not(.is-done) { animation-name: qfx-reveal-fade; }
html.fx-reveal [data-reveal="scale"].is-in:not(.is-done) { animation-name: qfx-reveal-scale; }
html.fx-reveal [data-reveal="left"].is-in:not(.is-done) { animation-name: qfx-reveal-left; }
html.fx-lite.fx-reveal [data-reveal].is-in:not(.is-done) { animation-name: qfx-reveal-fade; animation-duration: 0.6s; }
@keyframes qfx-reveal { from { opacity: 0; translate: 0 12px; filter: blur(6px); } }
@keyframes qfx-reveal-fade { from { opacity: 0; } }
@keyframes qfx-reveal-scale { from { opacity: 0; scale: 0.96; filter: blur(4px); } }
@keyframes qfx-reveal-left { from { opacity: 0; translate: -18px 0; filter: blur(4px); } }

/* data-ticker (js/fx/ticker.js): digits are generated content; a 20-cell strip rolls under a soft mask while moving.
   The mask is opaque over the cap band only (in a line box of 1lh the caps sit between 0.5lh - 0.36em and
   0.5lh + 0.38em for Mona Sans and JetBrains Mono), so a passing digit fades at the band's edges, never as debris. */
[data-ticker], .qt { font-variant-numeric: tabular-nums; }
.qt { white-space: pre; }
.qt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qt-s::before { content: attr(data-c); }
.qt-d { position: relative; display: inline-block; }
.qt-d::before { content: attr(data-d); }
.qt-d.roll {
  /* 0.3em of side room for the glyph's glow, net zero in layout */
  padding: 0 0.3em; margin: 0 -0.3em;
  -webkit-mask-image: linear-gradient(180deg, transparent calc(0.5lh - 0.44em), #000 calc(0.5lh - 0.3em), #000 calc(0.5lh + 0.32em), transparent calc(0.5lh + 0.46em));
  mask-image: linear-gradient(180deg, transparent calc(0.5lh - 0.44em), #000 calc(0.5lh - 0.3em), #000 calc(0.5lh + 0.32em), transparent calc(0.5lh + 0.46em));
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.qt-d.roll::before { visibility: hidden; }
.qt-r { position: absolute; left: 0.3em; right: 0.3em; top: 0; }
.qt-r::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; }

/* data-glow-border (js/fx/glow-border.js): a conic highlight masked to the 1px border ring, on ::after */
:where([data-glow-border]) { position: relative; isolation: isolate; }
[data-glow-border]::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--qfx-gb-a), rgba(255, 154, 60, 0) 0turn, rgba(255, 154, 60, 0) 0.5turn, var(--gb-a, rgba(255, 90, 31, 0.5)) 0.66turn, var(--gb-b, #ffb27a) 0.78turn, var(--gb-c, #fff6ea) 0.83turn, var(--gb-b, #ffb27a) 0.87turn, rgba(255, 154, 60, 0) 0.97turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: qfx-gb 6.5s linear infinite; animation-play-state: paused;
}
[data-glow-border].qfx-vis::after { animation-play-state: running; }
[data-glow-border="cool"] { --gb-a: rgba(143, 179, 255, 0.45); --gb-b: #b9cdff; --gb-c: #f2f6ff; }
[data-glow-border="alarm"] { --gb-a: rgba(255, 46, 77, 0.5); --gb-b: #ff7d91; --gb-c: #ffe3e7; }
[data-glow-border="static"]::after { animation: none; --qfx-gb-a: 200deg; }
@keyframes qfx-gb { to { --qfx-gb-a: 1turn; } }
.fx-paused [data-glow-border]::after { animation-play-state: paused; }
html.fx-lite [data-glow-border]::after { animation-duration: 12s; }

/* ================================================================ small phones: the pill keeps its dot and state word */
@media (max-width: 419px) {
  .pill-sep, .pill-val { display: none; }
  .pill { padding: 0 11px 0 10px; }
  .bar { gap: 8px; }
  .qwm { font-size: 15px; }
  .brand { gap: 8px; }
  .mark { width: 26px; height: 26px; }
}

/* ================================================================ wider phones and tablets */
@media (min-width: 560px) {
  :root { --gut: 24px; }
  .qwm { font-size: 17px; }
  .pill { height: 36px; padding: 0 14px 0 12px; }
  .chip-token { height: 36px; padding: 0 13px; }
  .connect { height: 36px; }
  .sheet { align-items: center; }
  .sheet-box { border-radius: 20px; border-bottom: 1px solid var(--hair-2); padding-bottom: 18px; }
  .foot-in { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .foot-nav { grid-template-columns: repeat(3, auto); justify-content: space-between; }
}

/* ================================================================ desktop */
@media (min-width: 1024px) {
  :root { --bar-h: 68px; --gut: 32px; --tab-h: 0px; }
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
  .bar-right { justify-self: end; gap: 8px; }
  .qwm { font-size: 18px; }
  .mark { width: 30px; height: 30px; }
  .nav {
    position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
    border: 1px solid var(--hair); background: rgba(255, 246, 234, 0.025); box-shadow: inset 0 1px 0 rgba(255, 246, 234, 0.04);
  }
  .nav a {
    position: relative; z-index: 1; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 560; font-stretch: 108%; letter-spacing: 0.01em;
    color: var(--ink-3); text-decoration: none; transition: color var(--t-med);
  }
  .nav a:hover, .nav a[aria-current] { color: var(--white-hot); }
  .nav a[aria-current] { text-shadow: 0 0 12px rgba(255, 90, 31, 0.45); }
  .pill-sep, .pill-val { display: none; }
  .connect { width: auto; height: 38px; padding: 0 18px; border: 0; color: #1c0d04;
    background: radial-gradient(130% 160% at 22% 0%, #ffffff 0%, var(--white-hot) 42%, #ffd6ae 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 26px -12px rgba(255, 90, 31, 0.8), 0 0 34px -10px rgba(255, 154, 60, 0.6); }
  .connect:hover { box-shadow: inset 0 0 0 1px #fff, 0 12px 30px -10px rgba(255, 90, 31, 0.95), 0 0 50px -10px rgba(255, 154, 60, 0.75); }
  .connect span { display: inline; }
  .connect .ic { display: none; }
  .connect.on { color: var(--ink); background: rgba(12, 9, 7, 0.7); border: 1px solid rgba(143, 179, 255, 0.45); box-shadow: 0 0 22px -10px var(--cool-glow); }
  .toast { bottom: 24px; }
  .foot { margin-top: 110px; }
  .foot-in { margin-top: 64px; grid-template-columns: 1.1fr 1.4fr; gap: 60px; }
  .foot-base { margin-top: 56px; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
  .foot-giant { margin-top: 34px; }
}
@media (min-width: 1280px) {
  :root { --gut: 40px; }
  .pill-sep, .pill-val { display: inline; }
  .pill { height: 38px; padding: 0 16px 0 13px; font-size: 11px; }
  .pill-val { font-size: 11.5px; }
  .chip-token { height: 38px; }
  .nav a { padding: 8px 17px; }
}

/* ================================================================ reduced motion, lite, paused */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.reduced *, .reduced *::before, .reduced *::after { animation: none !important; }
.reduced .fx-light, .reduced .fx-flash, .reduced .fx-flash-line, .reduced .fx-veil, .reduced .fx-shock, .reduced .fx-shock-glow { display: none; }
html.fx-lite .fx-light { display: none; }
html:not(.fx-fine) .fx-light { display: none; }
.fx-paused .fx-grain { animation-play-state: paused; }
html.fx-off .fx-grain, html.fx-off .fx-light, html.fx-off .fx-vig { display: none; }
@media print {
  .fx-amb, .fx-light, .fx-grain, .fx-vig, .tabbar { display: none !important; }
}