:root {
  --cosmos-ink: #061211;
  --cosmos-panel: rgba(7, 24, 22, .9);
  --cosmos-line: #2eb1ad;
  --cosmos-line-soft: rgba(67, 210, 204, .34);
  --cosmos-gold: #f2bf52;
  --cosmos-gold-soft: rgba(242, 191, 82, .34);
  --cosmos-cream: #f7edda;
  --cosmos-muted: #a9c0b9;
}

body[data-active-screen="compass"] {
  background: #020a0d;
  overflow: hidden;
}
body[data-active-screen="compass"] .haven-header,
body[data-active-screen="compass"] .haven-nav,
body[data-active-screen="compass"] .mobile-place-dock,
body[data-active-screen="compass"] #deep-view-shell { display: none !important; }
body[data-active-screen="compass"] .haven-main { margin: 0 !important; padding: 0 !important; max-width: none !important; min-height: 100svh; }
body[data-active-screen="compass"] #screen-compass { display: block !important; min-height: 100svh; padding: 0 !important; }

.cosmos-home {
  min-height: 100svh;
  color: var(--cosmos-cream);
  display: grid;
  grid-template-columns: 184px minmax(0,1fr);
  background:
    radial-gradient(circle at 50% 48%, rgba(250,190,70,.08), transparent 24%),
    radial-gradient(circle at 18% 20%, rgba(25,111,160,.12), transparent 30%),
    linear-gradient(145deg,#02090c 0%,#071616 50%,#02090d 100%);
  position: relative;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
}
.cosmos-home::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.8;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(112,214,255,.55) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(242,191,82,.65) 0 1px, transparent 1.4px);
  background-size: 79px 79px, 113px 113px, 149px 149px;
  background-position: 12px 20px, 53px 71px, 24px 101px;
  mask-image: linear-gradient(to bottom,#000 0 84%,transparent 100%);
}
.cosmos-home::after {
  content:""; position:absolute; inset:12px; border:1px solid rgba(54,207,199,.58); border-radius:13px; pointer-events:none;
  box-shadow: inset 0 0 30px rgba(22,126,119,.14), 0 0 18px rgba(22,126,119,.12);
}

.cosmos-atmosphere { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aurora { position:absolute; width:68%; height:24%; filter: blur(36px); opacity:.36; border-radius:50%; mix-blend-mode:screen; }
.aurora-one { left:7%; top:6%; transform:rotate(-18deg); background:linear-gradient(90deg,transparent,#116b8c 18%,#2cb6a8 47%,#7b4db6 72%,transparent); }
.aurora-two { right:-8%; top:35%; transform:rotate(24deg); background:linear-gradient(90deg,transparent,#234b97 15%,#8f4cb1 45%,#27bfa7 76%,transparent); opacity:.30; }
.aurora-three { left:12%; bottom:1%; transform:rotate(8deg); background:linear-gradient(90deg,transparent,#0d6c82 18%,#375ad0 43%,#bc4f9c 67%,transparent); opacity:.24; }
.cosmos-dust { position:absolute; border-radius:50%; filter:blur(20px); opacity:.26; }
.dust-a { width:260px;height:260px;left:39%;top:20%;background:rgba(239,170,54,.20); }
.dust-b { width:330px;height:180px;right:10%;bottom:12%;background:rgba(91,52,171,.18); }

.cosmos-rail {
  z-index:3; margin:13px 0 13px 13px; border:1px solid var(--cosmos-line-soft); border-right-color:rgba(77,220,214,.52);
  background:linear-gradient(180deg,rgba(4,18,18,.96),rgba(3,14,15,.91));
  padding:22px 15px 19px; display:flex; flex-direction:column; gap:26px; box-shadow:8px 0 30px rgba(0,0,0,.28);
}
.cosmos-brand { display:flex; gap:10px; align-items:center; padding:0 5px 17px; border-bottom:1px solid rgba(86,167,159,.22); }
.cosmos-mark { width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(242,191,82,.7);border-radius:50%;color:var(--cosmos-gold);font-size:23px;box-shadow:0 0 18px rgba(242,191,82,.17),inset 0 0 12px rgba(242,191,82,.08); }
.cosmos-brand strong { display:block; color:#f5d78f; font-size:20px; letter-spacing:.13em; text-transform:uppercase; font-weight:500; }
.cosmos-brand small { display:block; color:#8db8b1; font-size:9px; letter-spacing:.28em; text-transform:uppercase; margin-top:2px; }
.cosmos-rail nav { display:grid; gap:7px; }
.cosmos-rail nav button { border:1px solid transparent; background:transparent; color:#b7cbc5; padding:10px 11px; border-radius:7px; display:flex; align-items:center; gap:11px; font:500 13px/1.1 system-ui,-apple-system,sans-serif; text-align:left; cursor:pointer; }
.cosmos-rail nav button span { color:#7bc8c1; width:17px; text-align:center; }
.cosmos-rail nav button:hover,.cosmos-rail nav button:focus-visible { border-color:rgba(65,205,197,.45); background:rgba(27,121,115,.12); outline:none; }
.cosmos-rail nav button.is-active { color:#f7deb0; border-color:rgba(242,191,82,.66); background:linear-gradient(90deg,rgba(242,191,82,.17),rgba(242,191,82,.03)); box-shadow:0 0 16px rgba(242,191,82,.11),inset 0 0 17px rgba(242,191,82,.05); }
.cosmos-rail nav button.is-active span { color:var(--cosmos-gold); }
.cosmos-rail-poem { margin-top:auto; color:#d2b574; text-transform:uppercase; letter-spacing:.28em; font:600 8px/1.7 system-ui,-apple-system,sans-serif; }

.cosmos-stage { z-index:2; min-width:0; padding:13px 16px 12px 13px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; min-height:100svh; }
.cosmos-topbar { height:61px; border:1px solid rgba(53,193,185,.38); border-radius:10px; background:rgba(3,19,20,.76); display:flex; align-items:center; justify-content:space-between; padding:0 20px; backdrop-filter:blur(12px); }
.cosmos-topbar p { margin:0; color:#f2dca8; font-size:15px; letter-spacing:.11em; }
.cosmos-topbar span { color:#77a8a3; text-transform:uppercase; letter-spacing:.20em; font:600 8px system-ui,-apple-system,sans-serif; }
.cosmos-topbar button { border:1px solid rgba(242,191,82,.62); background:rgba(242,191,82,.08); color:#f6dfaf; padding:10px 15px; border-radius:6px; box-shadow:0 0 14px rgba(242,191,82,.09); font:600 11px system-ui,-apple-system,sans-serif; cursor:pointer; }
.cosmos-topbar button:hover,.cosmos-topbar button:focus-visible { background:rgba(242,191,82,.15); outline:2px solid rgba(242,191,82,.35); outline-offset:2px; }
.cosmos-heading { position:absolute; z-index:5; left:222px; top:99px; pointer-events:none; }
.cosmos-heading h2 { margin:0; font-size:clamp(35px,4vw,58px); line-height:.95; font-weight:400; letter-spacing:-.02em; text-shadow:0 0 28px rgba(0,0,0,.8); }
.cosmos-heading p { margin:9px 0 0; color:#d8c7a4; font-size:14px; font-style:italic; max-width:390px; }

.cosmos-sky { position:relative; min-height:0; margin-top:10px; border:1px solid rgba(50,189,181,.42); border-radius:12px; overflow:hidden; background:radial-gradient(circle at 51% 53%,rgba(241,176,49,.09),transparent 18%),radial-gradient(circle at 44% 42%,rgba(64,87,181,.12),transparent 35%),rgba(0,8,12,.22); box-shadow:inset 0 0 80px rgba(0,0,0,.48); }
.cosmos-sky::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,transparent 50%,rgba(0,5,9,.42) 95%); pointer-events:none; }
.cosmos-heart { position:absolute; left:50%; top:50%; width:82px;height:82px;transform:translate(-50%,-50%);z-index:1;display:grid;place-items:center; }
.cosmos-heart::before,.cosmos-heart::after { content:""; position:absolute; border:1px solid rgba(242,191,82,.48); border-radius:50%; }
.cosmos-heart::before { inset:-46px; box-shadow:0 0 28px rgba(242,191,82,.18); }
.cosmos-heart::after { inset:-104px; border-color:rgba(68,205,197,.22); }
.cosmos-heart span { width:20px;height:20px;border-radius:50%;background:#ffd36b;box-shadow:0 0 10px #ffcf58,0 0 34px rgba(255,183,45,.8),0 0 70px rgba(255,151,31,.35); }

.cosmos-current { position:absolute; z-index:0; border:1px solid rgba(77,203,200,.25); border-radius:50%; filter:drop-shadow(0 0 8px rgba(37,177,174,.22)); }
.current-a { width:77%;height:57%;left:10%;top:20%;transform:rotate(-10deg); }
.current-b { width:58%;height:76%;left:21%;top:8%;transform:rotate(22deg); border-color:rgba(164,73,210,.23); }
.current-c { width:92%;height:40%;left:3%;top:31%;transform:rotate(7deg); border-color:rgba(242,191,82,.18); }

.cosmos-worlds { position:absolute; inset:0; z-index:3; }
.cosmos-world { position:absolute; background:transparent; border:0; color:inherit; width:150px; height:150px; cursor:pointer; padding:0; text-align:center; }
.world-core { position:absolute; left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.34);box-shadow:inset -14px -12px 25px rgba(0,0,0,.58),0 0 22px var(--world-glow); }
.world-core::after { content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.34),transparent 18%),radial-gradient(circle at 54% 58%,var(--world-land) 0 8%,transparent 9%),radial-gradient(circle at 31% 45%,var(--world-land) 0 11%,transparent 12%),linear-gradient(150deg,var(--world-a),var(--world-b));opacity:.95; }
.world-surface { position:absolute;inset:0;background:repeating-linear-gradient(17deg,transparent 0 7px,rgba(255,255,255,.025) 8px 9px);z-index:2; }
.world-aura { position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--world-ring);box-shadow:0 0 16px var(--world-glow),inset 0 0 15px var(--world-glow);opacity:.68; }
.world-copy { position:absolute;left:50%;top:112px;transform:translateX(-50%);width:190px;text-shadow:0 2px 8px #000; }
.world-copy strong { display:block;font-weight:500;font-size:20px;color:#f9efd9; }
.world-copy small { display:block;margin-top:3px;color:#c9d2c8;font:500 10px/1.35 system-ui,-apple-system,sans-serif;letter-spacing:.01em; }
.cosmos-world:hover .world-aura,.cosmos-world:focus-visible .world-aura { opacity:1;transform:translate(-50%,-50%) scale(1.08);transition:.22s ease; }
.cosmos-world:focus-visible { outline:2px solid rgba(242,191,82,.72);outline-offset:5px;border-radius:50%; }
.world-haven { --world-a:#b9852e;--world-b:#24461d;--world-land:#d6b259;--world-glow:rgba(242,191,82,.48);--world-ring:rgba(242,191,82,.86);left:42%;top:33%;width:190px;height:190px; }
.world-haven .world-core { width:106px;height:106px;box-shadow:inset -18px -14px 29px rgba(0,0,0,.55),0 0 32px rgba(242,191,82,.64),0 0 65px rgba(242,191,82,.20); }
.world-haven .world-aura { width:154px;height:154px;border-width:1.5px; }
.world-haven .world-copy { top:144px; }
.world-harbors { --world-a:#147e91;--world-b:#06385b;--world-land:#6cc9c1;--world-glow:rgba(63,199,213,.46);--world-ring:rgba(67,210,216,.76);left:13%;top:47%; }
.world-harmony { --world-a:#a13a87;--world-b:#3d2d74;--world-land:#f0a5cb;--world-glow:rgba(219,93,190,.42);--world-ring:rgba(230,114,195,.72);left:40%;top:69%; }
.world-foundry { --world-a:#d56b23;--world-b:#4d1510;--world-land:#ffb33f;--world-glow:rgba(255,118,34,.48);--world-ring:rgba(255,145,59,.76);left:69%;top:16%; }
.world-living { --world-a:#4b8635;--world-b:#123a2a;--world-land:#b7d976;--world-glow:rgba(113,190,91,.38);--world-ring:rgba(136,211,101,.67);left:74%;top:45%; }
.world-academy { --world-a:#d9cba7;--world-b:#8d6ca6;--world-land:#f2dfb3;--world-glow:rgba(193,166,217,.38);--world-ring:rgba(216,193,232,.68);left:64%;top:69%; }

.cosmos-constellation { position:absolute; z-index:2; width:190px;height:105px;color:#b9cdd0; }
.constellation-star { position:absolute;width:5px;height:5px;border-radius:50%;background:#fff7d7;box-shadow:0 0 7px rgba(255,245,205,.9),0 0 14px rgba(100,201,255,.5); }
.constellation-line { position:absolute;height:1px;background:linear-gradient(90deg,rgba(117,197,230,.72),rgba(255,255,255,.32));transform-origin:0 0; }
.cosmos-constellation span { position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:11px;color:#c7ddd9;white-space:nowrap;text-shadow:0 2px 8px #000; }
.constellation-weavers { left:11%;top:16%; }
.constellation-lantern { left:43%;top:8%; }
.constellation-garden { left:21%;top:70%; }
.constellation-circle { right:4%;top:66%; }
.cosmos-whisper { position:absolute;z-index:4;margin:0;text-transform:uppercase;letter-spacing:.24em;color:#d0ae63;font:600 8px/1.55 system-ui,-apple-system,sans-serif;opacity:.9; }
.whisper-left { left:24px;bottom:28px; }
.whisper-right { right:25px;bottom:28px; }
.cosmos-footer { height:38px;display:flex;align-items:center;justify-content:center;gap:14px;color:#57a9a4;text-transform:uppercase;letter-spacing:.37em;font:700 8px system-ui,-apple-system,sans-serif; }
.cosmos-footer i { color:#c29e56;font-style:normal; }

@media (max-width: 900px) {
  body[data-active-screen="compass"] { overflow:auto; }
  .cosmos-home { grid-template-columns:1fr; min-height:100svh; }
  .cosmos-rail { display:none; }
  .cosmos-stage { padding:8px; min-height:100svh; }
  .cosmos-heading { left:28px;top:92px; }
  .cosmos-topbar { height:54px;padding:0 13px; }
  .cosmos-topbar span { display:none; }
  .cosmos-sky { margin-top:8px; min-height:690px; }
  .world-haven { left:36%;top:34%; }
  .world-harbors { left:4%;top:49%; }
  .world-harmony { left:29%;top:72%; }
  .world-foundry { left:65%;top:16%; }
  .world-living { left:68%;top:48%; }
  .world-academy { left:60%;top:72%; }
  .constellation-weavers { left:4%;top:17%; }
  .constellation-lantern { left:35%;top:9%; }
  .constellation-circle { display:none; }
  .cosmos-whisper { display:none; }
}
@media (max-width: 560px) {
  .cosmos-home::after { inset:5px; }
  .cosmos-stage { padding:6px; }
  .cosmos-topbar p { font-size:12px; }
  .cosmos-topbar button { padding:8px 10px;font-size:9px; }
  .cosmos-heading { left:18px;top:78px; }
  .cosmos-heading h2 { font-size:38px; }
  .cosmos-heading p { width:260px;font-size:12px; }
  .cosmos-sky { min-height:720px; }
  .cosmos-world { transform:scale(.82);transform-origin:center; }
  .world-haven { left:27%;top:34%;transform:scale(.9); }
  .world-harbors { left:-5%;top:51%; }
  .world-harmony { left:20%;top:72%; }
  .world-foundry { left:58%;top:18%; }
  .world-living { left:61%;top:48%; }
  .world-academy { left:54%;top:72%; }
  .constellation-weavers { transform:scale(.75);left:-6%;top:18%; }
  .constellation-lantern { transform:scale(.72);left:31%;top:10%; }
  .constellation-garden,.constellation-circle { display:none; }
}

@media (prefers-reduced-motion: no-preference) {
  .aurora-one { animation:auroraDrift 15s ease-in-out infinite alternate; }
  .aurora-two { animation:auroraDrift 18s ease-in-out -5s infinite alternate-reverse; }
  .world-haven .world-aura { animation:havenPulse 4.8s ease-in-out infinite; }
  .constellation-star { animation:starTwinkle 3.8s ease-in-out infinite alternate; }
}
@keyframes auroraDrift { from{transform:translate3d(-2%,0,0) rotate(-18deg) scale(1)} to{transform:translate3d(3%,2%,0) rotate(-13deg) scale(1.06)} }
@keyframes havenPulse { 0%,100%{box-shadow:0 0 14px rgba(242,191,82,.35),inset 0 0 15px rgba(242,191,82,.12)} 50%{box-shadow:0 0 27px rgba(242,191,82,.62),inset 0 0 20px rgba(242,191,82,.23)} }
@keyframes starTwinkle { from{opacity:.45} to{opacity:1} }
.cosmos-sr-link{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cosmos-sr-link:focus{position:fixed!important;left:18px!important;bottom:18px!important;width:auto!important;height:auto!important;padding:10px 14px!important;margin:0!important;clip:auto!important;overflow:visible!important;background:#071b1a!important;color:#f7edda!important;border:1px solid #f2bf52!important;z-index:9999}