:root {
  --ink: #fbf7ff;
  --muted: rgba(251, 247, 255, .68);
  --panel: rgba(30, 21, 50, .84);
  --panel-soft: rgba(30, 21, 50, .64);
  --panel-strong: rgba(12, 9, 25, .96);
  --line: rgba(255,255,255,.14);
  --accent: #d8a7ff;
  --accent-2: #76e7da;
  --accent-3: #ffe49a;
  --danger: #ff9ca8;
  --sky-a: #100b2b;
  --sky-b: #4b286f;
  --floor-a: #2b1d40;
  --floor-b: #120e20;
  --shadow: 0 24px 70px rgba(0,0,0,.38);
  --radius: 24px;
  --topbar-h: 72px;
}
html[data-theme="bosque"] { --accent:#a8f0b7; --accent-2:#f4d58a; --sky-a:#071d1c; --sky-b:#214c3f; --floor-a:#21382f; }
html[data-theme="aurora"] { --accent:#9cecff; --accent-2:#f7a9d9; --sky-a:#10213a; --sky-b:#445c91; --floor-a:#223854; }
html[data-theme="ambar"] { --accent:#ffd38c; --accent-2:#ff9f8d; --sky-a:#2a1420; --sky-b:#78462e; --floor-a:#3b271f; }
html[data-theme="noche"] { --accent:#8ea7ff; --accent-2:#c5b5ff; --sky-a:#050718; --sky-b:#1d285d; --floor-a:#151a35; }
html[data-theme="cielo"] { --accent:#b8ebff; --accent-2:#fff1ad; --sky-a:#17305d; --sky-b:#5f86a7; --floor-a:#26384c; }
html[data-theme="rosa"] { --accent:#ffc0dc; --accent-2:#cbb7ff; --sky-a:#29132f; --sky-b:#7a3c68; --floor-a:#3d2338; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--sky-a); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 38%),
    linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 61%, var(--floor-a) 61%, var(--floor-b) 100%);
}
button, input, textarea, select { font: inherit; }
button { color: inherit; white-space: nowrap; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}
button:disabled { opacity: .35; cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }
.eyebrow {
  margin: 0 0 5px;
  color: var(--accent-2);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.primary-button {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 14px;
  padding: 11px 16px;
  color: #160d23;
  font-weight: 850;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  cursor: pointer;
}
.ambient-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff;
  animation: twinkle 3.8s ease-in-out infinite;
}
.ambient-star.s1 { left: 7%; top: 11%; }
.ambient-star.s2 { left: 24%; top: 22%; animation-delay: .9s; }
.ambient-star.s3 { left: 53%; top: 9%; animation-delay: 1.5s; }
.ambient-star.s4 { left: 72%; top: 26%; animation-delay: .4s; }
.ambient-star.s5 { left: 89%; top: 15%; animation-delay: 2.1s; }
.ambient-star.s6 { left: 43%; top: 35%; animation-delay: 1.2s; }