/* ==========================================================================
   SETL MAP — base.css  (shell)
   Reset · layers · typography · primitives (.btn .icon-btn .chip .tag .field .check .card)
   · screen/panel/sheet layout · chrome · cursor · preloader · overlays · reduced motion
   Only tokens from tokens.css are used here.
   ========================================================================== */

/* ───── Large monitors: everything in rem (type, container, spacing) scales with the root ───── */
@media (min-width: 1800px) { html { font-size: 17px; } }
@media (min-width: 2200px) { html { font-size: 20px; } }
@media (min-width: 2500px) and (min-height: 1300px) { html { font-size: 22px; } }

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  background: var(--paper);
  color-scheme: light;
  overflow-x: clip;
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--tint);
  color: var(--fg);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}
html.is-app, html.is-app body { height: 100%; overflow: hidden; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--header-h) + 16px); }
::selection { background: var(--glow); color: var(--ink); }
[data-tone="dusk"] ::selection { background: var(--glow); color: var(--dusk-3); }

/* Scrollbars: thin, warm */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Programmatic focus targets must not show a ring; real keyboard focus always does */
[tabindex="-1"]:focus { outline: none; }
h1[tabindex="-1"]:focus-visible, h2[tabindex="-1"]:focus-visible, h3[tabindex="-1"]:focus-visible, main[tabindex="-1"]:focus-visible, [data-focus]:focus-visible { box-shadow: none; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--focus-radius, var(--r-xs)); }
.btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible, .tag:focus-visible { border-radius: var(--r-pill); }
@media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; } }

/* ───── Living background layers ───── */
.stage-bg {
  position: fixed; inset: 0; z-index: var(--z-bg);
  background: var(--grad-dusk);
  opacity: 0; pointer-events: none;
}
#atmosphere {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: var(--z-bg); pointer-events: none;
}
body::before { /* vignette */
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(94, 60, 24, .10) 100%);
  opacity: var(--vig-m, 1);
}
body[data-tone="dusk"]::before { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .28) 100%); }
body::after { /* paper grain: static, normal blend */
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  background: var(--grain); opacity: .06;
}

/* ───── Typography ───── */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  letter-spacing: var(--track-display);
  hyphens: manual;
  text-wrap: balance;
  overflow-wrap: normal;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
.h2-lg  { font-size: var(--fs-h2-lg); line-height: var(--lh-head); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.05; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
h1 em, h2 em, h3 em, .display em, .h1 em, .h2 em, .h3 em {
  font-style: italic; font-weight: 500; color: var(--terra);
}
[data-tone="dusk"] h1 em, [data-tone="dusk"] h2 em, [data-tone="dusk"] h3 em, [data-tone="dusk"] .display em { color: var(--glow); }
p { text-wrap: pretty; }
.lead { font: 400 var(--fs-lead)/var(--lh-lead) var(--font-text); color: var(--fg-2); max-width: 34em; }
.body { font: 400 var(--fs-body)/var(--lh-body) var(--font-text); }
.small { font-size: var(--fs-small); line-height: 1.45; }
.micro { font-size: var(--fs-micro); line-height: 1.4; }
.caption {
  font: 500 var(--fs-caption)/1.2 var(--font-text);
  text-transform: uppercase; letter-spacing: var(--track-caption);
}
.caption--accent { color: var(--sun-deep); }
[data-tone="dusk"] .caption--accent { color: var(--glow); }
.muted { color: var(--fg-2); }
.faint { color: var(--ink-3); }
[data-tone="dusk"] .faint { color: var(--on-dusk-2); }
.num { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.num-xl { font: 600 var(--fs-num-xl)/1 var(--font-text); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.num-lg { font: 600 var(--fs-num-lg)/1.1 var(--font-text); font-variant-numeric: tabular-nums lining-nums; }
.manifest { font: italic 500 var(--fs-manifest)/1.2 var(--font-display); font-variant-numeric: lining-nums; }
.accent { color: var(--terra); }
.nowrap { white-space: nowrap; }

/* Masked text lines / words / chars (produced by SetlMap.utils.splitText).
   The hidden state is applied by GSAP (yPercent), never by CSS transform. */
.ln { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.ln__in { display: block; }
.ln--word, .ln--char { display: inline-block; vertical-align: top; }
.sl-vis { display: inline; }
.sl-vis--lines { display: block; }
.sl-w { display: inline; }
.sl-nb { white-space: nowrap; display: inline-block; }

/* ───── Utilities ───── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.container {
  width: 100%; max-width: calc(var(--container-max) + 2 * var(--page-pad)); margin-inline: auto;
  padding-inline: calc(var(--page-pad) + var(--safe-l)) calc(var(--page-pad) + var(--safe-r));
}
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.row { display: flex; align-items: center; gap: var(--row-gap, var(--space-3)); }
.icon { display: inline-block; flex: none; vertical-align: middle; }
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: calc(var(--z-toast) + 5);
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r-pill);
  font: 600 14px/1 var(--font-text); text-decoration: none; transition: top .2s var(--ease-out);
}
.skip-link:focus { top: calc(10px + var(--safe-t)); box-shadow: var(--focus-ring-dusk); }
.scroll-fade { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 34px), transparent 100%); }
.noscript { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; margin: 0; padding: 24px; background: var(--paper); color: var(--ink); font: 500 18px/1.4 var(--font-text); text-align: center; }

/* ───── Buttons ───── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: var(--r-pill);
  font: 600 16px/1 var(--font-text); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: translate var(--dur-xs) var(--ease-out), scale var(--dur-press), background-color var(--dur-xs) var(--ease-standard),
              box-shadow var(--dur-xs), color var(--dur-xs), border-color var(--dur-xs);
}
@media (min-width: 768px) { .btn { min-height: 56px; } }
.btn__label { display: inline-block; }
.btn__icon { display: inline-flex; width: 20px; height: 20px; flex: none; transition: translate var(--dur-xs) var(--ease-out); }
.btn__icon svg { width: 100%; height: 100%; }
.btn:active { scale: .97; }
/* GSAP writes inline translate/scale on tweened buttons, which beats the rule above: press feedback on the label via transform survives */
.btn:active .btn__label { transform: scale(.96); }
.btn--primary { background: var(--terra); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:active { background: var(--terra-press); }
.btn--primary[aria-disabled="true"], .btn--primary:disabled {
  background: var(--paper-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed;
}
.btn--secondary { background: var(--card); border-color: var(--ink); color: var(--ink); }
.btn--secondary:active { scale: .98; }
.btn--ghost { background: transparent; color: var(--fg); min-height: 44px; padding: 0 16px; }
.btn--ghost .btn__label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color var(--dur-xs); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"] { cursor: not-allowed; }
@media (max-width: 479px) { .btn { white-space: normal; text-align: center; padding: 12px 20px; line-height: 1.15; } }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not([aria-disabled="true"]) { translate: 0 -2px; background: var(--terra-hover); }
  .btn--primary:hover:not([aria-disabled="true"]) .btn__icon { translate: 4px 0; }
  .btn--secondary:hover { background: var(--ink); color: var(--paper); }
  .btn--ghost:hover .btn__label { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  .btn--ghost:hover .btn__icon { translate: 3px 0; }
}
/* Attention ring: pulses every 3.5s. Attach with .btn--pulse (intro, first enabled CTA). */
.btn--pulse::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 2px solid var(--sun);
  opacity: 0; pointer-events: none; animation: btn-ring 3.5s var(--ease-out) infinite;
}
@keyframes btn-ring {
  0%   { scale: 1 1; opacity: .5; }
  55%  { scale: 1.1 1.5; opacity: 0; }
  100% { scale: 1.1 1.5; opacity: 0; }
}
/* Dusk variants */
[data-tone="dusk"] .btn--primary { background: var(--glow); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(255, 217, 143, .45); }
[data-tone="dusk"] .btn--primary:active { background: #F5CB7C; }
[data-tone="dusk"] .btn--primary[aria-disabled="true"] { background: var(--dusk-2); color: var(--on-dusk-2); box-shadow: none; }
[data-tone="dusk"] .btn--secondary { background: transparent; border-color: var(--on-dusk); color: var(--on-dusk); }
[data-tone="dusk"] .btn--ghost { color: var(--on-dusk); }
@media (hover: hover) and (pointer: fine) {
  [data-tone="dusk"] .btn--primary:hover:not([aria-disabled="true"]) { background: #FFE7B5; }
  [data-tone="dusk"] .btn--secondary:hover { background: rgba(246, 239, 227, .12); color: var(--on-dusk); }
}
[data-tone="dusk"] :focus-visible { box-shadow: var(--focus-ring-dusk); }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--fg); background: transparent; transition: background-color var(--dur-xs), scale var(--dur-press);
}
.icon-btn:active { scale: .92; }
.icon-btn svg { width: 24px; height: 24px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--paper-2); } [data-tone="dusk"] .icon-btn:hover { background: rgba(246, 239, 227, .12); } }

/* ───── Chip (grow items, rooms) ───── */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 0 20px 0 8px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, var(--shadow-soft);
  font: 600 15px/1.2 var(--font-text); color: var(--ink); text-align: left; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-xs) var(--ease-standard), color var(--dur-xs), border-color var(--dur-xs), scale var(--dur-press);
}
@media (min-width: 768px) { .chip { min-height: 56px; } }
.chip__disc {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper-2); color: var(--ink); transition: background-color var(--dur-xs);
}
.chip__disc svg { width: 24px; height: 24px; }
.chip__label { flex: 1; min-width: 0; font-size: 14px; }
@media (min-width: 768px) { .chip__label { font-size: 15px; } }
.chip__check { flex: none; width: 16px; height: 16px; opacity: 0; transition: opacity var(--dur-xs); color: var(--paper); }
.chip:active { scale: .96; }
.chip[aria-checked="true"], .chip.is-selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip[aria-checked="true"] .chip__disc, .chip.is-selected .chip__disc { background: var(--sun); color: var(--ink); }
.chip[aria-checked="true"] .chip__check, .chip.is-selected .chip__check { opacity: 1; }
.chip--compact { min-width: 48px; min-height: 48px; padding: 0 18px; justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover:not([aria-checked="true"]):not(.is-selected) { background: var(--paper-2); }
}

/* ───── Scenario tag (stamp) ───── */
.tag {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 10px;
  border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: var(--card-2); color: var(--ink);
  font: 600 14px/1 var(--font-text); white-space: nowrap; rotate: var(--rot, 0deg);
}
.tag__icon { display: inline-flex; width: 16px; height: 16px; flex: none; }
.tag__icon svg { width: 100%; height: 100%; }
.tag--dusk { border-color: var(--on-dusk); background: rgba(246, 239, 227, .08); color: var(--on-dusk); }
.tag--ghost { border-style: dashed; border-color: var(--line-strong); background: transparent; color: var(--ink-3); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ───── Form fields ───── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font: 600 14px/1.2 var(--font-text); color: var(--ink); }
.field__input, .field select {
  width: 100%; height: 56px; padding: 0 16px; border-radius: var(--r-field);
  border: 1.5px solid var(--line); background: var(--card-2); color: var(--ink);
  font: 400 16px/1.2 var(--font-text); appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-xs), background-color var(--dur-xs), box-shadow var(--dur-xs);
}
.field__input::placeholder { color: var(--ink-3); opacity: 1; }
.field__input:focus, .field__input:focus-visible { border-color: var(--ink); box-shadow: var(--ring); outline: none; border-radius: var(--r-field); }
.field.is-error .field__input { border-color: var(--err); background: var(--err-soft); }
.field__msg { display: flex; align-items: center; gap: 6px; min-height: 20px; font: 400 14px/1.3 var(--font-text); color: var(--err); }
.field__msg svg { width: 16px; height: 16px; flex: none; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-block: 10px; cursor: pointer; font: 400 14px/1.4 var(--font-text); color: var(--ink); }
.check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.check__box {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: var(--r-xs); border: 2px solid var(--ink);
  display: grid; place-items: center; background: var(--card-2); transition: background-color var(--dur-xs); margin-top: -1px;
}
.check__box svg { width: 16px; height: 16px; fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.check__box path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--ease-out); }
.check input:checked + .check__box { background: var(--ink); }
.check input:checked + .check__box path { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { box-shadow: var(--ring); }
.field.is-error .check__box, .check.is-error .check__box { border-color: var(--err); }

/* Inline text button inside the consent label: visually a link, 44px tap area via ::after */
.rs-link { position: relative; }
.rs-link::after { content: ""; position: absolute; inset: -12px -6px; }

/* ───── Cards ───── */
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.card--raised { background: var(--card-2); }

/* ==========================================================================
   Stage, screens, panels (sheet layout < 1024, split layout >= 1024)
   ========================================================================== */
#stage { position: relative; z-index: var(--z-stage); outline: none; }
html.is-app #stage { position: fixed; inset: 0; overflow: hidden; }
#stage.is-busy { pointer-events: none; }

.screen {
  position: absolute; inset: 0; overflow: hidden;
  padding: calc(var(--header-h) + var(--safe-t)) 0 0;
}
.screen[data-screen="results"], html.is-scroll .screen[data-screen="results"] {
  position: relative; inset: auto; overflow: visible; min-height: 100vh; min-height: 100svh; padding: 0;
}
html.is-scroll .screen:not([data-screen="results"]) { position: absolute; inset: 0 0 auto 0; height: 100vh; height: 100svh; }

/* Scene host: lives offscreen until docked into a .scene-slot */
.scene-host {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: var(--sc-radius, 0); background: transparent;
}
#stage > .scene-host { position: fixed; left: -10000px; top: 0; width: 960px; height: 600px; visibility: hidden; pointer-events: none; }
.scene-slot {
  position: sticky; top: 0; z-index: var(--z-scene);
  height: var(--scene-h); width: 100%; border-radius: var(--sc-radius, 0);
}

/* Sheet layout (mobile, portrait) */
.panel {
  position: relative; z-index: var(--z-panel);
  margin-top: -24px; border-radius: var(--r-sheet);
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-sheet);
  height: calc(100vh - var(--header-h) - var(--safe-t) - var(--scene-h) + 24px);
  height: calc(100svh - var(--header-h) - var(--safe-t) - var(--scene-h) + 24px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) calc(var(--page-pad) + var(--safe-l)) 0 calc(var(--page-pad) + var(--safe-r));
  display: flex; flex-direction: column;
}
.panel::before { /* grab handle, decoration only */
  content: ""; align-self: center; flex: none; width: 36px; height: 4px; border-radius: 4px; background: var(--line-strong);
  margin: -12px 0 var(--space-4); opacity: .7;
}
.panel > * { flex: none; }
.panel--bare { background: transparent; box-shadow: none; border-radius: 0; margin-top: 0; color: var(--fg); }
.panel--bare::before { display: none; }
.sheet { background: var(--card); border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet); }

.cta-bar {
  position: sticky; bottom: 0; z-index: var(--z-sticky); margin: auto calc(-1 * (var(--page-pad) + var(--safe-r))) 0 calc(-1 * (var(--page-pad) + var(--safe-l)));
  padding: 12px calc(var(--page-pad) + var(--safe-r)) calc(12px + var(--safe-b)) calc(var(--page-pad) + var(--safe-l));
  background: var(--grad-fade-b); display: flex; flex-direction: column; gap: 8px;
}
.cta-bar .btn--primary { width: 100%; min-height: 52px; }
.cta-bar__hint { text-align: center; font-size: var(--fs-small); color: var(--ink-3); min-height: 1.3em; }

/* Split layout: desktop and landscape phones */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 520px) {
  .screen {
    left: 0; right: 0; margin-inline: auto; width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--page-pad));
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--gutter);
    padding: calc(var(--header-h) + var(--safe-t) + 16px) calc(var(--page-pad) + var(--safe-r)) 36px calc(var(--page-pad) + var(--safe-l));
  }
  .screen[data-screen="results"], html.is-scroll .screen[data-screen="results"] {
    display: block; max-width: none; padding: 0; margin: 0;
  }
  html.is-scroll .screen:not([data-screen="results"]) { inset: 0 0 auto 0; height: 100vh; height: 100svh; }
  :root { --sc-radius: var(--r-scene); }
  .panel {
    grid-column: 1 / span 5; max-width: var(--panel-max); height: auto; min-height: 0; margin: 0;
    background: transparent; box-shadow: none; border-radius: 0; padding: 0; color: var(--fg);
  }
  .panel::before { display: none; }
  .scene-slot {
    grid-column: 6 / -1; position: sticky; top: 0; align-self: start;
    height: calc(100vh - var(--header-h) - var(--safe-t) - 52px); height: calc(100svh - var(--header-h) - var(--safe-t) - 52px);
    box-shadow: var(--shadow-scene);
  }
  .scene-host { box-shadow: none; }
  .cta-bar {
    position: static; margin: var(--space-5) 0 0; padding: 0; background: none; flex-direction: row; align-items: center; gap: var(--space-3);
  }
  .cta-bar .btn--primary { width: auto; }
  .cta-bar__hint { text-align: left; }
}

/* Fallback screen (shown only if a screen module failed to register) */
.fallback { display: grid; place-items: center; height: 100%; padding: var(--space-6) var(--page-pad); text-align: center; }
.fallback__box { max-width: 30rem; display: flex; flex-direction: column; gap: var(--space-4); align-items: center; }
.fallback__box h2 { font-size: var(--fs-h3); }

/* ==========================================================================
   Chrome (persistent header)
   ========================================================================== */
.chrome {
  --c-line: var(--line-strong);
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome);
  height: calc(var(--header-h) + var(--safe-t)); padding-top: var(--safe-t);
  color: var(--fg); background: transparent;
  transition: background-color .3s var(--ease-standard), box-shadow .3s var(--ease-standard), opacity .6s var(--ease-out), color .5s;
  contain: layout style;
}
[data-tone="dusk"] .chrome { --c-line: rgba(246, 239, 227, .38); }
.chrome.is-solid { background: var(--glass-paper); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.chrome[data-tone="dusk"] { --c-line: rgba(246, 239, 227, .38); background: var(--glass-dusk); box-shadow: 0 1px 0 rgba(246, 239, 227, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.is-booting .chrome { opacity: 0; }
.chrome__inner {
  height: var(--header-h); max-width: calc(var(--container-max) + 2 * var(--page-pad)); margin-inline: auto;
  padding-inline: calc(var(--page-pad) + var(--safe-l)) calc(var(--page-pad) + var(--safe-r));
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.chrome__left, .chrome__right { display: flex; align-items: center; min-width: 0; }
.chrome__back {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; max-width: 0; overflow: hidden; opacity: 0; visibility: hidden;
  margin-left: -10px; padding: 0 0 0 10px; border-radius: var(--r-pill); color: var(--fg);
  font: 600 14px/1 var(--font-text); white-space: nowrap;
  transition: max-width .6s var(--ease-in-out), opacity .4s var(--ease-standard), visibility 0s .6s, background-color var(--dur-xs), margin .6s var(--ease-in-out), scale var(--dur-press);
}
.chrome__back svg { flex: none; width: 24px; height: 24px; }
.chrome__back-label { display: none; padding-right: 16px; }
.chrome.is-back .chrome__back { max-width: 140px; opacity: 1; visibility: visible; margin-right: 6px; transition-delay: 0s; }
.chrome__back:active { scale: .96; }
@media (max-width: 767px) { .chrome.is-back .chrome__back { max-width: 44px; margin-right: 4px; padding-right: 10px; } }
.chrome.is-back .chrome__back { min-width: 44px; } /* tap target: icon stays optically aligned via -10px margin */
@media (min-width: 768px) { .chrome__back-label { display: inline; } }
@media (hover: hover) and (pointer: fine) { .chrome__back:hover { background: var(--paper-2); } [data-tone="dusk"] .chrome__back:hover { background: rgba(246, 239, 227, .12); } }

.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); user-select: none; -webkit-user-select: none; white-space: nowrap; border-radius: var(--r-xs); }
.wordmark__setl { font: 600 18px/1 var(--font-text); letter-spacing: .24em; margin-right: -.24em; }
.wordmark__rule { width: 1px; height: 18px; background: var(--c-line); margin-left: .24em; }
.wordmark__map { font: normal 500 22px/1 var(--font-display); letter-spacing: 0; transform: translateY(-1px); }
.wordmark.is-link { position: relative; cursor: pointer; }
.wordmark.is-link::after { content: ""; position: absolute; inset: -14px -10px; } /* 44px tap area around the restart link */
@media (max-width: 479px) { .chrome:not([data-step="0"]) .wordmark__rule, .chrome:not([data-step="0"]) .wordmark__map { display: none; } }

.progress { display: flex; align-items: center; gap: 10px; }
.progress__arc { position: relative; }
.progress__svg { display: block; width: 124px; height: auto; overflow: visible; }
@media (min-width: 768px) { .progress__svg { width: 220px; } .progress { gap: 14px; } }
.progress__horizon { fill: none; stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .8; }
.progress__track { fill: none; stroke: var(--c-line); stroke-width: 1.5; stroke-dasharray: 2.5 5; stroke-linecap: round; }
.progress__done { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.progress__dot { fill: var(--bg); stroke: var(--c-line); stroke-width: 1.5; transition: fill var(--dur-s), stroke var(--dur-s); }
.progress__dot.is-done { fill: var(--fg); stroke: var(--fg); }
.progress__sun circle { stroke: var(--fg); }
.progress__rays line { stroke: var(--fg); stroke-width: 1.5; stroke-linecap: round; }
.progress__rays { transform-box: fill-box; transform-origin: center; animation: sun-spin 24s linear infinite; }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.progress__hits { position: absolute; inset: 0; pointer-events: none; display: none; }
@media (min-width: 768px) { .progress__hits { display: block; } }
.progress__hit {
  position: absolute; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: var(--r-sm);
  pointer-events: auto; background: transparent;
}
.progress__hit[hidden] { display: none; }
.progress__of { margin-left: .5em; }
.progress__count { font: 500 var(--fs-caption)/1 var(--font-text); letter-spacing: var(--track-caption); color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }

/* Theme switch at the right end of the header (js/theme.js). The dot previews the look you get by pressing it. */
.theme-toggle {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; border-radius: 50%;
  color: var(--fg); border: 1.5px solid var(--c-line); background: transparent; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-xs), border-color var(--dur-xs), scale var(--dur-press);
}
.theme-toggle::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* 46px tap area */
.theme-toggle__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--theme-red); box-shadow: 0 0 0 1.5px var(--fg); }
.theme-toggle:active { scale: .92; }
.theme-toggle:focus-visible { border-radius: 50%; }
@media (min-width: 768px) { .theme-toggle { width: 36px; height: 36px; margin-left: 14px; } .theme-toggle__dot { width: 16px; height: 16px; } }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { background: var(--paper-2); border-color: var(--fg); } [data-tone="dusk"] .theme-toggle:hover { background: rgba(246, 239, 227, .12); } }
/* narrow phones: the sun arc gives up a little width so the switch fits next to the wordmark and the counter */
@media (max-width: 479px) { .progress { gap: 8px; } .progress__svg { width: clamp(80px, calc(100vw - 273px), 124px); } }

/* Odometer (SetlMap.utils.odometer / counter roll) */
.odo { display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums lining-nums; line-height: var(--odo-lh, 1.15); }
.odo__cell { display: inline-block; height: calc(1em * var(--odo-lh, 1.15)); width: var(--odo-w, auto); overflow: hidden; position: relative; text-align: center; }
.odo__col { display: block; }
.odo__d { display: block; height: calc(1em * var(--odo-lh, 1.15)); line-height: calc(1em * var(--odo-lh, 1.15)); }
.odo__sep { display: inline-block; height: calc(1em * var(--odo-lh, 1.15)); line-height: calc(1em * var(--odo-lh, 1.15)); white-space: pre; }

/* ───── Footer / demo tag ───── */
.site-foot { display: none; }
.demo-tag { font: 400 var(--fs-micro)/1.4 var(--font-text); color: var(--ink-3); letter-spacing: .01em; }
[data-tone="dusk"] .demo-tag { color: var(--on-dusk-2); }
.demo-tag--inline { display: block; padding: var(--space-5) var(--page-pad) calc(var(--space-4) + var(--safe-b)); text-align: center; }
@media (min-width: 1024px) {
  /* aligned to the content grid (same left edge as wordmark and screen content) */
  .site-foot { display: block; position: fixed; left: max(calc(var(--page-pad) + var(--safe-l)), calc((100vw - var(--container-max)) / 2 + var(--safe-l))); bottom: 10px; z-index: var(--z-sticky); pointer-events: none; }
  .site-foot .demo-tag { pointer-events: auto; display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: var(--glass-paper); cursor: help; }
  [data-tone="dusk"] .site-foot .demo-tag { background: var(--glass-dusk); }
  .site-foot .demo-tag { transition: opacity .4s ease; }
  .demo-tag-hide .site-foot .demo-tag { opacity: 0; pointer-events: none; }
  .demo-tag--inline { display: none; }
}

/* ==========================================================================
   Cursor + touch light spot
   ========================================================================== */
#cursor { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-cursor); display: none; }
html.has-cursor #cursor { display: block; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.has-cursor textarea, html.has-cursor [contenteditable] { cursor: text !important; }
.cursor__dot, .cursor__ring, .cursor__label { position: fixed; left: 0; top: 0; will-change: transform; }
.cursor__dot { width: var(--cursor-dot); height: var(--cursor-dot); margin: calc(var(--cursor-dot) / -2) 0 0 calc(var(--cursor-dot) / -2); border-radius: 50%; background: var(--fg); }
.cursor__ring {
  width: var(--cursor-ring); height: var(--cursor-ring); margin: calc(var(--cursor-ring) / -2) 0 0 calc(var(--cursor-ring) / -2);
  border-radius: 50%; background: rgba(242, 169, 59, .35); mix-blend-mode: multiply;
}
body[data-tone="dusk"] .cursor__ring { mix-blend-mode: normal; background: rgba(255, 217, 143, .28); }
.cursor__label {
  width: 80px; margin: -8px 0 0 -40px; text-align: center; font: 600 12px/16px var(--font-text); color: var(--ink); letter-spacing: .01em; opacity: 0; white-space: nowrap;
}
body[data-tone="dusk"] .cursor__label { color: var(--on-dusk); }
.touch-spot {
  position: fixed; left: 0; top: 0; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, rgba(255, 217, 143, 0) 70%); opacity: 0; pointer-events: none; z-index: var(--z-cursor);
}

/* ==========================================================================
   Overlays: boot curtain, dusk wipe, golden flash
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: calc(var(--z-cursor) - 1); display: grid; place-items: center;
  background: var(--tint); color: var(--ink); overflow: hidden;
}
.preloader[hidden] { display: none; }
.preloader::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .06; pointer-events: none; }
.preloader__center { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: var(--page-pad); text-align: center; }
.preloader__arc { width: min(240px, 62vw); height: auto; overflow: visible; margin-bottom: -2px; }
.preloader__horizon { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1 5; }
.preloader__path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.preloader__sun { fill: url(#sunGrad); stroke: var(--ink); stroke-width: 1.6; }
.preloader__mark { font: 600 clamp(2.25rem, 9vw, 3.5rem)/1 var(--font-text); letter-spacing: .3em; margin-right: -.3em; color: var(--ink); display: block; }
.preloader__tag { font: italic 500 1.5rem/1.1 var(--font-display); color: var(--ink-2); letter-spacing: .01em; }

.wipe {
  position: fixed; inset: 0; z-index: var(--z-wipe); pointer-events: none; background: var(--dusk);
  clip-path: circle(0px at 50% 50%); visibility: hidden;
}
.flash {
  position: fixed; inset: 0; z-index: var(--z-wipe); pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(circle at 50% 55%, var(--glow) 0%, rgba(255, 217, 143, .6) 38%, rgba(255, 217, 143, 0) 80%);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .rm-fade, .rm-fade * { transition-duration: .25s !important; }
  .progress__rays { animation: none !important; }
  .btn--pulse::after { display: none; }
}
html.rm .progress__rays { animation: none; }