:root {
  /* Typography compliance: Space Grotesk for the domain wordmark; IBM Plex Serif for field notes. */
  --inspection-black: #080B10;
  --blueprint-cyan: #55D6F4;
  --acetate-frost: #DCE8EA;
  --grease-orange: #FF6A2A;
  --foam-yellow: #F1E36B;
  --bruised-violet: #5C4B8A;
  --paper-gray: #A9B0B7;
  --display: "Space Grotesk", sans-serif;
  --serif: "IBM Plex Serif", serif;
  --tech: "Recursive", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #080B10;
  color: #DCE8EA;
  font-family: var(--serif);
  overflow-x: hidden;
}

.blueprint-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 18%, rgba(85, 214, 244, .14), transparent 28vw),
    radial-gradient(circle at 22% 76%, rgba(92, 75, 138, .24), transparent 34vw),
    linear-gradient(rgba(85, 214, 244, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 214, 244, .04) 1px, transparent 1px),
    #080B10;
  background-size: auto, auto, 56px 56px, 56px 56px, auto;
}

.blueprint-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, transparent 0 18px, rgba(220, 232, 234, .025) 19px 20px);
  mix-blend-mode: screen;
}

.report-spine {
  position: fixed;
  z-index: 20;
  top: 0;
  bottom: 0;
  left: 18px;
  width: 72px;
  background: linear-gradient(90deg, rgba(220, 232, 234, .22), rgba(220, 232, 234, .05) 38%, rgba(85, 214, 244, .13));
  border-left: 1px solid rgba(220, 232, 234, .24);
  border-right: 1px solid rgba(85, 214, 244, .42);
  transform-origin: left center;
  transform: perspective(680px) rotateY(var(--fold, -10deg));
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.spine-fold {
  position: absolute;
  inset: 0 22px 0 auto;
  width: 2px;
  background: #55D6F4;
  box-shadow: 0 0 22px #55D6F4;
  opacity: .7;
}

.spine-label {
  position: absolute;
  left: 13px;
  bottom: 30px;
  writing-mode: vertical-rl;
  font: 700 11px/1 var(--tech);
  letter-spacing: .22em;
  color: #A9B0B7;
}

.chapter-swatches {
  position: fixed;
  z-index: 25;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
}

.swatch {
  width: 126px;
  height: 44px;
  padding: 7px 10px;
  color: #A9B0B7;
  text-decoration: none;
  font-family: var(--tech);
  border: 1px solid rgba(220, 232, 234, .22);
  background: rgba(220, 232, 234, .07);
  transform: skew(-7deg);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.swatch span { color: #55D6F4; font-size: 10px; display: block; }
.swatch b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.swatch.is-active { background: rgba(255, 106, 42, .18); color: #DCE8EA; border-color: #FF6A2A; transform: skew(-7deg) translateX(-16px); }

.report-plate {
  position: relative;
  min-height: 100vh;
  padding: 7vh 12vw 7vh 12vw;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(85, 214, 244, .22);
}

.report-plate::before {
  content: "";
  position: absolute;
  inset: 5vh 7vw;
  z-index: -1;
  border: 1px dashed rgba(85, 214, 244, .34);
  transform: rotate(-1.8deg);
  background: linear-gradient(140deg, rgba(220, 232, 234, .035), transparent 54%);
}

.plate-index {
  position: absolute;
  top: 28px;
  left: 126px;
  color: #A9B0B7;
  font: 700 11px/1 var(--tech);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.specimen-table, .exploded-object, .stress-specimen, .ghost-stack, .final-vellum {
  position: absolute;
  width: min(72vw, 980px);
  height: min(72vh, 720px);
  left: 8vw;
  top: 16vh;
}

.prototype-shell {
  position: absolute;
  width: 430px;
  height: 270px;
  border: 2px solid rgba(220, 232, 234, .58);
  border-radius: 44px 92px 38px 78px;
  background: linear-gradient(135deg, rgba(220, 232, 234, .2), rgba(85, 214, 244, .08) 42%, rgba(8, 11, 16, .5));
  box-shadow: inset 0 0 44px rgba(85, 214, 244, .22), 0 26px 80px rgba(0, 0, 0, .55);
}

.intake-shell { left: 15vw; top: 8vh; animation: prototypeDrift 12s ease-in-out infinite; }
.shell-core { position: absolute; width: 128px; height: 92px; right: 74px; top: 88px; background: rgba(241, 227, 107, .78); border-radius: 28px 18px 30px 20px; filter: drop-shadow(0 0 18px rgba(241, 227, 107, .28)); }
.shell-face { position: absolute; width: 170px; height: 126px; left: 56px; top: 58px; border: 1px solid #55D6F4; background: rgba(85, 214, 244, .08); transform: rotate(-8deg); }
.shell-port { position: absolute; width: 52px; height: 52px; right: 30px; bottom: 34px; border: 2px solid #5C4B8A; border-radius: 50%; }
.shell-screw { position: absolute; width: 13px; height: 13px; border: 1px solid #A9B0B7; border-radius: 50%; }
.screw-a { left: 36px; top: 34px; } .screw-b { right: 42px; top: 32px; }

.loupe-window {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 31%;
  width: 218px;
  height: 218px;
  cursor: grab;
  transform: translate(var(--lx, 0px), var(--ly, 0px));
  touch-action: none;
}

.loupe-window.is-dragging { cursor: grabbing; }
.loupe-glass { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #DCE8EA; background: radial-gradient(circle at 48% 48%, rgba(85, 214, 244, .25), rgba(92, 75, 138, .2) 52%, rgba(8, 11, 16, .4)); box-shadow: 0 0 35px rgba(85, 214, 244, .45), inset 0 0 42px rgba(220, 232, 234, .16); }
.loupe-handle { position: absolute; width: 122px; height: 18px; right: -78px; bottom: 18px; background: #A9B0B7; transform: rotate(38deg); border-radius: 12px; }
.xray-grain { position: absolute; inset: 24px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(85, 214, 244, .35) 0 1px, transparent 2px 6px); opacity: .5; }

.acetate-note {
  position: absolute;
  z-index: 8;
  width: min(520px, 42vw);
  padding: 28px 32px;
  color: #080B10;
  background: rgba(220, 232, 234, .78);
  border: 1px solid rgba(220, 232, 234, .9);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .36), inset 0 0 30px rgba(85, 214, 244, .12);
  backdrop-filter: blur(10px);
}

.title-card { left: 13vw; bottom: 11vh; transform: rotate(-2deg); width: min(680px, 54vw); }
.serial-id { margin: 0 0 13px; font: 800 11px/1.5 var(--tech); letter-spacing: .18em; color: #5C4B8A; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); letter-spacing: -.055em; }
h1 { font-size: clamp(56px, 8vw, 132px); line-height: .83; color: #080B10; text-shadow: 2px 2px 0 rgba(255, 106, 42, .45); }
h2 { font-size: clamp(44px, 6vw, 94px); line-height: .88; color: #080B10; }
.report-prompt { margin: 22px 0 0; font: 700 18px var(--tech); color: #FF6A2A; text-transform: uppercase; letter-spacing: .08em; }
.acetate-note p:not(.serial-id):not(.report-prompt) { font-size: clamp(17px, 1.55vw, 23px); line-height: 1.45; }

.revision-stamp {
  position: absolute;
  z-index: 9;
  right: 17vw;
  bottom: 19vh;
  padding: 14px 22px 11px;
  border: 3px solid #FF6A2A;
  color: #FF6A2A;
  background: transparent;
  font: 800 23px/1 var(--tech);
  letter-spacing: .08em;
  transform: rotate(-13deg);
  text-transform: uppercase;
  mix-blend-mode: screen;
  animation: stampThump 2.9s cubic-bezier(.2, 1.6, .3, 1) infinite;
}
.revision-stamp:hover { filter: blur(.35px); text-shadow: 7px 1px 0 rgba(255, 106, 42, .28); }
.stamp-orange { top: 17vh; right: 20vw; bottom: auto; }
.stamp-violet { border-color: #5C4B8A; color: #DCE8EA; background: rgba(92, 75, 138, .22); }
.stamp-yellow { border-color: #F1E36B; color: #F1E36B; }

.measurement-lines { position: absolute; inset: 9vh 12vw auto auto; width: 46vw; max-width: 700px; height: 48vh; fill: none; stroke: #55D6F4; stroke-width: 2; stroke-dasharray: 760; stroke-dashoffset: 760; opacity: .8; }
.report-plate.is-current .measurement-lines path { animation: pathDraw 2.4s ease forwards; }

.exploded-object { left: 6vw; top: 12vh; transform: rotate(-7deg); }
.exploded-layer { position: absolute; left: 18%; top: 28%; width: 420px; height: 235px; border-radius: 35px 84px 44px 60px; border: 2px solid #DCE8EA; background: rgba(220, 232, 234, .08); transition: transform .8s ease; }
.layer-back { transform: translate(-145px, -92px); border-style: dashed; opacity: .42; }
.layer-violet { transform: translate(-64px, -42px); border-color: #5C4B8A; background: rgba(92, 75, 138, .25); }
.layer-core { transform: translate(22px, 8px); width: 230px; height: 130px; background: rgba(241, 227, 107, .42); border-color: #F1E36B; }
.layer-face { transform: translate(116px, 62px); border-color: #55D6F4; }
.layer-rim { transform: translate(210px, 118px); border-color: #FF6A2A; border-style: dotted; }
.report-plate.is-current .exploded-layer { animation: elasticSettle 1.1s cubic-bezier(.2, 1.4, .34, 1) both; }

.note-right { right: 12vw; top: 24vh; transform: rotate(2deg); }
.note-left { left: 12vw; top: 17vh; transform: rotate(-2.5deg); }
.wide-note { width: min(630px, 48vw); }
.ruler-strip { position: absolute; display: flex; justify-content: space-between; width: 520px; height: 32px; padding: 6px 14px; color: #A9B0B7; border-top: 1px solid #A9B0B7; font: 700 11px var(--tech); }
.diagonal-ruler { left: 17vw; bottom: 20vh; transform: rotate(-28deg); }
.barcode-fragment { position: absolute; left: 61vw; bottom: 14vh; font: 800 38px var(--tech); color: #DCE8EA; opacity: .38; letter-spacing: -.15em; transform: rotate(88deg); }

.stress-specimen { left: 28vw; top: 21vh; }
.cracked-shell { transform: rotate(13deg); }
.stress-line { position: absolute; background: #FF6A2A; height: 3px; transform-origin: left; box-shadow: 0 0 18px rgba(255, 106, 42, .65); }
.line-one { width: 160px; left: 185px; top: 86px; transform: rotate(38deg); }
.line-two { width: 112px; left: 225px; top: 144px; transform: rotate(-26deg); }
.line-three { width: 74px; left: 160px; top: 188px; transform: rotate(57deg); }
.wax-circle { position: absolute; left: -20px; top: -34px; width: 480px; height: 340px; border: 4px solid rgba(255, 106, 42, .72); border-radius: 50%; transform: rotate(-17deg); }
.orange-arrow { position: absolute; color: #FF6A2A; font: 800 13px var(--tech); text-transform: uppercase; letter-spacing: .08em; }
.orange-arrow::before { content: ""; display: inline-block; width: 70px; height: 2px; margin-right: 8px; vertical-align: middle; background: #FF6A2A; box-shadow: 62px -4px 0 -1px #FF6A2A; }
.arrow-one { left: 330px; top: 20px; transform: rotate(-10deg); }
.arrow-two { left: 280px; bottom: 120px; transform: rotate(18deg); }

.ghost-stack { left: 10vw; top: 14vh; }
.ghost-revision { position: absolute; width: 520px; height: 300px; border: 2px dashed #55D6F4; border-radius: 80px 28px 92px 38px; opacity: .2; }
.ghost-one { left: 30px; top: 40px; transform: rotate(-12deg); }
.ghost-two { left: 120px; top: 110px; transform: rotate(9deg); border-color: #5C4B8A; }
.ghost-three { left: 210px; top: 8px; transform: rotate(20deg); border-color: #F1E36B; }
.ghost-current { left: 190px; top: 146px; transform: rotate(-4deg); }
.paperclip { position: absolute; left: 18vw; top: 18vh; width: 54px; height: 120px; border: 5px solid #A9B0B7; border-left-width: 0; border-radius: 0 32px 32px 0; transform: rotate(16deg); opacity: .75; }

.final-vellum { left: 22vw; top: 13vh; background: rgba(220, 232, 234, .11); border: 1px solid rgba(220, 232, 234, .45); transform: rotate(1.5deg); }
.final-shell { left: 21%; top: 25%; transform: rotate(-7deg); }
.contradiction { position: absolute; padding: 8px 12px; color: #080B10; background: rgba(241, 227, 107, .82); font: 800 14px var(--tech); text-transform: uppercase; box-shadow: 0 10px 25px rgba(0,0,0,.32); }
.c-one { left: 12%; top: 22%; transform: rotate(-14deg); }
.c-two { right: 12%; top: 38%; transform: rotate(11deg); background: rgba(255, 106, 42, .82); }
.c-three { left: 44%; bottom: 17%; transform: rotate(-4deg); }
.closing-note { right: 13vw; bottom: 13vh; transform: rotate(-1.5deg); }

.hidden-note {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 24px;
  max-width: 560px;
  padding: 14px 20px;
  transform: translate(-50%, 28px);
  opacity: 0;
  color: #080B10;
  background: #DCE8EA;
  border-left: 8px solid #FF6A2A;
  font: 700 14px/1.35 var(--tech);
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: opacity .35s ease, transform .35s ease;
}
.hidden-note.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes prototypeDrift { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-18px); } }
@keyframes stampThump { 0%, 72%, 100% { transform: rotate(-13deg) scale(1); } 78% { transform: rotate(-13deg) scale(1.14); } 83% { transform: rotate(-13deg) scale(.97); } }
@keyframes pathDraw { to { stroke-dashoffset: 0; } }
@keyframes elasticSettle { 0% { margin-left: -38px; opacity: .35; } 100% { margin-left: 0; opacity: 1; } }

@media (max-width: 900px) {
  .report-plate { padding: 11vh 24px 10vh 92px; }
  .chapter-swatches { right: 8px; transform: translateY(-50%) scale(.72); transform-origin: right center; }
  .acetate-note, .title-card, .note-right, .note-left, .closing-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: calc(100vw - 132px); margin-top: 48vh; }
  .specimen-table, .exploded-object, .stress-specimen, .ghost-stack, .final-vellum { left: 82px; width: 78vw; transform: scale(.72); transform-origin: top left; }
  h1 { font-size: 54px; }
  .revision-stamp { right: 24px; bottom: 9vh; font-size: 16px; }
}