@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');

:root{
  --bg:#152E40;
  --panel:#1C384B;
  --text:#E6EDF0;
  --muted:#A9BAC2;
  --rule:#77919E;
  --accent:#C98A69;
  --dark:#0B202D;
  --ink:#152E40;
  --paper:#E6EDF0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 'IBM Plex Sans',Arial,sans-serif}
button,input{font:inherit}
button,a{color:inherit}
a{text-decoration:none}
button{cursor:pointer;background:transparent;border:1px solid var(--rule);padding:10px 14px}
button:hover{background:var(--paper);color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed}
.noscript{margin:0;padding:10px 20px;background:var(--accent);color:var(--ink)}
.kicker,.label{font:500 10px/1.35 'IBM Plex Mono',monospace;letter-spacing:.15em}

.intro{position:fixed;inset:0;background:var(--dark);z-index:100;display:grid;place-items:center;overflow:hidden;transition:transform .7s ease,visibility .7s}
.intro.done{transform:translateY(-105%);visibility:hidden}
.intro-skip{position:absolute;right:24px;top:22px;z-index:2}
.intro-field{width:min(1180px,92vw)}
.intro-kicker{margin-bottom:10px;color:var(--accent)}
.intro-machine{display:block;width:100%;height:auto;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.intro-machine .wing,.fly-specimen .wing{fill:#E6EDF01a;stroke:var(--text);stroke-width:2}
.intro-machine .body,.intro-machine .thorax,.intro-machine .head,.fly-specimen .body,.fly-specimen .thorax,.fly-specimen .head{fill:var(--panel);stroke:var(--text);stroke-width:2}
.intro-machine .eye,.fly-specimen .eye{fill:var(--accent);stroke:var(--text);stroke-width:2}
.intro-machine .segment,.intro-machine .limb,.intro-machine .antenna,.intro-machine .brainline,.fly-specimen .segment,.fly-specimen .limb,.fly-specimen .antenna,.fly-specimen .brainline{fill:none;stroke:var(--text);stroke-width:2}
.intro-machine .brain,.fly-specimen .brain{fill:var(--dark);stroke:var(--accent);stroke-width:4}
.intro-machine .electrode path,.intro-machine .signal path{fill:none;stroke:var(--accent);stroke-width:3}
.intro-machine .electrode rect,.intro-machine .decoder rect{fill:var(--panel);stroke:var(--rule)}
.intro-machine .electrode circle,.intro-machine .decoder circle{fill:var(--accent)}
.intro-machine .electrode rect,.intro-machine .decoder,.intro-machine .signal{opacity:.18}
.intro-machine .decoder text{fill:var(--text);font:12px 'IBM Plex Mono',monospace}
.intro-machine .decoder path{stroke:var(--rule)}
.intro-machine .intro-fly{animation:fly-arrive 2s ease both}
.intro-machine .electrode{animation:connect 1.2s 2.1s ease both}
.intro-machine .signal{animation:connect 1.2s 3.5s ease both}
.intro-machine .decoder{animation:connect 1.2s 4.6s ease both}
.intro-caption{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px;color:var(--muted);font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em}
.intro-caption span{opacity:0;animation:caption .6s both}
.intro-caption span:nth-child(1){animation-delay:1.5s}.intro-caption span:nth-child(2){animation-delay:3.2s}.intro-caption span:nth-child(3){animation-delay:5s}
.intro-reveal{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:var(--bg);opacity:0;pointer-events:none;animation:reveal 4.2s 6.3s both}
.intro-reveal h1{font:500 clamp(64px,12vw,170px)/.85 'Source Serif 4',Georgia,serif;letter-spacing:-.06em;margin:0}
.intro-reveal p{font:24px 'Source Serif 4',Georgia,serif;margin:24px 0}
.intro-reveal button{justify-self:center;pointer-events:auto;background:var(--accent);border-color:var(--accent);color:var(--ink)}
@keyframes fly-arrive{from{transform:translate(-260px,75px);opacity:0}to{transform:translate(10px,75px);opacity:1}}
@keyframes connect{from{opacity:0;stroke-dasharray:600;stroke-dashoffset:600}to{opacity:1;stroke-dasharray:600;stroke-dashoffset:0}}
@keyframes caption{to{opacity:1}}
@keyframes reveal{0%{opacity:0}18%,88%{opacity:1}100%{opacity:1}}

header{height:76px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--rule);position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:10px;font:500 24px 'Source Serif 4',Georgia,serif}
.brand img{display:block}
nav{display:flex;gap:26px;font-size:13px}
header>button{font-size:12px}

.hero{padding:54px 24px 24px;min-height:calc(100vh - 76px)}
.hero-title{display:grid;grid-template-columns:210px minmax(520px,1fr) minmax(260px,430px);gap:28px;align-items:end;margin-bottom:40px}
.hero-title h1{font:500 clamp(46px,5.8vw,86px)/.94 'Source Serif 4',Georgia,serif;letter-spacing:-.045em;margin:0}
.hero-title h1 em{font-weight:400;color:var(--accent)}
.lede{font:18px/1.55 'Source Serif 4',Georgia,serif;margin:0;color:var(--muted)}

.interface{display:grid;grid-template-columns:minmax(310px,.95fr) 80px minmax(420px,1.2fr) minmax(240px,.65fr);border:1px solid var(--rule);min-height:560px}
.interface>article,.control-panel{padding:18px}
.specimen-panel,.machine-panel{background:var(--panel)}
.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.panel-head span{font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em}
.panel-head strong{font:500 16px 'Source Serif 4',Georgia,serif}
.fly-specimen{display:block;width:100%;height:auto;margin:10px 0}
.fly-specimen .probe{fill:none;stroke:var(--accent);stroke-width:3}
.fly-specimen .probe-box{fill:var(--accent)}
.anatomy{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 14px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:10px 'IBM Plex Mono',monospace;color:var(--muted)}
.specimen-panel>p{font:15px/1.5 'Source Serif 4',Georgia,serif;color:var(--muted)}
.neural-link{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 8px;background:var(--dark);color:var(--accent)}
.neural-link span{font:9px 'IBM Plex Mono',monospace;letter-spacing:.12em;writing-mode:vertical-rl}
.neural-link svg{width:100%;height:360px}
.neural-link path{fill:none;stroke:var(--accent);stroke-width:2}
.neural-link circle{fill:var(--accent)}
.neural-link strong{font:500 13px 'IBM Plex Mono',monospace}
.machine-panel{border-right:1px solid var(--rule)}
.screen{margin-top:15px;position:relative;background:var(--dark);border:1px solid var(--rule)}
#retina{display:block;width:100%;height:auto;aspect-ratio:1.7}
.screen-label{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;background:var(--dark);padding:5px 8px;font:10px 'IBM Plex Mono',monospace}
.machine-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px}
#spikes{display:block;width:100%;height:96px;background:var(--dark);margin-top:8px}
.machine-grid dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.machine-grid dl div{border-left:1px solid var(--rule);padding-left:8px}
.machine-grid dt{font-size:9px;color:var(--muted)}
.machine-grid dd{margin:4px 0 0;font:14px 'IBM Plex Mono',monospace}
.control-panel{background:var(--bg)}
.control-panel .panel-head{display:block}
.control-panel .panel-head strong{display:block;font-size:34px;margin-top:8px;color:var(--accent)}
.range{display:block;margin:20px 0;font-size:11px}
.range output{float:right;font-family:'IBM Plex Mono',monospace}
.range input{display:block;width:100%;accent-color:var(--accent);margin-top:10px}
.paths{display:grid;gap:8px;margin:18px 0}
.paths button{text-align:left}
.paths button span{display:block;font:9px 'IBM Plex Mono',monospace;color:var(--muted)}
.paths button strong{font:500 22px 'Source Serif 4',Georgia,serif}
.paths button.active{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.paths button.active span{color:var(--ink)}
.transport{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.control-panel>button{width:100%;margin-top:8px}
.primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}
#local-note{font-size:11px;color:var(--muted)}

.ledger{padding:34px 24px 46px;display:grid;grid-template-columns:1fr auto;gap:20px;border-bottom:1px solid var(--rule)}
.ledger h2,.section-title h2{font:500 38px/1.05 'Source Serif 4',Georgia,serif;margin:9px 0 0}
.counts{display:flex;gap:28px;align-items:end}
.counts span{font-size:11px;color:var(--muted)}.counts b{font:500 34px 'Source Serif 4',Georgia,serif;color:var(--text);margin-right:5px}
.strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:9px;min-height:96px}
.strip p{color:var(--muted)}
.strip button{padding:0;position:relative;min-height:96px;overflow:hidden;background:var(--panel)}
.strip canvas{display:block;width:100%;height:100%;object-fit:cover}
.strip small{position:absolute;bottom:5px;left:5px;background:var(--dark);padding:3px 5px;font:9px 'IBM Plex Mono',monospace}
.ledger>.primary{justify-self:end}

.protocol,.limits{padding:80px 24px}
.section-title{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;margin-bottom:40px}
.protocol ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.protocol li{padding:20px 24px 0 0}
.protocol li+li{border-left:1px solid var(--rule);padding-left:24px}
.protocol li>b,.limit-grid article>span{font:10px 'IBM Plex Mono',monospace;color:var(--accent);letter-spacing:.12em}
.protocol h3{font:500 26px 'Source Serif 4',Georgia,serif;margin:24px 0 8px}
.protocol p,.limit-grid p{color:var(--muted)}
.limits{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:.8fr 1.6fr;gap:60px}
.limits h2{font:500 48px/1.02 'Source Serif 4',Georgia,serif;margin:14px 0}
.limit-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink)}
.limit-grid article{padding:20px 20px 16px 0;border-bottom:1px solid var(--ink)}
.limit-grid article:nth-child(even){border-left:1px solid var(--ink);padding-left:20px}
.limit-grid article>span{color:#7C4D36}
.limit-grid strong{display:block;font:500 25px 'Source Serif 4',Georgia,serif;margin:14px 0}
.limit-grid p{color:#425965}

footer{padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.1em}
dialog{width:min(560px,calc(100% - 24px));background:var(--paper);color:var(--ink);border:0;padding:28px}
dialog::backdrop{background:#071721cc}
.dialog-head{display:flex;justify-content:space-between;align-items:center}
.dialog-head button{border-color:var(--ink);font-size:20px;padding:4px 10px}
dialog h2{font:500 44px 'Source Serif 4',Georgia,serif;margin:22px 0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--paper);color:var(--ink);padding:10px 16px;display:none;z-index:50}
#toast.show{display:block}

@media (max-width:1180px){
  .hero-title{grid-template-columns:170px 1fr}.lede{grid-column:2}
  .interface{grid-template-columns:1fr 65px 1fr}.control-panel{grid-column:1/-1;border-top:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.control-panel .panel-head{grid-column:1/-1}.paths{grid-column:1/3}.control-panel>button,#local-note{align-self:end}
}
@media (max-width:760px){
  html{scroll-padding-top:0}
  header{height:auto;padding:14px;flex-wrap:wrap}nav{order:3;width:100%;justify-content:space-between}header>button{font-size:10px}
  .hero{padding:34px 14px 14px}.hero-title{display:block}.hero-title .kicker{margin-bottom:20px}.hero-title h1{font-size:48px}.lede{margin-top:20px}
  .interface{grid-template-columns:1fr}.neural-link{height:78px;flex-direction:row}.neural-link span{writing-mode:horizontal-tb}.neural-link svg{height:68px;width:48%}.machine-panel{border-right:0;border-bottom:1px solid var(--rule)}
  .control-panel{display:block}.machine-grid{grid-template-columns:1fr}.strip{grid-template-columns:repeat(2,1fr)}
  .ledger{grid-template-columns:1fr}.counts{justify-content:space-between;gap:8px}.ledger>.primary{justify-self:stretch}
  .section-title,.limits{display:block}.protocol,.limits{padding:54px 14px}.protocol ol{grid-template-columns:1fr}.protocol li+li{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:20px}.limit-grid{grid-template-columns:1fr}.limit-grid article:nth-child(even){border-left:0;padding-left:0}
  footer{padding:20px 14px;flex-wrap:wrap}.intro-caption{grid-template-columns:1fr}.intro-caption span:nth-child(n+2){display:none}.intro-reveal p{font-size:18px}.intro-skip{right:12px;top:12px}
}
@media (max-height:650px){.intro-machine{max-height:330px}.intro-reveal h1{font-size:80px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none}
}