:root {
  color-scheme: light;
  font-family: system-ui, sans-serif;
  --surface-base: #F5EFF9;
  --surface-raised: #FFFBFF;
  --accent-primary: #72439A;
  --accent-soft: #D6A4CA;
  --text-body: #2A1739;
  --text-hero: #FFF9FF;
  --text-muted: #6E5B78;
  --text-highlight: #E8D18A;
  --border-subtle: #D8C6E2;
  --scene-shift: 0px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--surface-base);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--surface-base);
  color: var(--text-body);
  transition: background-color 700ms ease, color 500ms ease;
}

button,
a {
  font: inherit;
}

/* Two-tone focus (Noodle contrast-floor style): the token ring plus an
   inner surface-colored halo so the indicator reads on any background. */
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--text-highlight);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--surface-base);
}

.hero {
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--surface-base);
}

.scene-stack,
.theme-layer,
.noodle-scene {
  position: absolute;
  inset: 0;
}

.scene-stack {
  z-index: -1;
  pointer-events: none;
  transform: translate3d(0, var(--scene-shift), 0);
  will-change: transform;
}

.theme-layer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 850ms ease, visibility 0s linear 850ms;
}

.theme-layer[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.noodle-scene {
  overflow: hidden;
}

.scene-backdrop,
.scene-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene-backdrop img {
  object-fit: cover;
  object-position: center;
  user-select: none;
}

.scene-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 23, 0.14);
}

.scene-orbits,
.scene-constellation {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(92vw, 1080px);
  aspect-ratio: 10 / 7;
  transform: translate(-50%, -50%);
  opacity: 0.72;
}

.scene-constellation {
  width: min(96vw, 1220px);
  opacity: 0.64;
}

.scene-orbits svg,
.scene-constellation svg,
.scene-mark svg,
.domain-node svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The brand block anchors as PIXEL offsets from one shared center line, so
   the mark-to-wordmark spacing survives every zoom level and aspect ratio;
   percentage anchors stretched apart from their fixed-size content. The
   mark itself breathes with viewport height. */
.scene-mark {
  position: absolute;
  left: 50%;
  top: calc(50% - 90px);
  width: clamp(180px, 29svh, 285px);
  height: clamp(152px, 24.5svh, 240px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.28));
}

.domain-node {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 5px;
  opacity: 0.86;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease, color 500ms ease;
}

.domain-node svg {
  position: relative;
}

.node-glow {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(closest-side, currentColor, transparent 72%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.node-people { left: 23%; top: 19%; }
.node-phone { left: 31%; top: 30%; }
.node-chat { left: 24%; top: 45%; }
.node-envelope { left: 29%; top: 61%; }
.node-shield { left: 38%; top: 69%; }
.node-fingerprint { left: 50%; top: 72%; }
.node-person { left: 62%; top: 69%; }
.node-laptop { left: 71%; top: 61%; }
.node-code { left: 76%; top: 45%; }
.node-cloud { left: 69%; top: 30%; }
.node-brain { left: 60%; top: 20%; }
.node-database { left: 77%; top: 17%; }

.domain-node[data-near="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}

.domain-node[data-source="true"] {
  transform: translate(-50%, -50%) scale(1.16);
}

.scene-stack .domain-node[data-near="true"] .node-glow {
  opacity: 0.5;
}

.scene-stack .domain-node[data-source="true"] .node-glow {
  opacity: 0.72;
}

/* Host-drawn constellation web: lines are computed from the measured icon
   centers, so they meet the icons at every viewport. Themes recolor it. */
.constellation-web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.web-line {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.4;
  transition: opacity 500ms ease;
}

.web-pulse {
  fill: none;
  stroke: var(--hero-highlight, var(--text-highlight));
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
}

.web-pulse-halo {
  stroke-width: 7;
}

.web-star {
  fill: var(--hero-highlight, var(--text-highlight));
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: center;
}

.web-joint {
  fill: var(--hero-highlight, var(--text-highlight));
  opacity: 0.5;
}

.web-ping,
.web-ping-a,
.web-ping-b {
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 1.5;
  opacity: 0;
}

.web-packet {
  fill: var(--hero-highlight, var(--text-highlight));
  opacity: 0;
}

.web-shooting-star {
  stroke: var(--hero-highlight, var(--text-highlight));
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
}

.web-ants {
  stroke-dasharray: 4 6;
  animation: web-ants-march 700ms linear infinite;
  opacity: 0.9;
}

@keyframes web-ants-march {
  to { stroke-dashoffset: -20; }
}

.hero-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 760px);
  transform: translateX(-50%);
  text-align: center;
}

.hero-wordmark {
  margin: 0;
  color: var(--text-body);
  text-shadow: 0 2px 22px rgba(5, 2, 28, 0.6);
}

.wordmark-primary,
.wordmark-secondary {
  display: block;
}

.wordmark-primary {
  position: relative;
  font-size: 54px;
  line-height: 1;
}

/* Trademark notice rides absolutely so the wordmark stays optically
   centered; sized to whisper, not shout. */
.wordmark-tm {
  position: absolute;
  top: -0.12em;
  margin-left: 0.14em;
  font-size: 0.26em;
  letter-spacing: 0;
  opacity: 0.75;
}

.wordmark-secondary {
  margin-top: 9px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 400;
}

.hero-statement {
  position: absolute;
  left: 50%;
  bottom: clamp(64px, 11svh, 120px);
  width: min(90%, 520px);
  color: var(--hero-highlight, var(--text-highlight));
  text-align: center;
  transform: translateX(-50%);
}

.hero-tagline {
  margin: 0;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: 0;
  text-shadow: 0 2px 20px rgba(5, 2, 28, 0.75);
}

.hero-divider {
  display: grid;
  grid-template-columns: minmax(32px, 92px) 8px minmax(32px, 92px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 12px;
  color: currentColor;
}

.hero-divider span {
  height: 1px;
  background: currentColor;
  opacity: 0.68;
}

.hero-divider i {
  width: 7px;
  height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}

.hero-signature {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  text-shadow: 0 2px 18px rgba(5, 2, 28, 0.78);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  text-decoration: none;
  transform: translateX(-50%);
}

.scroll-chevron {
  width: 12px;
  height: 12px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.mission {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  transition: background-color 700ms ease, border-color 500ms ease;
}

.mission-inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 84px 0 112px;
}

.mission-kicker {
  margin: 0 0 24px;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.mission h2 {
  display: grid;
  min-height: 118px;
  place-items: center;
  max-width: 900px;
  margin: 0 auto;
  color: var(--text-body);
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
}

.mission-copy {
  max-width: 820px;
  margin: 32px auto 0;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.7;
  text-align: center;
}

.mission-actions {
  display: grid;
  grid-template-columns: 58px minmax(0, 560px) 58px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(100%, 720px);
  margin: 48px auto 0;
}

.mission-actions::before {
  content: "";
  width: 58px;
  height: 58px;
}

.mode-toggle {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--surface-base);
  color: var(--accent-primary);
  cursor: pointer;
  transition: background-color 420ms ease, color 420ms ease,
    border-color 420ms ease, transform 160ms ease;
}

.mode-toggle:hover {
  color: var(--text-highlight);
  background: var(--accent-primary);
  transform: translateY(-2px);
}

.mode-toggle:active {
  transform: translateY(0);
}

.mode-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-toggle svg[hidden] {
  display: none !important;
}

/* The creed: commitments rendered as real Noodle surfaces. Fill, edge,
   corner, and elevation arrive per theme from the packs (theme.css); the
   layout, cascade choreography, and hover behavior live here. */
.creed {
  margin-top: 128px;
}

.creed-kicker {
  margin: 0 0 18px;
  color: var(--accent-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.creed-motto {
  margin: 0 auto;
  max-width: 860px;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.12;
  text-align: center;
  color: var(--text-body);
  text-wrap: balance;
}

.creed-lines {
  display: grid;
  gap: 20px;
  max-width: 880px;
  margin: 56px auto 0;
}

.creed-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  min-height: 108px;
  padding: 24px 30px;
  transition: transform 260ms var(--noodle-motion-ease, ease),
    box-shadow 320ms ease, filter 320ms ease,
    background-color 500ms ease, border-color 500ms ease;
}

.creed-index {
  color: var(--accent-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.creed-body h4 {
  margin: 0;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
}

.creed-body p {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.creed-kindred,
.creed-invite {
  max-width: 720px;
  margin: 48px auto 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.85;
  text-align: center;
}

.creed-invite {
  margin-top: 26px;
}

.creed-invite a {
  color: var(--accent-primary);
  text-decoration: none;
}

.creed-invite a:hover,
.creed-invite a:focus-visible {
  color: var(--text-highlight);
  text-decoration: underline;
}

.mission-close {
  margin: 110px auto 0;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--text-highlight);
  text-align: center;
}

.cursor-stack {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 34px;
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-80px, -80px, 0);
  transition: opacity 120ms ease;
  will-change: transform;
}

.cursor-stack[data-visible="true"] {
  opacity: 1;
}

.cursor-stack[data-pressed="true"] {
  width: 30px;
  height: 30px;
}

.cursor-layer {
  position: absolute;
  inset: 0;
  display: none;
}

.cursor-layer[data-active="true"],
.noodle-cursor-scene,
.theme-cursor,
.theme-cursor svg {
  width: 100%;
  height: 100%;
}

.cursor-layer[data-active="true"] {
  display: block;
}

.theme-cursor svg {
  display: block;
  filter: drop-shadow(0 1px 2px var(--surface-base));
}

body[data-custom-cursor="true"],
body[data-custom-cursor="true"] a,
body[data-custom-cursor="true"] button,
body[data-custom-cursor="true"] .creed-line {
  cursor: none;
}

body[data-custom-cursor="true"] input,
body[data-custom-cursor="true"] textarea,
body[data-custom-cursor="true"] select,
body[data-custom-cursor="true"] [contenteditable],
body[data-custom-cursor="true"] [data-native-cursor] {
  cursor: auto;
}

.hint-button {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 100%;
  min-height: 74px;
  padding: 12px 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1.15;
  transition: transform 160ms ease, filter 160ms ease, background-color 500ms ease;
}

.hint-button small {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.72;
}

.hint-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.hint-button:active {
  transform: translateY(0);
}

/* Keyboard users skip the hero ceremony. */
.skip-link {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--accent-primary);
  color: var(--text-on-accent, #FFFFFF);
  font-size: 14px;
  text-decoration: none;
  transition: top 160ms ease;
}

.skip-link:focus-visible {
  top: 16px;
}

/* The lost page: a lone star in the dark. */
.lost-body {
  background: #0B0619;
}

.lost {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 100svh;
  align-content: center;
  padding: 32px;
  text-align: center;
  background: radial-gradient(circle at 50% 34%,
    rgba(114, 67, 154, 0.3), transparent 55%), #0B0619;
}

.lost-star {
  width: 10px;
  height: 10px;
  background: #EAD58E;
  transform: rotate(45deg);
  box-shadow: 0 0 18px 4px rgba(234, 213, 142, 0.5),
    -180px -90px 0 -3px rgba(224, 162, 204, 0.6),
    200px -140px 0 -4px rgba(234, 213, 142, 0.5),
    -260px 60px 0 -4px rgba(255, 249, 255, 0.4),
    240px 110px 0 -3px rgba(224, 162, 204, 0.45),
    60px -220px 0 -5px rgba(255, 249, 255, 0.5),
    -90px 190px 0 -5px rgba(234, 213, 142, 0.4);
}

.lost-code {
  margin: 26px 0 0;
  color: #EAD58E;
  font-size: 15px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.lost-title {
  max-width: 560px;
  margin: 0;
  color: #FFF9FF;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

.lost-copy {
  max-width: 460px;
  margin: 0;
  color: #C7B2D0;
  font-size: 16px;
  line-height: 1.7;
}

.lost-home {
  margin-top: 18px;
  padding: 12px 26px;
  border: 1px solid rgba(234, 213, 142, 0.55);
  border-radius: 999px;
  color: #EAD58E;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 240ms ease, color 240ms ease;
}

.lost-home:hover,
.lost-home:focus-visible {
  background: rgba(234, 213, 142, 0.14);
}

/* Windows High Contrast and other forced palettes: stand down the custom
   pointer and let the system's ink win. */
@media (forced-colors: active) {
  .cursor-stack {
    display: none;
  }

  body[data-custom-cursor="true"],
  body[data-custom-cursor="true"] a,
  body[data-custom-cursor="true"] button,
  body[data-custom-cursor="true"] .creed-line {
    cursor: auto;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Story stage: the fracture-to-realm sequence. It occupies no space until
   the story begins; opening it eases everything below downward first. */
.story-stage {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  width: min(100%, 980px);
  margin: 0 auto;
  transition: grid-template-rows 1600ms cubic-bezier(.3, .1, .25, 1),
    margin 1600ms cubic-bezier(.3, .1, .25, 1);
}

.story-stage[data-open="true"] {
  grid-template-rows: 1fr;
  margin-top: 48px;
}

.story-inner {
  min-height: 0;
  overflow: hidden;
}

.story-stage[data-open="true"] .story-inner {
  overflow: visible;
}

.story-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 420;
}

.story-canvas svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.story-seed {
  fill: var(--accent-soft);
  opacity: 0.45;
}

.story-fragment {
  position: absolute;
  width: 34px;
  height: 34px;
  color: var(--accent-soft);
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.story-fragment-core,
.story-fragment svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Light schemes: soft pastel inks vanish on pale surfaces (cyan on the
   90s silver was near-invisible); fragments and seeds take the accent. */
body[data-mode="light"] .story-fragment {
  color: var(--accent-primary);
}

body[data-mode="light"] .story-seed {
  fill: var(--accent-primary);
}

.story-link {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 900ms ease;
}

.story-link.is-lit {
  opacity: 0.55;
}

.story-link-pulse {
  fill: none;
  stroke: var(--text-highlight);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
}

.story-realm {
  opacity: 0;
  transition: opacity 900ms ease;
}

.story-realm.is-lit {
  opacity: 1;
}

.story-realm-glow {
  fill: var(--realm-a);
  opacity: 0.06;
  transform-box: fill-box;
  transform-origin: center;
}

.story-realm.is-lit .story-realm-glow {
  animation: story-realm-breathe 8s ease-in-out infinite;
}

/* A realm is a living cluster: loose dots that wiggle like one creature. */
.story-realm-drift {
  animation: story-realm-drift 11s ease-in-out infinite alternate;
}

.story-realm-dot {
  fill: var(--realm-b);
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 900ms ease, transform 900ms ease;
}

.story-realm-dot.dot-bright {
  fill: var(--realm-a);
}

.story-realm.is-lit .story-realm-dot {
  opacity: 0.95;
  transform: scale(1);
}

.story-realm.is-lit .story-realm-dot:nth-of-type(3n) {
  animation: story-dot-wiggle-a 4.6s ease-in-out infinite alternate;
}

.story-realm.is-lit .story-realm-dot:nth-of-type(3n + 1) {
  animation: story-dot-wiggle-b 5.8s ease-in-out infinite alternate;
}

.story-realm.is-lit .story-realm-dot:nth-of-type(3n + 2) {
  animation: story-dot-wiggle-c 7.1s ease-in-out infinite alternate;
}

@keyframes story-realm-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.05; }
  50% { transform: scale(1.1); opacity: 0.1; }
}

@keyframes story-realm-drift {
  from { transform: translate(-4px, 3px); }
  to { transform: translate(5px, -4px); }
}

@keyframes story-dot-wiggle-a {
  from { transform: translate(-2.5px, 1.5px) scale(1); }
  to { transform: translate(2.5px, -2px) scale(1.15); }
}

@keyframes story-dot-wiggle-b {
  from { transform: translate(2px, 2.5px) scale(1.1); }
  to { transform: translate(-2px, -1.5px) scale(0.9); }
}

@keyframes story-dot-wiggle-c {
  from { transform: translate(1.5px, -2.5px) scale(0.92); }
  to { transform: translate(-2.5px, 2px) scale(1.12); }
}

/* Each realm keeps its own theme's palette, light and dark. */
.story-realm-swan { --realm-a: #EAD58E; --realm-b: #E0A2CC; }
.story-realm-professional { --realm-a: #57C7FF; --realm-b: #8CB7D1; }
.story-realm-nineties { --realm-a: #00FFFF; --realm-b: #FF00FF; }
.story-realm-synthwave { --realm-a: #FF2EC4; --realm-b: #48E7FF; }

body[data-mode="light"] .story-realm-swan { --realm-a: #B99B52; --realm-b: #72439A; }
body[data-mode="light"] .story-realm-professional { --realm-a: #007DBA; --realm-b: #4E7896; }
body[data-mode="light"] .story-realm-nineties { --realm-a: #800080; --realm-b: #008B8B; }
body[data-mode="light"] .story-realm-synthwave { --realm-a: #D000A8; --realm-b: #007C91; }

.story-voice {
  min-height: 2.6em;
  max-width: 680px;
  margin: 8px auto 0;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-muted);
}

.story-stage[data-voice="true"] .story-voice::before,
.story-stage[data-voice="true"] .story-voice::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 12px 2px;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}

body[data-theme="swan"] .story-voice {
  color: var(--text-highlight);
}

.story-replay {
  position: absolute;
  right: 12px;
  top: 10px;
  padding: 4px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 240ms ease, border-color 240ms ease;
}

.story-replay:hover {
  color: var(--text-highlight);
  border-color: var(--text-highlight);
}

.story-replay[hidden] {
  display: none;
}

.story-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  cursor: pointer;
}

.story-overlay[hidden] {
  display: none;
}

.story-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(5, 2, 20, 0.82), rgba(5, 2, 20, 0.38) 62%, transparent);
}

body[data-mode="light"] .story-overlay::before {
  background: radial-gradient(closest-side at 50% 50%,
    rgba(255, 251, 255, 0.94), rgba(255, 251, 255, 0.5) 62%, transparent);
}

.story-overlay-text {
  position: relative;
  font-size: clamp(56px, 9vw, 112px);
  color: var(--text-hero);
  text-shadow: 0 2px 30px rgba(5, 2, 28, 0.6);
}

body[data-mode="light"] .story-overlay-text {
  color: var(--text-body);
  text-shadow: none;
}

.story-overlay-text.is-line {
  max-width: 780px;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.35;
  letter-spacing: 0.03em;
}

/* Cygnus: the Konami sky. Always moonlight gold, whatever the theme. */
.scene-stack,
.hero-content,
.hero-statement,
.hero .scroll-cue {
  transition: opacity 900ms ease;
}

.hero.cygnus-active .scene-stack,
.hero.cygnus-active .hero-content,
.hero.cygnus-active .hero-statement,
.hero.cygnus-active .scroll-cue {
  opacity: 0.1;
}

.cygnus-sky {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cygnus-star {
  fill: #EAD58E;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cygnus-line {
  fill: none;
  stroke: #EAD58E;
  stroke-width: 1.2;
  opacity: 0.6;
}

.cygnus-streak {
  stroke: #EAD58E;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
}

.cygnus-label {
  fill: #EAD58E;
  opacity: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cygnus-voice {
  position: absolute;
  left: 50%;
  bottom: 13%;
  z-index: 3;
  margin: 0;
  transform: translateX(-50%);
  color: #EAD58E;
  font-size: 20px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}


/* Footer: a quiet, centered sign-off in each theme's own voice. */
footer {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 64px 24px 52px;
  background: var(--surface-base);
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  text-align: center;
  transition: background-color 700ms ease, color 500ms ease;
}

.footer-wordmark {
  display: grid;
  justify-items: center;
  gap: 3px;
}

/* The doubled class outranks the generated hero-ink rules, which paint
   wordmarks pearl for the backdrop; the footer sits on page surface. */
main footer .footer-wordmark .wordmark-primary.wordmark-primary {
  font-size: 22px;
  line-height: 1.1;
  color: var(--text-body);
}

main footer .footer-wordmark .wordmark-secondary.wordmark-secondary {
  margin-top: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-divider {
  display: grid;
  grid-template-columns: 44px 7px 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent-primary);
}

.footer-divider span {
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.footer-divider i {
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  font-size: 14px;
}

footer a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color 240ms ease;
}

footer a:hover,
footer a:focus-visible {
  color: var(--text-body);
  text-decoration: underline;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 4px 0 0;
  opacity: 0.85;
}

.footer-meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 10px 2px 0;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.noscript {
  margin: 0;
  padding: 12px 20px;
  background: #FFFFFF;
  color: #111111;
  text-align: center;
}

body[data-theme="professional"] {
  color-scheme: light;
}

body[data-theme="professional"] .scene-backdrop::after {
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme="professional"][data-mode="dark"] .scene-backdrop::after {
  background: rgba(4, 12, 20, 0.72);
}

body[data-theme="professional"] .hero-wordmark,
body[data-theme="professional"] .hero-tagline {
  text-shadow: none;
}

/* Professional: radar language. Hairline traces, sonar pings, signal dots. */
.theme-layer[data-theme-layer="professional"] .scene-constellation {
  opacity: 0.3;
}

.theme-layer[data-theme-layer="professional"] .scene-orbits {
  opacity: 0.3;
}

.theme-layer[data-theme-layer="professional"] .web-line {
  stroke: var(--accent-soft);
  opacity: 0.45;
}

.theme-layer[data-theme-layer="professional"] .web-pulse-core {
  stroke: var(--accent-primary);
  stroke-width: 3;
}

.theme-layer[data-theme-layer="professional"] .web-ping {
  stroke: var(--accent-primary);
  stroke-width: 1.6;
}

body[data-theme="nineties"] .theme-layer[data-active="true"] {
  image-rendering: pixelated;
}

body[data-theme="nineties"] .hero-wordmark,
body[data-theme="nineties"] .hero-tagline {
  text-shadow: 3px 3px 0 #0000FF;
}

/* The 90s mark is a sprite: keep its pixels crisp and give it a two-frame
   character-select idle bob. */
.theme-layer[data-theme-layer="nineties"] .scene-mark {
  filter: none;
}

.theme-layer[data-theme-layer="nineties"] .scene-mark svg rect {
  shape-rendering: crispEdges;
}

.theme-layer[data-theme-layer="nineties"][data-active="true"] .scene-mark svg {
  animation: nineties-sprite-bob 1.1s linear infinite;
}

@keyframes nineties-sprite-bob {
  0%, 49.9% { transform: translateY(0); }
  50%, 100% { transform: translateY(-5px); }
}

body[data-theme="nineties"] .hint-button {
  border-radius: 0;
  box-shadow: 4px 4px 0 #000000;
}

body[data-theme="nineties"] .mode-toggle {
  border-radius: 0;
  border-width: 3px;
  box-shadow: 4px 4px 0 #000000;
}

body[data-theme="nineties"] .hero-divider span {
  height: 4px;
  box-shadow: 3px 3px 0 #0000FF;
}

body[data-theme="nineties"] .hero-divider i {
  width: 10px;
  height: 10px;
  transform: none;
  box-shadow: 3px 3px 0 #0000FF;
}

/* Nineties creed: Win95 slab with a hard offset shadow; hover presses in. */
body[data-theme="nineties"] .creed-line {
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.9);
}

body[data-theme="nineties"] .creed-line:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.9);
}

/* Nineties: circuit maze. Square caps, chunky packets, hard flashes. */
.theme-layer[data-theme-layer="nineties"] .scene-constellation {
  opacity: 0.12;
}

.theme-layer[data-theme-layer="nineties"] .scene-orbits {
  opacity: 0.12;
}

.theme-layer[data-theme-layer="nineties"] .web-line {
  stroke: var(--accent-primary);
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  opacity: 0.66;
}

.theme-layer[data-theme-layer="nineties"] .web-packet {
  fill: var(--hero-highlight, var(--text-highlight));
}

.theme-layer[data-theme-layer="nineties"] .web-ants {
  stroke: var(--accent-soft);
  stroke-dasharray: 6 6;
}

body[data-theme="synthwave"] .hero-wordmark,
body[data-theme="synthwave"] .hero-tagline {
  text-shadow: 0 2px 12px rgba(8, 3, 27, 0.9),
    0 0 12px #FF2EC4, 0 0 24px #48E7FF;
}

/* The neon backdrop stays vivid in the light scheme, where the pale pink
   and teal inks drown; switch the statement to pearl with a dark halo. */
body[data-theme="synthwave"][data-mode="light"] .hero-tagline {
  color: var(--text-hero);
}

body[data-theme="synthwave"][data-mode="light"] .hero .hero-statement .hero-signature {
  color: var(--text-hero);
  text-shadow: 0 1px 3px rgba(8, 3, 27, 0.95),
    0 2px 10px rgba(8, 3, 27, 0.85);
}

body[data-theme="synthwave"][data-mode="light"] .scroll-cue {
  color: var(--text-hero);
  text-shadow: 0 1px 3px rgba(8, 3, 27, 0.95),
    0 1px 8px rgba(8, 3, 27, 0.85);
}

body[data-theme="synthwave"] .hero .hero-statement .hero-signature {
  text-shadow: 0 1px 3px rgba(8, 3, 27, 0.9),
    0 2px 10px rgba(8, 3, 27, 0.8);
}

body[data-theme="synthwave"] .scene-mark {
  filter: drop-shadow(0 0 18px #FF2EC4) drop-shadow(0 0 28px #48E7FF);
}

body[data-theme="synthwave"] .mode-toggle {
  box-shadow: 0 0 12px var(--accent-primary);
}

body[data-theme="synthwave"] .hero-divider {
  filter: drop-shadow(0 0 7px #FF2EC4) drop-shadow(0 0 10px #48E7FF);
}

/* Synthwave creed hover: the state axis "tint" — glow swells toward accent. */
body[data-theme="synthwave"] .creed-line:hover {
  box-shadow: 0 0 30px 7px var(--accent-primary);
}

body[data-theme="synthwave"] .creed-line:hover h4 {
  text-shadow: 0 0 10px var(--accent-primary), 0 0 22px var(--accent-soft);
}

/* Synthwave: laser pulses with a wide halo and chromatic dual wavefront. */
.theme-layer[data-theme-layer="synthwave"] .scene-constellation {
  opacity: 0.4;
}

.theme-layer[data-theme-layer="synthwave"] .web-line {
  stroke: var(--accent-soft);
  opacity: 0.3;
}

.theme-layer[data-theme-layer="synthwave"] .web-pulse-core {
  stroke: var(--text-hero);
  stroke-width: 1.8;
}

.theme-layer[data-theme-layer="synthwave"] .web-pulse-halo {
  stroke: var(--accent-primary);
  stroke-width: 8;
}

.theme-layer[data-theme-layer="synthwave"] .web-ping-a {
  stroke: var(--accent-primary);
  stroke-width: 1.6;
}

.theme-layer[data-theme-layer="synthwave"] .web-ping-b {
  stroke: var(--accent-soft);
  stroke-width: 1.2;
}

.theme-layer[data-theme-layer="synthwave"] .node-glow {
  opacity: 0.14;
}

body[data-theme="swan"] .hero-wordmark {
  font-weight: 300;
}

.theme-layer[data-theme-layer="swan"] .scene-backdrop img {
  filter: saturate(1.06) contrast(1.03);
  transition: filter 900ms ease;
}

.theme-layer[data-theme-layer="swan"] .scene-backdrop::after {
  background: rgba(11, 6, 25, 0.08);
}

body[data-mode="light"] .theme-layer[data-theme-layer="swan"] .scene-backdrop img {
  filter: brightness(1.1) saturate(0.92) contrast(0.98);
}

body[data-mode="light"] .theme-layer[data-theme-layer="swan"] .scene-backdrop::after {
  background: rgba(94, 49, 119, 0.05);
}

body[data-mode="dark"] .theme-layer[data-theme-layer="swan"] .scene-backdrop img {
  filter: brightness(0.92) saturate(1.12) contrast(1.08);
}

body[data-mode="dark"] .theme-layer[data-theme-layer="swan"] .scene-backdrop::after {
  background: rgba(6, 2, 18, 0.18);
}

.theme-layer[data-theme-layer="swan"] .scene-orbits,
.theme-layer[data-theme-layer="swan"] .scene-constellation {
  top: 52%;
  width: min(100vw, 1586px);
}

.theme-layer[data-theme-layer="swan"] .scene-orbits {
  opacity: 0.82;
}

/* Each ring group drifts at its own pace and direction, so the sky feels
   layered instead of spinning as one rigid plate. */
.theme-layer[data-theme-layer="swan"] .scene-orbits svg > g {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-orbits svg > g:nth-of-type(1) {
  animation: swan-orbit-drift 160s linear infinite;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-orbits svg > g:nth-of-type(2) {
  animation: swan-orbit-drift 220s linear infinite reverse;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-orbits svg > g:nth-of-type(3) {
  animation: swan-orbit-drift 300s linear infinite;
}

/* Golden starfield twinkle: three interleaved phase groups keep most stars
   steady while a scattering of them breathe. */
.theme-layer[data-theme-layer="swan"] .scene-constellation circle {
  transform-box: fill-box;
  transform-origin: center;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-constellation circle:nth-of-type(3n) {
  animation: swan-star-twinkle-a 5.4s ease-in-out infinite;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-constellation circle:nth-of-type(7n + 2) {
  animation: swan-star-twinkle-b 7.6s ease-in-out infinite;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-constellation circle:nth-of-type(11n + 5) {
  animation: swan-star-twinkle-c 9.8s ease-in-out infinite;
}

.theme-layer[data-theme-layer="swan"][data-active="true"] .scene-constellation path {
  transform-box: fill-box;
  transform-origin: center;
  animation: swan-glint 8.5s ease-in-out infinite;
}

.theme-layer[data-theme-layer="swan"] .scene-mark {
  top: calc(50% - 15px);
  filter: drop-shadow(0 0 14px rgba(234, 213, 142, 0.3))
    drop-shadow(0 0 34px rgba(224, 162, 204, 0.28))
    drop-shadow(0 0 54px rgba(114, 67, 154, 0.24));
}

.theme-layer[data-theme-layer="swan"] .scene-mark svg {
  animation: swan-mark-breathe 7s ease-in-out infinite;
  transform-origin: center;
}

body[data-theme="swan"] .hero-content {
  top: calc(50% + 75px);
}

body[data-theme="swan"] .hero-wordmark {
  text-shadow: 0 2px 22px rgba(11, 6, 25, 0.78),
    0 0 28px rgba(221, 182, 227, 0.2);
}

body[data-theme="swan"] .hero-tagline {
  text-shadow: 0 2px 18px rgba(11, 6, 25, 0.82),
    0 0 22px rgba(234, 213, 142, 0.32);
}

body[data-theme="swan"] .hero-divider {
  filter: drop-shadow(0 0 7px rgba(234, 213, 142, 0.46));
}

/* The signature and Explore cue sit over the bright horizon band of the
   backdrop; thin lavender needs pearl ink and a layered dark halo there.
   The .hero prefix outranks the generated mode-scoped ink rules. */
body[data-theme="swan"] .hero .hero-statement .hero-signature {
  color: var(--text-hero);
  opacity: 0.96;
  text-shadow: 0 1px 3px rgba(11, 6, 25, 0.95),
    0 2px 10px rgba(11, 6, 25, 0.9),
    0 0 20px rgba(11, 6, 25, 0.75),
    0 0 16px rgba(224, 162, 204, 0.3);
}

body[data-theme="swan"] .scroll-cue {
  color: var(--hero-highlight, var(--text-highlight));
  text-shadow: 0 1px 3px rgba(11, 6, 25, 0.95),
    0 1px 10px rgba(11, 6, 25, 0.9),
    0 0 16px rgba(11, 6, 25, 0.7);
}

.theme-layer[data-theme-layer="swan"] .domain-node {
  width: 54px;
  height: 54px;
  padding: 4px;
  opacity: 0.82;
}

/* Alternate moonlight gold and lilac around the ring, like the reference.
   The .scene-stack prefix outranks the generated per-slot color rules. */
.scene-stack .theme-layer[data-theme-layer="swan"] .node-people,
.scene-stack .theme-layer[data-theme-layer="swan"] .node-chat,
.scene-stack .theme-layer[data-theme-layer="swan"] .node-shield,
.scene-stack .theme-layer[data-theme-layer="swan"] .node-person,
.scene-stack .theme-layer[data-theme-layer="swan"] .node-code,
.scene-stack .theme-layer[data-theme-layer="swan"] .node-brain {
  color: var(--text-highlight);
}

.theme-layer[data-theme-layer="swan"] .node-glow {
  opacity: 0.26;
}

.scene-stack .theme-layer[data-theme-layer="swan"] .domain-node[data-near="true"] .node-glow {
  opacity: 0.6;
}

.theme-layer[data-theme-layer="swan"] .web-line {
  stroke: var(--hero-highlight, var(--text-highlight));
  opacity: 0.38;
}

.theme-layer[data-theme-layer="swan"] .web-pulse-halo {
  stroke: var(--accent-soft);
}

.theme-layer[data-theme-layer="swan"] .node-people { left: 26%; top: 21%; }
.theme-layer[data-theme-layer="swan"] .node-phone { left: 36%; top: 31%; }
.theme-layer[data-theme-layer="swan"] .node-chat { left: 27%; top: 42%; }
.theme-layer[data-theme-layer="swan"] .node-envelope { left: 28%; top: 60%; }
.theme-layer[data-theme-layer="swan"] .node-shield { left: 38%; top: 70%; }
.theme-layer[data-theme-layer="swan"] .node-fingerprint { left: 50%; top: 73%; }
.theme-layer[data-theme-layer="swan"] .node-person { left: 61%; top: 72%; }
.theme-layer[data-theme-layer="swan"] .node-laptop { left: 71%; top: 60%; }
.theme-layer[data-theme-layer="swan"] .node-code { left: 72%; top: 46%; }
.theme-layer[data-theme-layer="swan"] .node-cloud { left: 80%; top: 35%; }
.theme-layer[data-theme-layer="swan"] .node-brain { left: 64%; top: 30%; }
.theme-layer[data-theme-layer="swan"] .node-database { left: 73%; top: 18%; }

body[data-theme="swan"] .wordmark-primary {
  font-size: 56px;
}

body[data-theme="swan"] .wordmark-secondary {
  margin-top: 9px;
  font-size: 18px;
}

body[data-theme="swan"] .mission-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--accent-primary);
  font-weight: 500;
  letter-spacing: 0.12em;
}

body[data-theme="swan"] .mission-kicker::before,
body[data-theme="swan"] .mission-kicker::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--text-highlight);
  opacity: 0.72;
}

body[data-theme="swan"] .mission h2 {
  max-width: 940px;
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
}

body[data-theme="swan"] .mission-copy {
  max-width: 790px;
}

body[data-theme="swan"] .hint-button {
  box-shadow: 0 0 0 1px rgba(234, 213, 142, 0.5),
    0 12px 34px rgba(75, 39, 96, 0.18);
}

body[data-theme="swan"] .hint-button:hover {
  filter: brightness(1.08) saturate(1.08);
  box-shadow: 0 0 0 1px var(--text-highlight),
    0 0 24px rgba(224, 162, 204, 0.28),
    0 14px 38px rgba(75, 39, 96, 0.2);
}

body[data-theme="swan"] .mode-toggle {
  border-color: var(--text-highlight);
  box-shadow: 0 8px 22px rgba(75, 39, 96, 0.12);
}

body[data-theme="swan"] .mode-toggle:hover {
  color: var(--text-on-accent, #FFF9FF);
  box-shadow: 0 0 18px rgba(224, 162, 204, 0.34);
}

/* Swan creed hover: the state axis "brighten" — the halo warms. */
body[data-theme="swan"] .creed-index {
  color: var(--text-highlight);
}

body[data-theme="swan"] .creed-body h4 {
  font-weight: 400;
}

body[data-theme="swan"] .creed-line:hover {
  filter: brightness(1.07);
}

body[data-theme="swan"] .mission-close {
  text-shadow: 0 0 22px rgba(234, 213, 142, 0.28);
}

/* Professional creed hover: the state axis "lift" (+5y, blur 14). */
body[data-theme="professional"] .creed-line:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 14px rgba(7, 19, 28, 0.35);
}

body[data-theme="swan"] .theme-cursor svg {
  filter: drop-shadow(0 0 5px var(--text-highlight))
    drop-shadow(0 0 11px var(--accent-soft));
}

/* The light scheme's gold is too pale on white surfaces: deepen the metal
   and trade the glow for a crisp halo plus a soft dark edge. */
body[data-mode="light"] .cursor-stack [data-cursor-layer="swan"] [data-noodle-slot="cursor.pointer"] {
  color: #A8842F;
}

body[data-theme="swan"][data-mode="light"] .theme-cursor svg {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 1px 3px rgba(42, 23, 57, 0.55));
}

@keyframes swan-orbit-drift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes swan-star-twinkle-a {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.8; }
}

@keyframes swan-star-twinkle-b {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.2; }
}

@keyframes swan-star-twinkle-c {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

@keyframes swan-glint {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 0.95; transform: scale(1.12); }
}

@keyframes swan-mark-breathe {
  0%, 100% { transform: scale(0.99); }
  50% { transform: scale(1.015); }
}

@media (max-width: 760px) {
  .hero {
    height: 100svh;
    min-height: 590px;
  }

  .scene-orbits,
  .scene-constellation {
    top: 40%;
    width: 150vw;
  }

  .scene-mark {
    top: calc(50% - 118px);
    width: 170px;
    height: 150px;
  }

  .domain-node {
    width: 34px;
    height: 34px;
  }

  .node-people { left: 12%; top: 20%; }
  .node-phone { left: 20%; top: 35%; }
  .node-chat { left: 12%; top: 52%; }
  .node-envelope { left: 24%; top: 66%; }
  .node-shield { left: 37%; top: 73%; }
  .node-fingerprint { left: 50%; top: 76%; }
  .node-person { left: 63%; top: 73%; }
  .node-laptop { left: 76%; top: 66%; }
  .node-code { left: 88%; top: 52%; }
  .node-cloud { left: 80%; top: 35%; }
  .node-brain { left: 66%; top: 19%; }
  .node-database { left: 88%; top: 19%; }

  .hero-content {
    top: 50%;
  }

  .wordmark-primary {
    font-size: 40px;
  }

  .wordmark-secondary {
    font-size: 16px;
  }

  .hero-tagline {
    font-size: 22px;
  }

  .mission-inner {
    width: min(calc(100% - 32px), 1120px);
    padding: 60px 0 80px;
  }

  .creed {
    margin-top: 88px;
  }

  .creed-line {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 96px;
    padding: 18px 18px;
  }

  .creed-body h4 {
    font-size: 20px;
  }

  .creed-body p {
    font-size: 14px;
  }

  .creed-kindred,
  .creed-invite {
    font-size: 14.5px;
  }

  .mission-close {
    margin-top: 80px;
  }

  body[data-theme="swan"] .wordmark-primary {
    font-size: 42px;
  }

  .theme-layer[data-theme-layer="swan"] .scene-orbits,
  .theme-layer[data-theme-layer="swan"] .scene-constellation {
    top: 44%;
    width: 170vw;
  }

  .theme-layer[data-theme-layer="swan"] .scene-mark {
    top: calc(50% - 88px);
    width: 170px;
    height: 150px;
  }

  body[data-theme="swan"] .hero-content {
    top: calc(50% + 30px);
  }

  .theme-layer[data-theme-layer="swan"] .domain-node {
    width: 38px;
    height: 38px;
  }

  .theme-layer[data-theme-layer="swan"] .node-people { left: 12%; top: 20%; }
  .theme-layer[data-theme-layer="swan"] .node-phone { left: 20%; top: 35%; }
  .theme-layer[data-theme-layer="swan"] .node-chat { left: 12%; top: 52%; }
  .theme-layer[data-theme-layer="swan"] .node-envelope { left: 24%; top: 66%; }
  .theme-layer[data-theme-layer="swan"] .node-shield { left: 37%; top: 73%; }
  .theme-layer[data-theme-layer="swan"] .node-fingerprint { left: 50%; top: 76%; }
  .theme-layer[data-theme-layer="swan"] .node-person { left: 63%; top: 73%; }
  .theme-layer[data-theme-layer="swan"] .node-laptop { left: 76%; top: 66%; }
  .theme-layer[data-theme-layer="swan"] .node-code { left: 88%; top: 52%; }
  .theme-layer[data-theme-layer="swan"] .node-cloud { left: 80%; top: 35%; }
  .theme-layer[data-theme-layer="swan"] .node-brain { left: 66%; top: 19%; }
  .theme-layer[data-theme-layer="swan"] .node-database { left: 88%; top: 19%; }

  body[data-theme="swan"] .wordmark-secondary {
    font-size: 14px;
  }

  .hero-statement {
    bottom: clamp(72px, 12svh, 110px);
  }

  .hero-tagline {
    font-size: 22px;
  }

  .hero-signature {
    font-size: 13px;
  }

  .mission h2 {
    min-height: 130px;
    font-size: 38px;
  }

  .mission-copy {
    font-size: 17px;
    line-height: 1.6;
  }

  .mission-actions {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .mission-actions::before {
    width: 44px;
    height: 58px;
  }

  .mode-toggle {
    width: 44px;
  }

  .hint-button {
    min-height: 68px;
    padding-inline: 14px;
    font-size: 18px;
  }

  footer {
    padding: 48px 20px 40px;
  }

  .story-stage[data-open="true"] {
    margin-top: 32px;
  }

  .story-fragment {
    width: 26px;
    height: 26px;
  }

  .story-voice {
    font-size: 16px;
  }

  .cygnus-voice {
    font-size: 15px;
    white-space: normal;
    width: 86%;
    text-align: center;
  }

}

/* Zoomed-in or short viewports: compress the brand column so the statement
   never climbs into the wordmark, and retire the redundant scroll cue. */
@media (max-height: 700px) and (min-width: 761px) {
  .scene-mark {
    top: calc(50% - 118px);
    width: 190px;
    height: 160px;
  }

  .theme-layer[data-theme-layer="swan"] .scene-mark {
    top: calc(50% - 52px);
  }

  body[data-theme="swan"] .hero-content {
    top: calc(50% + 44px);
  }

  .hero-statement {
    bottom: 40px;
  }

  .scroll-cue {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scene-stack {
    transform: none;
  }
}

@media (pointer: coarse) {
  .cursor-stack {
    display: none;
  }
}