:root {
  --ink: #06101d;
  --paper: #e9e6dc;
  --mist: #a8b4c7;
  --gold: #eac995;
  --cyan: #b7e1e5;
  --line: rgba(224, 235, 242, .18);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--paper); font-family: "DM Sans", sans-serif; }
body { overflow-x: hidden; }
button, textarea { font: inherit; }
button { color: inherit; }
.noise { position: fixed; inset: 0; opacity: .045; pointer-events: none; z-index: 99; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }

header { position: fixed; z-index: 20; inset: 0 0 auto; height: 88px; display: flex; align-items: center; padding: 0 4vw; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(to bottom, rgba(5,13,25,.68), transparent); backdrop-filter: blur(2px); }
.brand { width: 32%; color: var(--paper); text-decoration: none; font-size: 19px; letter-spacing: .02em; }
.brand i { font-family: Gloock, serif; font-weight: 400; }
nav { display: flex; gap: 34px; }
.nav-link { position: relative; background: none; border: 0; padding: 12px 0; color: #a8b2c0; cursor: pointer; font-size: 12px; letter-spacing: .06em; }
.nav-link.active { color: #fff; }
.nav-link.active::after { content:""; position:absolute; height:1px; inset:auto 0 4px; background:var(--gold); }
.moon-button { margin-left: auto; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(0,0,0,.18); cursor:pointer; font-size:18px; transition:.3s; }
.moon-button:hover { transform: rotate(25deg); border-color: var(--gold); }

.view { min-height: 100vh; display: none; }
.view.active { display: block; }
#atlasView { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(3,11,22,.98) 0%, rgba(3,11,22,.72) 34%, rgba(3,11,22,.08) 72%), url('assets/dream-atlas-hero.png') center/cover; }
#atlasView::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(3,9,17,.8), transparent 35%); }
.hero-copy { position: relative; z-index: 5; padding: 22vh 0 0 8vw; pointer-events:none; }
.hero-copy .primary { pointer-events:auto; }
.eyebrow { margin:0 0 22px; color:var(--gold); font-size:10px; letter-spacing:.22em; font-weight:600; }
h1, h2 { font-family:Gloock, serif; font-weight:400; margin:0; line-height:.98; letter-spacing:-.025em; }
h1 { font-size:clamp(58px, 6.4vw, 104px); }
h1 em, h2 em { color:#b6c6db; font-weight:400; }
.lede { margin:28px 0 34px; color:#aeb9c7; font-size:14px; line-height:1.7; font-weight:300; }
.primary { padding:15px 20px; min-width:148px; border:1px solid rgba(242,220,181,.52); background:rgba(211,173,112,.13); cursor:pointer; font-size:11px; letter-spacing:.1em; text-transform:uppercase; transition:.25s; }
.primary span { margin-left:18px; color:var(--gold); }
.primary:hover { background:rgba(211,173,112,.24); transform:translateY(-2px); }
.primary.full { width:100%; margin-top:24px; }

.sky { position:absolute; z-index:4; inset:14% 3% 15% 42%; }
.connections { position:absolute; width:100%; height:100%; overflow:visible; }
.connections line { stroke:rgba(221,227,235,.22); stroke-width:.7; stroke-dasharray:3 5; }
.dream-star { position:absolute; width:34px; height:34px; padding:0; border:1px solid rgba(255,224,170,.72); border-radius:50%; color:#fff0ce; background:rgba(20,29,43,.76); box-shadow:0 0 7px 2px #ffe3ac, 0 0 26px 8px rgba(220,179,111,.55); cursor:pointer; animation:pulse 3.5s ease-in-out infinite; font:16px Gloock,serif; z-index:3; }
.dream-star::after { content:""; position:absolute; inset:-8px; border:1px solid rgba(242,214,164,.26); border-radius:50%; transform:scale(.8); transition:.25s; }
.dream-star:hover::after { transform:scale(1.5); border-color:rgba(242,214,164,.7); }
.dream-star small { position:absolute; left:43px; top:4px; padding:5px 8px; color:#f1eee5; border:1px solid rgba(255,255,255,.14); background:rgba(4,12,24,.72); backdrop-filter:blur(8px); font:500 9px "DM Sans",sans-serif; letter-spacing:.08em; white-space:nowrap; opacity:.72; transition:.25s; }
.dream-star:hover small { opacity:1; border-color:rgba(234,201,149,.55); }
@keyframes pulse { 50% { opacity:.72; filter:brightness(.8); } }
.orbit { position:absolute; border:1px solid rgba(225,230,240,.09); border-radius:50%; pointer-events:none; }
.orbit-one { width:54%; height:54%; left:23%; top:18%; transform:rotate(-14deg); }
.orbit-two { width:81%; height:62%; left:9%; top:12%; transform:rotate(18deg); }
.star-hint { position:absolute; right:5%; top:6%; color:rgba(255,255,255,.35); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.empty-sky { display:none; position:absolute; left:50%; top:48%; width:280px; transform:translate(-50%,-50%); text-align:center; padding:25px; color:#aeb9c7; border:1px solid rgba(255,255,255,.13); background:rgba(4,12,24,.52); backdrop-filter:blur(12px); }
.empty-sky.show { display:block; }
.empty-sky > span { display:block; color:var(--gold); font-size:30px; margin-bottom:8px; }
.empty-sky strong { color:var(--paper); font:20px Gloock,serif; }
.empty-sky p { margin:8px 0 18px; font-size:11px; line-height:1.5; }
.empty-sky .primary { padding:12px 14px; min-width:0; }
.theme-card { position:absolute; z-index:6; right:4vw; bottom:6vh; width:290px; display:flex; gap:15px; padding:17px; border:1px solid rgba(255,255,255,.13); background:rgba(4,12,24,.48); backdrop-filter:blur(13px); }
.mini-moon { color:var(--gold); font-size:27px; }
.theme-card p { margin:0 0 6px; color:#a9b4c1; font-size:8px; letter-spacing:.16em; }
.theme-card h3 { margin:0; font:400 20px Gloock,serif; }
.theme-card span { color:#818d9c; font-size:9px; }
.scroll-cue { position:absolute; z-index:6; bottom:7vh; left:8vw; display:flex; align-items:center; gap:12px; color:#748092; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.scroll-cue span { display:block; width:30px; height:1px; background:#748092; }
.image-credit { position:absolute; z-index:6; right:4vw; top:14vh; writing-mode:vertical-rl; color:rgba(255,255,255,.3); font-size:8px; letter-spacing:.15em; text-transform:uppercase; }

.journal-view { padding:18vh 8vw 8vh; background:radial-gradient(circle at 75% 20%, #132842, #07101f 52%); }
.journal-heading h2 { font-size:clamp(48px,6vw,86px); }
.journal-grid { margin-top:64px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); }
.journal-card { min-height:280px; padding:32px; background:#091424; position:relative; transition:.25s; cursor:pointer; }
.journal-card:hover { background:#0d1c30; transform:translateY(-3px); }
.journal-card .symbol { font:34px Gloock,serif; color:var(--gold); }
.journal-card h3 { font:400 25px Gloock,serif; margin:40px 0 12px; }
.journal-card .quote { color:#a7b2c1; font-size:12px; line-height:1.65; }
.journal-card footer { position:absolute; left:32px; right:32px; bottom:25px; display:flex; justify-content:space-between; color:#687586; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.empty-card { display:grid; place-items:center; text-align:center; color:#778394; border:1px dashed rgba(255,255,255,.12); }
.empty-card button { background:none; border:0; color:var(--gold); cursor:pointer; font:36px Gloock,serif; }

dialog { width:min(560px, calc(100vw - 32px)); color:var(--paper); border:1px solid rgba(255,255,255,.17); padding:0; background:rgba(7,16,29,.96); box-shadow:0 30px 120px #000; backdrop-filter:blur(30px); }
dialog::backdrop { background:rgba(1,5,12,.74); backdrop-filter:blur(8px); }
.dialog-step { display:none; padding:54px; }
.dialog-step.active { display:block; animation:rise .45s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(12px); } }
.close { position:absolute; right:20px; top:16px; background:none; border:0; color:#8591a0; font-size:25px; cursor:pointer; z-index:3; }
dialog h2 { font-size:42px; margin-bottom:15px; }
.dialog-intro { color:#9ba7b7; font-size:13px; line-height:1.65; max-width:410px; }
textarea { width:100%; height:140px; margin-top:22px; padding:18px; resize:none; outline:none; color:#eef0ec; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.035); font:20px/1.5 Gloock,serif; }
textarea:focus { border-color:rgba(234,201,149,.6); }
.input-meta { display:flex; justify-content:space-between; margin-top:8px; color:#667385; font-size:9px; }
.primary:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.reveal-symbol { width:80px; height:80px; margin:0 auto 20px; display:grid; place-items:center; color:var(--gold); border:1px solid rgba(234,201,149,.3); border-radius:50%; font-size:36px; box-shadow:0 0 45px rgba(234,201,149,.12); }
[data-step="reveal"] { text-align:center; }
.dream-echo { color:#a9b4c2; font:italic 14px/1.6 Gloock,serif; }
.interpretation, .next-step { margin-top:24px; padding:19px; text-align:left; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.025); }
.interpretation span, .next-step span { color:var(--gold); font-size:8px; letter-spacing:.16em; }
.interpretation p, .next-step p { margin:8px 0 0; color:#b7c0cc; font-size:12px; line-height:1.55; }
.next-step { display:flex; align-items:center; gap:15px; }
.step-number { font:24px Gloock,serif; color:#637083; }
.next-step > div:nth-child(2) { flex:1; }
#completeStep { background:none; border:0; font-size:26px; cursor:pointer; }
#completeStep.done { color:var(--gold); }

.dream-popover { position:fixed; z-index:30; right:5vw; top:22vh; width:300px; padding:30px; opacity:0; pointer-events:none; transform:translateX(20px); transition:.35s; border:1px solid rgba(255,255,255,.15); background:rgba(4,12,24,.88); backdrop-filter:blur(20px); }
.dream-popover.show { opacity:1; pointer-events:auto; transform:none; }
.dream-popover > button { position:absolute; right:12px; top:8px; background:none; border:0; cursor:pointer; color:#8793a3; }
.popover-symbol { color:var(--gold); font-size:29px; }
.dream-popover .eyebrow { margin:20px 0 9px; }
.dream-popover h3 { margin:0 0 13px; font:25px Gloock,serif; }
.dream-popover > p:not(.eyebrow) { color:#a7b2c0; font-size:12px; line-height:1.6; }
.dream-popover small { color:#657184; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }

@media (max-width: 800px) {
  header { height:70px; padding:0 20px; backdrop-filter:none; }
  .brand { width:auto; flex:1; }
  nav { position:fixed; z-index:40; left:20px; right:20px; bottom:14px; display:flex; justify-content:center; gap:0; padding:5px; border:1px solid rgba(255,255,255,.14); background:rgba(5,13,25,.88); backdrop-filter:blur(18px); box-shadow:0 14px 45px rgba(0,0,0,.45); }
  .nav-link { flex:1; padding:12px 8px; }
  .nav-link.active::after { left:25%; right:25%; bottom:3px; }
  #atlasView { background-position:64% center; }
  #atlasView::before { content:""; position:absolute; inset:0; background:rgba(2,8,17,.24); }
  .hero-copy { padding:17vh 25px 0; }
  h1 { font-size:55px; }
  .lede br { display:none; }
  .sky { inset:47% 0 17% 2%; }
  .dream-star { width:32px; height:32px; box-shadow:0 0 6px 2px #ffe3ac, 0 0 25px 8px rgba(220,179,111,.62); }
  .dream-star::after { inset:-9px; }
  .dream-star small { display:block; left:39px; top:3px; max-width:135px; overflow:hidden; text-overflow:ellipsis; opacity:.92; }
  .star-hint { display:block; left:23px; right:auto; top:-19px; color:rgba(255,255,255,.62); font-size:8px; }
  .image-credit { display:none; }
  .empty-sky { top:42%; width:260px; }
  .theme-card { left:25px; right:25px; bottom:82px; width:auto; }
  .scroll-cue { display:none; }
  .journal-view { padding:15vh 24px 14vh; }
  .journal-grid { grid-template-columns:1fr; }
  .dialog-step { padding:45px 25px 28px; }
  .dream-popover { left:20px; right:20px; top:auto; bottom:20px; width:auto; }
}

/* Three-dimensional atlas */
#atlasView { background:radial-gradient(circle at 68% 44%, #13253b 0%, #091525 30%, #050b14 72%); }
#atlasView::after { background:linear-gradient(90deg,rgba(3,9,17,.55),transparent 50%),linear-gradient(to top,rgba(3,9,17,.75),transparent 35%); pointer-events:none; }
.hero-copy { padding-top:18vh; }
.hero-copy h1 { font-size:clamp(48px,5vw,78px); }
.sky { inset:10% 0 10% 32%; z-index:4; touch-action:none; }
#atlasCanvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; }
#atlasCanvas:active { cursor:grabbing; }
.atlas-tooltip { position:absolute; z-index:5; display:none; max-width:190px; padding:8px 11px; color:#f4efe5; border:1px solid rgba(255,255,255,.18); background:rgba(5,13,25,.88); backdrop-filter:blur(12px); font-size:10px; letter-spacing:.05em; pointer-events:none; transform:translate(14px,-50%); }
.atlas-tooltip.show { display:block; }
.star-hint { z-index:5; right:5%; top:5%; color:rgba(255,255,255,.55); }
.empty-sky { z-index:6; }
.theme-overview { position:absolute; z-index:7; right:4vw; bottom:5vh; width:min(470px,45vw); padding:17px 19px; border:1px solid rgba(255,255,255,.13); background:rgba(4,12,24,.66); backdrop-filter:blur(15px); }
.theme-overview > p { margin:0 0 11px; color:#8e9baa; font-size:8px; letter-spacing:.18em; }
#themeOverview { display:flex; gap:9px; }
.theme-chip { flex:1; min-width:0; padding-left:9px; border-left:2px solid var(--theme-color); }
.theme-chip strong { display:block; overflow:hidden; color:#e8e5dc; font:15px Gloock,serif; white-space:nowrap; text-overflow:ellipsis; }
.theme-chip span { color:#788698; font-size:8px; letter-spacing:.08em; }
.no-themes { color:#788698; font-size:10px; }
.demo-link { display:inline-block; margin-top:13px; color:#9aa8b8; font-size:8px; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.demo-link:hover { color:var(--gold); }
.demo-banner { display:none; position:absolute; z-index:12; top:102px; left:50%; transform:translateX(-50%); padding:8px 11px; color:#f0ce94; border:1px solid rgba(234,201,149,.3); background:rgba(5,13,25,.78); font-size:8px; letter-spacing:.13em; }
.demo-banner.show { display:block; }
.demo-banner a { margin-left:15px; color:#9aa8b8; text-decoration:none; }
.step-progress { margin:8px 0 0; color:#647184; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.popover-steps { margin:20px 0; border-top:1px solid rgba(255,255,255,.1); }
.journey-step { display:flex; gap:10px; align-items:flex-start; width:100%; padding:12px 0; color:#9da9b8; border:0; border-bottom:1px solid rgba(255,255,255,.08); background:none; text-align:left; cursor:pointer; }
.journey-step b { flex:0 0 20px; color:#6f7c8e; font:14px Gloock,serif; }
.journey-step span { font-size:10px; line-height:1.45; }
.journey-step.done span { color:#6f7d82; text-decoration:line-through; }
.journey-step.done b { color:var(--gold); }

@media (max-width:800px) {
  #atlasView { background:radial-gradient(circle at 50% 55%,#13283f 0%,#07111f 58%,#040a12 100%); }
  #atlasView::after { background:linear-gradient(to bottom,rgba(3,9,17,.8),transparent 34%,rgba(3,9,17,.35)); }
  .hero-copy { padding:12vh 23px 0; }
  .hero-copy h1 { font-size:42px; line-height:.96; }
  .hero-copy .lede { margin:16px 0 18px; max-width:300px; font-size:12px; }
  .hero-copy .lede br { display:none; }
  .hero-copy .primary { padding:12px 14px; }
  .sky { inset:39% 0 18% 0; }
  .star-hint { top:2px; left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:90%; }
  .theme-overview { left:20px; right:20px; bottom:80px; width:auto; padding:12px 14px; }
  .theme-overview > p { margin-bottom:8px; }
  .theme-chip strong { font-size:12px; }
  .theme-chip span { font-size:7px; }
  .empty-sky { top:48%; }
  .scroll-cue { display:none; }
  .dream-popover { top:82px; bottom:78px; max-height:none; overflow-y:auto; overscroll-behavior:contain; }
  .demo-banner { top:76px; width:max-content; max-width:calc(100% - 40px); }
}