/* No Rush · home (#/): the hero is a security-paper banknote ("bill") under a UV lamp, holding the live game.
   Layers inside .bill: paper canvas (waves, rosette, fibres) < hidden fluorescent ink (revealed by the pointer lamp)
   < microprint < foil stripe < content (readouts + the key stage). Fonts: the vendored IBM Plex Mono for numerals and
   Fraunces for Latin display, declared here once for every page. Infinite animations move transforms only (the
   compositor runs them) and pause while their section is scrolled away (.is-off, set by home.js). */

@font-face { font-family: "NR Mono"; src: url("/vendor/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NR Mono"; src: url("/vendor/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "NR Mono"; src: url("/vendor/fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
/* Latin only: CJK punctuation (…, “”, ——) must come from the Song face next in --font-serif */
@font-face { font-family: "NR Display"; src: url("/vendor/fonts/fraunces-latin-opsz.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF; }
@font-face { font-family: "NR Display"; src: url("/vendor/fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF; }
/* English: the same files with Fraunces' own curly quotes, dashes and ellipsis (else they fall back to a CJK serif) */
@font-face { font-family: "NR Display EN"; src: url("/vendor/fonts/fraunces-latin-opsz.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A; }
@font-face { font-family: "NR Display EN"; src: url("/vendor/fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A; }

:root {
  --nr-mono: "NR Mono", var(--font-mono);
  --nr-display: "NR Display", var(--font-serif);
}
:root:lang(en) { --nr-display: "NR Display EN", "NR Display", var(--font-serif); }

/* English labels: the bundled mono, tighter tracking */
.page-home .label, .page-home .mono, .page-home .stamp { font-family: var(--nr-mono); }
.page-home .label:lang(en) { letter-spacing: .12em; }

/* ---------------------------------------------------------------- hero frame */
.page-home .hx { padding: 26px 0 8px; }
.page-home .bill {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 6px;
  --mx: 72%; --my: 38%;
  background:
    radial-gradient(70% 90% at 74% 44%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 62%),
    radial-gradient(60% 70% at 4% 104%, color-mix(in srgb, var(--magenta) 10%, transparent), transparent 64%),
    linear-gradient(162deg, color-mix(in srgb, var(--bg-3) 94%, transparent) 0%, color-mix(in srgb, var(--bg-2) 96%, transparent) 60%, color-mix(in srgb, var(--bg) 96%, transparent) 100%);
  border: 1px solid var(--line-2);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--bg-2) 80%, transparent),
    0 0 0 7px var(--line),
    var(--shadow),
    0 40px 120px -40px color-mix(in srgb, var(--cyan) 26%, transparent);
}
/* guilloche frame band and the inner hairline */
.page-home .bill::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 0 0, transparent 0 3px, color-mix(in srgb, var(--guilloche) 40%, transparent) 3px 3.6px),
    repeating-radial-gradient(circle at 100% 100%, transparent 0 4px, color-mix(in srgb, var(--guilloche-2) 34%, transparent) 4px 4.6px);
  -webkit-mask: linear-gradient(#000 0 0) top/100% 11px no-repeat, linear-gradient(#000 0 0) bottom/100% 11px no-repeat,
    linear-gradient(#000 0 0) left/11px 100% no-repeat, linear-gradient(#000 0 0) right/11px 100% no-repeat;
  mask: linear-gradient(#000 0 0) top/100% 11px no-repeat, linear-gradient(#000 0 0) bottom/100% 11px no-repeat,
    linear-gradient(#000 0 0) left/11px 100% no-repeat, linear-gradient(#000 0 0) right/11px 100% no-repeat;
  opacity: .85;
}
.page-home .bill::after {
  content: ""; position: absolute; inset: 13px; z-index: 3; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--line-2) 90%, transparent); border-radius: 3px;
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bg) 30%, transparent), inset 0 0 0 4px var(--line);
}
.page-home .bill-paper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.page-home .bill-ink {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0;
  transition: opacity 400ms var(--ease);
  -webkit-mask: radial-gradient(circle 190px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .55) 45%, transparent 72%);
  mask: radial-gradient(circle 190px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, .55) 45%, transparent 72%);
}
.page-home .bill-ink span {
  position: absolute; inset: -40% -20%; display: block; transform: rotate(-14deg);
  font: 900 54px/1.18 var(--nr-display); letter-spacing: .06em; word-spacing: .3em; color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--green) 85%, transparent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--green) 55%, transparent);
}
.page-home .bill.lamp-on .bill-ink { opacity: 1; }
/* the lamp itself: a soft violet pool of light following the pointer */
.page-home .bill-body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 520px; height: 520px; border-radius: 50%;
  left: calc(var(--mx) - 260px); top: calc(var(--my) - 260px); opacity: 0; transition: opacity 400ms;
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 14%, transparent), color-mix(in srgb, var(--cyan) 6%, transparent) 40%, transparent 68%);
}
.page-home .bill.lamp-on .bill-body::before { opacity: 1; }
/* touch screens have no lamp: a faint, still glimpse of the ink around the key */
@media (hover: none) {
  .page-home .bill-ink { opacity: .18; }
}

.page-home .bill-micro {
  position: absolute; z-index: 3; left: 22px; right: 22px; height: 8px; overflow: hidden; pointer-events: none;
  font: 500 6px/8px var(--nr-mono); letter-spacing: .16em; white-space: nowrap; color: var(--muted); opacity: .75;
}
.page-home .bill-micro-t { top: 16px; }
.page-home .bill-micro-b { bottom: 16px; }

/* foil stripe (holographic band): the gradient strip and the sheen move by transform */
.page-home .bill-foil {
  position: absolute; z-index: 2; top: 0; bottom: 0; right: 46px; width: 46px; pointer-events: none; overflow: hidden;
  opacity: .72; mix-blend-mode: screen;
  box-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 35%, transparent), inset 1px 0 0 rgba(255, 255, 255, .35), inset -1px 0 0 rgba(255, 255, 255, .25);
}
.page-home .bill-foil .bf-bg {
  position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 640%;
  background: var(--foil); background-size: 100% 50%; animation: foilV 9s linear infinite;
}
.page-home .bill-foil::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background:
    repeating-linear-gradient(170deg, rgba(7, 6, 15, .22) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 50% 28%, transparent 0 13px, rgba(7, 6, 15, .45) 13px 14px, transparent 14px 18px, rgba(7, 6, 15, .35) 18px 19px, transparent 19px),
    radial-gradient(circle at 50% 72%, transparent 0 9px, rgba(7, 6, 15, .4) 9px 10px, transparent 10px);
}
.page-home .bill-foil::after {
  /* moving sheen */
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: sheen 6.5s var(--ease) infinite;
}
.page-home .bill-foil span {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl;
  font: 700 9px/1 var(--nr-mono); letter-spacing: .32em; color: rgba(7, 6, 15, .62); white-space: nowrap;
}
@keyframes foilV { to { transform: translateY(-50%); } }
@keyframes sheen { 0%, 55% { transform: translateY(0); } 100% { transform: translateY(375%); } }

/* ---------------------------------------------------------------- hero layout */
.page-home .bill-body {
  position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 20px;
  padding: 34px 118px 12px 50px; min-height: 560px;
}
.page-home .bill-main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.page-home .hx-serial { display: flex; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; }
.page-home .hx-round { font: 700 12px/1 var(--nr-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.page-home .hx-sn {
  display: inline-flex; align-items: baseline; font: 600 17px/1 var(--nr-mono); color: var(--seal); letter-spacing: .02em;
  text-shadow: 0 0 10px color-mix(in srgb, var(--seal) 60%, transparent);
}
.page-home .hx-sn span { display: inline-block; }
.page-home .hx-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1 var(--nr-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.page-home .hx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2.2s ease-in-out infinite; }
.page-home .hx-dot-muted { background: var(--muted); box-shadow: none; animation: none; }
.page-home .hx-dot-err { background: var(--err); box-shadow: 0 0 10px var(--err); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

/* the title: "No rush." small italic over "Hold the key." (never "Hold the / key.") */
.page-home .hx-title {
  margin: 14px 0 0; font: 900 clamp(38px, 4.4vw, 62px)/1.02 var(--font-serif); letter-spacing: .03em; text-wrap: balance;
  background: var(--foil); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 16s steps(64) infinite; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--cyan) 26%, transparent));
}
.page-home .hx-title .l1, .page-home .hx-title .l2 { display: block; }
.page-home .hx-title .l1 { font-size: .6em; margin-bottom: .1em; }
.page-home .hx-title.en { font-family: var(--nr-display); font-weight: 700; letter-spacing: -.015em; font-size: clamp(40px, 4.6vw, 66px); }
.page-home .hx-title.en .l1 { font-size: .52em; font-style: italic; font-weight: 600; letter-spacing: 0; margin-bottom: .08em; }
.page-home .hx-sub { margin: 10px 0 0; max-width: 44ch; color: var(--ink-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

/* how it works: three numbered steps */
.page-home .hx-how {
  list-style: none; margin: 14px 0 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  max-width: 580px; border-top: 1px dashed var(--line-2);
}
.page-home .how-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 9px; align-content: start; }
.page-home .how-no {
  grid-row: span 2; align-self: start; font: 700 11px/1 var(--nr-mono); color: var(--seal); border: 1.5px solid currentColor;
  padding: 4px 6px 3px; border-radius: 2px; transform: rotate(-3deg); text-shadow: 0 0 8px color-mix(in srgb, var(--seal) 50%, transparent);
}
.page-home .how-step b { font: 700 13.5px/1.3 var(--font-sans); color: var(--ink); }
.page-home .how-step small { font-size: 12px; line-height: 1.45; color: var(--muted); }
.page-home .hx-chips { display: none; }

/* the prize, and what a take costs right beside it */
.page-home .hx-prize { margin-top: 14px; }
.page-home .hx-prize .label em { font-style: normal; color: var(--cyan); margin-left: 8px; }
.page-home .hx-val { display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.page-home .hx-prize-v { font: 600 clamp(40px, 4.4vw, 62px)/1 var(--nr-mono); gap: 3px; }
.page-home .hx-clock-v { font: 600 clamp(28px, 3vw, 42px)/1 var(--nr-mono); gap: 3px; }
.page-home .hx:not([data-phase="tba"]) .hx-prize .hx-val { min-height: calc(clamp(40px, 4.4vw, 62px) * 1.16); }
.page-home .hx:not([data-phase="tba"]) .hx-clock .hx-val { min-height: calc(clamp(28px, 3vw, 42px) * 1.16); }
.page-home .hx .fc {
  min-width: .66em; padding: .07em .07em .05em; border-radius: 4px; color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-3) 86%, var(--cyan) 7%) 0 49.4%, color-mix(in srgb, var(--bg-2) 92%, #000) 50.6% 100%);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 16px -8px rgba(0, 0, 0, .85);
  text-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 50%, transparent);
}
.page-home .hx .fc::after { background: rgba(0, 0, 0, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); }
.page-home .hx .fc-sep { background: none; box-shadow: none; min-width: .34em; padding-left: 0; padding-right: 0; color: var(--muted); text-shadow: none; }
.page-home .hx .flap-plain { font-family: var(--font-sans); }
.page-home .hx .tba { font-size: clamp(18px, 1.9vw, 24px); color: var(--muted); letter-spacing: .04em; font-weight: 700; }
.page-home .hx[data-phase="tba"] .tba { font-size: 15px; font-weight: 600; }
.page-home .hx-clock-v.is-ready { color: var(--ok); font: 800 clamp(26px, 2.8vw, 38px)/1.1 var(--font-sans); letter-spacing: .08em; text-shadow: 0 0 22px color-mix(in srgb, var(--ok) 55%, transparent); }
.page-home .hx-unit { font: 700 clamp(15px, 1.6vw, 22px)/1 var(--nr-mono); letter-spacing: .1em; padding-bottom: .3em; }
.page-home .hx-unit.foil-text { animation-timing-function: steps(36); }
.page-home .hx-usd { padding-bottom: .55em; font: 500 14px/1 var(--nr-mono); color: var(--muted); }
.page-home .hx-usd:empty { display: none; }
.page-home .hx-trade:empty { display: none; }
.page-home .hx-trade { display: grid; gap: 3px; margin-top: 8px; max-width: 580px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.page-home .hx-trade p { margin: 0; }
.page-home .hx-trade b { font: 600 14px/1.3 var(--nr-mono); color: var(--ink); white-space: nowrap; }
.page-home .hx-approx { font: 500 13px/1.3 var(--nr-mono); color: var(--muted); white-space: nowrap; }
.page-home .hx-ratio {
  display: inline-block; margin-left: 4px; padding: 2px 8px; border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); border-radius: 999px;
  font: 600 11px/1.35 var(--nr-mono); color: var(--amber); white-space: nowrap; vertical-align: 1px;
}

/* the clock and the holder share a row */
.page-home .hx-row { display: flex; align-items: flex-end; gap: 12px 28px; flex-wrap: wrap; margin-top: 12px; }
.page-home .hx-clock { flex: 1 1 230px; min-width: 0; }
.page-home .hx-rule { position: relative; width: min(380px, 100%); height: 4px; margin-top: 10px; overflow: hidden; background: var(--line); border-radius: 2px; }
.page-home .hx-rule::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 60 - 1px), color-mix(in srgb, var(--bg) 85%, transparent) calc(100% / 60 - 1px) calc(100% / 60));
}
.page-home .hx-rule i {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s linear;
  background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 70%, transparent);
}
.page-home .hx[data-phase="open"] .hx-rule i { background: linear-gradient(90deg, var(--magenta), var(--amber)); }
.page-home .hx-holder { flex: 0 1 auto; display: grid; gap: 7px; justify-items: start; padding-bottom: 2px; font-size: 15px; min-height: 34px; }
.page-home .hx[data-phase="tba"] .hx-holder { display: none; }
.page-home .hx-holder-v a { font-size: 15px; }
.page-home .hx-you { color: var(--green); text-shadow: 0 0 12px color-mix(in srgb, var(--green) 50%, transparent); font-weight: 800; }
.page-home .hx-closing:empty { display: none; }
.page-home .hx-closing { margin-top: 18px; max-width: 560px; }
.page-home .hx-clock-v.is-closing { color: var(--amber); font: 800 clamp(26px, 2.8vw, 38px)/1.1 var(--font-sans); letter-spacing: .08em; text-shadow: 0 0 22px color-mix(in srgb, var(--amber) 45%, transparent); }
.page-home .hx[data-phase="closed"] .hx-rule i { background: linear-gradient(90deg, var(--amber), var(--seal)); box-shadow: 0 0 12px color-mix(in srgb, var(--amber) 60%, transparent); }

/* the button and the line under it */
.page-home .hx-cta { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.page-home .hx-cta:empty { display: none; }
.page-home .btn-take { position: relative; overflow: hidden; min-width: 230px; justify-content: space-between; }
.page-home .btn-take svg, .page-home .btn-how svg { width: 22px; height: 22px; transition: transform var(--t-fast) var(--ease); }
.page-home .btn-take:hover svg, .page-home .btn-how:hover svg { transform: translateX(4px); }
.page-home .btn-take::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: -40%; width: 30%; transform: translateX(0) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: btnSheen 4.8s var(--ease) infinite;
}
@keyframes btnSheen { 0%, 62% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(567%) skewX(-20deg); } }
.page-home .btn-how { min-width: 200px; justify-content: space-between; }
.page-home .btn-ok { --b: var(--ok); color: var(--bg); box-shadow: 0 0 22px color-mix(in srgb, var(--ok) 40%, transparent); }
.page-home .btn-hold { --b: var(--green); color: var(--bg); box-shadow: 0 0 22px color-mix(in srgb, var(--green) 35%, transparent); }
.page-home .hx-soon {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px dashed var(--line-2); border-radius: 999px;
  font: 600 12px/1 var(--nr-mono); letter-spacing: .08em; color: var(--ink-2);
}
.page-home .hx-blocked {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 10px 16px;
  border: 1.5px solid var(--line-2); border-radius: var(--r); background: color-mix(in srgb, var(--bg) 55%, transparent);
  font: 700 14px/1.35 var(--font-sans); color: var(--ink);
}
.page-home .hx-blocked svg { width: 18px; height: 18px; flex: none; color: var(--amber); }
.page-home .hx-after { margin: 10px 0 0; max-width: 54ch; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.page-home .hx-after:empty { display: none; }

/* keeper buttons (also used by #/play) */
.keeper-list { display: grid; gap: 8px; margin-top: 8px; }
.keeper-btn {
  display: grid; gap: 2px; text-align: left; padding: 10px 14px; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--plate-2) 100%, transparent); border: 1px dashed var(--line-2); border-radius: var(--r);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease);
}
.keeper-btn b { font: 700 14px/1.3 var(--font-sans); }
.keeper-btn b::after { content: " →"; color: var(--accent); }
.keeper-btn small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.keeper-btn:hover { border-color: var(--accent); border-style: solid; transform: translateY(-1px); }
.keeper-btn:disabled { opacity: .5; cursor: progress; }

/* ---------------------------------------------------------------- the stage: rosette, key, bezel */
.page-home .bill-stage { position: relative; min-height: 500px; container-type: size; }
.page-home .bill-rosette,
.page-home .bill-bezel {
  position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); transform: translate(-50%, -50%);
}
.page-home .bill-rosette { z-index: 0; opacity: .95; animation: spin 260s linear infinite; }
.page-home .bill-key { position: absolute; inset: 0; z-index: 2; }
/* the 3D key brings its own rosette, dial band and microprint ring: the drawn ones stay for the fallback only */
.page-home .has-key .bill-rosette, .page-home .has-key .bill-bezel { display: none; }
.page-home .bill-key > canvas { display: block; width: 100% !important; height: 100% !important; }
.page-home .bill-bezel { z-index: 3; pointer-events: none; overflow: visible; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.page-home .bz-ring { fill: none; stroke: var(--line-2); stroke-width: .45; }
.page-home .bz-in { stroke: var(--line); stroke-dasharray: .6 1.6; }
.page-home .tk { stroke: var(--line-2); stroke-width: .7; stroke-linecap: round; transition: stroke 600ms; }
.page-home .tk-m { stroke-width: 1; }
.page-home .tk-b { stroke-width: 1.5; stroke: var(--ink-2); }
.page-home .tk.on { stroke: var(--cyan); }
.page-home .bill-bezel[data-mode="open"] .tk.on { stroke: var(--magenta); }
.page-home .bill-bezel[data-mode="settle"] .tk.on { stroke: var(--ok); }
.page-home .bz-hand { fill: var(--seal); filter: drop-shadow(0 0 3px var(--seal)); transition: cx 1s linear, cy 1s linear, opacity 400ms; }
.page-home .bill-stamp { position: absolute; z-index: 5; top: 5%; left: 0; pointer-events: none; }
.page-home .bill-stamp .stamp { font-size: 14px; padding: 6px 12px; border-width: 3px; letter-spacing: .16em; background: color-mix(in srgb, var(--bg) 35%, transparent); }
.page-home .bill-num {
  position: absolute; z-index: 1; right: -4px; bottom: 0; pointer-events: none; user-select: none;
  font: 800 clamp(70px, 9vw, 128px)/.8 var(--nr-display); letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink-2) 55%, transparent);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .35), -1px -1px 0 color-mix(in srgb, var(--cyan) 18%, transparent);
}
.page-home .has-fallback .bill-key { display: grid; place-items: center; perspective: 900px; }
.page-home .fb-key {
  width: 64%; max-width: 400px; height: auto; border-radius: 12%; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--cyan) 24%, transparent));
  animation: fbSwing 9s ease-in-out infinite; transform-style: preserve-3d;
}
@keyframes fbSwing { 0%, 100% { transform: rotateY(-24deg) rotateZ(-8deg); } 50% { transform: rotateY(24deg) rotateZ(-4deg); } }
.page-home .bill-stage.flipped::after {
  content: ""; position: absolute; z-index: 6; left: 50%; top: 50%; width: 40cqmin; height: 40cqmin; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--seal); pointer-events: none; animation: ringOut 1100ms var(--ease) forwards;
}
@keyframes ringOut { from { opacity: .9; width: 30cqmin; height: 30cqmin; } to { opacity: 0; width: 100cqmin; height: 100cqmin; border-width: 1px; } }

/* ---------------------------------------------------------------- the band under the bill */
.page-home .bill-band {
  position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr);
  margin: 0 118px 0 50px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
}
.page-home .hx[data-phase="tba"] .bill-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page-home .hx[data-phase="tba"] .bill-cell-sm { display: none; }
.page-home .bill-cell { padding: 14px 18px 12px; border-left: 1px solid var(--line); min-width: 0; }
.page-home .bill-cell:first-child { border-left: 0; padding-left: 0; }
.page-home .bill-cell-v { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; min-height: 34px; }
.page-home .bill-cell-v .flap { font: 600 clamp(19px, 1.9vw, 26px)/1 var(--nr-mono); gap: 2px; }
.page-home .bill-cell-v .tba { font-size: 15px; }
.page-home .bill-cell .hx-unit { font-size: 11px; color: var(--muted); padding: 0; letter-spacing: .14em; }
.page-home .bill-cell small {
  margin-top: 6px; color: var(--muted); font: 500 12px/1.35 var(--nr-mono); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---------------------------------------------------------------- the fees panel (a counterfoil under the band) */
.page-home .bill-ops {
  position: relative; z-index: 4; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0 118px 34px 50px; border-bottom: 1px dashed var(--line-2);
}
.page-home .bill-ops:empty { display: none; }
.page-home .ops-cell { min-width: 0; padding: 14px 18px 14px; border-left: 1px dashed var(--line); }
.page-home .ops-cell:first-child { border-left: 0; padding-left: 0; }
.page-home .ops-v { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; min-height: 26px; }
.page-home .ops-v b { font: 600 20px/1.1 var(--nr-mono); }
.page-home .ops-v b.tba { font: 600 15px/1.3 var(--font-sans); }
.page-home .ops-v em { font: 600 11px/1 var(--nr-mono); font-style: normal; color: var(--muted); letter-spacing: .12em; }
.page-home .ops-creator .label { color: var(--amber); }
.page-home .ops-hint { margin: 6px 0 0; max-width: 48ch; font-size: 12px; line-height: 1.5; color: var(--muted); }
.page-home .ops-who { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.page-home .ops-who a { display: inline-block; padding: 4px 0; }
.page-home .ops-cell .keeper-btn { margin-top: 10px; }
.page-home .ops-keep .keeper-list { margin-top: 10px; }

/* ---------------------------------------------------------------- sections */
.page-home .hs { display: grid; gap: 18px; margin-top: 34px; }
.page-home .hs-row { display: grid; gap: 18px; }
.page-home .hs-row-a { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.page-home .hs-row-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.page-home .hs .plate { padding: 22px 24px; }
.page-home .hs-title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.page-home .hs-no {
  font: 700 11px/1 var(--nr-mono); color: var(--seal); border: 1.5px solid currentColor; padding: 4px 6px 3px; border-radius: 2px;
  transform: rotate(-3deg); text-shadow: 0 0 8px color-mix(in srgb, var(--seal) 50%, transparent);
}
.page-home .hs-title b { font: 800 21px/1.1 var(--font-serif); letter-spacing: .04em; }
:lang(en) .page-home .hs-title b, .page-home:lang(en) .hs-title b { font-family: var(--nr-display); font-weight: 700; letter-spacing: 0; }
.page-home .hs-title i { font: 600 11px/1 var(--nr-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* live feed */
.page-home .hfeed { list-style: none; margin: 0; padding: 0; max-height: 470px; overflow: auto; scrollbar-width: thin; }
.page-home .hev { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 12px 2px; border-bottom: 1px dashed var(--line); align-items: start; }
.page-home .hev:last-child { border-bottom: 0; }
.page-home .hev-empty { display: block; padding: 18px 0; }
.page-home .hev-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); }
.page-home .hev-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-home .hev-rot .hev-ico { color: var(--cyan); }
.page-home .hev-won .hev-ico { color: var(--ok); }
.page-home .hev-buy .hev-ico { color: var(--magenta); }
.page-home .hev-harv .hev-ico { color: var(--amber); }
.page-home .hev-log .hev-ico { color: var(--ink-2); }
.page-home .hev-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.page-home .hev-text b { font-family: var(--nr-mono); font-weight: 600; }
.page-home .hev-text .mono { color: var(--ink-2); }
.page-home .hev-won .hev-text b { color: var(--ok); }
.page-home .hev-quote { margin: 6px 0 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--magenta); font: 500 14px/1.5 var(--nr-display); color: var(--ink); word-break: break-word; }
.page-home .hev-meta { margin: 3px 0 0; font: 500 11.5px/1.4 var(--nr-mono); color: var(--muted); }
.page-home .hev-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 500 11.5px/1.3 var(--nr-mono); color: var(--muted); white-space: nowrap; }
.page-home .hev-side a { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; }
.page-home .hev-fresh { animation: evIn 1.6s var(--ease); }
@keyframes evIn { from { background: color-mix(in srgb, var(--cyan) 16%, transparent); transform: translateX(-8px); } }
.page-home .hst-1 { color: var(--amber); } .page-home .hst-2, .page-home .hst-5 { color: var(--ok); }
.page-home .hst-3, .page-home .hst-4 { color: var(--muted); } .page-home .hst-6 { color: var(--seal); }
.page-home .hx-you, .page-home .hev .hx-you { color: var(--green); }
.page-home .hfeed-more { display: none; }
.page-home .hx-tag {
  display: inline-flex; align-items: center; justify-self: start; height: 26px; padding: 0 12px; border: 1px dashed var(--line-2); border-radius: 999px;
  font: 600 12px/1 var(--nr-mono); letter-spacing: .08em; color: var(--ink-2);
}

/* exposure meter */
.page-home .hexp-meter {
  position: relative; height: 22px; border: 1px solid var(--line-2); border-radius: 2px; overflow: hidden;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cyan) 30%, transparent) 0 6px, color-mix(in srgb, var(--cyan) 12%, transparent) 6px 12px);
}
.page-home .hexp-meter i {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); transition: width 800ms var(--ease);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--amber) 62%, transparent) 0 6px, color-mix(in srgb, var(--amber) 28%, transparent) 6px 12px);
  border-right: 2px solid var(--amber); box-shadow: 0 0 16px color-mix(in srgb, var(--amber) 50%, transparent);
}
.page-home .hexp-meter.is-tba { filter: grayscale(1); opacity: .45; }
.page-home .hexp-pct { position: absolute; top: 50%; transform: translateY(-50%); font: 700 10.5px/1 var(--nr-mono); color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.page-home .hexp-pct-a { left: 8px; } .page-home .hexp-pct-b { right: 8px; }
.page-home .hexp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; }
.page-home .hexp-col b { display: block; margin: 8px 0 6px; font: 600 clamp(20px, 2vw, 26px)/1.1 var(--nr-mono); }
.page-home .hexp-col b em { font-style: normal; font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.page-home .hexp-col b .tba { font-size: 15px; }
.page-home .hexp-col small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.page-home .hexp-reach .label { color: var(--amber); }
.page-home .hexp-away .label { color: var(--cyan); }
.page-home .hexp-split { margin: 14px 0 0; font-size: 12px; color: var(--ink-2); }
.page-home .hexp-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-2); }

/* fee flywheel: the dashed flows slide by transform */
.page-home .hfly { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: 16px 34px; align-items: center; }
.page-home .hfly-node {
  position: relative; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 2px;
  background: linear-gradient(180deg, var(--plate-2), var(--plate));
}
.page-home .hfly-v { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.page-home .hfly-v b { font: 600 19px/1.15 var(--nr-mono); }
.page-home .hfly-v b.tba { font-size: 13px; }
.page-home .hfly-v em { font: 600 10.5px/1 var(--nr-mono); font-style: normal; color: var(--muted); letter-spacing: .12em; }
.page-home .hfly-node small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.page-home .hfly-src { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); box-shadow: var(--glow); }
.page-home .hfly-src::after {
  content: ""; position: absolute; top: 50%; right: -35px; width: 34px; height: 2px; background: var(--line-2);
}
.page-home .hfly-out { border-top: 2px solid var(--seal); }
.page-home .hfly-lanes { position: relative; display: grid; gap: 12px; }
.page-home .hfly-lanes::before { content: ""; position: absolute; left: -1px; top: 26px; bottom: 26px; width: 2px; background: var(--line-2); }
.page-home .hfly-lane { --lc: var(--cyan); display: flex; align-items: center; gap: 0; min-width: 0; }
.page-home .hfly-pot { --lc: var(--cyan); } .page-home .hfly-brn { --lc: var(--magenta); } .page-home .hfly-team { --lc: var(--amber); }
.page-home .hfly-pct { flex: none; width: 58px; padding-left: 12px; font: 800 15px/1 var(--nr-mono); color: var(--lc); text-shadow: 0 0 10px color-mix(in srgb, var(--lc) 50%, transparent); }
.page-home .hfly-line { --lw: 3px; position: relative; flex: 1 1 28px; min-width: 22px; height: var(--lw); overflow: hidden; background: color-mix(in srgb, var(--lc) 22%, transparent); }
.page-home .hfly-line i {
  position: absolute; top: 0; bottom: 0; left: -20px; right: 0;
  background: repeating-linear-gradient(90deg, var(--lc) 0 9px, transparent 9px 20px); animation: flow 1.1s linear infinite; box-shadow: 0 0 8px var(--lc);
}
.page-home .hfly-w6 { --lw: 6px; } .page-home .hfly-w3 { --lw: 3px; } .page-home .hfly-w1 { --lw: 1.5px; }
.page-home .hfly-lane .hfly-node { flex: 0 1 210px; }
.page-home .hfly-team .hfly-line { flex-grow: 3; }
@keyframes flow { to { transform: translateX(20px); } }
.page-home .hfly-game { grid-column: 2; padding-top: 14px; border-top: 1px dashed var(--line); }
.page-home .hfly-gm { --lc: var(--seal); }
.page-home .hfly-gm .hfly-pct { width: auto; padding-right: 12px; font-size: 12px; letter-spacing: .08em; }
.page-home .hfly-gm .hfly-line { flex-grow: 3; }
.page-home .hfly-gm .hfly-node { border-top-color: var(--seal); }

/* canary: the cage is still, the bird breathes in its own layer */
.page-home .hcan { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: start; }
.page-home .hcan-art { position: relative; width: 140px; aspect-ratio: 160 / 140; }
.page-home .hcan-cage, .page-home .hcan-bw { position: absolute; inset: 0; }
.page-home .hcan-cage, .page-home .hcan-bird { width: 100%; height: 100%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-home .hcan-bw { transform-origin: 46.25% 74.3%; animation: breathe 3.8s ease-in-out infinite; }
.page-home .b-cage { stroke: var(--line-2); }
.page-home .b-perch { stroke: var(--muted); stroke-width: 3; }
.page-home .b-body { stroke: var(--amber); fill: color-mix(in srgb, var(--amber) 16%, transparent); }
.page-home .b-wing, .page-home .b-tail, .page-home .b-legs { stroke: var(--amber); }
.page-home .b-eye { fill: var(--ink); stroke: none; }
.page-home .b-x { stroke: var(--seal); display: none; }
.page-home .b-g { transform-box: view-box; transform-origin: 74px 104px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--amber) 55%, transparent)); }
@keyframes breathe { 50% { transform: scale(1.045, .975) translateY(-1px); } }
.page-home .hcan-dead .hcan-bw { animation: none; }
.page-home .hcan-dead .b-g { transform: rotate(160deg) translate(-6px, -40px); filter: none; }
.page-home .hcan-dead .b-body, .page-home .hcan-dead .b-wing, .page-home .hcan-dead .b-tail, .page-home .hcan-dead .b-legs { stroke: var(--seal); fill: color-mix(in srgb, var(--seal) 14%, transparent); }
.page-home .hcan-dead .b-eye { display: none; } .page-home .hcan-dead .b-x { display: inline; }
.page-home .hcan-tba .hcan-bw { animation: none; opacity: .45; filter: grayscale(1); }
.page-home .hcan-txt .stamp { margin-bottom: 12px; }
.page-home .hcan-fill { height: 4px; margin: 2px 0 6px; background: var(--line); border-radius: 2px; overflow: hidden; }
.page-home .hcan-fill i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--green)); box-shadow: 0 0 10px var(--amber); }
.page-home .hcan .hint { margin: 12px 0 0; line-height: 1.6; }

/* migration log strip */
.page-home .hlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.page-home .hlg a {
  position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px 12px 16px; color: var(--ink); text-decoration: none !important; border: 1px solid var(--line); border-radius: 2px;
  background: linear-gradient(90deg, var(--plate-2), var(--plate)); transition: border-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.page-home .hlg a::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--muted); }
.page-home .hlg-1 a::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.page-home .hlg-2 a::before, .page-home .hlg-5 a::before { background: var(--ok); }
.page-home .hlg-6 a::before { background: var(--seal); }
.page-home .hlg a:hover { border-color: var(--line-2); transform: translateX(2px); }
.page-home .hlg-id { font: 700 15px/1 var(--nr-mono); color: var(--muted); }
.page-home .hlg-kind { min-width: 0; }
.page-home .hlg-kind b { display: block; font-weight: 700; font-size: 14px; }
.page-home .hlg-kind i { display: block; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-home .hlg-st { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.page-home .hlg-st .stamp { font-size: 10px; padding: 3px 7px; border-width: 1.5px; transform: rotate(-3deg); }
.page-home .hlg-st small { font: 500 11px/1.2 var(--nr-mono); color: var(--muted); white-space: nowrap; }
.page-home .hlg-empty { padding: 14px 0; }
.page-home .hlog-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* attributed story line */
.page-home .hstory { margin-top: 18px; padding: 34px 0 6px; text-align: center; border-top: 1px solid var(--line); }
.page-home .hstory blockquote { margin: 0 auto; max-width: 780px; }
.page-home .hstory blockquote p { margin: 0; font: 600 clamp(18px, 2.2vw, 25px)/1.55 var(--nr-display); color: var(--ink); }
.page-home .hstory footer { margin-top: 12px; font: 500 12px/1.5 var(--nr-mono); color: var(--muted); }
.page-home .hstory footer a { display: inline-block; padding: 6px 2px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
/* before launch the feed and the log strip explain what will appear */
.page-home .hev-pre { display: grid; gap: 10px; padding: 18px 0 6px; }
.page-home .hev-pre .hint, .page-home .hlog-pre .hint { margin: 0; font-size: 13px; line-height: 1.7; max-width: 52ch; }
.page-home .hlog-pre { display: grid; gap: 10px; padding: 6px 0 4px; }
.page-home .hstory .hint { margin: 10px auto 0; max-width: 60ch; }

/* mobile sticky action bar */
.page-home .hbar { display: none; }

/* sections scrolled away pause their animations */
.page-home .is-off, .page-home .is-off *, .page-home .is-off *::before, .page-home .is-off *::after { animation-play-state: paused !important; }

/* ---------------------------------------------------------------- daylight paper */
:root[data-theme="day"] .page-home .bill {
  background:
    radial-gradient(70% 90% at 74% 44%, rgba(54, 91, 114, .06), transparent 62%),
    radial-gradient(60% 70% at 4% 104%, rgba(113, 85, 143, .05), transparent 64%),
    linear-gradient(162deg, #f8f6fc, #eae4f2);
  box-shadow: 0 0 0 6px #e4deee, 0 0 0 7px var(--line), var(--shadow);
}
:root[data-theme="day"] .page-home .bill-foil { mix-blend-mode: multiply; opacity: .8; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .5); }
:root[data-theme="day"] .page-home .bill-ink span { -webkit-text-stroke: 0; color: rgba(31, 58, 95, .09); text-shadow: none; }
:root[data-theme="day"] .page-home .bill-body::before { background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 65%); }
:root[data-theme="day"] .page-home .hx-title { background: none; color: var(--ink); filter: none; animation: none; }
:root[data-theme="day"] .page-home .hx .fc { background: linear-gradient(180deg, #fcfaff 0 49.4%, #e9e2f1 50.6% 100%); text-shadow: none; box-shadow: inset 0 0 0 1px var(--line-2), 0 6px 12px -8px rgba(44, 31, 65, .4); }
:root[data-theme="day"] .page-home .hx .fc::after { background: rgba(21, 19, 15, .25); }
:root[data-theme="day"] .page-home .hx .fc-sep { background: none; box-shadow: none; }
:root[data-theme="day"] .page-home .hx-sn { text-shadow: none; }
:root[data-theme="day"] .page-home .hx-prize .hx-unit.foil-text { background: none; color: var(--accent); animation: none; }
:root[data-theme="day"] .page-home .bill-num { -webkit-text-stroke-color: rgba(21, 19, 15, .3); text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), -1px -1px 0 rgba(21, 19, 15, .08); }
:root[data-theme="day"] .page-home .fb-key { filter: drop-shadow(0 14px 22px rgba(40, 30, 10, .35)); }
:root[data-theme="day"] .page-home .hx-rule i { box-shadow: none; }
:root[data-theme="day"] .page-home .hx-ratio { color: var(--amber); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .page-home .bill-body { padding: 36px 104px 12px 36px; }
  .page-home .bill-band { margin: 0 104px 0 36px; }
  .page-home .bill-ops { margin: 0 104px 30px 36px; }
}
@media (max-width: 980px) {
  .page-home .bill-body { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); min-height: 520px; }
  .page-home .bill-stage { min-height: 440px; }
  .page-home .hx-how { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .page-home .bill-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-home .bill-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .page-home .bill-cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .page-home .hs-row-a, .page-home .hs-row-b { grid-template-columns: minmax(0, 1fr); }
  .page-home .hfly { grid-template-columns: minmax(0, 1fr); }
  .page-home .hfly-src::after { display: none; }
  .page-home .hfly-game { grid-column: 1; }
}
@media (max-width: 760px) {
  .page-home .hx { padding-top: 14px; }
  .page-home .bill { border-radius: 4px; --mx: 50%; --my: 46%; }
  .page-home .bill-foil { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 12px; }
  .page-home .bill-foil .bf-bg { top: 0; bottom: 0; height: auto; width: 640%; background-size: 50% 100%; animation-name: foilH; }
  .page-home .bill-foil span { display: none; }
  .page-home .bill-foil::after { display: none; }
  .page-home .bill::after { inset: 18px 9px 9px; }
  .page-home .bill-micro { left: 14px; right: 14px; }
  .page-home .bill-micro-t { top: 21px; }
  .page-home .bill-micro-b { bottom: 11px; }
  /* phones: the prize, the timer and the button first; the key art, the story and the steps after them */
  .page-home .bill-body {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 30px 20px 6px; min-height: 0;
    grid-template-areas: "serial" "title" "chips" "prize" "clock" "closing" "cta" "after" "stage" "sub" "how" "holder";
  }
  .page-home .bill-main, .page-home .hx-row { display: contents; }
  .page-home .hx-serial { grid-area: serial; }
  .page-home .hx-live { margin-left: 0; width: 100%; }
  .page-home .hx-title { grid-area: title; margin-top: 12px; font-size: clamp(32px, 9.6vw, 42px); }
  .page-home .hx-title.en { font-size: clamp(36px, 11vw, 46px); }
  .page-home .hx-chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 12px 0 0; padding: 0; }
  .page-home .hx-chips li {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 1px solid var(--line-2); border-radius: 999px;
    font: 600 12px/1 var(--font-sans); color: var(--ink-2); background: color-mix(in srgb, var(--bg) 45%, transparent);
  }
  .page-home .hx-chips li i {
    display: grid; place-items: center; width: 20px; height: 20px; border: 1.2px solid currentColor; border-radius: 50%;
    font: 700 10px/1 var(--nr-mono); font-style: normal; color: var(--seal);
  }
  .page-home .hx-prize { grid-area: prize; margin-top: 16px; }
  /* the hint (how the round's prize was set) gets its own line instead of wrapping mid-phrase under the label */
  .page-home .hx-prize .label em { display: block; margin: 3px 0 0; }
  .page-home .hx-clock { grid-area: clock; margin-top: 14px; }
  .page-home .hx-closing { grid-area: closing; max-width: none; margin-top: 14px; }
  .page-home .hx-cta { grid-area: cta; margin-top: 16px; }
  .page-home .hx-after { grid-area: after; }
  .page-home .bill-stage { grid-area: stage; height: min(300px, 78vw); min-height: 0; margin: 14px -20px 0; }
  .page-home .hx-sub { grid-area: sub; font-size: 14px; margin-top: 6px; }
  .page-home .hx-how { grid-area: how; margin-top: 14px; max-width: none; }
  .page-home .hx-holder { grid-area: holder; margin-top: 16px; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
  .page-home .hx-prize-v { font-size: clamp(34px, 11vw, 50px); }
  .page-home .hx-clock-v { font-size: clamp(26px, 8vw, 34px); }
  .page-home .hx:not([data-phase="tba"]) .hx-prize .hx-val { min-height: calc(clamp(34px, 11vw, 50px) * 1.16); }
  .page-home .hx:not([data-phase="tba"]) .hx-clock .hx-val { min-height: calc(clamp(26px, 8vw, 34px) * 1.16); }
  .page-home .hx-trade { font-size: 13.5px; }
  .page-home .btn-take, .page-home .btn-how { width: 100%; }
  .page-home .hx-cta .btn { flex: 1 1 auto; }
  .page-home .bill-num { font-size: 72px; right: 8px; }
  .page-home .bill-stamp { left: 14px; top: 4%; }
  .page-home .bill-stamp .stamp { font-size: 12px; }
  .page-home .bill-band { margin: 6px 20px 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-home .bill-cell { padding: 12px 0 10px; border-left: 0; }
  .page-home .bill-cell:first-child, .page-home .bill-cell-price { grid-column: 1 / -1; }
  .page-home .bill-cell + .bill-cell { border-top: 1px solid var(--line); }
  .page-home .bill-cell-sm + .bill-cell-sm { border-left: 1px solid var(--line); padding-left: 14px; }
  .page-home .bill-ops { margin: 0 20px 26px; grid-template-columns: minmax(0, 1fr); }
  .page-home .ops-cell { padding: 14px 0; border-left: 0; }
  .page-home .ops-cell + .ops-cell { border-top: 1px dashed var(--line); }
  .page-home .hs { margin-top: 22px; gap: 14px; }
  .page-home .hs .plate { padding: 18px 16px; }
  .page-home .hfeed { max-height: none; }
  .page-home .hfeed:not(.all) > .hev:nth-child(n + 6) { display: none; }
  .page-home .hfeed-more { display: inline-flex; margin-top: 12px; }
  .page-home .hev { grid-template-columns: 30px minmax(0, 1fr); }
  .page-home .hev-ico { width: 30px; height: 30px; }
  .page-home .hev-side { grid-column: 2; flex-direction: row; gap: 10px; align-items: center; }
  .page-home .hexp-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-home .hfly-lanes::before { display: none; }
  .page-home .hfly-lane { flex-direction: column; align-items: stretch; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--lc) 45%, transparent); }
  .page-home .hfly-pct { width: auto; padding: 4px 0 8px; }
  .page-home .hfly-line { flex: none; width: var(--lw); height: 16px; min-width: 0; margin-left: 18px; }
  .page-home .hfly-line i { left: 0; right: 0; top: -12px; bottom: 0; background: repeating-linear-gradient(180deg, var(--lc) 0 6px, transparent 6px 12px); animation: flowV 1s linear infinite; }
  .page-home .hfly-lane .hfly-node { flex: none; }
  .page-home .hfly-game { padding-top: 12px; }
  .page-home .hcan { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .page-home .hcan-art { width: 96px; }
  .page-home .hlg a { grid-template-columns: 40px minmax(0, 1fr); }
  .page-home .hlg-st { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }

  body:has(#view[data-page="home"]) .foot { padding-bottom: 104px; }
  /* the bar leads with the prize; it steps aside while the hero's own button is on screen */
  .page-home .hbar {
    display: flex; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; gap: 12px; align-items: center; justify-content: space-between;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -14px 34px -14px rgba(0, 0, 0, .7);
    visibility: visible; transition: transform var(--t-med) var(--ease), opacity var(--t-med), visibility 0s;
  }
  .page-home.cta-in-view .hbar {
    transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform var(--t-med) var(--ease), opacity var(--t-med), visibility 0s linear var(--t-med);
  }
  .page-home .hbar-foil { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; opacity: .8; }
  .page-home .hbar-foil::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
    background: var(--foil); background-size: 33.3334% 100%; animation: barFoil 9s linear infinite;
  }
  .page-home.cta-in-view .hbar-foil::before { animation-play-state: paused; }
  .page-home .hbar-info { display: grid; min-width: 0; gap: 1px; }
  .page-home .hbar-info .label { font-size: 11px; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-home .hbar-info b { font: 600 20px/1.15 var(--nr-mono); color: var(--ink); text-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 45%, transparent); white-space: nowrap; }
  .page-home .hbar-info b.tba { font: 700 14px/1.3 var(--font-sans); color: var(--muted); text-shadow: none; }
  .page-home .hbar-info small { font: 500 11px/1.25 var(--nr-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-home .hbar-act { flex: none; }
  .page-home .hbar-act:empty { display: none; }
  .page-home .hbar-act .btn { height: 46px; padding: 0 18px; min-width: 0; }
  .page-home .hbar-act .btn-take { min-width: 150px; width: auto; }
}
@keyframes foilH { to { transform: translateX(-50%); } }
@keyframes flowV { to { transform: translateY(12px); } }
@keyframes barFoil { to { transform: translateX(-33.3334%); } }

@media (prefers-reduced-motion: reduce) {
  .page-home .bill-rosette, .page-home .bill-foil .bf-bg, .page-home .bill-foil::after, .page-home .hx-title, .page-home .fb-key,
  .page-home .hfly-line i, .page-home .hcan-bw, .page-home .btn-take::after, .page-home .hx-dot, .page-home .hbar-foil::before,
  .page-home .hx-unit.foil-text { animation: none !important; }
  .page-home .bill-ink { display: none; }
}