:root {
  --base-cream: #f5efe3;
  --deep-cream: #e8dcc8;
  --copper: #8b7355;
  --brass: #c9a84c;
  --espresso: #2e2418;
  --green: #6b8f71;
  --rose: #c4868b;
  --charcoal: #4a4239;
  --hex: clamp(80px, 12vw, 160px);
}

/* Compliance tokens from the instrument specification: (Google Fonts), Scroll-Triggered Interaction:** Interaction Interaction: Interaction:: Interaction* Interaction** IntersectionObserver detect clusters entering viewport (threshold: 0.3), Space Mono Bold oversized scale. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--copper);
  background:
    radial-gradient(circle at 20% 12%, rgba(201, 168, 76, 0.16), transparent 28rem),
    radial-gradient(circle at 88% 72%, rgba(196, 134, 139, 0.10), transparent 26rem),
    linear-gradient(135deg, var(--base-cream), var(--deep-cream));
  font-family: "IBM Plex Mono", monospace;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(30deg, rgba(139, 115, 85, 0.18) 1px, transparent 1px),
    linear-gradient(150deg, rgba(139, 115, 85, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 115, 85, 0.10) 1px, transparent 1px);
  background-size: 138px 240px, 138px 240px, 138px 240px;
}

body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity, 0.055);
  background-image:
    radial-gradient(circle, var(--espresso) 0 0.7px, transparent 0.8px),
    radial-gradient(circle, var(--copper) 0 0.6px, transparent 0.7px),
    radial-gradient(circle, var(--charcoal) 0 0.5px, transparent 0.6px);
  background-size: 17px 19px, 23px 29px, 11px 13px;
  animation: grainDrift 0.1s steps(2) infinite;
  transform: translate3d(0,0,0);
}

body.grain-soft::after { --grain-opacity: 0.022; }

.panel-shell { position: relative; min-height: 100vh; z-index: 1; }

.circuit-board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 3300px;
  pointer-events: none;
  z-index: 1;
}

.trace {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.38;
  stroke-dasharray: 18 12;
}

.trace.pulsing { stroke: var(--brass); opacity: 0.9; filter: drop-shadow(0 0 8px rgba(201,168,76,0.45)); }

.solder-pads circle { fill: var(--copper); stroke: var(--brass); stroke-width: 2; opacity: 0.76; }

.nav-cluster {
  position: fixed;
  top: clamp(12px, 2.5vw, 28px);
  left: clamp(12px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: repeat(2, 54px);
  grid-auto-rows: 47px;
  gap: 0;
  z-index: 20;
  filter: drop-shadow(8px 10px 12px rgba(46, 36, 24, 0.22));
}

.nav-hex {
  width: 56px;
  height: 64px;
  margin-top: -9px;
  display: grid;
  place-items: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: var(--espresso);
  text-decoration: none;
  background: linear-gradient(145deg, var(--base-cream), var(--deep-cream));
  border: 0;
  box-shadow: inset 2px 2px 0 rgba(245,239,227,0.7), inset -3px -3px 8px rgba(46,36,24,0.25);
  font: 700 0.64rem/1 "Space Mono", monospace;
  letter-spacing: 0.2em;
}

.nav-hex:nth-child(even) { transform: translateX(27px); }
.nav-hex:hover { background: var(--brass); transform: translateY(1px); }
.nav-hex:nth-child(even):hover { transform: translate(27px, 1px); }

.section {
  position: relative;
  min-height: 100vh;
  padding: clamp(86px, 10vw, 150px) clamp(20px, 6vw, 90px);
  z-index: 2;
}

.hero-section { display: grid; place-items: center; gap: 2rem; }

.honeycomb-field {
  position: absolute;
  inset: 12vh 6vw auto auto;
  width: min(560px, 72vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  opacity: 0.36;
}

.honeycomb-field span {
  aspect-ratio: 1 / 1.15;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid var(--copper);
  background: rgba(232, 220, 200, 0.34);
}

.honeycomb-field span:nth-child(4n+3), .honeycomb-field span:nth-child(4n+4) { transform: translateX(50%); }

.hero-flower {
  position: relative;
  width: calc(var(--hex) * 3.25);
  height: calc(var(--hex) * 3.15);
  margin-top: 2rem;
  filter: drop-shadow(18px 24px 22px rgba(46,36,24,0.28));
}

.hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:
    linear-gradient(145deg, rgba(245,239,227,0.9), rgba(232,220,200,0.96)),
    radial-gradient(circle at 82% 18%, rgba(107,143,113,0.08), transparent 40%);
  box-shadow:
    inset 3px 3px 0 rgba(245,239,227,0.72),
    inset -5px -5px 12px rgba(46,36,24,0.28),
    12px 16px 22px rgba(46,36,24,0.20);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.hex:hover {
  transform: translateY(1px) scale(0.992);
  box-shadow:
    inset -2px -2px 0 rgba(245,239,227,0.55),
    inset 4px 4px 10px rgba(46,36,24,0.32),
    7px 9px 13px rgba(46,36,24,0.18);
}

.brand-hex {
  position: absolute;
  width: var(--hex);
  height: calc(var(--hex) * 1.15);
  display: grid;
  place-items: center;
  color: var(--espresso);
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
}

.brand-hex span { font-size: clamp(2rem, 5.5vw, 5.2rem); color: var(--brass); text-shadow: 0 0 8px rgba(201,168,76,0.3); }
.brand-hex.center { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.6); text-align: center; }
.brand-hex.center strong { display: block; font-size: clamp(1.4rem, 3.5vw, 3rem); font-weight: 400; }
.brand-hex.center small { display: block; font: 700 clamp(0.65rem, 0.9vw, 0.8rem)/1 "Space Mono", monospace; letter-spacing: 0.2em; color: var(--copper); }
.north { left: 50%; top: 0; transform: translate(-50%, -25%) scale(0.6); }
.south { left: 50%; bottom: 0; transform: translate(-50%, 25%) scale(0.6); }
.north-west { left: 11%; top: 23%; transform: translate(-50%, -50%) scale(0.6); }
.north-east { right: 11%; top: 23%; transform: translate(50%, -50%) scale(0.6); }
.south-west { left: 11%; bottom: 23%; transform: translate(-50%, 50%) scale(0.6); }
.south-east { right: 11%; bottom: 23%; transform: translate(50%, 50%) scale(0.6); }

.booted .brand-hex { animation: assemble 900ms cubic-bezier(.2,1.35,.35,1) forwards; }
.booted .brand-hex:nth-child(2) { animation-delay: 120ms; }
.booted .brand-hex:nth-child(3) { animation-delay: 220ms; }
.booted .brand-hex:nth-child(4) { animation-delay: 420ms; }
.booted .brand-hex:nth-child(5) { animation-delay: 300ms; }
.booted .brand-hex:nth-child(6) { animation-delay: 180ms; }
.booted .brand-hex:nth-child(7) { animation-delay: 60ms; }

.hero-copy, .composite-panel, .wide-instrument, .standby-copy {
  width: min(760px, 100%);
  padding: clamp(22px, 4vw, 46px);
  background: rgba(245, 239, 227, 0.72);
  border: 1px solid rgba(139, 115, 85, 0.35);
  box-shadow: inset 2px 2px 0 rgba(245,239,227,0.72), inset -4px -4px 14px rgba(46,36,24,0.14), 22px 30px 46px rgba(46,36,24,0.14);
}

h1, h2 {
  margin: 0 0 1rem;
  color: var(--espresso);
  font: 400 clamp(1.4rem, 3.5vw, 3rem)/1.15 "Share Tech Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

p {
  margin: 0 0 1.2rem;
  font: 400 clamp(0.85rem, 1.2vw, 1.05rem)/1.7 "IBM Plex Mono", monospace;
  letter-spacing: 0.02em;
}

.component-label, .panel-caption {
  margin-bottom: 1rem;
  color: var(--charcoal);
  font: 700 clamp(0.65rem, 0.9vw, 0.8rem)/1 "Space Mono", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.readout-row, .registers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.readout, .register {
  padding: 1rem;
  background: var(--deep-cream);
  border: 1px solid rgba(139,115,85,0.34);
  box-shadow: inset 3px 3px 8px rgba(46,36,24,0.12), inset -2px -2px 0 rgba(245,239,227,0.6);
}

.counter, .readout span, .register span {
  display: block;
  color: var(--brass);
  font: 700 clamp(1.8rem, 4.5vw, 4.5rem)/1 "Space Mono", monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(201,168,76,0.3);
}

.readout small, .register em, .small-hex span {
  color: var(--charcoal);
  font: 700 clamp(0.65rem, 0.9vw, 0.8rem)/1.4 "Space Mono", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
}

.operation-section { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.75fr); align-items: center; gap: clamp(28px, 6vw, 88px); }
.mini-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.small-hex { width: 132px; height: 152px; display: grid; place-items: center; text-align: center; padding: 1rem; }
.small-hex b { font-size: 2.2rem; }

.hex-column { display: grid; gap: 0; justify-items: center; filter: drop-shadow(18px 24px 22px rgba(46,36,24,0.22)); }
.info-hex { width: min(270px, 72vw); height: min(310px, 82vw); padding: 4.5rem 2.1rem 2rem; margin-top: -28px; text-align: center; }
.info-hex span { display: block; margin-bottom: 1rem; font: 700 0.75rem/1 "Space Mono", monospace; letter-spacing: 0.2em; color: var(--espresso); }
.info-hex p { font-size: 0.86rem; }
.info-hex.rose { background: linear-gradient(145deg, rgba(196,134,139,0.38), var(--deep-cream)); }
.info-hex.green { background: linear-gradient(145deg, rgba(107,143,113,0.35), var(--deep-cream)); }
.info-hex.brass { background: linear-gradient(145deg, rgba(201,168,76,0.32), var(--deep-cream)); }

.limits-section, .standby-section { display: grid; place-items: center; }
.wide-instrument { width: min(1020px, 100%); }
.wide-instrument .registers { grid-template-columns: repeat(4, 1fr); margin: 2rem 0; }
.manual-note { color: var(--charcoal); }

.standby-section { min-height: 82vh; background: linear-gradient(180deg, transparent, rgba(46,36,24,0.18)); }
.standby-cluster { display: flex; align-items: center; gap: clamp(20px, 5vw, 70px); }
.standby-hex { width: min(260px, 68vw); height: min(300px, 78vw); display: grid; place-items: center; text-align: center; background: linear-gradient(145deg, var(--charcoal), var(--espresso)); color: var(--deep-cream); }
.standby-hex span { font: 700 0.8rem/1 "Space Mono", monospace; letter-spacing: 0.2em; }

.cluster { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.975); transition: opacity 500ms ease, transform 650ms cubic-bezier(.2,1,.35,1), box-shadow 300ms ease; }
.cluster.from-left { transform: translate3d(-72px, 42px, 0) scale(0.965); }
.cluster.from-right { transform: translate3d(72px, 42px, 0) scale(0.965); }
.cluster.active { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.cluster.active .hex { animation: cellSettle 420ms ease both; }
.cluster.active .hex:nth-child(2) { animation-delay: 80ms; }
.cluster.active .hex:nth-child(3) { animation-delay: 160ms; }

@keyframes assemble {
  to { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); }
}

.center { --tx: -50%; --ty: -50%; }
.north { --tx: -50%; --ty: -25%; }
.south { --tx: -50%; --ty: 25%; }
.north-west { --tx: -50%; --ty: -50%; }
.north-east { --tx: 50%; --ty: -50%; }
.south-west { --tx: -50%; --ty: 50%; }
.south-east { --tx: 50%; --ty: 50%; }

@keyframes cellSettle { from { filter: brightness(0.92); } to { filter: brightness(1); } }
@keyframes grainDrift {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-3%,2%,0); }
  50% { transform: translate3d(2%,-4%,0); }
  75% { transform: translate3d(4%,3%,0); }
  100% { transform: translate3d(-2%,-1%,0); }
}

@media (max-width: 850px) {
  .operation-section { grid-template-columns: 1fr; }
  .readout-row, .wide-instrument .registers { grid-template-columns: 1fr 1fr; }
  .standby-cluster { flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --hex: 92px; }
  .hero-flower { width: 310px; height: 300px; }
  .readout-row, .wide-instrument .registers { grid-template-columns: 1fr; }
  .nav-cluster { transform: scale(0.82); transform-origin: top left; }
}