:root {
  --vault-black: #05070B;
  --oxygen-blue: #B9F3FF;
  --archival-silver: #C8CED8;
  --signal-violet: #766BFF;
  --unlost-amber: #FFCE6A;
  --error-snow: #313845;
  --chemical-red: #FF4E64;
  --display: "Instrument Serif", serif;
  --body: "Geist", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --mono-use-note: "sparingly checksum strings";
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--archival-silver);
  background:
    radial-gradient(circle at 10% 85%, rgba(118, 107, 255, 0.16), transparent 34vw),
    radial-gradient(circle at 82% 14%, rgba(185, 243, 255, 0.08), transparent 28vw),
    linear-gradient(135deg, #05070B 0%, #080D15 45%, #05070B 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

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

.vault-shell {
  position: relative;
  isolation: isolate;
  min-height: 500vh;
}

.grain-field,
.silent-void {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.grain-field {
  z-index: 20;
  opacity: 0.34;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(200, 206, 216, 0.16) 0 1px, transparent 1.3px),
    radial-gradient(circle at 73% 52%, rgba(185, 243, 255, 0.10) 0 1px, transparent 1.4px),
    radial-gradient(circle at 48% 84%, rgba(49, 56, 69, 0.6) 0 1px, transparent 1.2px);
  background-size: 37px 41px, 53px 47px, 23px 29px;
}

.silent-void {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(185, 243, 255, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(185, 243, 255, 0.025) 1px, transparent 1px);
  background-size: 9vw 9vw;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
}

.vault-chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 76px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 1fr);
  border-bottom: 1px solid rgba(185, 243, 255, 0.08);
}

.vault-chamber::before {
  content: "";
  position: absolute;
  inset: 2.5vw;
  border: 1px solid rgba(185, 243, 255, 0.12);
  clip-path: polygon(3% 0, 100% 0, 100% 91%, 96% 100%, 0 100%, 0 8%);
  pointer-events: none;
}

.vault-chamber::after {
  content: attr(data-state) " // sealed room";
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(18px, 3vw, 42px);
  color: rgba(200, 206, 216, 0.34);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.diagonal-recovery-path {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.path-rail {
  position: absolute;
  left: -18vw;
  top: 72vh;
  width: 140vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185, 243, 255, 0.18), rgba(118, 107, 255, 0.34), transparent);
  transform: rotate(-28deg);
  transform-origin: center;
}

.path-rail-b {
  top: calc(72vh + 34px);
  opacity: 0.55;
}

.path-glow {
  position: absolute;
  left: -10vw;
  top: 73vh;
  width: 20vw;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--oxygen-blue), var(--signal-violet), transparent);
  box-shadow: 0 0 22px rgba(118, 107, 255, 0.65), 0 0 36px rgba(185, 243, 255, 0.28);
  transform: rotate(-28deg) translateX(var(--progress-x, 0vw));
  opacity: 0.95;
}

.signal-artifact {
  position: absolute;
  left: 12vw;
  top: 66vh;
  width: clamp(86px, 11vw, 154px);
  aspect-ratio: 1.45 / 1;
  transform: translate3d(var(--artifact-x, 0px), var(--artifact-y, 0px), 0) rotate(-28deg);
  transition: filter 600ms ease;
  filter: blur(var(--artifact-blur, 5px)) saturate(var(--artifact-sat, 0.6));
}

.artifact-core,
.artifact-template,
.artifact-snow,
.checksum-halo {
  position: absolute;
  inset: 0;
}

.artifact-core {
  border: 1px solid rgba(185, 243, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(185, 243, 255, 0.11), rgba(118, 107, 255, 0.10)),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(200, 206, 216, 0.16) 13px 14px);
  clip-path: polygon(8% 0, 100% 0, 100% 82%, 90% 100%, 0 100%, 0 16%);
  box-shadow: inset 0 0 28px rgba(185, 243, 255, 0.18);
}

.artifact-template {
  inset: 10px;
  border: 1px dashed rgba(255, 206, 106, var(--template-alpha, 0));
  opacity: var(--template-alpha, 0);
}

.artifact-snow {
  opacity: var(--snow-alpha, 0.95);
  background-image: radial-gradient(circle, var(--error-snow) 0 1px, transparent 1.8px);
  background-size: 8px 8px;
  mix-blend-mode: screen;
}

.checksum-halo {
  inset: -14px;
  border: 1px solid rgba(118, 107, 255, 0.45);
  opacity: var(--halo-alpha, 0.2);
  transform: rotate(var(--halo-rotate, 9deg)) scale(var(--halo-scale, 1.18));
}

.halo-two {
  inset: -25px;
  border-color: rgba(185, 243, 255, 0.22);
  transform: rotate(calc(var(--halo-rotate, 9deg) * -1)) scale(calc(var(--halo-scale, 1.18) + 0.08));
}

.vault-index {
  position: fixed;
  z-index: 30;
  left: clamp(14px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(200, 206, 216, 0.48);
}

.index-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 320ms ease, transform 320ms ease;
}

.index-mark span {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(185, 243, 255, 0.38);
  transform: rotate(45deg);
  transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.index-mark b {
  color: rgba(185, 243, 255, 0.48);
  font-weight: 500;
}

.index-mark.is-active {
  color: var(--archival-silver);
  transform: translateX(5px);
}

.index-mark.is-active span {
  background: var(--unlost-amber);
  border-color: var(--unlost-amber);
  box-shadow: 0 0 14px rgba(255, 206, 106, 0.55);
}

.glass-plaque {
  position: relative;
  z-index: 12;
  max-width: 520px;
  padding: clamp(22px, 3vw, 38px);
  background: linear-gradient(135deg, rgba(185, 243, 255, 0.095), rgba(5, 7, 11, 0.72) 48%, rgba(118, 107, 255, 0.07));
  border: 1px solid rgba(185, 243, 255, 0.20);
  border-top-color: rgba(185, 243, 255, 0.42);
  backdrop-filter: blur(18px);
  clip-path: polygon(7% 0, 100% 0, 100% 86%, 92% 100%, 0 100%, 0 14%);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255,255,255,0.10);
  opacity: 0;
  transform: translateY(26px) rotate(-1deg);
  transition: opacity 850ms ease, transform 850ms ease;
}

.vault-chamber.is-visible .glass-plaque {
  opacity: 1;
  transform: translateY(0) rotate(-1deg);
}

.plaque-kicker,
.mono-tag,
.checksum-line,
.archive-slide p,
.proof-stamps,
.bit-ruler,
.original-seal {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.plaque-kicker {
  display: block;
  margin-bottom: 16px;
  color: var(--oxygen-blue);
  font-size: 11px;
}

h1,
h2,
.final-phrase {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.035em;
}

h1 {
  color: rgba(200, 206, 216, 0.78);
  font-size: clamp(76px, 13vw, 190px);
  font-style: italic;
  text-shadow: 0 0 44px rgba(185, 243, 255, 0.11);
}

h2 {
  color: #F1F6FB;
  font-size: clamp(38px, 5vw, 74px);
  line-height: 0.92;
}

p {
  color: rgba(200, 206, 216, 0.76);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.62;
}

.wordmark-glass {
  grid-column: 2 / 12;
  grid-row: 2 / 6;
  align-self: center;
  position: relative;
  z-index: 10;
  transform: rotate(-7deg) translateX(2vw);
  padding: 18px 3vw;
  border: 1px solid rgba(185, 243, 255, 0.12);
  background: linear-gradient(100deg, transparent, rgba(185, 243, 255, 0.035), transparent);
}

.mono-tag {
  margin: 0 0 4px;
  color: rgba(185, 243, 255, 0.58);
  font-size: 10px;
}

.waveform-field {
  position: absolute;
  left: 0;
  right: 0;
  top: 43%;
  height: 220px;
  opacity: 0.72;
}

.waveform-field svg { width: 100%; height: 100%; overflow: visible; }

.wave {
  fill: none;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.wave.ghost { stroke: rgba(49, 56, 69, 0.95); stroke-dasharray: 3 11; }
.wave.live {
  stroke: var(--oxygen-blue);
  stroke-dasharray: 1250;
  stroke-dashoffset: var(--wave-offset, 1040);
  filter: drop-shadow(0 0 10px rgba(185, 243, 255, 0.45));
}

.plaque-intake { grid-column: 7 / 12; grid-row: 6 / 10; }
.plaque-snow { grid-column: 2 / 7; grid-row: 2 / 7; }
.plaque-alignment { grid-column: 7 / 12; grid-row: 2 / 7; }
.plaque-proof { grid-column: 2 / 7; grid-row: 5 / 10; }
.plaque-return { grid-column: 7 / 12; grid-row: 2 / 7; }

.plaque-ruler {
  display: flex;
  gap: 18px;
  margin-top: 24px;
  height: 24px;
  align-items: end;
}

.plaque-ruler i {
  display: block;
  width: 1px;
  height: 100%;
  background: rgba(185, 243, 255, 0.32);
}

.plaque-ruler i:nth-child(even) { height: 45%; background: rgba(255, 206, 106, 0.45); }

.eroded-imprint {
  grid-column: 7 / 12;
  grid-row: 2 / 9;
  border: 1px solid rgba(49, 56, 69, 0.92);
  background:
    radial-gradient(circle at 44% 40%, rgba(200, 206, 216, 0.14), transparent 8%),
    radial-gradient(circle at 56% 55%, rgba(49, 56, 69, 0.86), transparent 18%),
    repeating-linear-gradient(130deg, transparent 0 12px, rgba(49, 56, 69, 0.58) 12px 13px);
  clip-path: polygon(16% 7%, 81% 0, 95% 48%, 72% 88%, 18% 100%, 4% 36%);
  filter: blur(0.5px);
  opacity: 0.8;
}

.snow-lattice {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.snow-lattice i {
  position: absolute;
  width: 1px;
  height: 34vh;
  top: calc(8vh + var(--i, 0) * 4vh);
  left: calc(18vw + var(--i, 0) * 6vw);
  background: linear-gradient(transparent, rgba(200, 206, 216, 0.23), transparent);
  transform: rotate(23deg);
  animation: snowDrift 7s ease-in-out infinite;
}

.snow-lattice i:nth-child(1) { --i: 0; } .snow-lattice i:nth-child(2) { --i: 1; }
.snow-lattice i:nth-child(3) { --i: 2; } .snow-lattice i:nth-child(4) { --i: 3; }
.snow-lattice i:nth-child(5) { --i: 4; } .snow-lattice i:nth-child(6) { --i: 5; }
.snow-lattice i:nth-child(7) { --i: 6; } .snow-lattice i:nth-child(8) { --i: 7; }
.snow-lattice i:nth-child(9) { --i: 8; } .snow-lattice i:nth-child(10) { --i: 9; }

.checksum-line {
  color: rgba(200, 206, 216, 0.48);
  font-size: 11px;
}

.checksum-line em { color: var(--chemical-red); font-style: normal; }

.red-splinters i {
  position: absolute;
  width: 38px;
  height: 2px;
  background: var(--chemical-red);
  box-shadow: 0 0 14px rgba(255, 78, 100, 0.55);
  transform: rotate(-28deg);
}

.red-splinters i:nth-child(1) { left: 70%; top: 24%; }
.red-splinters i:nth-child(2) { left: 54%; top: 62%; width: 18px; }
.red-splinters i:nth-child(3) { left: 83%; top: 72%; width: 24px; }
.red-splinters i:nth-child(4) { left: 31%; top: 34%; width: 15px; }

.spectral-curtain {
  grid-column: 2 / 8;
  grid-row: 2 / 10;
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.75vw, 13px);
  transform: skewY(-8deg);
  opacity: 0.82;
}

.spectral-curtain i {
  display: block;
  width: 2px;
  height: calc(18vh + (var(--h, 1) * 2.2vh));
  background: linear-gradient(180deg, transparent, rgba(185, 243, 255, 0.72), rgba(118, 107, 255, 0.55), transparent);
  box-shadow: 0 0 12px rgba(185, 243, 255, 0.22);
  transform: scaleY(var(--bar-scale, 0.7));
  transition: transform 600ms ease;
}

.spectral-curtain i:nth-child(3n) { --h: 7; }
.spectral-curtain i:nth-child(4n) { --h: 13; }
.spectral-curtain i:nth-child(5n) { --h: 4; }
.spectral-curtain i:nth-child(7n) { --h: 10; }

.alignment-rig {
  grid-column: 3 / 10;
  grid-row: 3 / 9;
  position: relative;
  z-index: 2;
}

.calibration-window {
  position: absolute;
  inset: 18% 22%;
  border: 1px solid rgba(185, 243, 255, 0.22);
  background: linear-gradient(135deg, rgba(185, 243, 255, 0.05), transparent);
  clip-path: polygon(5% 0, 100% 0, 100% 90%, 94% 100%, 0 100%, 0 10%);
}

.tick-ring {
  position: absolute;
  inset: 9% 28%;
  border: 1px solid rgba(118, 107, 255, 0.44);
  transform: rotate(var(--rig-rotate, 12deg));
  transition: transform 800ms ease;
}

.ring-b {
  inset: 18% 18%;
  border-color: rgba(185, 243, 255, 0.22);
  transform: rotate(calc(var(--rig-rotate, 12deg) * -1));
}

.bit-ruler {
  position: absolute;
  left: 14%;
  bottom: 13%;
  display: flex;
  gap: 22px;
  color: rgba(185, 243, 255, 0.6);
  font-size: 10px;
}

.archive-slide {
  grid-column: 6 / 12;
  grid-row: 2 / 8;
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(54vw, 650px);
  aspect-ratio: 1.7 / 1;
  border: 1px solid rgba(185, 243, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(185, 243, 255, 0.12), rgba(5, 7, 11, 0.42)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(200,206,216,0.055) 22px 23px);
  clip-path: polygon(6% 0, 100% 0, 100% 86%, 93% 100%, 0 100%, 0 14%);
  box-shadow: inset 0 0 55px rgba(185, 243, 255, 0.08), 0 0 90px rgba(118, 107, 255, 0.12);
}

.slide-frost {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(200, 206, 216, 0.12);
  background-image: radial-gradient(circle, rgba(200, 206, 216, 0.20) 0 1px, transparent 1.6px);
  background-size: 15px 15px;
  opacity: 0.45;
}

.proof-halo {
  inset: 24% 31%;
  opacity: var(--proof-alpha, 0.35);
  border-color: var(--unlost-amber);
  box-shadow: 0 0 26px rgba(255, 206, 106, 0.22);
}

.archive-slide p {
  position: absolute;
  left: 7%;
  bottom: 9%;
  margin: 0;
  color: rgba(200, 206, 216, 0.54);
  font-size: 10px;
}

.archive-slide strong {
  position: absolute;
  right: 8%;
  top: 12%;
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 400;
  color: rgba(255, 206, 106, 0.84);
}

.proof-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  font-size: 10px;
}

.proof-stamps span {
  border: 1px solid rgba(255, 206, 106, 0.25);
  color: rgba(255, 206, 106, 0.78);
  padding: 7px 9px;
}

.return-frame {
  grid-column: 2 / 7;
  grid-row: 2 / 9;
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(58vh, 42vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 206, 106, 0.62);
  box-shadow: 0 0 70px rgba(255, 206, 106, 0.12), inset 0 0 35px rgba(255, 206, 106, 0.06);
  transform: rotate(var(--return-rotate, -3deg));
  transition: transform 900ms ease, box-shadow 900ms ease;
}

.perfect-core {
  position: absolute;
  inset: 18%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 206, 106, 0.34), transparent 38%),
    linear-gradient(135deg, rgba(185, 243, 255, 0.16), rgba(118, 107, 255, 0.10));
  border: 1px solid rgba(185, 243, 255, 0.42);
  clip-path: polygon(12% 0, 88% 0, 100% 24%, 100% 76%, 88% 100%, 12% 100%, 0 76%, 0 24%);
}

.frame-rulers {
  position: absolute;
  background: repeating-linear-gradient(90deg, rgba(200, 206, 216, 0.35) 0 1px, transparent 1px 18px);
}

.frame-rulers.horizontal { left: 0; right: 0; top: 50%; height: 1px; }
.frame-rulers.vertical { top: 0; bottom: 0; left: 50%; width: 1px; transform: rotate(90deg); transform-origin: center; }

.original-seal {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%) scale(var(--seal-scale, 0.8));
  padding: 12px 16px;
  border: 1px solid var(--unlost-amber);
  color: var(--vault-black);
  background: var(--unlost-amber);
  box-shadow: 0 0 32px rgba(255, 206, 106, 0.48);
  font-size: 10px;
  opacity: var(--seal-alpha, 0);
  white-space: nowrap;
  transition: opacity 700ms ease, transform 700ms ease;
}

.final-phrase {
  grid-column: 5 / 12;
  grid-row: 8 / 10;
  align-self: end;
  justify-self: end;
  color: rgba(255, 206, 106, var(--final-alpha, 0));
  font-size: clamp(62px, 11vw, 170px);
  font-style: italic;
  line-height: 0.8;
  transition: color 900ms ease;
}

@keyframes snowDrift {
  0%, 100% { transform: translateY(-10px) rotate(23deg); opacity: 0.22; }
  50% { transform: translateY(20px) rotate(23deg); opacity: 0.55; }
}

@media (max-width: 820px) {
  .vault-index { display: none; }
  .vault-chamber { grid-template-columns: 1fr; grid-template-rows: repeat(10, 1fr); padding: 26px; }
  .wordmark-glass, .glass-plaque, .plaque-intake, .plaque-snow, .plaque-alignment, .plaque-proof, .plaque-return, .archive-slide, .return-frame, .spectral-curtain, .alignment-rig, .eroded-imprint, .final-phrase {
    grid-column: 1;
  }
  .glass-plaque { max-width: none; }
  .plaque-intake, .plaque-snow, .plaque-alignment, .plaque-proof, .plaque-return { grid-row: 6 / 10; }
  .wordmark-glass { grid-row: 2 / 5; transform: rotate(-4deg); }
  .archive-slide, .return-frame, .spectral-curtain, .alignment-rig, .eroded-imprint { grid-row: 2 / 6; width: 84vw; }
  .signal-artifact { width: 96px; }
}