:root {
  /* Compliance vocabulary: short explanatory passages where clarity needed. Interface / Labels:** Labels:* Labels: Labelssss:::: coordinates premium analog-lab mood rather than common mono-heavy tech styling. */
  --obsidian: #080706;
  --pine: #0F2A1E;
  --green: #1F5B3A;
  --copper: #B86432;
  --rose: #8E2F2A;
  --gold: #D7B56D;
  --mist: #F3E8D2;
  --glass: rgba(243, 232, 210, 0.12);
  --font-display: "Monoton", cursive;
  --font-headline: "Cormorant Garamond", serif;
  --font-label: "Space Mono", monospace;
  --font-body: "Inter", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--mist);
  background: var(--obsidian);
  font-family: var(--font-body);
}

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

.lacquer-field {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 42%, rgba(31, 91, 58, 0.34), rgba(15, 42, 30, 0.12) 29%, transparent 58%),
    radial-gradient(circle at 88% 21%, rgba(184, 100, 50, 0.16), transparent 39%),
    radial-gradient(circle at 14% 82%, rgba(142, 47, 42, 0.12), transparent 32%),
    linear-gradient(115deg, #080706 0%, #0d0b09 47%, #080706 100%);
}

.lacquer-field::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg, transparent 10%, rgba(243,232,210,0.035) 24%, transparent 35%, transparent 70%, rgba(215,181,109,0.045) 75%, transparent 84%);
  transform: translateX(-16%);
  animation: lacquerSweep 18s ease-in-out infinite alternate;
}

.grain {
  z-index: -2;
  opacity: 0.18;
  background-image:
    linear-gradient(90deg, rgba(243,232,210,0.03) 1px, transparent 1px),
    linear-gradient(rgba(243,232,210,0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}

.fixed-hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  color: rgba(243, 232, 210, 0.62);
  font-family: var(--font-label);
}

.corner {
  position: absolute;
  width: 86px;
  height: 86px;
  border-color: rgba(215, 181, 109, 0.52);
}

.corner-tl { top: 28px; left: 28px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 28px; right: 28px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 28px; left: 28px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 28px; right: 28px; border-bottom: 1px solid; border-right: 1px solid; }

.hud-readout {
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.readout-left { top: 50%; left: 30px; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.readout-right { top: 50%; right: 30px; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.readout-bottom { left: 50%; bottom: 35px; transform: translateX(-50%); }

.breath-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(68vmin, 680px);
  height: min(68vmin, 680px);
  border: 1px solid rgba(215, 181, 109, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 80px rgba(31, 91, 58, 0.11), 0 0 120px rgba(184, 100, 50, 0.08);
  animation: breathe 7s ease-in-out infinite;
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(243, 232, 210, 0.055);
}

.scene::before,
.scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.scene::before {
  inset: 8vh 7vw;
  border: 1px solid rgba(243, 232, 210, 0.075);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(243,232,210,0.025), transparent 42%);
}

.scene::after {
  width: 1px;
  height: 72vh;
  right: 18vw;
  top: 14vh;
  background: linear-gradient(transparent, rgba(215,181,109,0.38), transparent);
}

.scene-grid {
  width: min(1180px, 88vw);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr 0.7fr;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  position: relative;
  z-index: 2;
}

.offset-right { grid-template-columns: 0.92fr 1.35fr 0.58fr; }
.offset-left { grid-template-columns: 1.2fr 0.9fr; }

.specimen-stage {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  justify-self: center;
  position: relative;
  transform: translate3d(0, var(--drift, 0px), 0) scale(var(--focus-scale, 1));
  transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 900ms ease;
  filter: blur(var(--focus-blur, 0px));
}

.opening .specimen-stage { grid-column: 1 / 4; }
.macro-stage { justify-self: end; transform-origin: 58% 47%; }
.ghost-stage { grid-column: 1 / 4; opacity: 0.92; }

.aperture {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(15,42,30,0.52), rgba(8,7,6,0.84) 67%);
  border: 1px solid rgba(215, 181, 109, 0.34);
  box-shadow: inset 0 0 54px rgba(8, 7, 6, 0.9), 0 0 85px rgba(31, 91, 58, 0.22), 0 0 30px rgba(184, 100, 50, 0.08);
  overflow: hidden;
}

.aperture::before,
.aperture::after {
  content: "";
  position: absolute;
  inset: 18px;
  pointer-events: none;
}

.aperture::before { border: 1px dashed rgba(215,181,109,0.23); border-radius: inherit; animation: slowSpin 48s linear infinite; }
.aperture::after { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(243,232,210,0.11), transparent 19%); mix-blend-mode: screen; }

.aperture-large { width: min(78vmin, 760px); height: min(78vmin, 760px); border-radius: 50%; }
.aperture-rect { width: min(67vmin, 650px); height: min(72vmin, 700px); border-radius: 44% 56% 42% 58% / 50% 44% 56% 50%; }

.botanical-svg { width: 92%; height: 92%; overflow: visible; }
.seed-svg { width: 88%; height: 88%; }

.plant-stem, .leaf-line, .copper-trace, .diagram-line, .seal-ring, .ghost-branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plant-stem { stroke: #1F5B3A; stroke-width: 4; filter: drop-shadow(0 0 10px rgba(31,91,58,0.45)); }
.leaf-line { stroke: rgba(243, 232, 210, 0.56); stroke-width: 1.5; }
.copper-trace { stroke: #B86432; stroke-width: 2.2; filter: drop-shadow(0 0 7px rgba(184,100,50,0.42)); }
.diagram-line, .seal-ring { stroke: rgba(215,181,109,0.28); stroke-width: 1; }
.diagram-line.faint, .seal-ring.inner { stroke: rgba(243,232,210,0.14); }

.draw { stroke-dasharray: 760; stroke-dashoffset: 760; animation: drawPath 6.8s ease forwards; }
.delay-a { animation-delay: .7s; }
.delay-b { animation-delay: 1.25s; }
.delay-c { animation-delay: 1.8s; }
.delay-d { animation-delay: 2.3s; }

.nodes circle,
.future-dots circle {
  fill: #D7B56D;
  stroke: rgba(8, 7, 6, 0.84);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(215,181,109,0.72));
}

.ticks path { stroke: rgba(215,181,109,0.45); stroke-width: 1; fill: none; }
.micro-labels text { fill: rgba(243,232,210,0.56); font: 11px "Space Mono", monospace; letter-spacing: .14em; }

.ghost-branch { stroke: rgba(31, 91, 58, 0.42); stroke-width: 3; stroke-dasharray: 8 18; animation: ghostPulse 8s ease-in-out infinite; }
.ghost-branch.alt { stroke: rgba(184, 100, 50, 0.38); animation-delay: 1.6s; }
.ghost-branch.slow { animation-duration: 10s; }

.copy-block {
  position: relative;
  z-index: 3;
  max-width: 470px;
  padding: 28px 30px;
  border-left: 1px solid rgba(215, 181, 109, 0.34);
  background: linear-gradient(90deg, rgba(8,7,6,0.7), rgba(8,7,6,0.08));
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1), filter 900ms ease;
}

.scene.in-view .copy-block { opacity: 1; transform: translateY(0) scale(1); }
.opening-copy { grid-column: 1 / 2; grid-row: 2 / 3; align-self: end; }
.top-left { grid-column: 1 / 2; grid-row: 1 / 2; align-self: end; }
.mid-right { grid-column: 3 / 4; grid-row: 2 / 3; }
.lower-left { grid-column: 1 / 2; grid-row: 3 / 4; align-self: start; }
.large-poem { grid-column: 2 / 3; grid-row: 2 / 3; max-width: 520px; }
.final-copy { grid-column: 2 / 3; grid-row: 2 / 3; max-width: 560px; }

.label,
.annotation,
.maker-mark {
  font-family: var(--font-label);
  color: rgba(215,181,109,0.82);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 11px;
}

h1, h2, p { margin: 0; }

h1, h2 {
  font-family: var(--font-headline);
  font-weight: 500;
  color: var(--mist);
  line-height: 0.96;
  text-wrap: balance;
}

h1 { font-size: clamp(48px, 6vw, 92px); margin-top: 18px; }
h2 { font-size: clamp(42px, 5vw, 82px); margin: 18px 0 20px; }
.copy-block p:not(.label) { color: rgba(243,232,210,0.72); font-size: 15px; line-height: 1.75; max-width: 35em; }

.monoton-mark {
  font-family: var(--font-display);
  color: #D7B56D;
  font-size: clamp(58px, 8vw, 130px);
  letter-spacing: 0.05em;
  text-shadow: 0 0 16px rgba(215,181,109,0.34), 0 0 40px rgba(184,100,50,0.16);
}

.maker-mark { position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%); color: rgba(243,232,210,0.5); }
.final-mark { bottom: 16vh; }

.annotation {
  position: relative;
  padding: 14px 0 14px 18px;
  border-left: 1px solid rgba(184,100,50,0.58);
  color: rgba(243,232,210,0.62);
}

.quiet { grid-column: 1 / 2; grid-row: 3 / 4; align-self: start; }

.hanko {
  position: absolute;
  right: 8vw;
  bottom: 18vh;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 2px solid #8E2F2A;
  color: #B86432;
  font-family: var(--font-display);
  font-size: 22px;
  transform: rotate(-8deg);
  opacity: 0.86;
}

.node-lens {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  justify-self: center;
  position: relative;
  width: min(58vmin, 560px);
  height: min(58vmin, 560px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,181,109,0.2) 0 3%, rgba(184,100,50,0.16) 4% 10%, rgba(15,42,30,0.48) 11% 34%, rgba(8,7,6,0.86) 64%);
  border: 1px solid rgba(215,181,109,0.36);
  box-shadow: inset 0 0 80px rgba(8,7,6,0.9), 0 0 120px rgba(184,100,50,0.14);
}

.node-core {
  position: absolute;
  inset: 45%;
  border-radius: 50%;
  background: #D7B56D;
  box-shadow: 0 0 28px rgba(215,181,109,0.86), 0 0 90px rgba(184,100,50,0.34);
}

.node-ring { position: absolute; border: 1px solid rgba(215,181,109,0.2); border-radius: 50%; animation: breathe 6s ease-in-out infinite; }
.ring-one { inset: 29%; }
.ring-two { inset: 18%; animation-delay: 1s; }
.ring-three { inset: 7%; animation-delay: 2s; }
.node-contact { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #B86432; box-shadow: 0 0 14px rgba(184,100,50,0.7); }
.n1 { left: 18%; top: 49%; }.n2 { right: 17%; top: 49%; }.n3 { left: 49%; top: 17%; }.n4 { left: 49%; bottom: 17%; }

.final-grid { grid-template-columns: 0.95fr 1.05fr; }
.final-seal {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  width: min(60vmin, 570px);
  height: min(60vmin, 570px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,91,58,0.25), rgba(8,7,6,0.5) 65%);
  border: 1px solid rgba(243,232,210,0.1);
}

.final-seal svg { width: 88%; height: 88%; overflow: visible; }

.instrument-control {
  margin-top: 32px;
  padding: 14px 24px;
  border: 1px solid rgba(215,181,109,0.55);
  background: rgba(8,7,6,0.68);
  color: #D7B56D;
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  box-shadow: inset 0 0 22px rgba(215,181,109,0.05);
  transition: transform 300ms ease, background 300ms ease, border-color 300ms ease;
}

.instrument-control:hover,
.instrument-control.active { transform: translateY(-2px); background: rgba(31,91,58,0.38); border-color: #D7B56D; }

body.focus-adjusted .breath-ring { animation-duration: 3.5s; border-color: rgba(215,181,109,0.42); }
body.focus-adjusted .aperture { box-shadow: inset 0 0 34px rgba(8,7,6,0.92), 0 0 120px rgba(215,181,109,0.18); }

@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%,100% { transform: translate(-50%, -50%) scale(0.985); opacity: 0.55; } 50% { transform: translate(-50%, -50%) scale(1.035); opacity: 0.95; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes lacquerSweep { to { transform: translateX(16%); } }
@keyframes ghostPulse { 0%,100% { opacity: 0.14; stroke-dashoffset: 0; } 50% { opacity: 0.72; stroke-dashoffset: -38; } }

@media (max-width: 820px) {
  .scene-grid, .offset-right, .offset-left, .final-grid {
    width: min(92vw, 680px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding: 14vh 0;
    gap: 28px;
  }
  .specimen-stage, .opening .specimen-stage, .ghost-stage, .node-lens, .final-seal, .copy-block, .opening-copy, .top-left, .large-poem, .final-copy {
    grid-column: 1 / 2;
    grid-row: auto;
  }
  .copy-block { padding: 22px; max-width: none; }
  .aperture-large, .aperture-rect { width: 86vw; height: 86vw; }
  .node-lens, .final-seal { width: 82vw; height: 82vw; }
  .readout-left, .readout-right { display: none; }
  .corner { width: 54px; height: 54px; }
  .maker-mark { position: static; transform: none; justify-self: center; }
  .hanko { right: 10vw; bottom: 10vh; }
}