:root {
  /* Design typography tokens: Space Grotesk Groteskk Grotesk** for the primary wordmark */
  --void: #05070D;
  --graphite: #111827;
  --chrome: #C9D2DA;
  --mirror: #F5F7FA;
  --cyan: #6EE7F9;
  --violet: #8B5CF6;
  --yellow: #FFE66D;
  --blush: #F8BBD0;
  --steel: #8EA4B8;
  --chrome-gradient: linear-gradient(110deg, #F5F7FA 0%, #8EA4B8 22%, #6EE7F9 45%, #8B5CF6 68%, #05070D 100%);
  --space: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --fraunces: "Fraunces", Georgia, "Times New Roman", serif;
  --bricolage: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mirror);
  font-family: var(--space);
  background: var(--void);
  overflow-x: hidden;
}

button, a { font: inherit; color: inherit; }

.void {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, rgba(110, 231, 249, .08), transparent 22vw),
    radial-gradient(circle at 12% 78%, rgba(139, 92, 246, .10), transparent 24vw),
    linear-gradient(155deg, #05070D 0%, #070A12 48%, #111827 140%);
}

.void::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(102deg, transparent 0 37%, rgba(245, 247, 250, .08) 37.2%, transparent 37.6% 100%),
    linear-gradient(18deg, transparent 0 72%, rgba(110, 231, 249, .10) 72.1%, transparent 72.4% 100%);
  mix-blend-mode: screen;
  opacity: .65;
}

.cursor-glint {
  position: fixed;
  z-index: 10;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(110, 231, 249, .16), rgba(248, 187, 208, .055) 28%, transparent 62%);
  opacity: .2;
  mix-blend-mode: screen;
}

.nav-sliver {
  position: fixed;
  top: 34px;
  right: 34px;
  z-index: 20;
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border: 1px solid rgba(201, 210, 218, .16);
  border-radius: 999px;
  background: rgba(5, 7, 13, .42);
  backdrop-filter: blur(14px);
}

.nav-sliver a {
  text-decoration: none;
  color: rgba(245, 247, 250, .72);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.nav-sliver a:hover { color: var(--cyan); }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 6vw, 86px);
  isolation: isolate;
}

.wordmark-block {
  position: absolute;
  left: clamp(28px, 8vw, 112px);
  bottom: clamp(76px, 16vh, 170px);
  max-width: 360px;
}

.specimen-kicker, .scene-title span, .console-caption span, .archive-title span {
  display: block;
  margin: 0 0 16px;
  color: rgba(201, 210, 218, .62);
  font-family: var(--bricolage);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; font-weight: 500; }

h1 {
  font-size: clamp(27px, 4.4vw, 68px);
  letter-spacing: -.055em;
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  color: var(--mirror);
  font-size: clamp(30px, 5vw, 76px);
  letter-spacing: -.06em;
}

p { line-height: 1.7; }

.inspect-button, .micro-label {
  margin-top: 24px;
  border: 1px solid rgba(110, 231, 249, .32);
  border-radius: 999px;
  background: rgba(17, 24, 39, .34);
  color: var(--chrome);
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--bricolage);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: border-color .5s ease, color .5s ease, transform .5s ease;
}

.inspect-button:hover, .micro-label:hover { color: var(--yellow); border-color: var(--yellow); transform: translateY(-2px); }

.seed-object {
  position: absolute;
  top: 17vh;
  right: 18vw;
  width: clamp(210px, 26vw, 390px);
  height: clamp(210px, 26vw, 390px);
  transform-style: preserve-3d;
  transition: transform .3s ease;
}

.petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  height: 13%;
  transform-origin: -2% 50%;
  border: 1px solid rgba(245, 247, 250, .34);
  background:
    linear-gradient(120deg, rgba(245, 247, 250, .28), rgba(110, 231, 249, .11) 42%, rgba(139, 92, 246, .14)),
    rgba(201, 210, 218, .045);
  clip-path: polygon(5% 50%, 29% 5%, 100% 25%, 82% 76%, 26% 95%);
  box-shadow: inset 0 0 24px rgba(245, 247, 250, .08), 0 0 18px rgba(110, 231, 249, .08);
  backdrop-filter: blur(8px);
}

.p1 { transform: rotate(0deg) translateX(40%); }
.p2 { transform: rotate(45deg) translateX(40%); }
.p3 { transform: rotate(90deg) translateX(40%); }
.p4 { transform: rotate(135deg) translateX(40%); }
.p5 { transform: rotate(180deg) translateX(40%); }
.p6 { transform: rotate(225deg) translateX(40%); }
.p7 { transform: rotate(270deg) translateX(40%); }
.p8 { transform: rotate(315deg) translateX(40%); }

.cursor-petal {
  width: 23%;
  background: linear-gradient(90deg, rgba(255, 230, 109, .2), rgba(245, 247, 250, .38));
  animation: cursorBlink 1.6s steps(2, end) infinite;
}

.seed-object.open .p2 { transform: rotate(45deg) translateX(72%) rotateY(54deg); border-color: rgba(255, 230, 109, .68); }

.daisy-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 109, .58);
  background: radial-gradient(circle, transparent 36%, rgba(255, 230, 109, .18) 38%, rgba(5, 7, 13, .7) 66%);
}

.orbit-ring {
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(110, 231, 249, .18);
  border-radius: 50%;
  transform: rotateX(64deg) rotateZ(20deg);
}

.ring-b { inset: 6%; border-color: rgba(139, 92, 246, .2); transform: rotateX(68deg) rotateZ(-38deg); }

.code-reveal {
  position: absolute;
  right: -18%;
  top: 22%;
  padding: 9px 12px;
  border-left: 1px solid var(--yellow);
  color: var(--yellow);
  font-family: var(--bricolage);
  font-size: 13px;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .9s ease, transform .9s ease;
}

.seed-object.open .code-reveal { opacity: 1; transform: translateX(0); }

.scene-note {
  position: absolute;
  right: 10vw;
  bottom: 9vh;
  max-width: 270px;
  color: rgba(201, 210, 218, .62);
  font-family: var(--fraunces);
  font-style: italic;
}

.title-high-right {
  position: absolute;
  right: 9vw;
  top: 14vh;
  max-width: 460px;
}

.title-high-right p, .archive-title p { color: rgba(201, 210, 218, .68); font-family: var(--fraunces); }

.compiler-object {
  position: absolute;
  left: 9vw;
  bottom: 16vh;
  width: min(52vw, 680px);
  height: 390px;
}

.glass-shard {
  position: absolute;
  border: 1px solid rgba(245, 247, 250, .22);
  background: linear-gradient(132deg, rgba(245, 247, 250, .13), rgba(110, 231, 249, .055), rgba(139, 92, 246, .09));
  color: var(--chrome);
  backdrop-filter: blur(14px);
  clip-path: polygon(6% 11%, 82% 0, 100% 64%, 45% 100%, 0 72%);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .34), inset 0 0 35px rgba(245, 247, 250, .045);
  transition: transform .9s ease, opacity .9s ease, border-color .9s ease;
}

.shard-main { left: 24%; top: 24%; width: 280px; height: 150px; padding: 45px 30px; }
.shard-left { left: 2%; top: 2%; width: 190px; height: 110px; padding: 38px 24px; opacity: .42; }
.shard-right { right: 5%; bottom: 5%; width: 220px; height: 118px; padding: 42px 25px; opacity: .45; }
.glass-shard b { display: block; color: var(--mirror); font-weight: 500; }
.glass-shard small { display: block; margin-top: 10px; color: var(--yellow); }
.compiler-object.unfolded .shard-left { transform: translate(-34px, -25px) rotate(-8deg); opacity: .9; border-color: rgba(110, 231, 249, .46); }
.compiler-object.unfolded .shard-right { transform: translate(34px, 30px) rotate(7deg); opacity: .95; border-color: rgba(248, 187, 208, .42); }

.hairline { position: absolute; background: rgba(201, 210, 218, .26); transform-origin: center; }
.vertical { left: 50%; top: 0; width: 1px; height: 100%; }
.diagonal { left: 15%; top: 50%; width: 80%; height: 1px; transform: rotate(-18deg); }
.micro-label { position: absolute; left: 12vw; top: 22vh; }

.console-caption { position: absolute; left: 11vw; top: 12vh; max-width: 520px; }
.console-caption h2 { font-family: var(--fraunces); font-style: italic; font-weight: 300; letter-spacing: -.04em; }

.petal-console {
  position: absolute;
  right: 12vw;
  bottom: 13vh;
  width: 430px;
  height: 430px;
}

.console-petal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 175px;
  height: 58px;
  transform-origin: -12px center;
  border: 1px solid rgba(201, 210, 218, .26);
  background: rgba(245, 247, 250, .045);
  color: rgba(245, 247, 250, .72);
  cursor: pointer;
  clip-path: polygon(0 50%, 18% 4%, 100% 18%, 89% 84%, 18% 96%);
  transition: .55s ease;
}
.console-petal:nth-child(1) { transform: rotate(18deg) translateX(40px); }
.console-petal:nth-child(2) { transform: rotate(108deg) translateX(40px); }
.console-petal:nth-child(3) { transform: rotate(198deg) translateX(40px); }
.console-petal:nth-child(4) { transform: rotate(288deg) translateX(40px); }
.console-petal.active { color: var(--yellow); border-color: rgba(255, 230, 109, .66); background: rgba(255, 230, 109, .07); }
.console-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  min-height: 122px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(110, 231, 249, .28);
  border-radius: 999px;
  padding: 29px 22px;
  text-align: center;
  background: rgba(5, 7, 13, .64);
}
.console-core p { margin: 0 0 10px; color: var(--mirror); }
.console-core code { color: var(--cyan); font-family: var(--bricolage); }
.console-note { position: absolute; left: 16vw; bottom: 16vh; color: rgba(201, 210, 218, .58); font-family: var(--fraunces); font-style: italic; }

.archive-title { position: absolute; left: 10vw; top: 18vh; max-width: 420px; }
.archive-orbit { position: absolute; right: 14vw; top: 23vh; width: 390px; height: 390px; border: 1px solid rgba(201, 210, 218, .12); border-radius: 50%; }
.archive-orbit::before { content: ""; position: absolute; inset: 19%; border: 1px solid rgba(110, 231, 249, .18); border-radius: 50%; transform: rotateX(65deg); }
.archive-stem { position: absolute; left: 50%; top: 18%; width: 1px; height: 64%; background: linear-gradient(#6EE7F9, #C9D2DA, #8B5CF6); transform: rotate(22deg); opacity: .44; }
.pollen { position: absolute; width: 13px; height: 13px; border: 1px solid rgba(245, 247, 250, .62); border-radius: 50%; background: radial-gradient(circle, #FFE66D 0 28%, #6EE7F9 30% 56%, transparent 60%); box-shadow: 0 0 22px rgba(255, 230, 109, .28); cursor: pointer; }
.point-a { left: 15%; top: 26%; }
.point-b { right: 10%; top: 42%; }
.point-c { left: 40%; bottom: 6%; }
.point-d { right: 34%; top: 4%; }
.archive-note { position: absolute; left: -38%; bottom: 16%; width: 230px; padding: 14px 16px; border-left: 1px solid rgba(255, 230, 109, .72); color: var(--yellow); font-family: var(--fraunces); font-style: italic; opacity: .72; }

.scene-meter { position: fixed; left: 34px; top: 34px; z-index: 20; color: rgba(201, 210, 218, .58); font-family: var(--bricolage); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.slow-satellite { position: fixed; width: 180px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 247, 250, .4), transparent); opacity: .38; animation: satellite 14s linear infinite; pointer-events: none; }
.satellite-one { top: 28vh; left: -220px; }
.satellite-two { top: 76vh; left: -320px; animation-delay: -6s; opacity: .2; }

.scene { opacity: .42; transition: opacity .9s ease; }
.scene.is-visible { opacity: 1; }

@keyframes cursorBlink { 50% { opacity: .35; } }
@keyframes satellite { to { transform: translateX(calc(100vw + 520px)) rotate(-12deg); } }

@media (max-width: 760px) {
  .nav-sliver { right: 16px; top: 16px; gap: 10px; padding: 8px 10px; }
  .nav-sliver a { font-size: 9px; letter-spacing: .12em; }
  .scene { padding: 76px 22px 44px; }
  .wordmark-block, .seed-object, .scene-note, .title-high-right, .compiler-object, .micro-label, .console-caption, .petal-console, .console-note, .archive-title, .archive-orbit { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .seed-object { margin: 18vh 0 4vh auto; width: 260px; height: 260px; }
  .wordmark-block { margin-top: 16vh; }
  .scene-note { margin-left: auto; }
  .compiler-object { width: 100%; margin-top: 24vh; }
  .micro-label { margin-top: 22px; }
  .petal-console { width: 330px; height: 330px; margin: 20vh auto 0; }
  .console-petal { width: 132px; font-size: 12px; }
  .archive-orbit { width: 310px; height: 310px; margin: 22vh auto 0; }
  .archive-note { left: 0; bottom: -72px; }
}