:root {
  /* Typography note: Space Mono is used sparingly for coordinate labels to make the experience feel like a forbidden observatory lounge rather than a standard bar menu. */
  --event-horizon: #05060A;
  --magnetite: #101B2F;
  --ion: #7B3FF2;
  --brass: #D6A84F;
  --mercury: #C6D0D8;
  --absinthe: #B8FF6A;
  --merlot: #4A1227;
  --axis-x: 58vw;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--mercury);
  background:
    radial-gradient(circle at 72% 24%, rgba(123, 63, 242, .22), transparent 34rem),
    radial-gradient(circle at 12% 56%, rgba(74, 18, 39, .62), transparent 42rem),
    linear-gradient(135deg, var(--event-horizon), var(--magnetite) 48%, var(--event-horizon));
  font-family: Fraunces, serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .34;
  background-image:
    radial-gradient(circle at 17% 23%, rgba(198, 208, 216, .18) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 61%, rgba(214, 168, 79, .16) 0 1px, transparent 1.3px),
    linear-gradient(90deg, transparent, rgba(198, 208, 216, .035), transparent);
  background-size: 37px 41px, 53px 47px, 6px 100%;
  mix-blend-mode: screen;
}

.mercury-reflection {
  position: fixed;
  inset: auto -10vw 0 -10vw;
  height: 31vh;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(198, 208, 216, .055) 42%, rgba(5, 6, 10, .88));
  filter: blur(.3px);
}

.monopole-axis {
  position: fixed;
  top: -8vh;
  left: var(--axis-x);
  width: 36px;
  height: 116vh;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
}

.axis-core {
  position: absolute;
  inset: 0 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--brass) 14%, var(--ion) 36%, var(--ion) 70%, var(--brass) 88%, transparent);
  box-shadow: 0 0 26px rgba(123, 63, 242, .95), 0 0 72px rgba(123, 63, 242, .42), 0 0 0 1px rgba(214, 168, 79, .5);
  animation: polePulse 5.5s ease-in-out infinite;
}

.axis-core::before {
  content: "";
  position: absolute;
  inset: 0 -84px;
  background: radial-gradient(ellipse at center, rgba(123, 63, 242, .24), rgba(123, 63, 242, .08) 36%, transparent 72%);
  filter: blur(12px);
}

.axis-dot {
  position: absolute;
  bottom: 7vh;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--absinthe);
  box-shadow: 0 0 24px var(--absinthe), 0 0 64px var(--ion);
}

.compass-nav {
  position: fixed;
  right: 26px;
  top: 26px;
  z-index: 30;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  font-family: "Space Mono", monospace;
  color: var(--brass);
}

.rose-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(214, 168, 79, .52);
  background: conic-gradient(from 18deg, rgba(214,168,79,.22), transparent 14%, rgba(123,63,242,.28) 20%, transparent 38%, rgba(214,168,79,.18) 52%, transparent 67%, rgba(184,255,106,.16) 72%, transparent);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 18% 100%, 18% 74%, 58% 50%, 18% 22%, 18% 0);
}

.nav-needle {
  width: 4px;
  height: 54px;
  border-radius: 999px;
  background: linear-gradient(var(--absinthe), var(--brass), var(--ion));
  transform-origin: 50% 82%;
  transform: rotate(36deg);
  box-shadow: 0 0 12px rgba(184, 255, 106, .6);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.compass-nav a {
  position: absolute;
  font-size: 10px;
  letter-spacing: .08em;
}
.compass-nav a:nth-of-type(1) { top: 6px; left: 45px; }
.compass-nav a:nth-of-type(2) { top: 34px; right: 8px; }
.compass-nav a:nth-of-type(3) { bottom: 8px; right: 27px; }
.compass-nav a:nth-of-type(4) { bottom: 19px; left: 11px; }
.compass-nav a:nth-of-type(5) { top: 29px; left: 15px; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 9vh 7vw;
}

.field-svg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: .72;
}

.field-svg path {
  fill: none;
  stroke: url(#none);
  stroke: rgba(198, 208, 216, .18);
  stroke-width: 1.5;
  stroke-dasharray: 10 18;
  animation: fieldPulse 12s linear infinite;
}

.field-svg path:nth-child(2) { stroke: rgba(123, 63, 242, .34); animation-duration: 15s; }
.field-svg path:nth-child(3) { stroke: rgba(214, 168, 79, .25); animation-duration: 18s; }
.field-svg path:nth-child(4) { stroke: rgba(184, 255, 106, .16); animation-duration: 21s; }

.hero {
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at var(--axis-x) 44%, rgba(123,63,242,.21), transparent 23rem),
    linear-gradient(90deg, rgba(5,6,10,.96), rgba(16,27,47,.82) 54%, rgba(5,6,10,.98));
}

.wordmark {
  position: absolute;
  left: 9vw;
  right: 5vw;
  top: 13vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6vw;
  font-family: Unbounded, sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 8.2vw, 9.6rem);
  letter-spacing: -.08em;
  color: rgba(198, 208, 216, .96);
  text-shadow: 0 0 28px rgba(123, 63, 242, .35), 0 14px 0 rgba(5, 6, 10, .62);
  line-height: .88;
}

.wordmark span:last-child { color: rgba(214, 168, 79, .94); }

.orbital-copy {
  width: min(440px, 38vw);
  margin-left: 8vw;
  margin-top: 20vh;
  transform: rotate(-4deg);
}

.coordinate {
  margin: 0 0 1rem;
  font-family: "Space Mono", monospace;
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--brass);
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: Unbounded, sans-serif;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--mercury);
  text-transform: uppercase;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 6.8rem); line-height: .9; }
h2 { font-size: clamp(2rem, 4.3vw, 5.2rem); line-height: .92; }

p {
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  line-height: 1.48;
  color: rgba(198, 208, 216, .84);
}

em { color: white; font-style: italic; }

.diegetic-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: .9rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(214, 168, 79, .52);
  border-radius: 999px;
  font-family: "Space Mono", monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--brass);
  text-transform: uppercase;
  background: rgba(5, 6, 10, .48);
  box-shadow: inset 0 0 20px rgba(123, 63, 242, .12);
}

.tiny-needle {
  display: inline-block;
  width: 3px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(var(--absinthe), var(--ion));
  transform: rotate(62deg);
  transform-origin: 50% 80%;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 10px rgba(184, 255, 106, .55);
}

.chamber-label:hover .tiny-needle { transform: rotate(0deg) scaleY(1.15); }

.levitating-coupe {
  position: absolute;
  right: 15vw;
  bottom: 18vh;
  width: 230px;
  height: 250px;
  animation: levitate 4.8s ease-in-out infinite;
}

.bowl {
  position: absolute;
  top: 28px;
  left: 16px;
  width: 198px;
  height: 92px;
  border: 2px solid rgba(198, 208, 216, .72);
  border-top: 5px solid rgba(214, 168, 79, .88);
  border-radius: 16px 16px 100px 100px;
  background: radial-gradient(circle at 50% 18%, rgba(184,255,106,.4), transparent 12%), linear-gradient(180deg, rgba(123,63,242,.18), rgba(198,208,216,.05));
  box-shadow: inset 0 -18px 32px rgba(123, 63, 242, .2), 0 0 42px rgba(123, 63, 242, .22);
}

.stem { position: absolute; top: 116px; left: 112px; width: 5px; height: 84px; background: var(--mercury); box-shadow: 0 0 10px var(--ion); }
.base { position: absolute; bottom: 18px; left: 62px; width: 106px; height: 15px; border-radius: 50%; border: 1px solid var(--brass); background: rgba(214,168,79,.18); }
.garnish { position: absolute; top: 0; left: 96px; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, white, var(--absinthe) 30%, #477b21 70%); box-shadow: 0 0 18px var(--absinthe); }
.counter-line { position: absolute; right: 5vw; bottom: 14vh; width: 44vw; height: 10px; background: linear-gradient(90deg, transparent, rgba(5,6,10,.8), var(--brass), rgba(5,6,10,.9)); transform: skewX(-18deg); }

.equation-cloud span {
  position: absolute;
  font-family: "Space Mono", monospace;
  color: rgba(198, 208, 216, .35);
  font-size: .78rem;
  letter-spacing: .12em;
}
.equation-cloud span:nth-child(1) { left: 9vw; top: 34vh; }
.equation-cloud span:nth-child(2) { right: 13vw; top: 25vh; color: rgba(184,255,106,.46); }
.equation-cloud span:nth-child(3) { left: 28vw; bottom: 19vh; }
.equation-cloud span:nth-child(4) { right: 8vw; bottom: 42vh; }

.edge-needles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 62px;
  border-radius: 999px;
  background: linear-gradient(var(--brass) 0 44%, var(--absinthe) 45% 52%, var(--ion) 53%);
  transform: rotate(var(--r));
  animation: tremble 1.7s ease-in-out infinite alternate;
  box-shadow: 0 0 16px rgba(123, 63, 242, .5);
}

.counter { background: linear-gradient(115deg, rgba(16,27,47,.94), rgba(5,6,10,.98) 56%, rgba(74,18,39,.64)); }
.tilted-plaque {
  position: absolute;
  left: 7vw;
  top: 18vh;
  width: min(470px, 40vw);
  padding: 2rem;
  transform: rotate(-7deg);
  border: 1px solid rgba(214, 168, 79, .45);
  background: linear-gradient(135deg, rgba(5,6,10,.82), rgba(16,27,47,.74));
  box-shadow: 0 26px 90px rgba(0,0,0,.42), inset 0 0 30px rgba(123,63,242,.1);
}
.brass-halo {
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(from 220deg, transparent 0 18%, rgba(214,168,79,.85) 19% 34%, rgba(123,63,242,.48) 39% 46%, transparent 47% 100%);
  filter: drop-shadow(0 0 22px rgba(214,168,79,.32));
}
.halo-one { width: 420px; height: 420px; right: 14vw; top: 18vh; }
.bottle-rack { position: absolute; right: 10vw; bottom: 18vh; width: 34vw; height: 250px; border-bottom: 4px solid rgba(214,168,79,.64); }
.bottle-rack span { position: absolute; bottom: 0; width: 48px; border: 1px solid rgba(198,208,216,.48); border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, rgba(123,63,242,.18), rgba(5,6,10,.74)); box-shadow: inset 0 18px 24px rgba(184,255,106,.06), 0 0 22px rgba(123,63,242,.2); }
.bottle-rack span:nth-child(1) { left: 4%; height: 164px; transform: rotate(-9deg); }
.bottle-rack span:nth-child(2) { left: 22%; height: 214px; transform: rotate(-5deg); }
.bottle-rack span:nth-child(3) { left: 43%; height: 188px; transform: rotate(2deg); }
.bottle-rack span:nth-child(4) { left: 64%; height: 232px; transform: rotate(6deg); }
.bottle-rack span:nth-child(5) { left: 84%; height: 148px; transform: rotate(11deg); }
.filings-field { position: absolute; inset: 15vh 29vw 12vh 5vw; pointer-events: none; }
.filings-field b { position: absolute; width: 34px; height: 2px; border-radius: 999px; background: rgba(198,208,216,.55); transform: rotate(var(--filing-rot, 0deg)); transition: transform .22s ease-out; box-shadow: 0 0 8px rgba(214,168,79,.25); }
.filings-field b:nth-child(1){left:5%;top:12%}.filings-field b:nth-child(2){left:12%;top:30%}.filings-field b:nth-child(3){left:22%;top:19%}.filings-field b:nth-child(4){left:30%;top:45%}.filings-field b:nth-child(5){left:44%;top:25%}.filings-field b:nth-child(6){left:55%;top:54%}.filings-field b:nth-child(7){left:64%;top:33%}.filings-field b:nth-child(8){left:78%;top:61%}.filings-field b:nth-child(9){left:10%;top:73%}.filings-field b:nth-child(10){left:25%;top:84%}.filings-field b:nth-child(11){left:38%;top:69%}.filings-field b:nth-child(12){left:51%;top:78%}.filings-field b:nth-child(13){left:70%;top:82%}.filings-field b:nth-child(14){left:86%;top:19%}.filings-field b:nth-child(15){left:76%;top:11%}.filings-field b:nth-child(16){left:16%;top:54%}.filings-field b:nth-child(17){left:48%;top:10%}.filings-field b:nth-child(18){left:90%;top:72%}
.menu-fragment { position: absolute; right: 9vw; top: 18vh; width: 210px; font-family: "Space Mono", monospace; color: var(--brass); text-transform: uppercase; font-size: .74rem; letter-spacing: .12em; }
.menu-fragment strong { display: block; margin: .8rem 0; font-family: Unbounded, sans-serif; color: var(--mercury); font-size: 1.2rem; line-height: 1.1; }
.menu-fragment span { color: rgba(198,208,216,.55); }

.pour { background: radial-gradient(circle at 44% 46%, rgba(123,63,242,.2), transparent 28rem), linear-gradient(95deg, var(--event-horizon), var(--magnetite)); }
.pour-stage { position: absolute; left: 10vw; bottom: 14vh; width: 45vw; height: 62vh; }
.pour-object { position: absolute; left: 8%; top: 10%; width: 128px; height: 290px; border: 0; color: var(--event-horizon); background: transparent; cursor: pointer; transform: rotate(-22deg); font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
.shaker-top { display: block; width: 78px; height: 42px; margin: auto; border-radius: 12px 12px 4px 4px; background: linear-gradient(110deg, var(--mercury), var(--brass), var(--mercury)); }
.shaker-body { display: grid; place-items: center; width: 128px; height: 218px; margin-top: 4px; padding: 1rem; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); background: linear-gradient(115deg, var(--brass), var(--mercury) 44%, var(--ion)); font-size: .62rem; }
.levitation-ring { position: absolute; left: 34%; top: 42%; width: 300px; height: 92px; border: 2px solid rgba(214,168,79,.52); border-radius: 50%; transform: rotate(-9deg); box-shadow: 0 0 34px rgba(123,63,242,.2); }
.charged-coupe { position: absolute; left: 44%; top: 26%; width: 260px; height: 210px; animation: levitate 5.6s ease-in-out infinite reverse; }
.charged-coupe::before { content: ""; position: absolute; left: 28px; top: 42px; width: 210px; height: 78px; border: 2px solid var(--mercury); border-top-color: var(--brass); border-radius: 15px 15px 120px 120px; background: linear-gradient(180deg, rgba(184,255,106,.22), rgba(123,63,242,.1)); }
.charged-coupe::after { content: ""; position: absolute; left: 130px; top: 120px; width: 5px; height: 70px; background: var(--mercury); box-shadow: 0 0 8px var(--ion); }
.ice-cube { position: absolute; left: 103px; top: 55px; width: 34px; height: 34px; transform: rotate(18deg); background: rgba(198,208,216,.8); box-shadow: 16px 28px 0 rgba(123,63,242,.18), 44px 28px 0 rgba(74,18,39,.28), 0 0 24px var(--absinthe); }
.olive { position: absolute; left: 158px; top: 26px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, white, var(--absinthe) 28%, #456c24 72%); box-shadow: 0 0 16px var(--absinthe); transition: transform .9s cubic-bezier(.2,.9,.1,1); }
.olive.rise { transform: translateY(-54px) translateX(14px); }
.spark-field { position: absolute; inset: 0; pointer-events: none; }
.spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--absinthe); box-shadow: 0 0 13px var(--absinthe); animation: sparkOut .9s ease-out forwards; }
.pour-copy { position: absolute; right: 8vw; top: 21vh; margin: 0; }

.null-zone { background: linear-gradient(90deg, rgba(74,18,39,.9), rgba(5,6,10,.96) 46%, rgba(16,27,47,.8)); }
.velvet-curtain { position: absolute; top: 0; bottom: 0; width: 30vw; background: repeating-linear-gradient(90deg, rgba(74,18,39,.3) 0 18px, rgba(5,6,10,.35) 19px 32px), linear-gradient(180deg, var(--merlot), var(--event-horizon)); filter: saturate(1.3); opacity: .86; }
.curtain-left { left: 0; clip-path: polygon(0 0, 80% 0, 62% 100%, 0 100%); }
.curtain-right { right: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 42% 100%); }
.null-card { position: absolute; left: 12vw; top: 28vh; width: min(520px, 42vw); padding: 2.2rem; border-left: 3px solid var(--brass); background: rgba(5,6,10,.46); box-shadow: 0 0 80px rgba(74,18,39,.45); }
.chalkboard { position: absolute; right: 8vw; bottom: 20vh; width: 330px; padding: 1.4rem; transform: rotate(5deg); border: 1px solid rgba(198,208,216,.28); background: rgba(16,27,47,.42); font-family: "Space Mono", monospace; color: rgba(198,208,216,.62); }
.chalkboard span { display: block; margin: .8rem 0; }

.last { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at var(--axis-x) 47%, rgba(123,63,242,.2), transparent 11rem), linear-gradient(180deg, var(--magnetite), var(--event-horizon) 56%); }
.last-compass { position: absolute; top: 16vh; left: calc(var(--axis-x) - 74px); width: 148px; height: 148px; }
.last-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(214,168,79,.52); background: conic-gradient(from 0deg, transparent, rgba(214,168,79,.24), transparent 42%); }
.last-needle { position: absolute; left: 72px; top: 19px; width: 5px; height: 108px; border-radius: 999px; background: linear-gradient(var(--absinthe), var(--brass), var(--ion)); box-shadow: 0 0 22px var(--absinthe); }
.afterimage { width: min(620px, 72vw); transform: translateX(-7vw); }
.domain-afterimage { position: absolute; bottom: 11vh; left: 8vw; right: 8vw; font-family: Unbounded, sans-serif; font-size: clamp(2.8rem, 11vw, 12rem); font-weight: 900; letter-spacing: -.09em; color: rgba(198,208,216,.08); text-shadow: 0 0 36px rgba(123,63,242,.22); }

@keyframes polePulse { 0%,100% { filter: brightness(1); transform: scaleX(1); } 50% { filter: brightness(1.42); transform: scaleX(1.28); } }
@keyframes fieldPulse { to { stroke-dashoffset: -220; } }
@keyframes levitate { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes tremble { 0% { translate: -1px 0; rotate: -2deg; } 100% { translate: 1px 1px; rotate: 2deg; } }
@keyframes sparkOut { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.1); } }

@media (max-width: 800px) {
  :root { --axis-x: 68vw; }
  .wordmark { flex-direction: column; align-items: flex-start; gap: 0; font-size: clamp(2.4rem, 14vw, 5rem); }
  .orbital-copy, .tilted-plaque, .null-card, .pour-copy { width: 72vw; left: 7vw; right: auto; transform: rotate(-2deg); }
  .levitating-coupe { right: 6vw; transform: scale(.72); transform-origin: bottom right; }
  .bottle-rack, .menu-fragment { display: none; }
  .pour-stage { left: 2vw; width: 92vw; opacity: .8; }
  .compass-nav { transform: scale(.82); right: 8px; top: 8px; }
  h1, h2 { font-size: clamp(2rem, 10vw, 4.2rem); }
}