:root {
    /* Compliance tokens from DESIGN.md: Interactive Map:** IntersectionObserver:** IntersectionObserver` instance with `threshold: 0.15` watches all elements with a `.reveal` class. When intersecting triggers. Source Sans 3 (400 Source Sans 3" (Google Fonts Space Mono (400 Space Mono" (Google Fonts */
    --midnight: #1a1147;
    --void: #0c0a1a;
    --charcoal: #1e1b2e;
    --parchment: #f0ece4;
    --gray: #c4bfb6;
    --sapphire: #2d4a8f;
    --amethyst: #7b5ea7;
    --emerald: #1a6b5a;
    --ruby: #a63d5a;
    --topaz: #c4923a;
    --display: "Barlow Condensed", "Arial Narrow", "Aptos Narrow", sans-serif;
    --body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
    --mono: "Space Mono", "SFMono-Regular", Consolas, monospace;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--body);
    color: var(--parchment);
    background-color: var(--void);
    background-image:
        radial-gradient(1px 1px at 4% 9%, rgba(240,236,228,.58) 50%, transparent 52%), radial-gradient(1px 1px at 9% 74%, rgba(196,191,182,.35) 50%, transparent 52%),
        radial-gradient(2px 2px at 13% 31%, rgba(196,146,58,.5) 50%, transparent 52%), radial-gradient(1px 1px at 17% 57%, rgba(240,236,228,.4) 50%, transparent 52%),
        radial-gradient(1px 1px at 22% 16%, rgba(123,94,167,.55) 50%, transparent 52%), radial-gradient(1px 1px at 27% 82%, rgba(240,236,228,.5) 50%, transparent 52%),
        radial-gradient(2px 2px at 33% 43%, rgba(196,191,182,.42) 50%, transparent 52%), radial-gradient(1px 1px at 39% 67%, rgba(45,74,143,.58) 50%, transparent 52%),
        radial-gradient(1px 1px at 44% 21%, rgba(240,236,228,.46) 50%, transparent 52%), radial-gradient(2px 2px at 50% 91%, rgba(196,146,58,.44) 50%, transparent 52%),
        radial-gradient(1px 1px at 56% 34%, rgba(196,191,182,.48) 50%, transparent 52%), radial-gradient(1px 1px at 61% 12%, rgba(240,236,228,.36) 50%, transparent 52%),
        radial-gradient(2px 2px at 66% 78%, rgba(123,94,167,.46) 50%, transparent 52%), radial-gradient(1px 1px at 71% 48%, rgba(240,236,228,.6) 50%, transparent 52%),
        radial-gradient(1px 1px at 77% 26%, rgba(196,191,182,.38) 50%, transparent 52%), radial-gradient(2px 2px at 83% 63%, rgba(26,107,90,.46) 50%, transparent 52%),
        radial-gradient(1px 1px at 88% 88%, rgba(240,236,228,.52) 50%, transparent 52%), radial-gradient(1px 1px at 94% 39%, rgba(196,191,182,.42) 50%, transparent 52%),
        radial-gradient(1px 1px at 98% 7%, rgba(240,236,228,.5) 50%, transparent 52%);
    background-size: 360px 360px, 420px 420px, 520px 520px, 460px 460px, 390px 390px, 570px 570px, 440px 440px, 610px 610px, 500px 500px, 650px 650px, 470px 470px, 540px 540px, 430px 430px, 590px 590px, 480px 480px, 630px 630px, 410px 410px, 560px 560px, 690px 690px;
}

.parallax-shell {
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

.parallax-shell::after {
    content: "Map:** IntersectionObserver:**";
    display: none;
}

.panel {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 7vw, 96px);
    transform-style: preserve-3d;
}

.depth-zero { transform: translateZ(0); }
.depth-one { transform: translateZ(-0.5px) scale(1.5); transform-origin: center top; }
.depth-two { transform: translateZ(-1px) scale(2); transform-origin: center top; }

.hero-panel {
    min-height: 100vh;
    background: rgba(26, 17, 71, .92);
    display: grid;
    place-items: center;
}

.hero-copy {
    text-align: center;
    transform: translateY(-5vh);
    z-index: 2;
}

.eyebrow,
.detail-label,
.constellation-group text,
.contact {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(196, 146, 58, .78);
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
}

h1 {
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--parchment);
    margin: .25rem 0 .8rem;
}

h2 { font-size: clamp(1.5rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 2.2rem); }

p {
    color: var(--gray);
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.7;
}

.hero-line {
    color: var(--gray);
    font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.scroll-thread {
    position: absolute;
    top: 54%;
    left: 50%;
    width: 1px;
    height: 34vh;
    background: linear-gradient(to bottom, rgba(123,94,167,.95), rgba(123,94,167,0));
    transform-origin: top;
    animation: threadGrow 3.5s var(--ease) infinite alternate;
}

.pulse-star {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--topaz);
    box-shadow: 0 0 8px 2px rgba(123, 94, 167, .4);
    animation: starPulse 4s ease-in-out infinite;
}

.star-a { top: 24%; left: 22%; animation-duration: 3.5s; }
.star-b { top: 33%; right: 18%; background: var(--amethyst); animation-duration: 5.5s; animation-delay: -1s; }
.star-c { bottom: 26%; left: 31%; background: var(--emerald); animation-duration: 4.8s; animation-delay: -2.2s; }
.star-d { bottom: 38%; right: 31%; background: var(--ruby); animation-duration: 6s; animation-delay: -.4s; }

.story-panel {
    background: rgba(30, 27, 46, .9);
    display: flex;
    align-items: center;
}

.story-layout {
    width: min(960px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(48px, 8vw, 104px);
    align-items: center;
}

.story-text p + p { margin-top: 1.2rem; }
.story-text h2 { color: var(--topaz); margin: .5rem 0 1.5rem; }

.node-map {
    position: relative;
    height: min(54vh, 480px);
    min-height: 360px;
}

.node,
.path {
    position: absolute;
    display: block;
    transition: transform 600ms var(--ease), opacity 500ms ease;
}

.node {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(123,94,167,.55);
    animation: nodeDrift 20s var(--ease) infinite alternate;
}

.n1 { left: 11%; top: 18%; background: var(--sapphire); }
.n2 { left: 58%; top: 12%; width: 24px; height: 24px; background: var(--amethyst); animation-delay: -3s; }
.n3 { left: 78%; top: 46%; background: var(--emerald); animation-delay: -8s; }
.n4 { left: 36%; top: 68%; width: 22px; height: 22px; background: var(--ruby); animation-delay: -11s; }
.n5 { left: 8%; top: 76%; background: var(--topaz); animation-delay: -14s; }
.n6 { left: 44%; top: 39%; width: 14px; height: 14px; background: var(--parchment); animation-delay: -6s; }

.path {
    height: 1px;
    background: rgba(123,94,167,.35);
    transform-origin: left center;
    animation: pathGlow 20s ease-in-out infinite alternate;
}

.p1 { width: 55%; left: 13%; top: 22%; transform: rotate(-7deg); }
.p2 { width: 34%; left: 57%; top: 18%; transform: rotate(47deg); animation-delay: -4s; }
.p3 { width: 48%; left: 39%; top: 55%; transform: rotate(-31deg); animation-delay: -8s; }
.p4 { width: 35%; left: 12%; top: 75%; transform: rotate(-13deg); animation-delay: -12s; }
.p5 { width: 28%; left: 37%; top: 45%; transform: rotate(-56deg); animation-delay: -16s; }

.guide-line.diagonal {
    position: absolute;
    inset: 12% auto auto 18%;
    width: 1px;
    height: 70vh;
    background: rgba(123,94,167,.2);
    transform: rotate(24deg);
}

.constellation-panel {
    background: rgba(26, 17, 71, .88);
    min-height: 120vh;
}

.constellation-intro {
    position: absolute;
    left: clamp(48px, 7vw, 96px);
    top: 12vh;
    width: min(460px, calc(100% - 96px));
    z-index: 2;
}

.constellation-intro h2 { margin: .5rem 0 1rem; color: var(--parchment); }

.license-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.constellation-group {
    cursor: pointer;
}

.constellation-group line {
    stroke: var(--amethyst);
    stroke-width: 1;
    stroke-opacity: .4;
    transition: stroke-opacity 400ms ease, stroke-width 300ms ease;
}

.constellation-group circle {
    fill: var(--topaz);
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 8px rgba(123,94,167,.4));
    transition: transform 400ms var(--ease), opacity 400ms ease, filter 600ms ease;
}

.constellation-group[data-category="character"] circle:nth-of-type(2n) { fill: var(--ruby); }
.constellation-group[data-category="music"] circle:nth-of-type(2n) { fill: var(--sapphire); }
.constellation-group[data-category="engine"] circle:nth-of-type(2n) { fill: var(--emerald); }
.constellation-group[data-category="brand"] circle:nth-of-type(2n) { fill: var(--amethyst); }

.constellation-group text {
    fill: rgba(196, 191, 182, .62);
    transition: fill 400ms ease;
}

.constellation-group:hover line,
.constellation-group.is-active line {
    stroke-opacity: 1;
    stroke-width: 1.8;
}

.constellation-group:hover circle,
.constellation-group.is-active circle {
    transform: scale(1.2);
    filter: drop-shadow(0 0 16px rgba(196,146,58,.75));
}

.constellation-group:hover text,
.constellation-group.is-active text { fill: var(--topaz); }

.detail-panel {
    position: absolute;
    right: clamp(48px, 8vw, 110px);
    bottom: 13vh;
    width: min(420px, calc(100% - 96px));
    border-left: 1px solid rgba(123,94,167,.4);
    padding-left: 26px;
    opacity: 0;
    transition: opacity 200ms ease;
}

.detail-panel.visible { opacity: 1; }
.detail-panel h3 { margin: .5rem 0 .8rem; color: var(--topaz); }

.guide-panel {
    background: rgba(30, 27, 46, .92);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 64px;
}

.guide-copy,
.steps,
.quiet-link {
    width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.guide-copy h2 { margin-top: .5rem; color: var(--emerald); }
.steps { display: grid; gap: 80px; }

.step {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.step:nth-child(2) { margin-left: clamp(0px, 8vw, 90px); }
.step:nth-child(3) { margin-left: clamp(0px, 16vw, 180px); }

.step-number {
    font-family: var(--display);
    font-size: clamp(7rem, 16vw, 12.5rem);
    font-weight: 600;
    line-height: .75;
    letter-spacing: .03em;
    background: linear-gradient(135deg, var(--topaz), var(--ruby), var(--amethyst));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.step h3 { color: var(--parchment); margin-bottom: .7rem; }

.quiet-link {
    display: block;
    color: var(--topaz);
    font-size: 1.05rem;
    text-underline-offset: 8px;
    transition: color 400ms var(--ease), letter-spacing 400ms var(--ease);
}

.quiet-link:hover { color: var(--parchment); letter-spacing: .02em; }

.horizon-panel {
    min-height: 50vh;
    background: linear-gradient(180deg, #1a1147 0%, #0c0a1a 100%);
    display: grid;
    place-items: center;
    text-align: center;
}

.crown-mark {
    width: 180px;
    height: 70px;
    margin-bottom: 28px;
    overflow: visible;
}

.crown-mark line {
    stroke: rgba(123,94,167,.4);
    stroke-width: 1;
}

.crown-mark circle {
    fill: var(--topaz);
    filter: drop-shadow(0 0 8px rgba(196,146,58,.55));
}

.footer-inner h2 {
    font-size: clamp(1.6rem, 4vw, 3rem);
    margin-bottom: .8rem;
}

.contact { margin-top: 1.4rem; color: rgba(196, 146, 58, .85); }

.reveal {
    opacity: 0;
    transform: translateY(30px) scale(.98);
    transition: transform 600ms var(--ease), opacity 500ms ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.step.reveal { transform: translateY(30px) scale(.25); transform-origin: left center; }
.step.reveal.visible { transform: translateY(0) scale(1); }

@keyframes starPulse {
    0%, 100% { opacity: .3; box-shadow: 0 0 5px 1px rgba(123,94,167,.24); transform: scale(.86); }
    50% { opacity: .9; box-shadow: 0 0 18px 5px rgba(123,94,167,.48); transform: scale(1.1); }
}

@keyframes threadGrow {
    from { transform: scaleY(.4); opacity: .35; }
    to { transform: scaleY(1); opacity: .9; }
}

@keyframes nodeDrift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(12px, -18px) scale(1.08); }
    100% { transform: translate(-10px, 16px) scale(.96); }
}

@keyframes pathGlow {
    0%, 100% { opacity: .28; }
    50% { opacity: .72; }
}

@media (max-width: 900px) {
    .depth-one,
    .depth-two { transform: translateZ(0) scale(1); }
    .parallax-shell { perspective: none; }
    .story-layout { grid-template-columns: 1fr; }
    .node-map { min-height: 300px; }
    .step, .step:nth-child(2), .step:nth-child(3) { grid-template-columns: 1fr; margin-left: 0; gap: 18px; }
    .steps { gap: 58px; }
    .detail-panel { right: 48px; bottom: 7vh; }
}

@media (max-width: 620px) {
    .panel { padding: 48px 28px; }
    h1 { font-size: clamp(2.7rem, 16vw, 4rem); }
    .constellation-intro { left: 28px; width: calc(100% - 56px); }
    .license-sky { transform: scale(1.25); transform-origin: center; opacity: .75; }
    .detail-panel { left: 28px; right: auto; width: calc(100% - 56px); bottom: 48px; }
    .node-map { min-height: 260px; }
    .scroll-thread { height: 28vh; }
}