:root {
  /* Typography source: (Google Fonts) Libre Baskerville and IBM Plex Mono. Annotation Interaction:** hover states accelerate lines and brighten components. */
  --void: #0d0d12;
  --grid: #1a1a2e;
  --plum: #1e1228;
  --magenta: #ff00ff;
  --cyan: #00ffff;
  --green: #39ff14;
  --white: #f0e6ff;
  --body: #c8bdd4;
  --muted: #6b5f7e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--body);
  font-family: "Libre Baskerville", serif;
  perspective: 1200px;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 12%, rgba(255,0,255,0.08), transparent 28%), radial-gradient(circle at 82% 72%, rgba(0,255,255,0.08), transparent 30%);
  z-index: 0;
}

.iso-grid {
  position: fixed;
  inset: -20%;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(30deg, rgba(26,26,46,0.15) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(150deg, rgba(26,26,46,0.15) 0 1px, transparent 1px 60px);
  animation: gridFade 800ms ease-out forwards;
}

@keyframes gridFade { to { opacity: 1; } }

.manual {
  position: relative;
  z-index: 1;
  padding: 0 5vw 14vh;
  transform-style: preserve-3d;
}

.manual::after {
  content: "Interaction*";
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
}

.bay {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}

.bay:nth-of-type(4n+1) .panel-shell { margin-left: 0; }
.bay:nth-of-type(4n+3) .panel-shell { margin-left: auto; transform: translateX(40px) translateZ(8px); }
.bay:nth-of-type(4n+5) .panel-shell { margin-left: 5vw; transform: translateX(80px) translateZ(8px); }

.panel-shell {
  width: min(940px, 86vw);
  min-height: 620px;
  position: relative;
  transform: translateZ(8px);
  transform-style: preserve-3d;
}

.diagnostic-panel {
  width: 68%;
  min-height: 620px;
  position: relative;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid transparent;
  background: linear-gradient(rgba(30,18,40,0.95), rgba(30,18,40,0.95)) padding-box, linear-gradient(90deg, rgba(26,26,46,0.4), rgba(26,26,46,0.4), var(--magenta), rgba(26,26,46,0.4)) border-box;
  box-shadow: 0 28px 90px rgba(0,0,0,0.45), inset 0 0 44px rgba(0,255,255,0.025);
  overflow: hidden;
  animation: scanBorder 8s linear infinite;
}

.bay-even .diagnostic-panel {
  margin-left: auto;
  background: linear-gradient(rgba(30,18,40,0.95), rgba(30,18,40,0.95)) padding-box, linear-gradient(90deg, rgba(26,26,46,0.4), rgba(26,26,46,0.4), var(--cyan), rgba(26,26,46,0.4)) border-box;
}

.diagnostic-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background: repeating-linear-gradient(120deg, transparent 0 17px, rgba(0,255,255,0.04) 18px 19px, transparent 20px 38px), conic-gradient(from 45deg at 70% 40%, rgba(255,0,255,0.08), transparent, rgba(0,255,255,0.06), transparent, rgba(57,255,20,0.05));
  mix-blend-mode: screen;
}

@keyframes scanBorder {
  0% { background-position: 0% 0%; }
  100% { background-position: 400% 0%; }
}

.bay-kicker, .menu-kicker {
  margin: 0 0 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.bay-title {
  min-height: 1.08em;
  margin: 0 0 22px;
  color: var(--white);
  font-size: clamp(2.2rem, 5.5vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 700;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 500ms ease, opacity 500ms ease;
}

.bay.active .bay-title { transform: translateY(0); opacity: 1; }
.bay-one .bay-title { opacity: 1; transform: translateY(0); }

.bay-copy {
  max-width: 56ch;
  margin: 0 0 28px;
  color: var(--body);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  letter-spacing: 0.005em;
}

.diagram-wrap {
  position: relative;
  height: 330px;
  margin-top: 18px;
  filter: drop-shadow(0 0 12px rgba(255,0,255,0.45)) drop-shadow(0 0 24px rgba(0,255,255,0.18));
}

.machine-diagram {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.machine-diagram path {
  fill: none;
  stroke: var(--body);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1200ms ease-out, filter 200ms ease, opacity 200ms ease;
}

.bay.active .machine-diagram path { stroke-dashoffset: 0; }
.component:nth-child(2) path { transition-delay: 220ms; }
.component:nth-child(3) path { transition-delay: 420ms; }
.component:nth-child(4) path { transition-delay: 560ms; }

.neon-magenta path, .line.magenta { stroke: var(--magenta); }
.neon-cyan path, .line.cyan { stroke: var(--cyan); }
.neon-green path, .line.green { stroke: var(--green); }
.crystal-lines path { stroke: rgba(200,189,212,0.55); }

.component.highlight path {
  filter: drop-shadow(0 0 10px currentColor);
  opacity: 1;
  stroke-width: 2.2;
}

.crystal-field {
  position: absolute;
  inset: 14% 8% 6%;
  z-index: 1;
  opacity: 0.7;
  clip-path: polygon(50% 0%, 94% 25%, 94% 74%, 50% 100%, 6% 74%, 6% 25%);
  background: conic-gradient(from 30deg, rgba(255,0,255,0.08), rgba(0,255,255,0.12), rgba(57,255,20,0.05), rgba(255,0,255,0.08)), repeating-linear-gradient(30deg, transparent 0 28px, rgba(240,230,255,0.06) 29px 31px);
}

.honeycomb .crystal-field { background-image: radial-gradient(circle at center, rgba(0,255,255,0.10) 0 2px, transparent 3px 28px), repeating-linear-gradient(60deg, rgba(255,0,255,0.04) 0 1px, transparent 1px 38px); }
.monoclinic .crystal-field { clip-path: polygon(18% 12%, 92% 24%, 78% 88%, 4% 76%); }
.orthorhombic .crystal-field { clip-path: polygon(20% 20%, 80% 8%, 96% 70%, 36% 88%); }
.tetrahedral .crystal-field { clip-path: polygon(50% 2%, 96% 90%, 6% 90%); }

.annotations {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform: translateZ(18px);
  pointer-events: none;
}

.callout {
  position: absolute;
  width: max-content;
  max-width: 230px;
  padding: 10px 13px;
  background: rgba(30,18,40,0.96);
  border: 1px solid var(--magenta);
  color: var(--magenta);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 500ms ease, border-color 200ms ease, color 200ms ease;
  pointer-events: auto;
}

.callout::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: currentColor;
  left: -3px;
  top: 50%;
}

.bay.active .callout { opacity: 1; transform: translateY(0); }
.bay.active .callout:nth-child(2) { transition-delay: 150ms; }
.bay.active .callout:nth-child(3) { transition-delay: 300ms; }
.callout.cyan { border-color: var(--cyan); color: var(--cyan); }
.callout.green { border-color: var(--green); color: var(--green); }
.callout:hover { border-color: var(--green); color: var(--green); }

.c1 { top: 80px; right: 0; }
.c2 { bottom: 120px; left: 0; }
.c3 { bottom: 56px; right: 28px; }

.callout-lines {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.line {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 4 8;
  opacity: 0;
  stroke-dashoffset: 220;
  transition: opacity 300ms ease, stroke-dashoffset 600ms ease-out, stroke-width 200ms ease;
}

.bay.active .line { opacity: 0.55; stroke-dashoffset: 0; }
.line.fast { opacity: 1; stroke-width: 1.8; animation: dashRun 420ms linear infinite; }
@keyframes dashRun { to { stroke-dashoffset: -24; } }

.divider {
  height: 200px;
  display: flex;
  align-items: center;
  padding: 0 4vw;
}

.divider span {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--cyan), transparent);
  background-size: 200% 100%;
  animation: dividerRun 3s linear infinite;
}
@keyframes dividerRun { to { background-position: 200% 0; } }

.bay-counter {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 20;
  padding: 12px 14px 10px;
  background: rgba(13,13,18,0.82);
  border: 0;
  border-bottom: 1px solid var(--cyan);
  color: var(--body);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.bay-counter strong { color: var(--magenta); font-weight: 500; }
.bay-counter.flash { box-shadow: 0 0 18px var(--cyan); border-color: var(--magenta); }

.bay-menu {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(13,13,18,0.74);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.bay-menu.open { opacity: 1; pointer-events: auto; }

.menu-panel {
  position: absolute;
  top: 72px;
  right: 28px;
  width: 280px;
  padding: 24px;
  background: rgba(30,18,40,0.98);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 38px rgba(0,255,255,0.14);
}

.menu-panel button {
  display: block;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(106,95,126,0.35);
  background: transparent;
  color: var(--white);
  font-family: "IBM Plex Mono", monospace;
  text-align: left;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-panel button:hover { color: var(--green); }

@media (max-width: 768px) {
  .manual { padding: 0 20px 12vh; }
  .bay, .panel-shell, .bay:nth-of-type(4n+3) .panel-shell, .bay:nth-of-type(4n+5) .panel-shell { transform: none; margin-left: 0; }
  .panel-shell { width: 100%; min-height: 0; }
  .diagnostic-panel, .bay-even .diagnostic-panel { width: calc(100% - 20px); margin-left: 20px; min-height: 0; }
  .annotations { position: static; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; transform: none; }
  .callout { position: static; width: auto; max-width: 100%; opacity: 1; transform: none; }
  .callout-lines { display: none; }
  .diagram-wrap { height: 260px; }
  .bay-counter { top: auto; right: auto; bottom: 18px; left: 50%; transform: translateX(-50%); }
  .menu-panel { top: auto; bottom: 70px; right: 50%; transform: translateX(50%); }
}