:root {
  color-scheme: dark;
  --page: #0d0622;
  --page-accent: #1b0b42;
  --surface: rgba(25, 12, 57, 0.95);
  --surface-raised: #251050;
  --surface-muted: #1a0c3a;
  --ink: #fffaff;
  --ink-soft: #d8cbed;
  --line: rgba(192, 151, 255, 0.26);
  --line-strong: rgba(111, 240, 255, 0.48);
  --brand: #59f5ff;
  --brand-hover: #b3fbff;
  --brand-soft: rgba(65, 226, 255, 0.14);
  --accent: #ff5ecb;
  --accent-soft: rgba(255, 94, 203, 0.14);
  --warning: #ffe66d;
  --warning-soft: rgba(255, 230, 109, 0.14);
  --danger: #ff9485;
  --danger-hover: #ffc0b7;
  --danger-soft: rgba(255, 126, 114, 0.14);
  --success: #6ff7b8;
  --success-soft: rgba(111, 247, 184, 0.14);
  --focus: #7bf7ff;
  --shadow: 0 28px 90px rgba(4, 1, 18, 0.58), 0 0 64px rgba(173, 79, 255, 0.13);
  --shadow-small: 0 16px 44px rgba(4, 1, 20, 0.4), 0 0 28px rgba(76, 222, 255, 0.08);
  --prism: linear-gradient(105deg, #59f5ff 0%, #6ff7b8 17%, #ffe66d 34%, #ff9364 49%, #ff5ecb 66%, #a967ff 83%, #59f5ff 100%);
  --prism-soft: linear-gradient(120deg, rgba(89, 245, 255, 0.54), rgba(111, 247, 184, 0.4), rgba(255, 230, 109, 0.46), rgba(255, 94, 203, 0.48), rgba(169, 103, 255, 0.56));
  --reading: linear-gradient(145deg, rgba(35, 17, 76, 0.98), rgba(19, 9, 43, 0.98));
  font-family: Inter, "Avenir Next", Avenir, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: #0d0622; }
body {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 13% 10%, rgba(90, 62, 255, 0.28), transparent 31rem),
    radial-gradient(circle at 91% 3%, rgba(255, 52, 190, 0.23), transparent 29rem),
    radial-gradient(circle at 64% 86%, rgba(46, 233, 211, 0.16), transparent 35rem),
    linear-gradient(150deg, #0b051d 0%, #180838 48%, #100624 100%);
  text-rendering: optimizeLegibility;
}
body::before,
body::after { position: fixed; z-index: 0; inset: 0; pointer-events: none; content: ""; }
body::before {
  inset: -12vmax;
  opacity: 0.68;
  background:
    radial-gradient(ellipse at 24% 28%, rgba(68, 238, 255, 0.2), transparent 27%),
    radial-gradient(ellipse at 70% 18%, rgba(255, 70, 198, 0.2), transparent 28%),
    radial-gradient(ellipse at 62% 72%, rgba(171, 85, 255, 0.24), transparent 31%),
    conic-gradient(from 205deg at 48% 42%, transparent, rgba(84, 247, 211, 0.08), transparent 28%, rgba(255, 229, 99, 0.07), transparent 58%);
  filter: blur(34px) saturate(138%);
  animation: prism-aurora 24s ease-in-out infinite alternate;
}
body::after {
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 7% 18%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 18% 69%, #70f7ff 0 1px, transparent 1.7px),
    radial-gradient(circle at 34% 8%, #ffe56d 0 1px, transparent 1.7px),
    radial-gradient(circle at 69% 12%, #ff7bd6 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 61%, #7bf7ff 0 1px, transparent 1.6px),
    radial-gradient(circle at 73% 91%, #b179ff 0 1px, transparent 1.8px);
  background-size: 430px 390px, 510px 460px, 590px 540px, 470px 430px, 560px 520px, 700px 650px;
}
@keyframes prism-aurora { from { transform: translate3d(-1.5%, -1%, 0) rotate(-1deg) scale(1); } to { transform: translate3d(1.5%, 1.2%, 0) rotate(1deg) scale(1.045); } }

.mainstream-root { position: relative; z-index: 1; }
::selection { color: #130525; background: #8ff8ff; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(13, 6, 34, 0.88), 0 0 26px rgba(89, 245, 255, 0.52); }
h1, h2, h3 { color: var(--ink); font-family: ui-rounded, "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 850; text-shadow: 0 2px 24px rgba(194, 129, 255, 0.12); }
h1 { letter-spacing: -0.055em; }
h2 { letter-spacing: -0.035em; }
.skip-link { color: #130525; background: var(--prism); border: 2px solid rgba(255,255,255,.76); font-weight: 850; }
.app-frame { width: min(100% - 2rem, 1200px); }