:root {
  --bg: #FAF7F2;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F3EEE6;
  --ink: #1C1815;
  --ink-soft: #4A4239;
  --ink-mute: #867E74;
  --line: #E8E0D4;
  --line-soft: #F0E9DD;
  --coral: #E86A4C;
  --coral-soft: #FBE5DE;
  --coral-deep: #C4523A;
  --sage: #7A8B6F;
  --focus: rgba(232,106,76,0.22);
  --shadow-sm: 0 1px 2px rgba(28,24,21,0.04), 0 2px 6px rgba(28,24,21,0.04);
  --shadow-md: 0 2px 4px rgba(28,24,21,0.05), 0 10px 30px rgba(28,24,21,0.07);
  --shadow-lg: 0 6px 12px rgba(28,24,21,0.06), 0 30px 60px rgba(28,24,21,0.12);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --bg: #16130F;
  --bg-raised: #201C17;
  --bg-sunken: #0F0D0A;
  --ink: #F5EFE4;
  --ink-soft: #D4CCBD;
  --ink-mute: #8A8277;
  --line: #2B2620;
  --line-soft: #1F1B16;
  --coral: #F4815F;
  --coral-soft: #3A221C;
  --coral-deep: #E86A4C;
  --sage: #9AAC8E;
  --focus: rgba(244,129,95,0.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.4);
  --shadow-lg: 0 6px 12px rgba(0,0,0,0.35), 0 30px 60px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: none; }

/* ─── Animations ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(232,106,76,0.35); }
  70% { box-shadow: 0 0 0 14px rgba(232,106,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,106,76,0); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes drift {
  0% { transform: translate(0,0); }
  100% { transform: translate(-40px,-40px); }
}
@keyframes sheen {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes dotBlink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* Stage scale */
#stage {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--ink-mute);
}

.focus-ring:focus-visible {
  box-shadow: 0 0 0 3px var(--focus);
}

.scroll-fade {
  mask-image: linear-gradient(to bottom, black 0, black calc(100% - 40px), transparent 100%);
}