:root {
  /* Design parser tokens: Interaction Details* Details: Interior cells Intersections* Intersections: Where borders meet appear (Google */
  --bg-primary: #1a1a1e;
  --bg-cell: #242428;
  --amber-border: #d4920a;
  --amber-glow: #f5a623;
  --crt-green: #7ab648;
  --aged-paper: #e8dcc8;
  --dust-gray: #8a8578;
  --warm-red: #c44d3f;
  --pale-gold: #d4b96a;
  --gap: 4px;
  --frame: 16px;
  --indicator: 32px;
  --headline: clamp(2.4rem, 5vw, 4.8rem);
  --body: clamp(0.95rem, 1.8vw, 1.15rem);
  --label: clamp(0.7rem, 1.2vw, 0.85rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--aged-paper);
  font-family: "Commissioner", Lato, Inter, sans-serif;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

#bg-drift {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.instrument-frame {
  position: relative;
  z-index: 1;
  height: calc(100vh - 32px);
  margin: 16px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--amber-border);
  background: var(--bg-primary);
  overflow: hidden;
}

.instrument-frame::before,
.instrument-frame::after {
  content: "";
  position: absolute;
  inset: 48px 0 auto 0;
  height: 1px;
  background: var(--amber-border);
  z-index: 6;
}

.instrument-frame::after { inset: auto 0 10px 0; }

.binary-rail {
  height: 8px;
  flex: 0 0 8px;
  background-image: repeating-linear-gradient(90deg, var(--amber-border) 0 4px, transparent 4px 12px, var(--crt-green) 12px 16px, transparent 16px 24px);
  animation: rail-shift 12s linear infinite;
  opacity: 0.75;
}

.rail-bottom { animation-direction: reverse; }

.indicator-strip {
  height: var(--indicator);
  flex: 0 0 var(--indicator);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bg-primary);
  border-bottom: 2px solid var(--amber-border);
}

.indicator {
  width: 18px;
  height: 18px;
  border: 2px solid var(--amber-border);
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: background-color 220ms ease, border-color 220ms ease, width 220ms ease, opacity 220ms ease;
}

.indicator span {
  position: absolute;
  transform: translateY(-999px);
}

.indicator.active {
  width: 42px;
  background: var(--amber-glow);
  border-color: var(--amber-glow);
  opacity: 1;
  animation: active-pulse 3s ease-in-out infinite;
}

.bento-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  background: var(--bg-primary);
}

.bento-container::-webkit-scrollbar { width: 8px; }
.bento-container::-webkit-scrollbar-track { background: var(--bg-primary); }
.bento-container::-webkit-scrollbar-thumb { background: var(--crt-green); }

.plate {
  position: relative;
  min-height: calc(100vh - 58px);
  padding: var(--frame);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.plate-title {
  position: absolute;
  right: 20px;
  top: 14px;
  z-index: 5;
  font-family: "Space Mono", monospace;
  font-size: var(--label);
  letter-spacing: 0.12em;
  color: var(--dust-gray);
}

.bento-grid {
  height: calc(100vh - 90px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: var(--gap);
  grid-auto-flow: dense;
}

.cell {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--bg-cell);
  border: 2px solid var(--amber-border);
  box-shadow: inset 0 0 0 1px var(--amber-border);
  cursor: pointer;
  transform: translate3d(0, 24px, 0);
  opacity: 0;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 420ms cubic-bezier(.22,1,.36,1), opacity 420ms ease;
}

.cell.is-visible { transform: translate3d(0, 0, 0); opacity: 1; }
.plate.is-departing .cell:nth-child(3n+1) { transform: translate3d(-40px, 0, 0); opacity: 0.2; }
.plate.is-departing .cell:nth-child(3n+2) { transform: translate3d(0, -40px, 0); opacity: 0.2; }
.plate.is-departing .cell:nth-child(3n) { transform: translate3d(40px, 0, 0); opacity: 0.2; }

.cell:hover {
  border-color: var(--pale-gold);
  box-shadow: inset 0 0 0 1px var(--pale-gold);
}

.cell:hover .cell-art svg { animation-duration: var(--fast-speed, 6s) !important; }

.hero, .hero-large { grid-column: 1 / -1; grid-row: 1 / -1; }
.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-3x2 { grid-column: span 3; grid-row: span 2; }
.span-3x4 { grid-column: span 3; grid-row: span 4; }
.span-6x2 { grid-column: span 6; grid-row: span 2; }
.span-6x4 { grid-column: span 6; grid-row: span 4; }
.span-9x2 { grid-column: span 9; grid-row: span 2; }

.grid-fork .cell:nth-child(2) { grid-row: span 4; }
.grid-execute { gap: 3px; }
.grid-complete { grid-template-columns: repeat(12, 1fr); }

.cell-label {
  position: relative;
  z-index: 4;
  font-family: "Space Mono", monospace;
  font-size: var(--label);
  letter-spacing: 0.12em;
  color: var(--crt-green);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cell-content {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 58ch;
}

.hero-copy, .complete-copy { padding-left: clamp(12px, 5vw, 72px); }

h1, h2 {
  color: var(--amber-glow);
  font-family: "Commissioner", Lato, Inter, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-shadow: 0 0 18px rgba(245, 166, 35, 0.18);
}

h1 { font-size: var(--headline); margin-bottom: 18px; }
h2 { font-size: clamp(1.45rem, 3vw, 2.5rem); margin-bottom: 14px; }
p { max-width: 52ch; font-size: var(--body); color: var(--aged-paper); }
small { color: var(--dust-gray); font-family: "Space Mono", monospace; }

.cell-art {
  position: absolute;
  inset: -10%;
  z-index: 1;
  opacity: 0.72;
  transition: transform 160ms linear, opacity 220ms ease;
}

.text-cell .cell-art { opacity: 0.34; }
.cell-art svg { width: 100%; height: 100%; display: block; transform-origin: center; }
.pattern-parallel { animation: phase-slide var(--speed, 16s) linear infinite; }
.pattern-rectangles { animation: rect-pulse var(--speed, 18s) ease-in-out infinite; }
.pattern-grid { animation: grid-turn var(--speed, 24s) linear infinite; }
.pattern-truchet { animation: grid-turn var(--speed, 28s) steps(12) infinite; }
.pattern-rails { animation: rail-pattern var(--speed, 14s) linear infinite; }
.pattern-converge { animation: converge-pulse var(--speed, 20s) ease-in-out infinite; }

.corner-mark {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: 5;
}
.corner-mark::before,
.corner-mark::after {
  content: "";
  position: absolute;
  background: var(--crt-green);
}
.corner-mark::before { left: 3px; top: 0; width: 1px; height: 8px; }
.corner-mark::after { left: 0; top: 3px; width: 8px; height: 1px; }
.top-left { left: 5px; top: 5px; }
.top-right { right: 5px; top: 5px; }
.bottom-left { left: 5px; bottom: 5px; }
.bottom-right { right: 5px; bottom: 5px; }
.plate.is-active .corner-mark { animation: crosshair-rotate 8s linear infinite; }

.sync.is-active .cell-art svg { animation-duration: 9s !important; }
.sync.is-active .cell { animation: sync-pulse 3s ease-in-out infinite; }

@keyframes rail-shift { to { background-position: 96px 0; } }
@keyframes active-pulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }
@keyframes phase-slide { to { transform: translateX(42px); } }
@keyframes rect-pulse { 0%,100%{transform: scale(.92); opacity:.6;} 50%{transform: scale(1.08); opacity:1;} }
@keyframes grid-turn { to { transform: rotate(360deg); } }
@keyframes rail-pattern { to { transform: translateY(54px); } }
@keyframes converge-pulse { 0%,100%{transform: scale(1) rotate(0deg);} 50%{transform: scale(.86) rotate(45deg);} }
@keyframes crosshair-rotate { to { transform: rotate(360deg); } }
@keyframes sync-pulse { 0%,100%{box-shadow: inset 0 0 0 1px var(--amber-border);} 50%{box-shadow: inset 0 0 0 1px var(--pale-gold);} }

@media (max-width: 800px) {
  :root { --frame: 8px; --headline: clamp(1.7rem, 8vw, 3rem); }
  .instrument-frame { margin: 8px; height: calc(100vh - 16px); }
  .bento-grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(10, 1fr); }
  .span-2x2, .span-3x2 { grid-column: span 3; grid-row: span 2; }
  .span-3x4, .span-6x4, .span-6x2, .span-9x2 { grid-column: span 6; grid-row: span 2; }
  .hero-copy, .complete-copy { padding-left: 0; }
  .plate-title { display: none; }
}

@media (max-width: 480px) {
  .indicator.active { width: 28px; }
  .cell { padding: 10px; }
  .bento-grid { grid-template-columns: repeat(4, 1fr); }
  .span-2x2, .span-3x2, .span-3x4, .span-6x4, .span-6x2, .span-9x2 { grid-column: span 4; }
}