:root {
  color-scheme: dark;
  --ink: #f4f8ff;
  --muted: #7183a5;
  --cyan: #84efff;
  --blue: #5c8dff;
  --violet: #927bff;
  --line: rgba(145, 198, 255, .15);
  --topbar: 76px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #01040d; }
body { overflow: hidden; color: var(--ink); }
button { color: inherit; font: inherit; }

#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background:
    radial-gradient(circle at 60% 44%, rgba(42, 74, 164, .22), transparent 26%),
    radial-gradient(circle at 48% 56%, rgba(69, 39, 133, .18), transparent 34%),
    #01040d;
}

.aurora {
  position: fixed;
  z-index: 1;
  inset: -30%;
  pointer-events: none;
  opacity: .24;
  background: conic-gradient(from 240deg at 52% 48%, transparent 0 18%, rgba(57, 106, 255, .22) 24%, transparent 31% 57%, rgba(116, 72, 255, .16) 62%, transparent 69%);
  filter: blur(90px);
  animation: aurora-spin 48s linear infinite;
}

@keyframes aurora-spin { to { transform: rotate(360deg); } }

.noise {
  position: fixed;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}

.topbar {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: var(--topbar);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 32px;
  border-bottom: 1px solid rgba(142, 193, 255, .11);
  background: linear-gradient(180deg, rgba(1, 4, 13, .78), rgba(1, 4, 13, .18));
  backdrop-filter: blur(15px);
}

.brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; color: #dfebff; text-decoration: none; font-size: 12px; letter-spacing: .22em; }
.brand b { color: var(--cyan); font-weight: 550; }
.brand-mark { position: relative; width: 27px; height: 27px; }
.brand-mark i { position: absolute; inset: 8px; border: 1px solid #75dfff; border-radius: 50%; box-shadow: 0 0 13px #2d91ff; }
.brand-mark i:nth-child(2) { inset: 3px 11px; }
.brand-mark i:nth-child(3) { inset: 11px 3px; }

.universe-coordinate { display: flex; align-items: center; gap: 11px; color: #53698e; font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .19em; }
.universe-coordinate i { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #4d79a9, transparent); }
.access-pill { justify-self: end; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(126, 193, 255, .15); border-radius: 999px; background: rgba(8, 18, 40, .52); padding: 9px 13px; color: #7188aa; font-size: 8px; letter-spacing: .15em; cursor: default; }
.lock { color: #6ddfff; text-shadow: 0 0 9px #3d9cff; }

main { position: relative; z-index: 4; height: 100vh; }
.eyebrow { color: #72dfff; font-size: 9px; letter-spacing: .28em; text-transform: uppercase; }
.hero { position: absolute; z-index: 8; left: 4vw; top: calc(var(--topbar) + 5vh); max-width: 470px; pointer-events: none; transition: opacity .45s, transform .6s; }
.hero h1 { display: grid; justify-items: start; gap: 10px; margin: 12px 0 26px; font-size: clamp(48px, 6vw, 92px); line-height: .88; letter-spacing: -.065em; font-weight: 470; }
.hero h1 > span,
.hero h1 em { display: block; }
.hero h1 em { color: transparent; font-size: .82em; font-style: normal; letter-spacing: -.035em; transform: translateX(.04em); -webkit-text-stroke: 1px rgba(165, 220, 255, .6); text-shadow: 0 0 28px rgba(71, 148, 255, .1); }
.hero p { margin: 0; color: #8a9bb8; font-size: 12px; line-height: 1.72; }
body.focused .hero { opacity: .08; transform: translateX(-30px); }
body.focused main { cursor: zoom-out; }

.virgo-core { position: absolute; z-index: 6; left: 50%; top: 49%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; color: rgba(119, 203, 255, .42); pointer-events: none; transition: opacity .35s; }
.virgo-core > span { width: 5px; height: 5px; border-radius: 50%; background: #f5fdff; box-shadow: 0 0 14px 3px #91edff, 0 0 58px 20px rgba(69, 105, 255, .6); }
.virgo-core b { margin-top: 18px; font-size: 8px; letter-spacing: .28em; font-weight: 500; }
.virgo-core small { margin-top: 5px; color: rgba(104, 133, 179, .38); font-size: 6px; letter-spacing: .19em; }
body.focused .virgo-core { opacity: 0; }

.constellation-signature { position: absolute; z-index: 7; right: 3vw; bottom: 7vh; display: flex; align-items: center; gap: 12px; color: rgba(114, 215, 255, .48); pointer-events: none; transition: opacity .35s; }
.constellation-signature > span { font-size: 28px; font-weight: 200; text-shadow: 0 0 20px rgba(75, 169, 255, .45); }
.constellation-signature b, .constellation-signature small { display: block; }
.constellation-signature b { font-size: 9px; letter-spacing: .29em; font-weight: 500; }
.constellation-signature small { margin-top: 5px; color: rgba(91, 119, 160, .54); font-size: 7px; letter-spacing: .16em; }
body.focused .constellation-signature { opacity: 0; }

.layer-label { --label-color: 105, 205, 255; position: absolute; z-index: 7; display: grid; grid-template-columns: 42px auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px; align-items: center; min-width: 225px; color: rgba(99, 151, 216, .38); transform: translate(-4px, -50%); pointer-events: none; transition: opacity .35s; }
.layer-label::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 42px; height: 1px; background: linear-gradient(90deg, rgba(var(--label-color), .2), rgba(var(--label-color), .7)); box-shadow: 0 0 8px rgba(var(--label-color), .28); transform: rotate(var(--leader-angle, 0deg)); transform-origin: right center; }
.layer-label::after { content: ""; position: absolute; left: -2px; top: calc(50% - 2px); width: 4px; height: 4px; border: 1px solid rgba(var(--label-color), .75); border-radius: 50%; background: rgba(var(--label-color), .34); box-shadow: 0 0 9px rgba(var(--label-color), .65); }
.layer-label b { grid-column: 2; color: rgba(var(--label-color), .72); font-size: 11px; font-weight: 520; letter-spacing: .18em; text-shadow: 0 0 16px rgba(var(--label-color), .18); }
.layer-label span { grid-column: 2; font-family: ui-monospace, monospace; font-size: 7px; letter-spacing: .2em; }
.layer-label--solutions { --label-color: 111, 222, 255; --leader-angle: -10deg; left: 46%; top: calc(var(--topbar) + 10vh); }
.layer-label--foundation { --label-color: 101, 132, 255; --leader-angle: 9deg; left: 8vw; top: 66vh; }
body.focused .layer-label { opacity: 0; }

.systems { position: absolute; z-index: 10; inset: var(--topbar) 0 0; pointer-events: none; }
.system-node { position: absolute; width: 244px; transform: translate(-17px, -50%); border: 0; background: transparent; padding: 20px 18px 20px 31px; text-align: left; cursor: pointer; pointer-events: auto; transition: opacity .3s, filter .3s; }
.system-node::before { content: ""; position: absolute; left: 6px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border: 1px solid var(--system-color); border-radius: 50%; background: color-mix(in srgb, var(--system-color) 70%, white); box-shadow: 0 0 10px 2px var(--system-color), 0 0 34px 10px color-mix(in srgb, var(--system-color) 45%, transparent); transition: transform .24s, box-shadow .24s; }
.system-node::after { content: ""; position: absolute; left: -3px; top: calc(50% - 10px); width: 20px; height: 20px; border: 1px solid color-mix(in srgb, var(--system-color) 32%, transparent); border-radius: 50%; animation: orbit-pulse 3.4s ease-in-out infinite; animation-delay: var(--delay); }
.system-node:hover, .system-node:focus-visible { outline: 0; filter: brightness(1.25); }
.system-node:hover::before, .system-node:focus-visible::before { transform: translateY(-50%) scale(1.7); box-shadow: 0 0 13px 3px var(--system-color), 0 0 48px 18px color-mix(in srgb, var(--system-color) 55%, transparent); }
.system-node strong { display: block; overflow: hidden; color: #f1f8ff; font-size: 17px; font-weight: 480; line-height: 1.28; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 14px #01040d, 0 0 18px rgba(76, 158, 255, .15); }
.system-node small { display: block; margin-top: 7px; color: #6982aa; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.system-node[data-layer="foundation"] strong { color: #d8e8fb; }
.system-node[data-layer="foundation"] small { color: #536b96; }
.system-node[data-core="true"] strong { color: #f4fdff; font-size: 18px; text-shadow: 0 0 22px rgba(94, 231, 255, .32); }
.system-node[data-core="true"] small { color: #71bad5; }
.system-node[data-core="true"]::before { width: 9px; height: 9px; box-shadow: 0 0 14px 3px var(--system-color), 0 0 46px 14px color-mix(in srgb, var(--system-color) 58%, transparent); }
.system-node[data-align="end"] { transform: translate(calc(-100% + 17px), -50%); padding: 20px 31px 20px 18px; text-align: right; }
.system-node[data-align="end"]::before { right: 6px; left: auto; }
.system-node[data-align="end"]::after { right: -3px; left: auto; }
body.focused .system-node:not(.selected) { opacity: .12; pointer-events: none; }
.system-node.selected { filter: brightness(1.4); }

@keyframes orbit-pulse { 50% { transform: scale(1.36); opacity: .22; } }

.universe-stats { position: absolute; z-index: 8; right: 3vw; top: calc(var(--topbar) + 34px); display: flex; gap: 27px; transition: opacity .35s; }
.universe-stats div { text-align: right; }
.universe-stats b { display: block; font-size: 24px; font-weight: 400; letter-spacing: -.04em; }
.universe-stats span { color: #586d90; font-size: 7px; letter-spacing: .17em; }
body.focused .universe-stats { opacity: 0; }

.explore-hint { position: fixed; z-index: 9; left: 34px; bottom: 28px; display: flex; align-items: center; gap: 10px; color: #51698f; font-size: 8px; letter-spacing: .13em; transition: opacity .3s; }
.mouse { width: 17px; height: 24px; display: flex; justify-content: center; border: 1px solid #425d83; border-radius: 9px; }
.mouse i { width: 2px; height: 5px; margin-top: 5px; border-radius: 2px; background: #75dbff; animation: scroll 1.7s infinite; }
@keyframes scroll { 70% { transform: translateY(7px); opacity: 0; } }
body.focused .explore-hint { opacity: 0; }

.detail { position: fixed; z-index: 40; top: 0; right: 0; width: min(455px, 94vw); height: 100vh; padding: 12vh 44px 42px; border-left: 1px solid rgba(145, 206, 255, .18); background: linear-gradient(145deg, rgba(8, 20, 49, .89), rgba(1, 5, 15, .96)); backdrop-filter: blur(25px); box-shadow: -40px 0 100px rgba(0, 3, 15, .46); transform: translateX(104%); transition: transform .55s cubic-bezier(.2, .82, .2, 1); }
.detail.open { transform: translateX(0); }
.detail-close { position: absolute; top: 28px; right: 28px; width: 39px; height: 39px; border: 1px solid rgba(145, 192, 244, .18); border-radius: 50%; background: transparent; color: #91a6c5; cursor: pointer; font-size: 20px; font-weight: 200; }
.detail-index { margin-bottom: 42px; color: #536b92; font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .17em; }
.detail h2 { margin: 14px 0 19px; font-size: clamp(39px, 4.4vw, 64px); line-height: .96; letter-spacing: -.055em; font-weight: 450; }
.detail-description { max-width: 340px; margin: 0; color: #8596b2; font-size: 12px; line-height: 1.85; }
.detail-section { margin-top: 50px; padding-top: 16px; border-top: 1px solid rgba(139, 187, 241, .13); }
.detail-section > span { color: #536b91; font-size: 8px; letter-spacing: .17em; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.tags span { border: 1px solid rgba(130, 184, 239, .17); border-radius: 999px; padding: 7px 10px; color: #94a8c7; font-size: 8px; letter-spacing: .08em; }
.detail-actions { display: flex; gap: 10px; margin-top: 38px; }
.primary-action, .quiet-action { border-radius: 999px; padding: 12px 16px; cursor: pointer; font-size: 9px; letter-spacing: .09em; }
.primary-action { border: 1px solid #69dfff; background: #91eaff; color: #041022; }
.primary-action span { margin-left: 18px; }
.primary-action:disabled { opacity: .48; cursor: not-allowed; }
.quiet-action { border: 1px solid rgba(130, 184, 239, .18); background: transparent; color: #8297b7; }
.entry-note { margin-top: 15px; color: #4d6283; font-size: 8px; }

.focus-reticle { position: fixed; z-index: 20; left: 50%; top: 50%; width: 210px; height: 210px; transform: translate(-50%, -50%) scale(.7); border: 1px solid rgba(118, 214, 255, .15); border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .5s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.focus-reticle::before, .focus-reticle::after { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(111, 172, 255, .08); border-radius: 50%; }
.focus-reticle::after { inset: 54px; }
.focus-reticle i { position: absolute; left: 50%; top: -13px; width: 1px; height: 26px; background: rgba(123, 220, 255, .26); }
.focus-reticle i:nth-child(2) { left: -13px; top: 50%; width: 26px; height: 1px; }
body.focused .focus-reticle { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.toast { position: fixed; z-index: 50; left: 50%; bottom: 32px; transform: translate(-50%, 12px); opacity: 0; border: 1px solid rgba(123, 214, 255, .22); border-radius: 999px; background: rgba(8, 22, 49, .95); padding: 10px 15px; color: #bfefff; font-size: 9px; transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 800px) {
  :root { --topbar: 66px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 17px; }
  .universe-coordinate { display: none; }
  .access-pill { padding: 8px 10px; }
  .hero { left: 21px; top: 92px; }
  .hero h1 { gap: 8px; font-size: 53px; }
  .hero p { max-width: 300px; font-size: 11px; }
  .universe-stats { display: none; }
  .layer-label { display: none; }
  .system-node { width: 174px; padding-left: 24px; }
  .system-node strong { font-size: 14px; }
  .system-node small { display: none; }
  .constellation-signature { right: 20px; bottom: 26px; transform: scale(.75); transform-origin: right bottom; }
  .detail { padding: 12vh 28px 35px; }
  .focus-reticle { width: 155px; height: 155px; }
  .explore-hint { left: 20px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}