:root {
  --color-void: #0a0a0a;
  --color-void-lift: #1a1a1a;
  --color-zone: #141414;
  --color-zone-edge: #2a2a2a;
  --color-gold: #d4af37;
  --color-fg: #e8e8e8;
  --color-muted: #8a8a8a;
  --color-faint: #5e5e5e;
  --font-sans: "Outfit", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --phi: 1.618;
  --phi-ms: 1618ms;
  --phi-ease: cubic-bezier(0.236, 0, 0.236, 1);
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--color-void);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-void);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.5;
}

button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

.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;
}

.gs-screen {
  --phi: 1.618;
  --phi-ms: 1618ms;
  --phi-ease: cubic-bezier(0.236, 0, 0.236, 1);
  --color-accent-primary: var(--gs-accent);
  --color-surface-base: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-base));
  --color-surface-deep: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-deep));
  --gs-hue: 220;
  --gs-sat: 25%;
  --gs-l-base: 7%;
  --gs-l-deep: 4%;
  --gs-l-void: 2%;
  --gs-accent: #d8a45a;
  --gs-accent-2: #b7874a;
  --gs-spiral: #d8a45a;
  --gs-glow: 0 0 32px rgba(216, 164, 90, 0.16);
  --gs-ease: var(--phi-ease);
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-surface-base);
  color: var(--color-fg);
  transition:
    background var(--phi-ms) var(--gs-ease),
    opacity var(--phi-ms) var(--gs-ease);
}

.gs-screen[data-silence-theme="ember"] {
  --gs-hue: 218;
  --gs-sat: 20%;
  --gs-l-base: 8%;
  --gs-l-deep: 4%;
  --gs-l-void: 2%;
  --gs-accent: #d8a45a;
  --gs-accent-2: #b7874a;
  --gs-spiral: #d8a45a;
  --gs-glow: 0 0 32px rgba(216, 164, 90, 0.2);
}

.gs-screen[data-silence-theme="graphite"] {
  --gs-hue: 220;
  --gs-sat: 20%;
  --gs-l-base: 6%;
  --gs-l-deep: 3%;
  --gs-l-void: 2%;
  --gs-accent: #6e7a8c;
  --gs-accent-2: #6b8f96;
  --gs-spiral: #6b8f96;
  --gs-glow: none;
}

.gs-screen[data-silence-theme="midnight"] {
  --gs-hue: 220;
  --gs-sat: 10%;
  --gs-l-base: 7%;
  --gs-l-deep: 4%;
  --gs-l-void: 2%;
  --gs-accent: #c49a6a;
  --gs-accent-2: #e6ecf5;
  --gs-spiral: #c49a6a;
  --gs-glow: none;
}

.gs-screen[data-silence-theme="ion"] {
  --gs-hue: 210;
  --gs-sat: 20%;
  --gs-l-base: 6%;
  --gs-l-deep: 3%;
  --gs-l-void: 2%;
  --gs-accent: #8ec0c7;
  --gs-accent-2: transparent;
  --gs-spiral: #8ec0c7;
  --gs-glow: none;
}

.gs-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 38.2%,
    transparent 40%,
    hsl(var(--gs-hue) 20% 4% / 0.55) 85%
  );
  transition: background 2618ms var(--gs-ease);
}

.gs-screen[data-phase="entry"] {
  animation: gs-bg-deepen 1618ms var(--gs-ease) forwards;
}

@keyframes gs-bg-deepen {
  from {
    background: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-base));
  }
  to {
    background: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-deep));
  }
}

.gs-screen[data-phase="deepening"] {
  background: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-deep));
}
.gs-screen[data-phase="deepening"]::after {
  background: radial-gradient(
    ellipse at 50% 38.2%,
    transparent 28%,
    hsl(var(--gs-hue) 18% 3% / 0.78) 88%
  );
}

.gs-screen[data-phase="silence"] {
  background: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-void));
}
.gs-screen[data-phase="silence"]::after {
  background: radial-gradient(
    ellipse at 50% 38.2%,
    transparent 18%,
    hsl(var(--gs-hue) 16% 2% / 0.9) 80%
  );
}

.gs-screen[data-phase="return"] {
  background: hsl(var(--gs-hue) var(--gs-sat) var(--gs-l-base));
}
.gs-screen[data-phase="return"]::after {
  background: radial-gradient(
    ellipse at 50% 38.2%,
    transparent 48%,
    hsl(var(--gs-hue) 18% 5% / 0.45) 100%
  );
}

.gs-screen--leaving {
  opacity: 0;
  pointer-events: none;
}

.gs-hit {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 100dvh;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.gs-hit:focus { outline: none; }
.gs-hit:focus-visible {
  outline: 2px solid #f2f3f5;
  outline-offset: -12px;
}

.gs-anchor {
  position: absolute;
  top: 38.2vh;
  left: 50%;
  width: min(90vw, calc(62dvh * 0.966));
  height: min(78dvh, calc(62dvh * 1.164));
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}

.gs-form {
  width: min(62vw, calc(62dvh / var(--phi)), 25rem);
  height: auto;
  aspect-ratio: 1 / 1.618;
  opacity: 0;
  transform: scale(0.9);
  filter: blur(4px);
  animation: gs-enter 1618ms var(--gs-ease) forwards;
}

.gs-form-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phi) * var(--phi) * 8px);
  transform: rotate(23.6deg);
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-accent-primary) 60%, transparent) 0%,
    color-mix(in oklab, var(--gs-accent-2) 22%, transparent) 48%,
    transparent 100%
  );
  box-shadow: var(--gs-glow);
}

.gs-form--live.gs-form--entry {
  opacity: 0.8;
  transform: scale(1);
  filter: blur(1px);
  animation: gs-breath-entry 6472ms var(--gs-ease) infinite;
}

.gs-form--live.gs-form--deepening {
  opacity: 0.5;
  transform: scale(1);
  filter: blur(2px);
  animation: gs-breath-deepening 10472ms var(--gs-ease) infinite;
  transition: opacity 2618ms var(--gs-ease), filter 2618ms var(--gs-ease);
}

.gs-form--live.gs-form--silence {
  opacity: 0.2;
  transform: scale(1);
  filter: blur(4px);
  animation: gs-breath-silence 16944ms var(--gs-ease) infinite;
  transition: opacity 6472ms var(--gs-ease), filter 6472ms var(--gs-ease);
}

.gs-form--live.gs-form--return {
  opacity: 0.8;
  transform: scale(1);
  filter: blur(1px);
  animation: gs-breath-return 10472ms var(--gs-ease) infinite;
  transition: opacity 4236ms var(--gs-ease), filter 4236ms var(--gs-ease);
}

@keyframes gs-enter {
  from { opacity: 0; transform: scale(0.9); filter: blur(4px); }
  to { opacity: 0.8; transform: scale(1); filter: blur(1px); }
}

@keyframes gs-breath-entry {
  0% { transform: scale(1); }
  38.2% { transform: scale(1.012); }
  61.8% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

@keyframes gs-breath-deepening {
  0% { transform: scale(1); }
  38.2% { transform: scale(1.008); }
  61.8% { transform: scale(1.008); }
  100% { transform: scale(1); }
}

@keyframes gs-breath-silence {
  0% { transform: scale(1); }
  38.2% { transform: scale(1.004); }
  61.8% { transform: scale(1.004); }
  100% { transform: scale(1); }
}

@keyframes gs-breath-return {
  0% { transform: scale(1); }
  38.2% { transform: scale(1.01); }
  61.8% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.gs-spiral {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 60%;
  color: var(--gs-spiral);
  opacity: 0.3;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: none;
}

.gs-form--live.gs-form--deepening .gs-spiral,
.gs-form--live.gs-form--return .gs-spiral {
  animation: gs-spiral-rotate 60s linear infinite;
}

.gs-form--silence .gs-spiral { animation: none; }
.gs-screen[data-silence-theme="ember"] .gs-spiral {
  filter: drop-shadow(0 0 8px rgba(216, 164, 90, 0.2));
}
.gs-screen[data-silence-theme="graphite"] .gs-spiral { opacity: 0.2; }
.gs-screen[data-silence-theme="midnight"] .gs-spiral { opacity: 0.25; filter: blur(0.4px); }
.gs-screen[data-silence-theme="ion"] .gs-spiral { opacity: 0.15; }

@keyframes gs-spiral-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.gs-copy {
  position: absolute;
  left: 50%;
  top: calc(38.2vh + min(36dvh, 48vw) + 1.618rem);
  transform: translateX(-50%);
  width: min(22rem, calc(100% - 2.625rem));
  min-height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gs-line {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--color-fg) 60%, transparent);
  transition: opacity 1618ms var(--gs-ease);
}

.gs-continue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(2.125rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: block;
  min-height: 44px;
  padding: 0 1.3125rem;
  border: 1px solid color-mix(in oklab, var(--color-gold) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--color-fg);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.gs-continue:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.gs-continue:focus-visible {
  outline: 2px solid #f2f3f5;
  outline-offset: 4px;
}

.aha-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  margin: 0 auto;
  padding: 3.4375rem 1.3125rem 5rem;
  display: grid;
  justify-items: center;
  gap: 1.3125rem;
  text-align: center;
}

.aha-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--color-fg);
}

.aha-lede {
  margin: 0;
  max-width: 32ch;
  color: color-mix(in oklab, var(--color-fg) 78%, transparent);
}

.aha-ask {
  margin: 0;
  max-width: 28ch;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.aha-list {
  list-style: none;
  width: min(100%, 22rem);
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8125rem;
}

.aha-choice {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-zone-edge);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--color-zone) 50%, transparent);
  color: var(--color-fg);
  font-size: 0.875rem;
  font-weight: 300;
}

.aha-choice:hover,
.aha-choice--on {
  border-color: color-mix(in oklab, var(--color-gold) 40%, var(--color-zone-edge));
}

.aha-choice--on {
  background: color-mix(in oklab, var(--color-gold) 10%, transparent);
}

.aha-choice:focus-visible {
  outline: 2px solid #f2f3f5;
  outline-offset: 4px;
}

.aha-actions {
  display: grid;
  gap: 0.8125rem;
  width: min(100%, 22rem);
  margin-top: 0.8125rem;
  justify-items: center;
}

.aha-actions .gs-continue {
  position: static;
  transform: none;
  margin: 0;
}

.aha-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--color-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.aha-skip:hover { color: var(--color-fg); }

.aha-note {
  margin: 1.3125rem 0 0;
  max-width: 36ch;
  font-size: 0.75rem;
  color: var(--color-faint);
}

.gs-themes {
  width: min(100%, 22rem);
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
}

.gs-themes legend {
  width: 100%;
  margin-bottom: 0.8125rem;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-faint);
}

.gs-theme-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8125rem;
}

.gs-theme {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-zone-edge);
  border-radius: 0.5rem;
  background: color-mix(in oklab, var(--color-zone) 40%, transparent);
  color: var(--color-fg);
  text-align: left;
}

.gs-theme--on {
  border-color: color-mix(in oklab, var(--gs-accent, var(--color-gold)) 55%, var(--color-zone-edge));
}

.gs-theme-swatch {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--gs-accent);
}

.gs-theme[data-silence-theme="ember"] { --gs-accent: #d8a45a; }
.gs-theme[data-silence-theme="graphite"] { --gs-accent: #6b8f96; }
.gs-theme[data-silence-theme="midnight"] { --gs-accent: #c49a6a; }
.gs-theme[data-silence-theme="ion"] { --gs-accent: #8ec0c7; }

.gs-theme-name {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .gs-form,
  .gs-form--live,
  .gs-form--entry,
  .gs-form--deepening,
  .gs-form--silence,
  .gs-form--return {
    animation: none !important;
    transform: scale(1) !important;
    transition: opacity 1618ms linear, filter 1618ms linear;
  }

  .gs-form { opacity: 0.8; filter: blur(1px); }
  .gs-form--live.gs-form--entry { opacity: 0.8; filter: blur(1px); }
  .gs-form--live.gs-form--deepening { opacity: 0.5; filter: blur(2px); }
  .gs-form--live.gs-form--silence { opacity: 0.2; filter: blur(4px); }
  .gs-form--live.gs-form--return { opacity: 0.8; filter: blur(1px); }

  .gs-spiral {
    animation: none !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
  }

  .gs-line { transition: opacity 1618ms linear; }
}