/* FLYBRAIN project pages: the house style of the apps, built like 1985 console hardware.
   Grey plastic case, silkscreened module labels, dark recessed screens for live data, red keys. */
:root{
  --case:#cbc7be; --case-hi:#d9d6ce; --case-lo:#a7a399; --edge:#8c887f; --slab:#252528;
  --ink:#2a2925; --dim:#57534c; --nes:#c41f29; --led:#ff3b2f;
  --panel:#151619; --line:#2b2c30; --text:#ebe5d7; --muted:#a39d90;
  --amber:#ffb23e; --cyan:#3ed8ff; --green:#6cf08a; --pink:#ff5ad2; --bad:#ff6b5e;
  --label:"Silkscreen",ui-monospace,monospace; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif; --display:"Archivo","IBM Plex Sans",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --case:#2b2a28; --case-hi:#353431; --case-lo:#1f1e1c; --edge:#151514;
    --ink:#ece7dc; --dim:#b3ad9f; --slab:#111113; color-scheme:dark; }
}
:root[data-theme="dark"]{ --case:#2b2a28; --case-hi:#353431; --case-lo:#1f1e1c; --edge:#151514;
  --ink:#ece7dc; --dim:#b3ad9f; --slab:#111113; color-scheme:dark; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:var(--case);color:var(--ink);font:17px/1.6 var(--sans);
  background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1.3px);background-size:4px 4px}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--nes);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}

/* deck */
.deck{position:sticky;top:0;z-index:10;background:var(--case);border-bottom:1px solid var(--edge)}
.deck .wrap{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.logo{text-decoration:none;color:var(--nes);font:italic 900 26px/0.9 var(--display);font-stretch:125%;white-space:nowrap}
.logo small{display:block;margin-top:4px;font:400 9px var(--label);font-style:normal;letter-spacing:.14em;color:var(--dim)}
.keys{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.key{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 7px;border-radius:3px;text-decoration:none;
  font:400 10px var(--label);letter-spacing:.12em;color:#d6d1c6;background:#252528;box-shadow:0 2px 0 #000,inset 0 1px 0 rgba(255,255,255,.09);text-transform:uppercase}
.key i{width:6px;height:6px;border-radius:50%;background:#401c1a}
.key.red{background:var(--nes);color:#fff}
.key.red i{background:#ffd0cc;box-shadow:0 0 6px #fff}
.key:hover{color:#fff}
.ribs{height:12px;border-top:1px solid #0b0b0c;border-bottom:1px solid var(--edge);
  background:repeating-linear-gradient(180deg,#2c2c30 0 2px,#161618 2px 4px)}

/* hero */
.hero{padding:48px 0 30px}
.eyebrow{font:400 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px}
.eyebrow b{font-weight:400;background:var(--nes);color:#fff;padding:3px 7px 2px;border-radius:2px}
h1{font:italic 900 clamp(38px,6.4vw,76px)/1.0 var(--display);letter-spacing:-.01em;margin:14px 0 18px;text-wrap:balance}
h1 em{font-style:inherit;color:var(--nes)}
.lede{font-size:clamp(18px,2.1vw,22px);color:var(--dim);max-width:820px;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px 12px;border-radius:4px;text-decoration:none;
  font:400 12px var(--label);letter-spacing:.12em;text-transform:uppercase;background:#252528;color:#ebe5d7;box-shadow:0 3px 0 #000}
.btn.red{background:var(--nes);color:#fff;box-shadow:0 3px 0 #6d0f16}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.tv{background:#252528;padding:12px;border-radius:8px;box-shadow:0 0 0 2px #000,0 2px 0 3px rgba(255,255,255,.45),0 22px 44px rgba(0,0,0,.28)}
.tv video,.tv img{border-radius:4px;width:100%;background:#000}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}
.stat{background:var(--panel);color:var(--text);border-radius:4px;padding:14px 16px;border:1px solid #0b0b0d;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.5)}
.stat b{display:block;font:600 clamp(22px,3vw,32px)/1.1 var(--mono);color:var(--amber);font-variant-numeric:tabular-nums}
.stat span{font:400 13px/1.35 var(--sans);color:var(--muted)}

/* modules */
section{padding:46px 0 10px}
.mod{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:400 12px var(--label);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.mod b{font-weight:400;background:var(--nes);color:#fff;padding:3px 6px 2px;border-radius:2px}
h2{font:italic 900 clamp(28px,4vw,44px)/1.05 var(--display);margin:6px 0 14px;text-wrap:balance}
h3{font:600 20px/1.3 var(--sans);margin:0 0 6px}
p{margin:0 0 14px}
.muted{color:var(--dim)}
.plate{background:var(--case-hi);border:1px solid var(--case-lo);border-radius:5px;padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.12)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:26px;align-items:center}
.shot{border-radius:4px;border:1px solid #0b0b0d;box-shadow:0 8px 20px rgba(0,0,0,.18);margin-bottom:12px;width:100%}
figure{margin:0}
figcaption{font-size:15px;color:var(--dim)}

/* the pipeline */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.node{flex:1 1 150px;background:var(--panel);color:var(--text);border-radius:4px;padding:12px 14px;border:1px solid #0b0b0d;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.node .n{font:400 10px var(--label);letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.node b{display:block;font:600 16px/1.3 var(--mono);margin:4px 0}
.node span{font-size:13.5px;line-height:1.4;color:#c9c3b6;display:block}
.node.ours{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.node.fly{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.arrow{align-self:center;font:600 22px var(--mono);color:var(--dim)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--dim);margin-top:12px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* bars */
.bars{background:var(--panel);color:var(--text);border-radius:5px;padding:18px 20px;border:1px solid #0b0b0d;box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.bars h3{font:400 11px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.row{display:grid;grid-template-columns:150px 1fr 64px;gap:10px;align-items:center;margin:8px 0;font:14px var(--mono)}
.row .track{height:16px;background:#0d0e10;border-radius:2px;overflow:hidden}
.row .fill{height:100%;-webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px);mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px)}
.row b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.bars .note{font-size:13px;color:var(--muted);margin:12px 0 0;font-family:var(--sans)}

/* checks table */
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--case-lo);vertical-align:top}
th{font:400 10.5px var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ok,.no,.mid{font:600 12px var(--mono);padding:2px 7px;border-radius:2px;white-space:nowrap}
.ok{background:#1e3a26;color:var(--green)} .no{background:#3d1d1b;color:var(--bad)} .mid{background:#3b2f15;color:var(--amber)}
.tablewrap{overflow-x:auto}

/* code */
pre{background:var(--panel);color:var(--text);padding:16px 18px;border-radius:5px;overflow-x:auto;font:14px/1.6 var(--mono);
  border:1px solid #0b0b0d;box-shadow:inset 0 2px 4px rgba(0,0,0,.8);margin:0}
pre .c{color:var(--muted)}
code{font:0.92em var(--mono);background:rgba(0,0,0,.08);padding:1px 4px;border-radius:2px}
.codebox{position:relative}
.copy{position:absolute;top:10px;right:10px;font:400 10px var(--label);letter-spacing:.1em;background:#2c2c30;color:#ebe5d7;border:0;border-radius:3px;padding:6px 9px;cursor:pointer}

/* honest list */
.honest li{margin:0 0 10px}
.callout{border-left:4px solid var(--nes);padding:12px 16px;background:var(--case-hi);border-radius:0 4px 4px 0}

footer{margin-top:60px;padding:28px 0 40px;border-top:1px solid var(--edge);font-size:14px;color:var(--dim)}
footer a{color:var(--ink)}
.sister{display:flex;gap:18px;align-items:center;text-decoration:none;background:var(--panel);color:var(--text);border-radius:6px;padding:14px;
  border:1px solid #0b0b0d;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.sister img{width:220px;border-radius:3px;flex:none}
.sister b{font:italic 900 26px var(--display);color:#ff6a5e}
.sister span{display:block;color:#c9c3b6;font-size:15px}

@media (max-width:860px){
  .grid2,.grid3,.split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:110px 1fr 54px;font-size:13px}
  .arrow{display:none}
  .sister{flex-direction:column;align-items:flex-start}
  .sister img{width:100%}
  .keys{margin-left:0}
  .deck{position:static}
}