/* The lab: a circuit board shaped like a tree, with light running up it. */
@keyframes ground { 0%, 100% { background-color: #04121a; } 33% { background-color: #0c0a26; } 66% { background-color: #1c0a20; } }
@keyframes volt { 0%, 100% { color: #4ff0d4; } 33% { color: #a79cff; } 66% { color: #ff7fb6; } }
@keyframes travel { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -2300; } }
@keyframes hop { from { stroke-dashoffset: 34; } to { stroke-dashoffset: -620; } }
@keyframes surge { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes blink { 0%, 92%, 100% { opacity: 0.3; } 95% { opacity: 1; } }

.board { position: relative; overflow: hidden; animation: ground 42s ease-in-out infinite; }
.wired { position: relative; animation: volt 42s ease-in-out infinite; }
.grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 100%); pointer-events: none; }

.title { position: relative; padding: clamp(4rem, 6vw, 5.5rem) var(--gutter) 0; color: var(--ink); text-align: center; }
.title h1 { margin: 0; font: 700 clamp(2.75rem, 7vw, 7rem)/0.95 var(--display); letter-spacing: -0.025em; }
.title p { margin: 0.875rem 0 0; font-size: clamp(1rem, 1.6vw, 1.375rem); }

.stage { position: relative; width: min(100%, 1180px, 118vh); aspect-ratio: 1440 / 880; margin: 0 auto; }
.stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace { fill: none; stroke: currentColor; stroke-opacity: 0.18; stroke-width: 2; stroke-linejoin: round; }
.main { fill: none; stroke: currentColor; stroke-opacity: 0.5; stroke-width: 4; stroke-linejoin: round; }
.pulse { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 90 3000; animation: travel 5.5s linear infinite; }
.spark { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 34 1000; stroke-dashoffset: 34; animation: hop 4s linear infinite; }
.surge { fill: none; stroke: currentColor; stroke-width: 7; stroke-linejoin: round; stroke-dasharray: 2400; animation: surge 1.5s cubic-bezier(0.3, 0.1, 0.3, 1) forwards; }
.via { fill: var(--ground); stroke: currentColor; stroke-width: 2; animation: blink 7s linear infinite; }
.glow { filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor); }

.bird { width: 7%; min-width: 44px; color: inherit; }
.bird path { fill: var(--ground); stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: fill 0.5s ease; }
.bird:hover path { fill: rgba(255, 255, 255, 0.2); }
.bird.on path { fill: currentColor; stroke: #fff; transition-delay: 1.2s; }
.bird.on svg { filter: drop-shadow(0 0 12px currentColor); }
.lab { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); color: var(--ink); font: 700 0.9375rem/1.2 var(--display); white-space: nowrap; }

.detail { position: relative; color: var(--ink); }
.picks { justify-content: center; gap: 0.5rem; border: 0; }
.pick { padding: 0.5rem 0.875rem; background: rgba(255, 255, 255, 0.04); border: 1px solid #39415a; color: var(--ink); font-family: var(--display); font-weight: 600; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.pick:hover { background: rgba(255, 255, 255, 0.12); }
.pick.on { background: var(--ink); color: var(--ground); }
.pick.on::after { display: none; }
.panel h2 { font-weight: 700; letter-spacing: 0; }
.go { border-radius: 0; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
.private { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.125rem; border: 1px dashed #4a5472; color: var(--muted); }

@media (max-width: 760px) {
  .lab { display: none; }
  /* The buttons under the board are the touch targets on a phone, so the ravens can be smaller than 44px. */
  .bird { width: 8%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .board, .wired, .via { animation: none; }
  .pulse, .spark { display: none; }
  .surge { animation: none; stroke-dasharray: none; }
}