/* Monochrome machine-lab layer: birds, Tetris and Customizer variables. */
:root {
  --lab-header-bg: #0b0b0c;
  --lab-header-text: #f4f4f1;
  --lab-hero-bg: #d5d5d0;
  --lab-hero-text: #111213;
  --lab-panel-bg: #111214;
  --lab-panel-text: #f5f5f2;
  --lab-field-bg: #e9e9e5;
  --lab-titlebar-bg: #1e1e1e;
  --lab-titlebar-text: #dededb;
  --lab-accent: #1c4cff;
  --lab-board-bg: #101113;
  --lab-board-grid: rgba(255,255,255,.08);
  --lab-connector: #f4f4f1;
  --lab-node-bg: #f3f3ef;
  --lab-node-text: #111213;
  --lab-node-border: #d8d8d2;
  --lab-node-shadow: #000000;
  --lab-bird-color: #111213;
  --lab-bird-speed: 18s;
  --lab-tetris-opacity: .34;
}
.site-header { background: var(--lab-header-bg); color: var(--lab-header-text); border-bottom-color: #454548; backdrop-filter: none; }
.site-header .brand-mark { border-color: currentColor; }
.site-header .map-instructions { color: #bdbdb8; }
.site-header a:hover { color: #fff; }
.map-hero { position: relative; overflow: clip; isolation: isolate; background: var(--lab-hero-bg); color: var(--lab-hero-text); }
.map-intro { position: relative; z-index: 2; }
.map-intro-copy { padding: clamp(1rem, 3vw, 2.5rem) 0; }
.map-intro .eyebrow { display: inline-flex; padding: .35rem .55rem; color: #fff; background: #111214; }
.map-intro h1 { color: var(--lab-hero-text); text-wrap: balance; }
.map-intro-meta { padding: clamp(1rem, 2vw, 1.5rem); color: var(--lab-panel-text); background: var(--lab-panel-bg); border: 1px solid #000; box-shadow: .65rem .65rem 0 rgba(255,255,255,.5); }
.map-intro-meta .map-control { border-color: #bcbcb7; }
.map-intro-meta .map-control[aria-pressed="true"], .map-intro-meta .map-control:hover { color: #111; background: #fff; }
.map-intro-meta .map-status { color: #9bb0ff; }
.bird-window { position: relative; z-index: 2; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); padding: 0; border: 1px solid #2b2b2d; background: var(--lab-field-bg); overflow: hidden; }
.lab-title-bar { min-height: 2.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .65rem; color: var(--lab-titlebar-text); background: var(--lab-titlebar-bg); border-bottom: 1px solid #2b2b2d; font: 500 12px/1 var(--mono, monospace); letter-spacing: .04em; text-transform: uppercase; }
.hero-flight { position: relative; z-index: 1; height: clamp(6.5rem, 10vw, 9rem); overflow: hidden; pointer-events: none; contain: layout paint; }
.pixel-bird { position: absolute; display: block; width: 1.6rem; height: .8rem; color: var(--lab-bird-color); opacity: .68; filter: drop-shadow(1px 1px 0 rgba(255,255,255,.42)); }
.pixel-bird::before, .pixel-bird::after { content: ""; position: absolute; top: .35rem; width: .92rem; height: .15rem; background: currentColor; }
.pixel-bird::before { right: 50%; transform: rotate(24deg); transform-origin: right center; }
.pixel-bird::after { left: 50%; transform: rotate(-24deg); transform-origin: left center; }
.bird-left { left: -3rem; animation: lab-bird-left var(--lab-bird-speed) linear infinite; }
.bird-right { right: -3rem; animation: lab-bird-right calc(var(--lab-bird-speed) + 2s) linear infinite; }
.bird-one { top: 12%; animation-delay: -2s; }
.bird-two { top: 33%; animation-delay: -9s; transform: scale(.72); }
.bird-three { top: 61%; animation-delay: -14s; transform: scale(.88); }
.bird-four { top: 20%; animation-delay: -6s; }
.bird-five { top: 49%; animation-delay: -12s; transform: scale(.68); }
.bird-six { top: 71%; animation-delay: -17s; transform: scale(.82); }
@keyframes lab-bird-left { from { translate: 0 0; } 46% { translate: calc(50vw + 1rem) -1.2rem; } to { translate: calc(100vw + 6rem) .5rem; } }
@keyframes lab-bird-right { from { translate: 0 0; } 54% { translate: calc(-50vw - 1rem) 1rem; } to { translate: calc(-100vw - 6rem) -.45rem; } }
.map-stage { color: #fff; background-color: var(--lab-board-bg); background-image: none; border-color: #000; outline: none; }
.map-stage:focus-visible { outline: 3px solid var(--lab-accent); outline-offset: 4px; }
.map-stage::before { z-index: 1; background-image: linear-gradient(var(--lab-board-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lab-board-grid) 1px, transparent 1px); background-size: 2rem 2rem; }
.tetris-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: var(--lab-tetris-opacity); pointer-events: none; }
.tetris-console { position: absolute; z-index: 4; top: 0; left: 0; right: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; width: auto; max-width: none; min-height: 2.75rem; padding: .45rem .65rem; color: var(--lab-titlebar-text); background: var(--lab-titlebar-bg); border: 0; border-bottom: 1px solid #777; font: 12px/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; }
.tetris-label { color: #fff; }
.tetris-score strong { color: #b9c6ff; }
.tetris-help { color: #bcbcb6; }
.tetris-pause { min-height: 2.75rem; padding: .35rem .6rem; border: 1px solid #aaa; color: #fff; background: #111; font: inherit; text-transform: uppercase; cursor: pointer; }
.tetris-pause:hover, .tetris-pause:focus-visible { color: #111; background: #fff; outline: 2px solid var(--lab-accent); outline-offset: 2px; }
.map-connectors { z-index: 2; }
.map-connectors line { stroke: var(--lab-connector); stroke-opacity: .42; }
.map-nodes { z-index: 3; }
.map-node { border-color: var(--lab-node-border); border-radius: 0; background: var(--lab-node-bg); color: var(--lab-node-text); box-shadow: .42rem .42rem 0 var(--lab-node-shadow); }
.map-node:hover, .map-node:focus-visible { color: var(--lab-node-text); outline-color: var(--lab-accent); }
.map-node.sourov { color: #fff; background: #111214; border-color: #f4f4f1; box-shadow: .55rem .55rem 0 var(--lab-accent); }
.map-control[aria-pressed="true"], .map-control:hover, .map-handle:hover, .map-handle:focus-visible, .map-node-entry.is-selected .map-handle { background: #fff; color: #111; }
.map-notice { color: #111; background: #efefe9; border-left-color: var(--lab-accent); }
@media (max-width: 800px) {
  .hero-flight { height: 7rem; }
  .tetris-help { display: none; }
}
@media (max-width: 639px) {
  .hero-flight { height: 6rem; }
  .lab-title-bar { font-size: 10px; }
  .pixel-bird:nth-child(n+4) { display: none; }
  .map-intro-copy { padding-bottom: .5rem; }
  .map-intro-meta { box-shadow: .4rem .4rem 0 rgba(255,255,255,.55); }
  .map-stage { min-height: 46rem; }
  .map-node-entry { width: 6.75rem; }
  .map-stage .map-node { min-height: 5.5rem; padding: .65rem 1.8rem .65rem .65rem; }
  .map-stage .map-node strong { font-size: 1rem; }
  .map-stage .map-node span, .map-stage .map-node small { font-size: .6rem; }
  .map-handle { top: .35rem; right: .35rem; }
  .tetris-console { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-bird { animation: none; opacity: .28; }
  .bird-left { left: 8%; }
  .bird-right { right: 8%; }
}