/* =========================================================================
   ABDUKT — neobrutalist alien lab. Shared stylesheet.
   palette: ink / pale-lab-mint / slime-green / beam-cyan / ray-violet / alert-magenta / sun-yellow
   ========================================================================= */

:root{
  --ink:#0A0A0F;
  --paper:#E9F6E2;        /* pale lab mint — the room */
  --paper2:#F4FBEF;
  --card:#FFFFFF;
  --slime:#A6FF00;        /* signature alien green */
  --beam:#2BE5FF;         /* abduction-beam cyan */
  --ray:#B14BFF;          /* UFO / UV violet */
  --alert:#FF3D7F;        /* hot magenta-red */
  --sun:#FFD400;          /* warning yellow */
  --muted:#5A6B62;

  --bd:4px solid var(--ink);
  --bd3:3px solid var(--ink);
  --sh:8px 8px 0 var(--ink);
  --sh-sm:5px 5px 0 var(--ink);
  --sh-lg:14px 14px 0 var(--ink);
  --r:16px;
  --r-lg:24px;

  --fd:"Archivo Black", system-ui, -apple-system, sans-serif;
  --fb:"Space Grotesk", system-ui, -apple-system, sans-serif;
  --fm:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fb);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.02;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
::selection{background:var(--slime);color:var(--ink)}

/* ---------- moving background ---------------------------------------------- */
#space{
  position:fixed; inset:0; z-index:-2; background:var(--paper);
  background-image:
    radial-gradient(var(--ink) 1.6px, transparent 1.7px),
    radial-gradient(var(--ink) 1.6px, transparent 1.7px);
  background-size:46px 46px, 46px 46px;
  background-position:0 0, 23px 23px;
  opacity:.10;
  animation:drift 26s linear infinite;
}
@keyframes drift{to{background-position:46px 46px, 69px 69px}}

#orbit{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.flo{position:absolute; opacity:.9; will-change:transform; animation:cross linear infinite}
.flo svg{filter:drop-shadow(4px 4px 0 rgba(10,10,15,.18))}
@keyframes cross{
  0%{transform:translate(-18vw,0) rotate(-4deg)}
  100%{transform:translate(120vw,0) rotate(4deg)}
}
@keyframes bobx{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- layout --------------------------------------------------------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px}
.sec{padding:72px 0}
.sec-tight{padding:46px 0}
.center{text-align:center}

.eyebrow{
  font-family:var(--fm); font-weight:700; font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--slime); padding:6px 12px; border-radius:999px;
}
.eyebrow.alt{color:var(--beam)}
.eyebrow.alt2{color:var(--sun)}

.h-xxl{font-size:clamp(2.6rem,8vw,6rem); text-transform:uppercase}
.h-xl{font-size:clamp(2rem,5vw,3.5rem); text-transform:uppercase}
.h-lg{font-size:clamp(1.5rem,3.4vw,2.4rem); text-transform:uppercase}
.lead{font-size:clamp(1.05rem,2vw,1.3rem); max-width:60ch}
.muted{color:var(--muted)}
.mono{font-family:var(--fm)}

.section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:36px; align-items:flex-start}
.section-head.mid{align-items:center; text-align:center}

/* ---------- buttons -------------------------------------------------------- */
.btn{
  --bg:var(--slime);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--fd); font-size:1rem; text-transform:uppercase; letter-spacing:.02em;
  text-decoration:none; color:var(--ink); background:var(--bg);
  border:var(--bd); border-radius:14px; padding:14px 22px;
  box-shadow:var(--sh); transition:transform .08s ease, box-shadow .08s ease;
  user-select:none;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:11px 11px 0 var(--ink)}
.btn:active{transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink)}
.btn.cyan{--bg:var(--beam)}
.btn.violet{--bg:var(--ray); color:#fff}
.btn.dark{--bg:var(--ink); color:var(--slime)}
.btn.sun{--bg:var(--sun)}
.btn.sm{font-size:.82rem; padding:10px 14px; border-width:3px; box-shadow:var(--sh-sm)}
.btn.ghost{background:var(--card)}
.btn:focus-visible{outline:3px solid var(--ray); outline-offset:3px}

/* ---------- CA chip -------------------------------------------------------- */
.ca{
  display:inline-flex; align-items:center; gap:0; border:var(--bd3); border-radius:12px;
  overflow:hidden; background:var(--card); box-shadow:var(--sh-sm); font-family:var(--fm);
}
.ca .lab{background:var(--ink); color:var(--sun); font-weight:700; padding:9px 11px; font-size:.74rem; letter-spacing:.1em}
.ca .val{padding:9px 12px; font-size:.84rem; font-weight:600; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ca button{
  border:0; border-left:var(--bd3); background:var(--slime); cursor:pointer;
  font-family:var(--fd); font-size:.72rem; padding:0 14px; align-self:stretch; text-transform:uppercase;
}
.ca button:hover{background:var(--beam)}
.ca button:active{background:var(--sun)}

/* ---------- nav ------------------------------------------------------------ */
header.nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:var(--bd)}
.nav-in{display:flex; align-items:center; gap:18px; padding:12px 22px; max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--fd); font-size:1.4rem; text-transform:uppercase}
.brand .glyph{width:38px; height:38px; border:var(--bd3); border-radius:10px; background:var(--slime); box-shadow:3px 3px 0 var(--ink); flex:0 0 auto}
.brand b{letter-spacing:-.02em}
.nav-links{display:flex; align-items:center; gap:6px; margin-left:auto}
.nav-links a{font-family:var(--fm); font-weight:600; font-size:.86rem; text-decoration:none; padding:8px 12px; border-radius:10px}
.nav-links a:hover{background:var(--ink); color:var(--slime)}
.nav-links a.live{display:inline-flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--alert);box-shadow:0 0 0 0 var(--alert);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,61,127,.6)}70%{box-shadow:0 0 0 8px rgba(255,61,127,0)}100%{box-shadow:0 0 0 0 rgba(255,61,127,0)}}
.burger{display:none; margin-left:auto; border:var(--bd3); background:var(--sun); border-radius:10px; width:42px; height:40px; cursor:pointer; box-shadow:3px 3px 0 var(--ink); font-size:1.2rem}
.nav-ca{flex:0 0 auto; box-shadow:3px 3px 0 var(--ink)}
.nav-ca .lab,.nav-ca .val{padding-top:7px; padding-bottom:7px}
.nav-ca .val{max-width:150px}
.nav-ca button{padding:0 11px}
@media (max-width:1000px){.nav-ca{display:none}}

/* ---------- marquee -------------------------------------------------------- */
.marquee{background:var(--ink); color:var(--slime); border-bottom:var(--bd); overflow:hidden; white-space:nowrap}
.marquee .track{display:inline-flex; gap:0; padding:9px 0; animation:scrollx 24s linear infinite; font-family:var(--fd); text-transform:uppercase; font-size:.92rem; letter-spacing:.04em}
.marquee .track span{padding:0 26px; position:relative}
.marquee .track span::before{content:"▲"; color:var(--alert); position:absolute; left:4px}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* ---------- hero ----------------------------------------------------------- */
.hero{position:relative; padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{margin:14px 0 18px}
.hero .tag{display:inline-block; transform:rotate(-2deg)}
.kbd-line{font-family:var(--fm); font-size:.9rem; display:flex; flex-wrap:wrap; gap:10px; margin:22px 0}
.kbd-line .pill{border:var(--bd3); border-radius:999px; padding:5px 12px; background:var(--card); box-shadow:var(--sh-sm)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:6px}
.countpill{display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-family:var(--fm); font-weight:600;
  background:var(--card); border:var(--bd3); border-radius:12px; padding:9px 14px; box-shadow:var(--sh-sm)}
.countpill b{font-family:var(--fd); font-size:1.05rem; letter-spacing:.04em}

/* hero alien stage */
.stage{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center}
.beam-fx{position:absolute; bottom:2%; left:50%; width:54%; height:78%; transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(166,255,0,0) 0%, rgba(43,229,255,.55) 70%, rgba(43,229,255,.85) 100%);
  clip-path:polygon(34% 0, 66% 0, 100% 100%, 0 100%); filter:blur(.4px); opacity:.9;
  animation:beamPulse 2.6s ease-in-out infinite; z-index:0}
@keyframes beamPulse{0%,100%{opacity:.55}50%{opacity:.95}}
.saucer{position:absolute; top:-4%; left:50%; transform:translateX(-50%); width:62%; z-index:2; animation:bobx 4s ease-in-out infinite}
.zorb-big{position:relative; width:64%; z-index:3; animation:bobx 3.4s ease-in-out .2s infinite; filter:drop-shadow(8px 10px 0 rgba(10,10,15,.18))}
.ufo-badge{position:absolute; z-index:4; font-family:var(--fm); font-weight:700; font-size:.7rem; text-transform:uppercase;
  background:var(--sun); border:var(--bd3); border-radius:999px; padding:5px 11px; box-shadow:var(--sh-sm)}

/* ---------- generic card --------------------------------------------------- */
.card{background:var(--card); border:var(--bd); border-radius:var(--r); box-shadow:var(--sh); padding:24px}
.card.tilt{transform:rotate(-1.2deg)}
.card.tilt2{transform:rotate(1.1deg)}
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* explainer band */
.band{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); border:var(--bd); box-shadow:var(--sh-lg); padding:34px 30px}
.band .slime{color:var(--slime)}
.band .beam{color:var(--beam)}

/* ---------- pipeline ------------------------------------------------------- */
.pipe{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{background:var(--card); border:var(--bd); border-radius:var(--r); box-shadow:var(--sh); padding:20px; position:relative}
.step .num{font-family:var(--fd); font-size:2.6rem; line-height:1; color:var(--ink); -webkit-text-stroke:0; opacity:.9}
.step .nm{font-family:var(--fd); text-transform:uppercase; margin:6px 0 8px; font-size:1.05rem}
.step .nm small{display:block; font-family:var(--fm); font-weight:600; font-size:.66rem; letter-spacing:.16em; color:var(--muted); margin-top:2px}
.step:nth-child(1){background:var(--slime)} .step:nth-child(2){background:var(--beam)}
.step:nth-child(3){background:var(--ray); color:#fff} .step:nth-child(3) .num{color:#fff}
.step:nth-child(4){background:var(--sun)}
.step .arrow{position:absolute; right:-15px; top:50%; transform:translateY(-50%); font-family:var(--fd); font-size:1.4rem; z-index:2}

/* ---------- crew ----------------------------------------------------------- */
.crew{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.crew-card{background:var(--card); border:var(--bd); border-radius:var(--r); box-shadow:var(--sh); padding:18px; text-align:center;
  transition:transform .12s ease, box-shadow .12s ease}
.crew-card:hover{transform:translate(-3px,-3px); box-shadow:var(--sh-lg)}
.crew-card .pic{height:150px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:8px}
.crew-card .pic img{height:100%; width:auto; animation:bobx 5s ease-in-out infinite}
.crew-card:nth-child(2) .pic img{animation-delay:.6s}
.crew-card:nth-child(3) .pic img{animation-delay:1.2s}
.crew-card:nth-child(4) .pic img{animation-delay:.3s}
.crew-card:nth-child(5) .pic img{animation-delay:.9s}
.crew-card:nth-child(6) .pic img{animation-delay:1.5s}
.crew-card h3{font-size:1.25rem; text-transform:uppercase}
.crew-card .role{font-family:var(--fm); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  display:inline-block; padding:3px 9px; border-radius:999px; border:var(--bd3); margin:6px 0 10px}
.crew-card .role.s{background:var(--slime)} .crew-card .role.c{background:var(--beam)}
.crew-card .role.v{background:var(--ray); color:#fff} .crew-card .role.m{background:var(--alert); color:#fff}
.crew-card .role.y{background:var(--sun)} .crew-card .quote{font-size:.92rem; color:var(--ink)}
.crew-card .quote::before{content:"\201C"} .crew-card .quote::after{content:"\201D"}

/* ---------- instruments ---------------------------------------------------- */
.inst{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.inst-card{border:var(--bd); border-radius:var(--r); box-shadow:var(--sh); padding:24px; position:relative; overflow:hidden}
.inst-card.bioscan{background:var(--beam)}
.inst-card.mindprobe{background:var(--ray); color:#fff}
.inst-card.threatnet{background:var(--alert); color:#fff}
.inst-card h3{font-size:1.5rem; text-transform:uppercase; margin-bottom:6px}
.inst-card .tagm{font-family:var(--fm); font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.inst-card .mini{position:absolute; right:-10px; bottom:-14px; width:120px; opacity:.95}
.inst-card p{max-width:24ch}

/* ---------- anomaly meter -------------------------------------------------- */
.meter-wrap{background:var(--card); border:var(--bd); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:28px}
.meter{position:relative; height:38px; border:var(--bd3); border-radius:999px; overflow:hidden; display:flex; box-shadow:inset 0 0 0 0 var(--ink)}
.meter .seg{flex:1; display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; border-right:3px solid var(--ink)}
.meter .seg:last-child{border-right:0}
.seg.s0{background:var(--beam)} .seg.s1{background:var(--sun)} .seg.s2{background:var(--ray); color:#fff} .seg.s3{background:var(--alert); color:#fff}
.needle{position:absolute; top:-10px; width:0; height:58px; border-left:5px solid var(--ink); transform:translateX(-2.5px); transition:left .35s cubic-bezier(.2,.8,.2,1); z-index:3}
.needle::after{content:""; position:absolute; top:-12px; left:-11px; width:18px; height:18px; background:var(--ink); border-radius:4px; transform:rotate(45deg)}
.meter-read{display:flex; align-items:baseline; gap:14px; margin-top:18px; flex-wrap:wrap}
.meter-read .score{font-family:var(--fd); font-size:3rem; line-height:1}
.stamp{font-family:var(--fd); text-transform:uppercase; font-size:1.1rem; padding:6px 14px; border:var(--bd3); border-radius:10px; box-shadow:var(--sh-sm); transform:rotate(-3deg)}
.stamp[data-v="HARMLESS"]{background:var(--beam)} .stamp[data-v="CURIOUS"]{background:var(--sun)}
.stamp[data-v="ANOMALY"]{background:var(--ray); color:#fff} .stamp[data-v="ABDUCT"]{background:var(--alert); color:#fff}
.slider{width:100%; margin-top:20px; appearance:none; height:14px; border:var(--bd3); border-radius:999px; background:var(--paper2); box-shadow:var(--sh-sm)}
.slider::-webkit-slider-thumb{appearance:none; width:30px; height:30px; border:var(--bd3); border-radius:8px; background:var(--slime); box-shadow:3px 3px 0 var(--ink); cursor:pointer}
.slider::-moz-range-thumb{width:30px; height:30px; border:var(--bd3); border-radius:8px; background:var(--slime); box-shadow:3px 3px 0 var(--ink); cursor:pointer}

/* ---------- field report (signature) -------------------------------------- */
.report{background:#fcfdf7; border:var(--bd); border-radius:8px; box-shadow:var(--sh-lg); font-family:var(--fm); position:relative; overflow:hidden}
.report::before, .report::after{content:""; position:absolute; left:0; right:0; height:12px;
  background:radial-gradient(circle at 8px 12px, transparent 0 6px, var(--paper) 6px 7px); background-size:16px 12px}
.report::before{top:-1px; transform:scaleY(-1)} .report::after{bottom:-1px}
.report .rhead{background:var(--ink); color:var(--slime); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.report .rhead .t{font-family:var(--fd); letter-spacing:.04em; text-transform:uppercase; font-size:.95rem}
.report .rhead .meta{font-size:.7rem; color:var(--beam)}
.report .rbody{padding:22px 24px 26px; font-size:.92rem}
.report .row{padding:10px 0; border-bottom:1px dashed #c9d2c3}
.report .row:last-child{border-bottom:0}
.report .k{font-weight:700; text-transform:uppercase; font-size:.68rem; letter-spacing:.14em; color:var(--muted); display:block; margin-bottom:3px}
.report .obs{margin:4px 0; padding-left:18px; position:relative}
.report .obs::before{content:"›"; position:absolute; left:2px; color:var(--alert); font-weight:700}
.report .close{background:var(--slime); border:var(--bd3); border-radius:8px; padding:12px 14px; margin-top:14px; font-weight:600}
.report .footer-line{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:16px; font-size:.7rem; color:var(--muted)}

/* ---------- token ---------------------------------------------------------- */
.token{background:var(--ink); color:var(--paper); border-radius:var(--r-lg); border:var(--bd); box-shadow:var(--sh-lg); padding:38px 32px}
.token .h-xl{color:#fff}
.tok-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:26px 0}
.tok{background:var(--paper); color:var(--ink); border:var(--bd3); border-radius:14px; padding:16px; text-align:center; box-shadow:5px 5px 0 #000}
.tok .v{font-family:var(--fd); font-size:1.5rem; line-height:1.1}
.tok .l{font-family:var(--fm); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.tok:nth-child(1){background:var(--slime)} .tok:nth-child(2){background:var(--beam)}
.tok:nth-child(3){background:var(--sun)} .tok:nth-child(4){background:var(--ray); color:#fff}
.tok:nth-child(4) .l{color:rgba(255,255,255,.8)}
.count-big{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.count-big .unit{background:var(--paper); color:var(--ink); border:var(--bd3); border-radius:12px; min-width:74px; text-align:center; padding:10px 8px; box-shadow:5px 5px 0 #000}
.count-big .unit b{font-family:var(--fd); font-size:1.8rem; display:block; line-height:1}
.count-big .unit span{font-family:var(--fm); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---------- faq ------------------------------------------------------------ */
.faq details{background:var(--card); border:var(--bd); border-radius:14px; box-shadow:var(--sh-sm); padding:16px 20px; margin-bottom:14px}
.faq summary{font-family:var(--fd); text-transform:uppercase; cursor:pointer; font-size:1rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; font-size:1.3rem}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:12px 0 0}

/* ---------- footer --------------------------------------------------------- */
footer.foot{background:var(--ink); color:var(--paper); border-top:var(--bd); margin-top:20px}
.foot-in{max-width:var(--wrap); margin:0 auto; padding:46px 22px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
.foot a{color:var(--slime); text-decoration:none; display:block; padding:4px 0; font-family:var(--fm); font-size:.9rem}
.foot a:hover{color:var(--beam)}
.foot h4{color:#fff; text-transform:uppercase; font-size:.9rem; letter-spacing:.1em; margin-bottom:8px; font-family:var(--fm); font-weight:700}
.foot .big{font-family:var(--fd); font-size:1.8rem; text-transform:uppercase; color:#fff}
.foot .disc{font-size:.78rem; color:#9fb39a; margin-top:14px; max-width:42ch}
.foot-bottom{border-top:1px solid #2a2f28; padding:16px 22px; text-align:center; font-family:var(--fm); font-size:.76rem; color:#8fa389}

/* ---------- docs layout ---------------------------------------------------- */
.docs{display:grid; grid-template-columns:248px 1fr; gap:40px; align-items:start}
.toc{position:sticky; top:90px; background:var(--card); border:var(--bd); border-radius:var(--r); box-shadow:var(--sh); padding:18px}
.toc h4{font-family:var(--fm); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.toc a{display:block; text-decoration:none; font-family:var(--fm); font-size:.86rem; padding:7px 10px; border-radius:8px; font-weight:600}
.toc a:hover, .toc a.on{background:var(--ink); color:var(--slime)}
.doc-body h2{margin:8px 0 14px}
.doc-body h3{margin:30px 0 10px; font-size:1.3rem; text-transform:uppercase}
.doc-body section{scroll-margin-top:90px; margin-bottom:42px}
.doc-body .card{margin:16px 0}
.kvtable{width:100%; border-collapse:separate; border-spacing:0; border:var(--bd); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); margin:16px 0; font-size:.9rem}
.kvtable th{background:var(--ink); color:var(--slime); text-align:left; padding:11px 14px; font-family:var(--fm); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase}
.kvtable td{padding:11px 14px; border-top:3px solid var(--ink); background:var(--card); vertical-align:top}
.kvtable td.mono{font-family:var(--fm); font-size:.84rem}
.codeblock{background:var(--ink); color:#e7ffd6; border:var(--bd); border-radius:14px; box-shadow:var(--sh); padding:18px 20px; font-family:var(--fm); font-size:.84rem; overflow:auto; margin:16px 0}
.codeblock .c{color:var(--ray)} .codeblock .s{color:var(--sun)} .codeblock .g{color:var(--beam)}
.callout{border:var(--bd); border-left-width:12px; border-radius:14px; background:var(--card); box-shadow:var(--sh-sm); padding:16px 18px; margin:16px 0}
.callout.rule{border-left-color:var(--alert)} .callout.tip{border-left-color:var(--beam)} .callout.note{border-left-color:var(--ray)}
.callout b{font-family:var(--fd); text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; display:block; margin-bottom:6px}

/* ---------- playground ----------------------------------------------------- */
.lab{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.panel{background:var(--card); border:var(--bd); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:26px}
.panel h2{font-size:1.4rem; text-transform:uppercase; margin-bottom:4px}
.field-label{font-family:var(--fm); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:18px 0 8px; display:block}
.beamin{width:100%; min-height:120px; resize:vertical; border:var(--bd3); border-radius:14px; padding:14px; font-family:var(--fb); font-size:1rem; background:var(--paper2); box-shadow:inset 3px 3px 0 rgba(10,10,15,.06)}
.beamin:focus{outline:3px solid var(--ray); outline-offset:2px}
.choices{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.choice{cursor:pointer; border:var(--bd3); border-radius:14px; background:var(--card); box-shadow:var(--sh-sm); padding:14px 10px; text-align:center; transition:transform .08s ease, box-shadow .08s ease}
.choice:hover{transform:translate(-2px,-2px)}
.choice .ic{height:54px; margin:0 auto 6px}
.choice .nm{font-family:var(--fd); text-transform:uppercase; font-size:.92rem}
.choice .ds{font-family:var(--fm); font-size:.64rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.choice[aria-pressed="true"]{background:var(--slime); box-shadow:6px 6px 0 var(--ink); transform:translate(-2px,-2px)}
.choice[data-v="MINDPROBE"][aria-pressed="true"]{background:var(--ray); color:#fff}
.choice[data-v="THREATNET"][aria-pressed="true"]{background:var(--alert); color:#fff}
.choice[data-v="BIOSCAN"][aria-pressed="true"]{background:var(--beam)}
.run-row{display:flex; align-items:center; gap:14px; margin-top:20px; flex-wrap:wrap}
.quota{font-family:var(--fm); font-size:.78rem; color:var(--muted)}
.simbadge{font-family:var(--fm); font-weight:700; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; background:var(--sun); border:var(--bd3); border-radius:999px; padding:4px 10px; box-shadow:3px 3px 0 var(--ink)}
.out-empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:30px 10px; color:var(--muted)}
.out-empty img{width:120px; animation:bobx 4s ease-in-out infinite}
.thinking{font-family:var(--fm); font-size:.86rem}
.thinking .blip{display:inline-block; overflow:hidden; vertical-align:bottom; width:1.4em; animation:dots 1.3s steps(4,end) infinite}
@keyframes dots{0%{width:0}100%{width:1.4em}}
.examples{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.examples button{font-family:var(--fm); font-size:.74rem; border:var(--bd3); background:var(--paper2); border-radius:999px; padding:5px 11px; cursor:pointer; box-shadow:3px 3px 0 var(--ink)}
.examples button:hover{background:var(--sun)}

/* ---------- bits ----------------------------------------------------------- */
.tape{display:inline-block; background:var(--sun); border:var(--bd3); padding:3px 12px; font-family:var(--fm); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-2deg); box-shadow:var(--sh-sm)}
.hr-chunk{height:6px; background:var(--ink); border-radius:6px; margin:34px 0}
.grid-2-1{display:grid; grid-template-columns:1.3fr .7fr; gap:26px; align-items:center}

/* ---------- responsive ----------------------------------------------------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:24px}
  .stage{max-width:420px; margin:0 auto}
  .pipe{grid-template-columns:repeat(2,1fr)} .step .arrow{display:none}
  .crew,.inst,.g3,.g4{grid-template-columns:repeat(2,1fr)}
  .tok-grid{grid-template-columns:repeat(2,1fr)}
  .docs{grid-template-columns:1fr} .toc{position:static}
  .lab{grid-template-columns:1fr}
  .grid-2-1{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .sec{padding:52px 0}
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; background:var(--paper); border-bottom:var(--bd); padding:12px 22px; gap:4px}
  .nav-links.open a{padding:12px}
  .burger{display:block}
  .crew,.inst,.g2,.g3,.g4,.choices{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .tok-grid{grid-template-columns:1fr 1fr}
  .foot-in{grid-template-columns:1fr}
  .ca .val{max-width:54vw}
  .h-xxl{font-size:clamp(2.2rem,12vw,3rem)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto}
  .btn{transition:none}
}