:root{
  --bg:#000; --cyan:#2cb4ff; --blue:#3a8dff; --green:#3dff5a; --yel:#ffe81a;
  --red:#ff2d1f; --pur:#b48cff; --org:#ffa21a; --mag:#ff3df0;
  --font:"Nunito","Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;color:var(--blue);min-height:100%}
body{font-family:var(--font);font-weight:900;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ---------- background ---------- */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
#stars svg{width:100%;height:100%}
#stars circle{fill:#9fd8ff;animation:tw var(--t,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}
.scan{position:fixed;left:0;right:0;top:-20vh;height:18vh;z-index:5;pointer-events:none;
  background:linear-gradient(transparent,rgba(60,255,90,.05) 45%,rgba(60,255,90,.09) 50%,transparent);
  animation:scan 7s linear infinite}
@keyframes scan{to{transform:translateY(140vh)}}
.crt{position:fixed;inset:0;z-index:6;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px),
             radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);
  animation:flick 5s steps(1) infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}83%{opacity:.93}}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:20;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;cursor:pointer;transition:opacity .7s ease}
#intro.out{opacity:0;pointer-events:none}
#boot{font-family:var(--mono);color:var(--green);font-size:clamp(12px,1.6vw,17px);line-height:1.6;min-height:7em;width:min(90vw,640px);white-space:pre-wrap;text-shadow:0 0 6px rgba(61,255,90,.7)}
#dontpanic{width:min(88vw,820px);opacity:0;transform:scale(.6);transition:opacity .5s,transform .9s cubic-bezier(.2,1.6,.4,1)}
#intro.panic #dontpanic{opacity:1;transform:scale(1)}
.dp-frame{fill:none;stroke:var(--green);stroke-width:8;stroke-dasharray:1;stroke-dashoffset:1}
#intro.panic .dp-frame{animation:draw 1s .1s ease forwards}
.dp-text{font-family:var(--font);font-weight:900;font-size:96px;letter-spacing:4px;fill:var(--green)}
#intro.panic .dp-text{animation:dpp 1.1s ease-in-out infinite alternate}
@keyframes dpp{from{opacity:.85}to{opacity:1}}
#skip{font-family:var(--mono);color:#2a6;font-size:12px;letter-spacing:.2em;opacity:.6}

/* ---------- layout ---------- */
#screen{position:relative;z-index:2;max-width:1400px;margin:0 auto;padding:clamp(10px,2.2vw,28px) clamp(12px,3vw,40px) 30px;min-height:100vh;display:flex;flex-direction:column}
.hud{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;font-family:var(--mono);font-weight:400;font-size:clamp(10px,1.1vw,13px);letter-spacing:.14em;color:#3a9d55;border-bottom:1px solid rgba(61,255,90,.25);padding-bottom:8px}
.hud b{color:var(--green)}
.hud em{font-style:normal;color:var(--green)}
.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);margin-right:8px;vertical-align:1px;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}

.title{font-size:clamp(34px,6.4vw,84px);line-height:1;margin-top:clamp(14px,2.4vw,30px);letter-spacing:.03em;color:var(--cyan);
  text-shadow:0 0 6px rgba(44,180,255,.9),0 0 22px rgba(44,180,255,.55),0 0 48px rgba(44,180,255,.3)}
.title .t-glow{display:inline-block}
body.go .title .t-glow{animation:tin .9s steps(12) both}
@keyframes tin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.taxon{font-family:var(--mono);font-weight:400;color:#4f8fc9;letter-spacing:.18em;font-size:clamp(10px,1.2vw,14px);margin-top:8px}
.mh{color:var(--yel);text-shadow:0 0 8px rgba(255,232,26,.6)}

/* ---------- diagram ---------- */
.diagram{margin:clamp(8px,1.5vw,18px) 0 0}
#fish{width:100%;height:auto;display:block;overflow:visible}
#fish text{font-family:var(--font);font-weight:900;font-size:19px;letter-spacing:.6px;fill:var(--green)}
.stroke,.wire,.coil,.rays path,.pulses path,.co path,.wiggle,.repostripes path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.stroke.y{stroke:var(--yel);stroke-width:7}
.body{filter:url(#glow);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{0%,100%{stroke-width:7}50%{stroke-width:8.5}}
.wire.red{stroke:var(--red);stroke-width:6}
.wire.red.thin{stroke-width:4}
.wire.zig{stroke:var(--red);stroke-width:4}
.coil{stroke:#ff7a5c;stroke-width:4}
.org{stroke:none}
.org.repo{fill:var(--blue)}
.org.gland{fill:var(--red)}
.org.purple{fill:var(--pur)}
.org.towel{fill:var(--org)}
.org.hatch{fill:url(#hatch)}
.towelstripes line{stroke:#c76a00;stroke-width:4}
.repostripes path{stroke:#9cd2ff;stroke-width:3;opacity:.8}
.wiggle{stroke:#6b3fc8;stroke-width:3}
.dashes line{stroke:var(--yel);stroke-width:5;stroke-linecap:round}
.bulb{fill:var(--red);filter:url(#glowSoft)}
#pupil{fill:var(--yel);transition:transform .25s ease-out}
.glyph{font-size:30px!important;fill:#001a33!important;opacity:.55;text-anchor:middle}
.rays path{stroke:var(--red);stroke-width:3.5}
.pulses path{stroke:#ffd0c8;stroke-width:4;stroke-dasharray:.04 .96;opacity:0}
body.live .pulses path{opacity:1;animation:flow 2.4s linear infinite}
.pulses path:nth-child(2){animation-delay:-.5s!important}.pulses path:nth-child(3){animation-delay:-1.1s!important}
.pulses path:nth-child(4){animation-delay:-1.6s!important}.pulses path:nth-child(5){animation-delay:-2s!important}
@keyframes flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.node{fill:var(--red);filter:url(#glowSoft)}
.hit{fill:transparent}
.bubbles circle{fill:none;stroke:#7fd3ff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
body.live .bubbles circle{animation:bub 4s ease-in infinite}
.bubbles circle:nth-child(2){animation-delay:1.3s!important}.bubbles circle:nth-child(3){animation-delay:2.6s!important}
@keyframes bub{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.9}100%{opacity:0;transform:translate(-90px,-150px) scale(1.4)}}

/* callouts */
.co path{stroke:var(--green);stroke-width:2.2}
.co text{opacity:0}
.co.major path{stroke-width:3}
.c-cyan path{stroke:var(--cyan)} .c-cyan text{fill:var(--cyan)!important}
.c-yel path{stroke:var(--yel)} .c-yel text{fill:var(--yel)!important}
.c-mag path{stroke:var(--mag)} .c-mag text{fill:var(--mag)!important}
#fish .mtxt{font-size:24px}
#fish .stxt{font-size:50px}
#fish .mob{display:none}
.co.major{cursor:pointer}
.co.major text{filter:url(#glowSoft)}
.co.major:hover text,.co.major:focus text,.co.hot text{filter:url(#glow)}
.co.hot path{stroke-width:4}
.co.hot:not(.major) text{fill:#c9ffd2}
#fish a:focus{outline:none}
#fish a:focus-visible .mtxt{text-decoration:underline}
.lnk{cursor:pointer}
.lnk .org,.lnk .rays{transition:filter .2s}
.lnk:hover .org,.lnk.hot .org,.lnk:hover .rays,.lnk.hot .rays{filter:url(#glow) brightness(1.25)}
[data-k].hot .org{filter:brightness(1.3)}

/* ---- draw-in choreography (JS sets pathLength=1 + --d) ---- */
.draw{stroke-dasharray:1;stroke-dashoffset:1}
body.go .draw{animation:draw var(--dur,1.4s) var(--d,0s) cubic-bezier(.6,.05,.3,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fade{opacity:0}
body.go .fade{animation:fadein .6s var(--d,0s) ease forwards}
@keyframes fadein{to{opacity:1}}
body.go .co text{animation:lbl .5s var(--d,0s) steps(4) forwards}
@keyframes lbl{0%{opacity:0}50%{opacity:1}60%{opacity:.3}100%{opacity:1}}
body.live .co.major text{animation:mpulse 2.6s ease-in-out infinite;opacity:1}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.72}}

/* ---------- typed entry ---------- */
.entry{display:grid}
.entry>*{grid-area:1/1}
.ghost{visibility:hidden}
.entry{margin-top:clamp(6px,1.2vw,16px);font-size:clamp(17px,2.15vw,28px)}
.typed{color:var(--blue);line-height:1.35;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 6px rgba(58,141,255,.75),0 0 18px rgba(58,141,255,.35);max-width:62ch}
#tlast{color:#eaffe8;text-shadow:0 0 8px var(--green),0 0 16px var(--green)}
.cursor{display:inline-block;width:.6em;height:1em;background:var(--green);vertical-align:-.12em;margin-left:2px;box-shadow:0 0 10px var(--green);animation:blink .9s steps(1) infinite}

/* ---------- ports ---------- */
.ports{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,22px);margin-top:clamp(18px,2.6vw,34px)}
.port{--c:var(--yel);display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--c);padding:14px 18px;border:3px solid var(--c);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,0));position:relative;overflow:hidden;
  box-shadow:0 0 10px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 25%,transparent);
  transition:transform .2s,box-shadow .2s,background .2s}
.port::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 30%,transparent),transparent);transform:skewX(-20deg);transition:left .6s}
.port:hover::after,.port:focus-visible::after,.port.hot::after{left:120%}
.port:hover,.port:focus-visible,.port.hot{transform:translateY(-3px);box-shadow:0 0 22px var(--c),inset 0 0 22px color-mix(in srgb,var(--c) 35%,transparent);outline:none}
.port svg{width:46px;height:46px;flex:none;fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--c))}
.port .pl{display:flex;flex-direction:column;min-width:0}
.port b{font-size:clamp(18px,1.9vw,26px);letter-spacing:.08em;text-shadow:0 0 8px var(--c)}
.port small{font-family:var(--mono);font-weight:400;font-size:13px;opacity:.75;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.port .go{margin-left:auto;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.15em;opacity:.8;white-space:nowrap}
.p-yel{--c:var(--yel)} .p-cyan{--c:var(--cyan)} .p-mag{--c:var(--mag)}
.ports .port{opacity:0;transform:translateY(12px)}
body.go .ports .port{animation:portin .6s var(--d,0s) cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes portin{to{opacity:1;transform:none}}

.foot{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;color:#3a7d55}
.dp-mini{font-family:var(--font);font-weight:900;font-size:18px;color:var(--green);border:3px solid var(--green);border-radius:14px;padding:3px 12px;letter-spacing:.08em;box-shadow:0 0 10px rgba(61,255,90,.6);text-shadow:0 0 6px var(--green);animation:blink 2.4s steps(1) infinite}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .ports{grid-template-columns:1fr}
  #fish .minor{display:none}
  #fish .dsk{display:none}
  #fish .mob{display:inline}
  .hud-r{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .draw{stroke-dashoffset:0}.fade,.co text,.ports .port{opacity:1;transform:none}
  .scan{display:none}
}

/* ---------- sound toggle ---------- */
#sfx{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;background:rgba(0,0,0,.72);border:1.5px solid rgba(61,255,90,.55);border-radius:999px;color:var(--green);font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.18em;cursor:pointer;text-shadow:0 0 6px rgba(61,255,90,.6);box-shadow:0 0 10px rgba(61,255,90,.15);transition:border-color .2s,color .2s,box-shadow .2s}
#sfx[hidden]{display:none}
#sfx:hover,#sfx:focus-visible{border-color:var(--green);box-shadow:0 0 14px rgba(61,255,90,.4);outline:none}
#sfx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#sfx b{font-weight:400;color:var(--yel)}
#sfx .x{display:none}
#sfx.off{color:#2a6;border-color:rgba(61,255,90,.3)}
#sfx.off b{color:#2a6}
#sfx.off .w{display:none}
#sfx.off .x{display:inline}
.foot{padding-right:118px}
@media (max-width:760px){.foot{padding-right:0;padding-bottom:46px}}

/* mobile two-tap arm */
.port.armed{transform:translateY(-3px);box-shadow:0 0 26px var(--c),inset 0 0 24px color-mix(in srgb,var(--c) 40%,transparent)}
.port.armed .go{opacity:1;font-weight:700;letter-spacing:.12em;animation:armpulse 1.1s ease-in-out infinite}
.port.armed::after{left:120%}
@keyframes armpulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.co.major.armed path{stroke-width:4;filter:url(#glow)}
.co.major.armed text{filter:url(#glow);animation:armpulse 1.1s ease-in-out infinite}
.lnk.armed .org,.lnk.armed .rays{filter:url(#glow) brightness(1.35)}
a[data-armed-hint]::after{content:attr(data-armed-hint);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--green);text-shadow:0 0 6px rgba(61,255,90,.7)}
/* SVG <a> can't use ::after reliably; use title via JS instead — skip */
a.lnk[data-armed-hint]::after,a.co[data-armed-hint]::after{display:none}

#sfx .sfx-hint{font-size:9px;letter-spacing:.14em;opacity:.7;margin-left:2px}
#sfx.ios{padding-right:10px}