/* Hallmark · shape: app screen · genre: atmospheric · theme: custom (VR PASS brand, chosen palette)
 * paper: --scene-0 · accent: --color-accent · display: Unbounded · body: Onest
 * nav: none · signature: the live top-10 reordering itself, and the place number rolling into position · states: loading, empty, not found, offline, full
 * axes: animated scene/geometric display/one accent · posture: kiosk and phone tool · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, layout follows the designer's reference by request */
/* waive 2a: the brand pink-purple gradient is the client's explicit direction; it lives only in the animated scene, every component is a solid surface */
/* waive 7a: --color-plate is pure white because the logo original is approved only on white */
/* waive 24b: spacing follows the designer's mock in px */
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url("fonts/onest-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url("fonts/unbounded-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: dark;
  --scene-0: #24083f; --scene-1: #5a1a8c; --scene-2: #d4569f;
  --scene-glow: #ffd3ec; --scene-glass: #c48ad8; --scene-caustic: #fff0fa;
  --color-paper: #24083f;
  --color-surface: #2c0d4f; --color-surface-2: #47186f; --color-field: #1e0638; --color-slot: #1c0634;
  --color-line: #ffa3d2;
  --color-ink: #fff4fb; --color-ink-2: #ead2e5; --color-muted: #b996bc;
  --color-accent: #ff6fb1; --color-accent-ink: #2a0a45;
  --color-signal: #d4ff6a; --color-focus: #d4ff6a; --color-error: #ff9aa8;
  --color-shadow: #12021f;
  --color-plate: #ffffff;
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); caret-color: var(--color-accent); }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
[hidden] { display: none !important; }
button, input { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}