:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --radius-control: 10px;
  --radius-panel: 18px;
  --radius-pill: 999px;
  --header-height: 76px;
  --mobile-nav-height: 78px;
  --motion-fast: 160ms;
  --motion-normal: 320ms;
  --motion-slow: 900ms;
  --font-ui: system-ui, sans-serif;
  --font-display: Georgia, serif;
  --background: #101923;
  --text: #f0eee9;
  --text-muted: #b7bdc2;
  --text-faint: #84949b;
  --accent: #d8ad78;
  --accent-strong: #f1cb91;
  --accent-on: #1b2228;
  --danger: #f2a49a;
  --success: #a9d7be;
  --glass: rgba(12, 22, 31, .75);
  --glass-strong: rgba(11, 19, 27, .93);
  --glass-light: rgba(34, 43, 52, .72);
  --stroke: rgba(231, 219, 199, .22);
  --stroke-strong: rgba(231, 219, 199, .42);
  --shadow: 0 24px 80px rgba(0, 0, 0, .5);
  --room-image: none;
  --orb-idle: rgba(70, 178, 217, .48);
  --orb-listening: rgba(106, 227, 242, .7);
  --orb-thinking: rgba(127, 112, 215, .62);
  --orb-speaking: rgba(241, 175, 107, .72);
  --orb-waiting: rgba(240, 175, 80, .78);
  --orb-alert: rgba(234, 101, 94, .76);
  --orb-off: rgba(166, 179, 185, .28);
}

* { box-sizing: border-box; }
html { background: var(--background); color: var(--text); }
body { min-width: 320px; min-height: 100dvh; margin: 0; font-family: var(--font-ui); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }
button, input, textarea, [tabindex] { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ui-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--icon-url) center/contain no-repeat; mask: var(--icon-url) center/contain no-repeat; }
.overline { color: var(--accent); font-size: .68rem; font-weight: 750; letter-spacing: .18em; line-height: 1.3; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid transparent; border-radius: var(--radius-control); padding: .65rem 1rem; font-weight: 700; white-space: nowrap; transition: transform var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast); }
.button:active, .icon-button:active { transform: scale(.97); }
.button-primary { color: var(--accent-on); background: var(--accent-strong); }
.button-primary:hover { background: var(--accent); }
.button-subtle { background: var(--glass-light); color: var(--text); border-color: var(--stroke); }
.button-subtle:hover { border-color: var(--stroke-strong); background: var(--glass); }
.icon-button { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--text); background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--radius-control); transition: transform var(--motion-fast), background var(--motion-fast); }
.icon-button:hover { background: var(--glass-light); }
.text-link { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem; border: 0; background: none; color: var(--accent-strong); font-weight: 650; }
.text-link:hover { text-decoration: underline; }
.error-text { color: var(--danger); min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }