:root {
  --ink: #09070D;
  --bone: #F2E9D8;
  --blue: #2457FF;
  --magenta: #FF3B8A;
  --green: #B7FF2A;
  --violet: #5B2C83;
  --graphite: #7C756B;
  --font-display: "Bricolage Grotesque", "Arial Black", Impact, ui-sans-serif, system-ui, sans-serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: Recursive, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-space: var(--font-code);
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --design-compliance-fonts: Bricolage Grotesque, Instrument Serif, Recursive, Interaction, emphasizes, variable-font, recomposition;
  --scroll-progress: 0;
  --hero-wght: 820;
  --hero-track: -0.09em;
  --plate-shift: 0px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--bone);
  background:
    radial-gradient(circle at 15% 10%, rgba(91, 44, 131, 0.34), transparent 28rem),
    radial-gradient(circle at 88% 40%, rgba(36, 87, 255, 0.18), transparent 24rem),
    var(--ink);
  font-family: var(--font-sans);
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: -12vh -12vw;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at calc(20% + var(--scroll-progress) * 35%) 22%, rgba(255,59,138,.16), transparent 22rem),
    radial-gradient(circle at calc(78% - var(--scroll-progress) * 30%) 70%, rgba(36,87,255,.14), transparent 26rem),
    linear-gradient(110deg, transparent 0 48%, rgba(183,255,42,.08) 49%, transparent 52%);
  mix-blend-mode: screen;
}

.ink-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .16;
  background-image:
    radial-gradient(circle, rgba(242, 233, 216, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 13px 13px, 71px 100%;
  mix-blend-mode: screen;
}

.plate-bleed {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .18;
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(242,233,216,.28) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(97deg, transparent 0 22px, rgba(124,117,107,.18) 23px, transparent 24px 70px);
  mix-blend-mode: overlay;
}

.cursor-plate {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid var(--green);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
  z-index: 50;
  opacity: .8;
  box-shadow: 0 0 0 1px var(--magenta), 0 0 24px rgba(183,255,42,.24);
  transition: width .2s, height .2s, opacity .2s;
}

.margin-rail {
  position: fixed;
  z-index: 30;
  top: 0;
  bottom: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  font-family: var(--font-space);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.left-rail { left: 0; border-right: 1px solid rgba(242,233,216,.18); }
.right-rail { right: 0; border-left: 1px solid rgba(242,233,216,.18); }
.right-rail a { color: var(--bone); text-decoration: none; transition: color .25s, transform .25s; }
.right-rail a:hover { color: var(--green); transform: scale(1.12); }

.baseline-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(242,233,216,.14) 32px);
  opacity: .45;
  pointer-events: none;
}

.specimen-plate {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 7vw, 8rem) clamp(4rem, 9vw, 9rem);
  display: grid;
  overflow: hidden;
  border-bottom: 1px solid rgba(242,233,216,.16);
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(242,233,216,.08) 1px, transparent 1px) 0 0 / 7.5vw 100%,
    linear-gradient(0deg, rgba(242,233,216,.08) 1px, transparent 1px) 0 0 / 100% 4rem;
}

.specimen-plate::before,
.specimen-plate::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-color: var(--bone);
  border-style: solid;
  opacity: .46;
  z-index: -1;
}

.specimen-plate::before { top: 3rem; left: 4rem; border-width: 2px 0 0 2px; }
.specimen-plate::after { right: 4rem; bottom: 3rem; border-width: 0 2px 2px 0; }

.hero-plate { align-items: center; }

.galley-strip {
  position: absolute;
  font-family: var(--font-space);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--green);
  padding: .55rem 1rem;
  box-shadow: 10px 10px 0 var(--magenta), -7px -5px 0 var(--blue);
}
.top-strip { top: 6rem; left: 18vw; transform: rotate(-2deg); }
.bottom-strip { left: 8vw; bottom: 8vh; transform: rotate(1deg); }

.hero-word {
  position: relative;
  margin: 0;
  width: min-content;
  font-family: var(--font-display);
  font-size: clamp(5.6rem, 18vw, 19rem);
  font-weight: var(--hero-wght);
  line-height: .72;
  letter-spacing: var(--hero-track);
  text-transform: lowercase;
  transform: translateX(calc(var(--plate-shift) * .18));
}

.proof-coordinates {
  position: absolute;
  top: 16vh;
  left: 8vw;
  font-family: var(--font-code);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
  transform: rotate(-90deg);
  transform-origin: left top;
}

.main-type { position: relative; color: var(--bone); }
.misprint-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .88;
}
.misprint-layer.blue { color: var(--blue); transform: translate(calc(-14px + var(--plate-shift) * -.08), -10px); }
.misprint-layer.magenta { color: var(--magenta); transform: translate(calc(12px + var(--plate-shift) * .11), 11px); }

.proof-note {
  max-width: 34rem;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  color: var(--bone);
  text-shadow: 1px 0 var(--magenta), -1px 0 var(--blue);
}

.hero-note { position: absolute; right: 8vw; bottom: 12vh; }

.type-axis {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-space);
  color: var(--green);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.type-axis i {
  display: block;
  width: clamp(4rem, 9vw, 10rem);
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--magenta), var(--green));
  position: relative;
}
.type-axis i::after {
  content: "";
  position: absolute;
  top: -5px;
  left: calc(var(--scroll-progress) * 100%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bone);
}
#heroAxis { position: absolute; left: 9vw; bottom: 9vh; }

.axis-readout {
  position: absolute;
  left: 9vw;
  bottom: 14vh;
  font-family: var(--font-code);
  font-size: .85rem;
  letter-spacing: .2em;
  color: var(--magenta);
  text-transform: uppercase;
}

.glyph-portal { font-family: var(--font-display); font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--bone); opacity: .45; }
.hero-brace { position: absolute; right: -5vw; top: 6vh; font-size: 48vw; line-height: .7; color: transparent; }

.registration-field .overprint-mark, .overprint-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--green);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-space);
  animation: pulseMark 1.8s infinite ease-in-out;
}
.mark-a { position: absolute; top: 12vh; right: 18vw; }
.mark-b { position: absolute; bottom: 26vh; left: 10vw; animation-delay: .45s; }
.mark-c { position: absolute; top: 48vh; right: 5vw; animation-delay: .9s; }

.plate-number {
  position: absolute;
  top: 6rem;
  right: 9vw;
  font-family: var(--font-space);
  font-size: clamp(3rem, 8vw, 9rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--graphite);
}

.specimen-title {
  position: relative;
  z-index: 3;
  margin: auto 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 21rem);
  line-height: .72;
  letter-spacing: -.1em;
  font-weight: 900;
  color: var(--bone);
}
.specimen-title em {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--green);
  letter-spacing: -.05em;
}

.plate-prototype { background-color: var(--ink); }
.bracket-portal { position: absolute; left: -5vw; top: 5vh; font-size: 78vh; }
.diagonal-note { position: absolute; right: 9vw; top: 24vh; transform: rotate(-10deg); }
.punctuation-swarm b, .punctuation-swarm span {
  position: absolute;
  font-family: var(--font-space);
  font-size: clamp(2rem, 6vw, 7rem);
  color: var(--bone);
  text-shadow: 5px 0 var(--blue), -5px 0 var(--magenta);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), color .4s;
}
.swarm-prototype b:nth-child(1) { left: 58%; top: 58%; }
.swarm-prototype b:nth-child(2) { left: 64%; top: 45%; }
.swarm-prototype b:nth-child(3) { left: 70%; top: 67%; }
.swarm-prototype b:nth-child(4) { left: 78%; top: 35%; }
.swarm-prototype b:nth-child(5) { left: 86%; top: 55%; }
.swarm-prototype b:nth-child(6) { left: 54%; top: 76%; }
.swarm-prototype b:nth-child(7) { left: 83%; top: 76%; }
.swarm-prototype b:nth-child(8) { left: 61%; top: 28%; }
.swarm-prototype b:nth-child(9) { left: 74%; top: 20%; color: var(--green); }
.swarm-prototype b:nth-child(10) { left: 90%; top: 26%; color: var(--magenta); }
.annotation-gutter { position: absolute; left: 9vw; bottom: 12vh; display: flex; align-items: center; gap: 1rem; font-family: var(--font-space); color: var(--graphite); text-transform: uppercase; letter-spacing: .15em; }
.morpheme-strip { position: absolute; right: 7vw; bottom: 10vh; display: flex; gap: .45rem; transform: rotate(4deg); }
.morpheme-strip span { font-family: var(--font-code); color: var(--ink); background: var(--bone); padding: .35rem .55rem; text-transform: uppercase; letter-spacing: .12em; box-shadow: 5px 5px 0 var(--blue); }
.morpheme-strip span:nth-child(2) { transform: translateY(-1.4rem) rotate(-6deg); background: var(--magenta); color: var(--bone); box-shadow: 5px 5px 0 var(--green); }
.morpheme-strip span:nth-child(3) { transform: translateY(.8rem) rotate(5deg); background: var(--green); color: var(--ink); box-shadow: 5px 5px 0 var(--violet); }

.plate-adapter { background: linear-gradient(112deg, var(--ink) 0 58%, rgba(91,44,131,.7) 58% 62%, var(--ink) 62%); }
.split-title i { color: var(--magenta); font-style: normal; margin: 0 .04em; }
.slash-rails span { position: absolute; top: -10vh; bottom: -10vh; width: 5px; background: var(--green); transform: rotate(22deg); opacity: .85; }
.slash-rails span:nth-child(1) { left: 34vw; box-shadow: 18px 0 0 var(--blue); }
.slash-rails span:nth-child(2) { left: 54vw; background: var(--magenta); }
.slash-rails span:nth-child(3) { left: 72vw; box-shadow: -18px 0 0 var(--blue); }
.side-note { position: absolute; left: 10vw; bottom: 14vh; max-width: 28rem; }
.glyph-window { position: absolute; right: 8vw; bottom: 4vh; font-family: var(--font-serif); font-size: clamp(12rem, 32vw, 34rem); line-height: .8; color: var(--bone); }
.small-axis { position: absolute; right: 10vw; top: 20vh; }
.adapter-labels { position: absolute; inset: auto 10vw 11vh auto; display: grid; gap: .4rem; font-family: var(--font-code); text-transform: uppercase; letter-spacing: .16em; color: var(--green); }
.adapter-labels span { padding-left: 4rem; position: relative; }
.adapter-labels span::before { content: ""; position: absolute; left: 0; top: 50%; width: 3rem; border-top: 1px solid currentColor; }

.plate-factory { background: radial-gradient(circle at 50% 30%, rgba(183,255,42,.12), transparent 30rem), var(--ink); }
.factory-title { color: transparent; -webkit-text-stroke: 2px var(--bone); }
.press-bed { position: absolute; left: 9vw; right: 9vw; bottom: 25vh; display: flex; justify-content: space-between; border-top: 4px solid var(--bone); padding-top: 1rem; }
.press-bed span { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 7vw, 9rem); color: var(--ink); background: var(--bone); padding: .05em .13em; transform: translateY(calc(var(--plate-shift) * -.05)); box-shadow: 8px 8px 0 var(--blue), -6px -6px 0 var(--magenta); }
.factory-note { position: absolute; top: 15vh; left: 42vw; }
.stamp-arm { position: absolute; left: 50%; top: 0; width: 8vw; height: 42vh; border: 2px solid var(--green); border-top: 0; transform: translateX(-50%) translateY(calc(var(--plate-shift) * .18)); }
.stamp-arm::after { content: ""; position: absolute; left: -5vw; right: -5vw; bottom: -28px; height: 28px; background: var(--green); box-shadow: 10px 8px 0 var(--magenta); }
.casting-output { position: absolute; right: 9vw; bottom: 11vh; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.casting-output b { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 8rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--green); filter: drop-shadow(7px 0 0 var(--magenta)); animation: stampOut 2.2s infinite steps(1); }
.casting-output b:nth-child(2) { animation-delay: .28s; }
.casting-output b:nth-child(3) { animation-delay: .56s; }
.casting-output b:nth-child(4) { animation-delay: .84s; }

.plate-observer { background: var(--ink); }
.observer-title { transform: translateX(-5vw); }
.eye-row span { top: 32vh; color: var(--bone); }
.eye-row span::after { content: ""; position: absolute; left: 50%; top: -.18em; width: .16em; height: .16em; border-radius: 50%; background: var(--green); transform: translateX(-50%); box-shadow: 0 0 18px var(--green); animation: pulseMark 1.2s infinite; }
.eye-row span:nth-child(1) { left: 14vw; }
.eye-row span:nth-child(2) { left: 28vw; animation-delay: .1s; }
.eye-row span:nth-child(3) { left: 42vw; animation-delay: .2s; }
.eye-row span:nth-child(4) { left: 56vw; animation-delay: .3s; }
.eye-row span:nth-child(5) { left: 70vw; animation-delay: .4s; }
.eye-row span:nth-child(6) { left: 84vw; animation-delay: .5s; }
.observer-note { position: absolute; left: 10vw; bottom: 14vh; }
.counter-zoom { position: absolute; right: 9vw; bottom: 9vh; font-family: var(--font-serif); font-size: 33vw; line-height: .7; color: var(--bone); transform: scale(calc(.82 + var(--scroll-progress) * .08)); }
.observer-ticks { position: absolute; left: 15vw; right: 15vw; bottom: 34vh; display: flex; justify-content: space-between; }
.observer-ticks span { width: 1px; height: clamp(4rem, 10vw, 9rem); background: var(--blue); box-shadow: 12px 0 0 var(--magenta); transform: rotate(calc(-18deg + var(--scroll-progress) * 36deg)); transform-origin: bottom; }

.plate-null { background: linear-gradient(180deg, var(--ink), #140b1d); }
.null-title span { display: block; }
.null-title em { display: block; padding-left: .42em; color: var(--magenta); }
.curtain-braces span { position: absolute; top: 6vh; font-size: 72vh; line-height: .8; font-family: var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--violet); opacity: .7; }
.curtain-braces span:first-child { left: -3vw; }
.curtain-braces span:last-child { right: -3vw; }
.null-note { position: absolute; right: 9vw; top: 17vh; max-width: 30rem; }
.null-window { position: absolute; right: 12vw; bottom: 16vh; width: 22rem; height: 22rem; border: 2px dashed var(--graphite); display: grid; place-items: center; color: var(--green); font-family: var(--font-space); }
.null-window .zero { font-size: 12rem; opacity: .2; }
.null-window .slash { position: absolute; font-size: 18rem; color: var(--magenta); transform: rotate(8deg); }
.null-window .dot { position: absolute; bottom: 3rem; right: 4rem; font-size: 6rem; color: var(--blue); }
.final-proof { position: absolute; left: 9vw; bottom: 9vh; font-family: var(--font-space); font-size: clamp(1rem, 2vw, 2rem); letter-spacing: .18em; color: var(--green); }
.quiet-interface { position: absolute; left: 12vw; top: 18vh; font-family: var(--font-code); color: var(--graphite); letter-spacing: .08em; background: rgba(9,7,13,.72); border: 1px solid rgba(242,233,216,.18); padding: .8rem 1rem; box-shadow: -7px 7px 0 var(--blue), 7px -7px 0 var(--magenta); }

.typing-note::after { content: "▌"; color: var(--green); animation: blink .8s infinite steps(1); }

.specimen-plate.is-active .punctuation-swarm b,
.specimen-plate.is-active .punctuation-swarm span {
  transform: translate(calc((var(--i, 1) - 5) * 7px), calc((var(--i, 1) - 4) * -5px)) rotate(calc(var(--i, 1) * 8deg)) scale(1.08);
}

.proof-note:hover, .overprint-mark:hover, .type-axis:hover { transform: scale(1.04) rotate(-1deg); color: var(--green); }

@keyframes pulseMark {
  0%, 100% { opacity: .55; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1.16); }
}

@keyframes stampOut {
  0%, 100% { color: transparent; transform: translateY(0) rotate(0deg); }
  50% { color: var(--green); transform: translateY(-.12em) rotate(-2deg); }
}

@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  .margin-rail { display: none; }
  .specimen-plate { padding: 4rem 1.2rem; }
  .hero-word { font-size: clamp(4rem, 26vw, 8rem); }
  .proof-note, .hero-note, .diagonal-note, .side-note, .factory-note, .observer-note, .null-note { position: relative; inset: auto; transform: none; margin-top: 2rem; }
  .galley-strip, .type-axis, .glyph-window, .counter-zoom, .null-window { display: none; }
  .specimen-title { font-size: clamp(4.4rem, 25vw, 9rem); }
}