:root {
  /* Compliance lexicon: IBM Plex Mono** Space Mono** Roboto Mono** Interaction should feel inspecting technical manual: hovering reveals labels slightly warmer mechanical texture */
  --paper: #F4F1EA;
  --veil: #BDBDB4;
  --bone: #FFFEF8;
  --ink: #050505;
  --graphite: #3A3A36;
  --chlorophyll: #7F8A78;
  --mono: "IBM Plex Mono", "Space Mono", "Roboto Mono", monospace;
  --body: "Space Mono", "IBM Plex Mono", monospace;
  --tiny: "Roboto Mono", "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background-image:
    linear-gradient(90deg, rgba(5,5,5,.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(5,5,5,.028) 1px, transparent 1px);
  background-size: 68px 68px, 68px 68px;
  mix-blend-mode: multiply;
}

.compliance-lexicon {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.manual { position: relative; }

.plate {
  min-height: 100vh;
  position: relative;
  padding: clamp(28px, 5vw, 78px);
  isolation: isolate;
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
}

.grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(189,189,180,.35), transparent 22%),
    radial-gradient(circle at 84% 70%, rgba(127,138,120,.18), transparent 24%);
  opacity: .7;
}

h1, h2, .vertical-wordmark, .section-index, .kicker { font-family: var(--mono); }
h1, h2 { margin: 0; text-transform: uppercase; line-height: .96; letter-spacing: -.06em; }
h1 { font-size: clamp(54px, 9vw, 136px); max-width: 880px; }
h2 { font-size: clamp(38px, 6vw, 94px); }
p { color: var(--graphite); line-height: 1.75; font-size: clamp(14px, 1.3vw, 18px); }

.kicker {
  margin: 0 0 20px;
  color: var(--ink);
  letter-spacing: .18em;
  font-size: 12px;
  text-transform: uppercase;
}

.plate-hero {
  background: var(--paper);
  display: grid;
  grid-template-columns: .55fr 1fr 1fr .42fr;
  grid-template-rows: 1fr auto 1fr;
}

.vertical-wordmark {
  position: absolute;
  left: clamp(12px, 2vw, 26px);
  top: 52%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(52px, 7.6vw, 132px);
  font-weight: 700;
  letter-spacing: -.09em;
  z-index: 5;
  color: var(--ink);
}

.hero-rules {
  position: absolute;
  inset: 6% 8% 8% 14%;
  border-top: 12px solid var(--ink);
  border-left: 3px solid var(--ink);
  border-bottom: 1px solid var(--graphite);
}

.hero-rules::before, .hero-rules::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.hero-rules::before { width: 26%; height: 2px; right: 0; top: 36%; }
.hero-rules::after { width: 2px; height: 42%; right: 22%; bottom: 0; }

.root-armor {
  position: absolute;
  inset: 4% 1% auto auto;
  width: min(78vw, 980px);
  height: auto;
  z-index: 1;
  opacity: .96;
}

.root, .scale, .seal path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.scale { fill: rgba(255,254,248,.44); stroke: var(--graphite); }
.node { fill: var(--paper); stroke: var(--ink); stroke-width: 3; cursor: pointer; transition: fill .2s, transform .2s; transform-box: fill-box; transform-origin: center; }
.node:hover, .node.active { fill: var(--chlorophyll); transform: scale(1.35); }

.reveal-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.1,1); }
.is-visible .reveal-path, .reveal-path.drawn { stroke-dashoffset: 0; }

.accession-stack {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
  z-index: 6;
  display: grid;
  gap: 16px;
  font: 700 13px var(--tiny);
  letter-spacing: .22em;
}
.accession-stack span {
  background: var(--ink);
  color: var(--bone);
  padding: 12px 10px;
  writing-mode: vertical-rl;
  min-height: 120px;
  text-align: center;
}

.vellum, .reveal-card {
  background: rgba(255,254,248,.72);
  backdrop-filter: blur(2px);
  border: 1px solid var(--graphite);
  box-shadow: 18px 18px 0 rgba(5,5,5,.09);
}

.hero-panel {
  grid-column: 2 / 4;
  grid-row: 2;
  z-index: 7;
  padding: clamp(24px, 4vw, 58px);
  clip-path: polygon(0 0, 94% 0, 100% 12%, 98% 100%, 5% 100%, 0 92%);
}

.annotation, .rotated-strip, .final-note {
  font-family: var(--tiny);
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
}
.floating-note { position: absolute; right: 17%; bottom: 7%; z-index: 8; border-left: 4px solid var(--ink); padding: 12px; background: rgba(244,241,234,.86); }

.section-index {
  position: absolute;
  top: 34px;
  right: 34px;
  font-weight: 700;
  letter-spacing: .18em;
  border-top: 8px solid var(--ink);
  padding-top: 12px;
}

.reveal-card { opacity: 0; transform: translateY(34px) rotate(-.5deg); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.15,1); }
.reveal-card.visible { opacity: 1; transform: translateY(0) rotate(0); }

.plate-germination {
  display: grid;
  grid-template-columns: 1fr .35fr 1fr .8fr;
  align-items: center;
  background: var(--bone);
}
.broken-copy { grid-column: 1 / 3; padding: 46px; z-index: 4; }
.root-columns { grid-column: 3 / 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; z-index: 3; }
.root-column { min-height: 52vh; padding: 22px 16px; border: 2px solid var(--ink); background: rgba(244,241,234,.68); position: relative; }
.root-column:nth-child(2) { transform: translateY(66px); }
.root-column:nth-child(3) { transform: translateY(-34px); }
.root-column span { font: 700 12px var(--tiny); letter-spacing: .18em; text-transform: uppercase; }
.root-column i { display: block; width: 2px; height: 72px; background: var(--ink); margin: 28px auto 0; position: relative; }
.root-column i::after { content: ""; position: absolute; width: 44px; height: 2px; background: var(--veil); top: 42%; left: 0; transform: rotate(-28deg); transform-origin: left center; }
.rotated-strip { position: absolute; left: 8%; bottom: 16%; transform: rotate(-90deg); transform-origin: left; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }

.plate-structure { background: var(--paper); }
.structure-text { position: absolute; right: 7%; top: 18%; width: min(600px, 48vw); padding: 44px; z-index: 8; }
.leaf-blade {
  position: absolute;
  display: grid;
  place-items: center;
  font: 700 clamp(26px, 5vw, 76px) var(--mono);
  letter-spacing: -.05em;
  border: 2px solid var(--ink);
  background: rgba(255,254,248,.56);
  color: var(--ink);
  clip-path: polygon(7% 0, 100% 12%, 91% 86%, 0 100%);
  cursor: crosshair;
  transition: background .25s, color .25s, transform .35s;
}
.leaf-blade:hover { background: var(--ink); color: var(--bone); transform: translateY(-10px) rotate(-1deg); }
.blade-a { left: 7%; top: 14%; width: 48vw; height: 22vh; }
.blade-b { left: 18%; top: 42%; width: 52vw; height: 24vh; color: var(--graphite); }
.blade-c { left: 6%; bottom: 8%; width: 42vw; height: 20vh; color: var(--chlorophyll); }
.ticks { position: absolute; inset: 8% 6%; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(5,5,5,.28) 30px 31px); opacity: .23; }

.plate-hardening {
  background: var(--ink);
  color: var(--bone);
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 30px;
}
.plate-hardening p { color: var(--veil); }
.hardening-copy { padding: 46px; background: rgba(58,58,54,.78); border-color: var(--veil); }
.armor-stack { position: relative; min-height: 70vh; }
.armor-plate {
  position: absolute;
  width: min(560px, 52vw);
  height: 190px;
  border: 2px solid var(--bone);
  color: var(--bone);
  background: rgba(255,254,248,.04);
  font: 700 clamp(30px, 5vw, 72px) var(--mono);
  letter-spacing: -.06em;
  clip-path: polygon(10% 0, 100% 8%, 90% 100%, 0 88%);
  cursor: pointer;
  transition: transform .35s, background .25s, color .25s;
}
.armor-plate:nth-child(1) { top: 0; left: 0; }
.armor-plate:nth-child(2) { top: 135px; left: 12%; }
.armor-plate:nth-child(3) { top: 270px; left: 4%; }
.armor-plate:nth-child(4) { top: 405px; left: 17%; }
.armor-plate:hover { transform: translateX(-22px); background: var(--bone); color: var(--ink); }
.thorn-array { position: absolute; right: 3%; top: 10%; display: grid; gap: 26px; }
.thorn-array span { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-bottom: 96px solid var(--bone); opacity: .9; transform: rotate(36deg); }

.plate-deployment {
  background: var(--ink);
  color: var(--bone);
  display: grid;
  grid-template-columns: 1fr .9fr;
  align-items: center;
}
.seal-wrap { width: min(70vh, 620px); aspect-ratio: 1; display: grid; place-items: center; background: var(--bone); border: 3px solid var(--bone); box-shadow: 30px 30px 0 rgba(189,189,180,.18); }
.seal { width: 86%; height: 86%; }
.seal circle { fill: none; stroke: var(--ink); stroke-width: 10; }
.seal path { stroke-width: 7; }
.final-copy h2 { max-width: 720px; }
.final-copy p { color: var(--bone); font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.final-note { position: absolute; right: 50px; bottom: 38px; color: var(--veil); }

.cursor-inspector {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  background: rgba(255,254,248,.08);
}
.node-popover {
  position: fixed;
  z-index: 110;
  max-width: 260px;
  padding: 10px 12px;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--bone);
  font: 11px var(--tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.node-popover.show { opacity: 1; transform: translateY(0); }

@keyframes specimenSnap {
  0% { opacity: 0; transform: translateY(12px) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (max-width: 900px) {
  .plate { padding: 24px; }
  .plate-hero, .plate-germination, .plate-hardening, .plate-deployment { display: block; }
  .vertical-wordmark { font-size: 48px; opacity: .18; }
  .hero-panel, .broken-copy, .structure-text, .hardening-copy { position: relative; width: auto; inset: auto; margin: 26vh 0 0 48px; padding: 28px; }
  .root-armor { width: 118vw; right: -34vw; top: 4%; }
  .accession-stack { position: absolute; right: 18px; top: 18px; display: flex; }
  .accession-stack span { writing-mode: horizontal-tb; min-height: 0; }
  .root-columns { margin-top: 28px; grid-template-columns: 1fr; }
  .root-column:nth-child(n) { transform: none; min-height: 180px; }
  .leaf-blade { position: relative; inset: auto; width: 88vw; height: 18vh; margin: 18px 0; }
  .armor-stack { margin-top: 36px; min-height: 560px; }
  .armor-plate { width: 82vw; }
  .seal-wrap { width: 82vw; margin: 0 auto 38px; }
}