:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  --background: #07080b;
  --surface: #0d0f14;
  --surface-raised: #11141a;
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.065);
  --text: #f5f6f8;
  --muted: #a7acb6;
  --quiet: #737985;
  --accent-rgb: 223, 42, 146;
  --safe-x: clamp(42px, 5.25vw, 150px);
  --safe-top: clamp(92px, 9.6vh, 132px);
  --safe-bottom: clamp(42px, 5.8vh, 78px);
  --panel-radius: 16px;
  --panel-shadow: 0 34px 80px rgba(0,0,0,.28);
  --list-radius: 14px;
  --chip-radius: 999px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--background); }
body { color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }

.hide-pointer, .hide-pointer * { cursor: none !important; }

.experience-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--background);
  isolation: isolate;
}

.scene-stage, .scene-layer { position: absolute; inset: 0; }
.scene-layer { overflow: hidden; will-change: clip-path; }
.scene-layer--a { z-index: 2; }
.scene-layer--b { z-index: 1; }

.runtime-progress {
  position: absolute;
  z-index: 20;
  left: var(--safe-x);
  right: var(--safe-x);
  bottom: 22px;
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.runtime-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: rgba(var(--accent-rgb), .8);
  will-change: transform;
}

.start-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  border: 0;
  background: rgba(7,8,11,.92);
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
}
.start-overlay span { font-size: clamp(24px, 2vw, 42px); font-weight: 600; }
.start-overlay small { color: var(--muted); font-size: 15px; }
.start-overlay[hidden] { display: none; }

.diagnostics {
  position: absolute;
  z-index: 90;
  right: 20px;
  bottom: 34px;
  min-width: 330px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 9, 13, .94);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.diagnostics strong, .diagnostics span { display: block; }
.diagnostics span { color: var(--muted); }

.fatal-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
}
.fatal-error strong { font-size: 26px; }
.fatal-error span { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}