/* Q9BOT engine terminal */
:root{
  --bg:#050505; --panel:#0d0708; --red:#FF1744; --red-dark:#B00020; --red-deep:#330000; --glow:#FF6680;
  --track:#1a0000; --text:#E0E0E0; --muted:#7a4a52; --blue:#00B0FF; --warn:#FF9100; --ok:#7CFFB0;
  --bright-red:#FF0033; --soft:#cdbcc0; --line:#160a0c; --line2:#2a0c12;
  --mono:"Share Tech Mono",ui-monospace,Consolas,monospace;
  --sans:"Figtree","Segoe UI",system-ui,sans-serif;
  --navh:50px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}

/* ================= BOOT LOADER ================= */
#boot{position:fixed;inset:0;z-index:10000;cursor:pointer;
  background:#050505 radial-gradient(ellipse 120% 85% at 50% 16%,#0a0103 0%,#070103 46%,#050505 78%);
  transition:opacity .6s ease,filter .6s ease}
#boot.out{opacity:0;filter:blur(6px);pointer-events:none}
#bootMx{position:absolute;inset:0;width:100%;height:100%}
.boot-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;perspective:1000px;z-index:2;font-family:'Courier New',monospace}
.boot-dna{position:relative;width:100px;height:250px;transform-style:preserve-3d;animation:spin 10s linear infinite}
.boot-dna .rung{position:absolute;left:0;top:50%;width:100%;height:2px;background:rgba(255,50,50,.45);transform-style:preserve-3d}
.boot-dna .rung.light{background:rgba(255,120,120,.25)}
.boot-dna .dot{position:absolute;width:14px;height:14px;border-radius:50%;background:#ff1744;box-shadow:0 0 20px #ff1744,0 0 6px #ff1744;top:-6px}
.boot-dna .dot.l{left:-7px}.boot-dna .dot.r{right:-7px}
@keyframes spin{to{transform:rotateY(360deg)}}
.boot-title{color:#ff1744;font-size:24px;font-weight:900;letter-spacing:4px;text-shadow:0 0 20px #f00;margin:-10px 0 6px;background:rgba(0,0,0,.6);padding:5px 15px;border-radius:4px;backdrop-filter:blur(2px)}
.boot-bar{width:300px;max-width:80vw;height:4px;background:rgba(40,0,0,.5);border:1px solid #4d0000;overflow:hidden;box-shadow:0 0 15px rgba(255,0,0,.3)}
.boot-bar i{display:block;height:100%;width:0;background:#ff1744;box-shadow:0 0 20px #ff1744}
.boot-msg{color:#ff8888;margin-top:15px;font-size:12px;text-transform:uppercase;letter-spacing:1px;min-height:20px;text-shadow:0 0 5px rgba(255,0,0,.5);background:rgba(0,0,0,.6);padding:2px 5px}

/* ================= BACKGROUND ================= */
#bgfx{position:fixed;inset:0;z-index:0}
#fx{position:absolute;inset:0;width:100%;height:100%}
#cyber{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#cyber .mx{position:absolute;top:-20%;width:1px;opacity:0;animation:mxFall linear infinite;
  background:linear-gradient(to bottom,rgba(255,23,68,0),rgba(255,23,68,.12),rgba(255,23,68,.25),rgba(255,23,68,.12),rgba(255,23,68,0))}
@keyframes mxFall{0%{transform:translateY(-100px);opacity:0}5%{opacity:.5}95%{opacity:.5}100%{transform:translateY(120vh);opacity:0}}
#cyber .hex{position:absolute;font-family:var(--mono);font-size:9px;letter-spacing:2px;color:rgba(255,23,68,.2);opacity:0;animation:hexFade 10s ease-in-out infinite}
@keyframes hexFade{0%,100%{opacity:0}40%,60%{opacity:1}}
#cyber .strip{position:absolute;left:0;width:200%;font-family:var(--mono);font-size:10px;letter-spacing:6px;white-space:nowrap;animation:seqScroll linear infinite;opacity:.7}
#cyber .strip.s0{bottom:10%;animation-duration:40s;font-size:11px;letter-spacing:8px}
#cyber .strip.s1{bottom:32%;animation-duration:55s;animation-direction:reverse}
#cyber .strip.s2{top:24%;animation-duration:70s;font-size:9px}
#cyber .strip.s3{top:6%;animation-duration:90s;animation-direction:reverse;font-size:9px;opacity:.5}
#cyber .bA{color:rgba(255,23,68,.22)}#cyber .bT{color:rgba(255,80,80,.18)}#cyber .bC{color:rgba(200,20,60,.2)}#cyber .bG{color:rgba(255,50,50,.16)}
@keyframes seqScroll{to{transform:translateX(-50%)}}
/* logo watermark that glitches in now and then */
#wm{position:fixed;top:12%;left:-12%;width:96vh;height:96vh;z-index:0;pointer-events:none;opacity:0;
  background:url(logo.svg) center/contain no-repeat;animation:wmGlitch 14s infinite}
@keyframes wmGlitch{0%,100%{opacity:0;transform:none}
  46%{opacity:0}47%{opacity:.05;transform:translate(-6px,2px)}48%{opacity:.02;transform:translate(4px,-2px) skewX(4deg)}
  49%{opacity:.06;transform:none}50%{opacity:.035}90%{opacity:.035}92%{opacity:0}}
/* CRT scanlines + page flicker */
#scan{position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px)}
#flicker{position:fixed;inset:0;z-index:9998;pointer-events:none;background:rgba(255,23,68,.015);opacity:0;animation:pageFlicker 6s infinite}
@keyframes pageFlicker{0%,100%{opacity:0}3%{opacity:1}4%{opacity:0}50%{opacity:0}51%{opacity:.5}52%{opacity:0}}

/* ================= USER TERMINAL BAR ================= */
.tnav{position:fixed;top:0;left:0;right:0;height:var(--navh);z-index:700;display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  background:rgba(5,0,0,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--red-deep)}
.tnav-l,.tnav-r{display:flex;align-items:center;gap:14px;min-width:0}
.tnav-logo{height:28px;filter:drop-shadow(0 0 8px rgba(255,23,68,.45))}
body.booted .tnav-logo{animation:glitchIn .8s ease-out both}
@keyframes glitchIn{0%{opacity:0;transform:scale(.95);filter:blur(8px);clip-path:inset(40% 0 40% 0)}
  10%{opacity:.6;transform:translate(-3px,2px);filter:blur(4px);clip-path:inset(20% 0 30% 0)}
  20%{opacity:.3;transform:translate(3px,-2px);clip-path:inset(60% 0 10% 0)}
  35%{opacity:.9;transform:translate(-1px,1px);filter:blur(1px);clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:none;filter:drop-shadow(0 0 8px rgba(255,23,68,.45));clip-path:inset(0 0 0 0)}}
.tnav-wm{font-family:var(--mono);color:var(--red);letter-spacing:4px;font-size:15px}.tnav-wm span{color:var(--red-deep)}
.tnav-tag{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--muted);white-space:nowrap}
.uchip{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--soft);white-space:nowrap}
.uchip .udot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.35}}
.uchip b{font-weight:400;color:#000;background:var(--red);padding:2px 7px;border-radius:3px;letter-spacing:2px;font-size:9px}
.demo-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:2px;color:var(--warn);border:1px dashed rgba(255,145,0,.45);padding:3px 7px;border-radius:3px;white-space:nowrap}
.tbtn{position:relative;overflow:hidden;border:1px solid rgba(255,23,68,.45);color:var(--red);font-family:var(--mono);font-size:11px;font-weight:bold;letter-spacing:3px;padding:8px 18px;white-space:nowrap;flex-shrink:0;transition:all .25s}
.tbtn::before{content:'';position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,23,68,.12),transparent);transition:left .5s}
.tbtn:hover{border-color:var(--red);background:rgba(255,23,68,.08);box-shadow:0 0 25px rgba(255,23,68,.2),inset 0 0 25px rgba(255,23,68,.05);text-shadow:0 0 10px rgba(255,23,68,.8)}
.tbtn:hover::before{left:100%}
.tbtn:active{background:var(--red);color:#000}
.tbtn .bk{color:rgba(255,45,85,.75)}

/* ================= STAGE ================= */
#stage{position:fixed;left:0;right:0;top:var(--navh);bottom:0;z-index:2;pointer-events:none}
.scene{position:absolute;inset:0;visibility:hidden}
.scene.on{visibility:visible}
.scene.live{pointer-events:auto}
.wrap3d{position:absolute;inset:12px 40px 12px 18px;display:flex;flex-direction:column;gap:11px;perspective:1500px}
#track{position:relative;z-index:1;width:1px}

/* app bar inside every scene */
.appbar{display:flex;align-items:center;justify-content:space-between;flex:none;padding:2px 2px 0;will-change:transform,opacity}
.abrand{display:flex;align-items:center;gap:12px}
.alogo{height:26px;flex:none;filter:drop-shadow(0 0 10px rgba(255,23,68,.55))}
.awm{font-size:17px;font-weight:800;letter-spacing:7px;color:#fff;text-shadow:0 0 14px rgba(255,23,68,.6)}
.awm span{color:var(--red)}
.asub{font-family:var(--mono);font-size:8.5px;letter-spacing:5px;color:var(--muted)}
.apills{display:flex;gap:8px;font-family:var(--mono)}
.apill{font-size:10px;letter-spacing:2px;color:var(--muted);border:1px solid var(--red-deep);border-radius:16px;padding:6px 12px;white-space:nowrap;transition:all .2s}
.apill:hover{color:#fff;border-color:rgba(255,23,68,.6)}
.apill.on{color:#fff;border-color:var(--red);background:rgba(255,23,68,.12);text-shadow:0 0 8px rgba(255,23,68,.5)}

/* shared panel chrome */
.panel{position:relative;background:linear-gradient(180deg,var(--panel),#070304);border:1px solid var(--red-deep);border-radius:7px;padding:11px 13px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 40px rgba(255,23,68,.022);min-height:0;min-width:0;display:flex;flex-direction:column;will-change:transform,opacity}
.panel::before,.panel::after{content:"";position:absolute;width:11px;height:11px;border:2px solid var(--red);opacity:.5;pointer-events:none}
.panel::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.panel::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
.panel.flash{animation:pflash .9s cubic-bezier(.4,0,.2,1)}
@keyframes pflash{35%{box-shadow:0 0 24px rgba(255,23,68,.5),inset 0 0 60px rgba(255,23,68,.12)}}
.panel h2{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:4px;color:var(--red);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.panel h2 .tagr{font-size:8px;color:var(--muted);letter-spacing:2px;font-weight:400;overflow:hidden;text-overflow:ellipsis}
.panel h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--red-deep),transparent)}
.grow{flex:1;min-height:0}
.canvwrap{flex:1;position:relative;min-height:0}.canvwrap canvas{position:absolute;inset:0;width:100%;height:100%}

/* ===== SCENE 0: COMMAND DECK ===== */
.hmain{flex:1;min-height:0;display:grid;gap:11px;
  grid-template-columns:minmax(0,1fr) minmax(400px,1.32fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"vault core port" "camp core equity" "genome core feed"}
.a-vault{grid-area:vault}.a-camp{grid-area:camp}.a-equity{grid-area:equity}.a-genome{grid-area:genome}.a-port{grid-area:port}.a-feed{grid-area:feed}
.core{grid-area:core;position:relative;display:flex;flex-direction:column;border-radius:12px;min-height:0;overflow:hidden;padding:13px 15px;will-change:transform,opacity;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,23,68,.07),rgba(10,4,5,.5) 60%,#060304);border:1px solid rgba(255,23,68,.35);
  box-shadow:0 0 0 1px rgba(255,23,68,.18),inset 0 0 90px rgba(255,23,68,.06),0 0 50px rgba(255,23,68,.14)}
.core .br{position:absolute;width:26px;height:26px;border:2px solid var(--red);opacity:.85;filter:drop-shadow(0 0 4px var(--red))}
.core .br.tl{top:-1px;left:-1px;border-right:none;border-bottom:none;border-top-left-radius:12px}
.core .br.tr{top:-1px;right:-1px;border-left:none;border-bottom:none;border-top-right-radius:12px}
.core .br.bl{bottom:-1px;left:-1px;border-right:none;border-top:none;border-bottom-left-radius:12px}
.core .br.br2{bottom:-1px;right:-1px;border-left:none;border-top:none;border-bottom-right-radius:12px}
.corehd{display:flex;align-items:center;justify-content:space-between;flex:none;gap:8px;font-family:var(--mono)}
.corehd .t{font-size:10px;font-weight:700;letter-spacing:5px;color:#fff;text-shadow:0 0 12px rgba(255,23,68,.7);white-space:nowrap}
.corehd .t span{color:var(--red)}
.corehd .ph{font-size:8.5px;letter-spacing:3px;color:var(--muted);white-space:nowrap}
.reactor{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
#corec{position:absolute;inset:0;width:100%;height:100%}
.reado{position:relative;z-index:2;text-align:center;font-family:var(--mono);pointer-events:none}
.reado .gen{font-size:52px;font-weight:800;line-height:.9;color:#fff;letter-spacing:1px;text-shadow:0 0 24px rgba(255,23,68,.65)}
.reado .gen .tot{font-size:18px;color:var(--red);font-weight:600}
.reado .glab{font-size:8.5px;letter-spacing:6px;color:var(--muted);margin-top:4px}
.reado .tribe{font-size:12px;letter-spacing:2px;color:var(--red);margin-top:10px;text-shadow:0 0 10px rgba(255,23,68,.5)}
.reado .task{font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:3px;animation:blink 1.8s infinite}
.corestats{display:flex;justify-content:space-around;font-family:var(--mono);flex:none;padding:7px 0 8px;border-top:1px solid var(--line2);margin-top:6px}
.corestats div{display:flex;flex-direction:column;align-items:center;gap:3px}
.corestats .k{font-size:7.5px;letter-spacing:2px;color:var(--muted)}
.corestats .v{font-size:15px;color:#fff}.corestats .v.red{color:var(--red)}.corestats .v.ok{color:var(--ok)}
.modes{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);flex:none;padding:6px 0 2px}
.modes .mk{font-size:7.5px;letter-spacing:2px;color:var(--muted)}
.seg{display:flex;gap:3px}
.seg span{font-size:8px;letter-spacing:1px;color:var(--muted);background:#0a0405;border:1px solid var(--line2);border-radius:9px;padding:3px 8px;white-space:nowrap;cursor:pointer;transition:all .2s}
.seg span.on{color:#fff;border-color:var(--red);background:rgba(255,23,68,.16);text-shadow:0 0 8px rgba(255,23,68,.6)}
.bigrow{display:flex;align-items:baseline;gap:8px;flex:none}
.bigrow .n{font-size:24px;font-weight:700;color:#fff;font-family:var(--mono);text-shadow:0 0 14px rgba(255,23,68,.5)}
.bigrow .label{font-size:8px;letter-spacing:2px;color:var(--muted)}
.vmini{display:flex;gap:14px;margin:7px 0;font-family:var(--mono);flex:none}
.vmini div{display:flex;flex-direction:column}.vmini .k{font-size:7.5px;letter-spacing:2px;color:var(--muted)}
.vmini .v{font-size:13px;color:#fff}.vmini .v.ok{color:var(--ok)}.vmini .v.red{color:var(--red)}
.rows{font-family:var(--mono);font-size:10px;overflow:hidden}
.sgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,.62fr));gap:8px;align-items:center}
.shead{font-size:7.5px;letter-spacing:1.5px;color:var(--muted);padding:2px 0 4px;border-bottom:1px solid var(--line2)}
.srow{padding:4px 0;border-bottom:1px solid var(--line)}
.srow.new{animation:rowin 1.4s ease both}
@keyframes rowin{0%{background:rgba(124,255,176,.14)}100%{background:transparent}}
.srow .nm{color:#fff;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .nm i{font-style:normal;color:var(--muted)}
.srow .st{color:var(--soft);font-size:9.5px;white-space:nowrap}.srow .st.sc{color:var(--red);font-weight:700}
.srow .st.ok{color:var(--ok)}.srow .st.neg{color:var(--red)}.srow .st.dim{color:var(--muted)}
.prow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px}
.prow .nm{color:#fff;letter-spacing:1px}.prow .nm small{display:block;color:var(--muted);font-size:8px}
.prow .gr{font-weight:700;text-align:center;width:20px}.prow .rt{text-align:right;color:var(--ok)}
.gr.A{color:var(--ok)}.gr.B{color:#CFFFB0}.gr.C{color:var(--warn)}.gr.D{color:var(--red)}
.pcorr{display:flex;flex-direction:column;font-family:var(--mono);margin-top:6px}
.pcorr .ph2{font-size:7.5px;letter-spacing:2px;color:var(--muted);padding:2px 0 5px;border-bottom:1px solid var(--line2);margin-bottom:6px}.pcorr .ph2 b{color:#fff;font-weight:400}
.hgrid{display:grid;gap:1.5px}.hc{border-radius:1.5px;background:#1a0a0c}
.term{font-family:var(--mono);font-size:10px;line-height:1.5;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
.term-inner{position:absolute;left:0;right:4px;will-change:transform}
.term .ln{display:block;white-space:pre-wrap;word-break:break-word}
.l-band{color:var(--red);text-shadow:0 0 6px rgba(255,23,68,.45)}.l-ok{color:var(--ok)}.l-dim{color:#9a6a72}.l-norm{color:var(--soft)}
.hbottom{display:flex;gap:9px;flex:none;will-change:transform,opacity}
.chip{flex:1 1 120px;min-width:0;background:linear-gradient(180deg,var(--panel),#070304);border:1px solid var(--red-deep);border-radius:6px;padding:7px 12px;display:flex;flex-direction:column;gap:1px;font-family:var(--mono)}
.chip .k{font-size:7.5px;letter-spacing:2px;color:var(--muted)}
.chip .v{font-size:14px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .v.red{color:var(--red)}.chip .v.ok{color:var(--ok)}

/* ===== SCENE 1: CAMPAIGN ===== */
.cmain{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,26vw) minmax(0,1fr) minmax(300px,26vw);gap:11px}
.ccol{display:flex;flex-direction:column;gap:11px;min-height:0;min-width:0;will-change:transform,opacity}
.progwrap{display:flex;align-items:center;gap:12px}
#cring{width:100px;height:100px;flex:none}
.readout{font-family:var(--mono)}
.bigg{font-size:30px;font-weight:700;color:#fff;line-height:1;text-shadow:0 0 16px rgba(255,23,68,.5)}.bigg .u{font-size:12px;color:var(--red);margin-left:5px}
.rlabel{font-size:8.5px;letter-spacing:3px;color:var(--muted);margin-top:5px;font-family:var(--mono)}
.rtribe{margin-top:9px;font-size:12px;color:var(--red)}
.bars{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.top-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--muted);margin-bottom:4px}.top-l b{color:#fff;font-weight:400}
.bar{height:5px;background:var(--track);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red-dark),var(--red),var(--glow));box-shadow:0 0 8px var(--red)}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid #1a0a0c;font-family:var(--mono)}
.stat-row .k{font-size:9px;letter-spacing:2px;color:var(--muted)}.stat-row .v{font-size:15px;color:#fff}.stat-row .v.red{color:var(--red)}
.eqlegend{display:flex;flex-wrap:wrap;gap:5px 12px;max-height:40px;overflow:hidden;margin-top:8px;font-family:var(--mono);flex:none}
.eqchip{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--soft)}.eqchip i{width:11px;height:3px;border-radius:2px;flex:none}
.eqchip .r{color:var(--ok)}.eqchip .r.neg{color:#FF3344}
.tape{flex:1;overflow:hidden;position:relative;font-family:var(--mono);font-size:11px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.tape-inner{position:absolute;left:0;right:6px;will-change:transform}
.tprow{display:grid;grid-template-columns:14px 1fr auto auto;gap:7px;align-items:center;padding:5px;border-bottom:1px solid #140a0c}
.tprow .lo{color:var(--ok)}.tprow .sh{color:var(--warn)}.tprow .p{color:var(--soft)}.tprow .p b{color:#fff;font-weight:400}.tprow .p i{font-style:normal;color:var(--muted)}
.tprow .rw{color:var(--ok)}.tprow .rl{color:#FF3344}.tprow .rs{color:var(--muted);font-size:8.5px}
#tapescan{position:absolute;left:0;right:0;top:0;height:34%;z-index:3;pointer-events:none;opacity:0;will-change:transform,opacity;
  background:linear-gradient(180deg,transparent,rgba(255,23,68,.22) 60%,rgba(255,90,120,.5) 88%,transparent);border-bottom:1px solid rgba(255,150,170,.7)}

/* ===== SCENE 2: BRAIN ===== */
#nmap{position:absolute;inset:0;width:100%;height:100%}
.bwrap{pointer-events:none}.scene.live .bwrap .appbar{pointer-events:auto}
.blabel{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--red);margin-top:-2px}.blabel span{color:var(--muted)}.blabel b{color:#fff;font-weight:400}

/* ===== SCENE 3: VAULT ===== */
.controls{flex-direction:row;align-items:center;gap:10px;font-family:var(--mono);flex:none;padding:10px 15px}
.seg2{display:flex;background:#0a0405;border:1px solid var(--red-deep);border-radius:4px;overflow:hidden}
.seg2 .sgi{font-size:9.5px;letter-spacing:2px;color:var(--muted);padding:7px 11px;border-right:1px solid var(--red-deep);white-space:nowrap;cursor:pointer}
.seg2 .sgi:last-child{border-right:none}
.seg2 .sgi.on{color:#fff;background:rgba(255,23,68,.14);text-shadow:0 0 10px rgba(255,23,68,.4)}
.ctl-label{font-size:8.5px;letter-spacing:2px;color:var(--muted)}
.ctlbox{background:#0a0405;border:1px solid var(--red-deep);border-radius:4px;color:var(--text);font-size:11px;padding:7px 10px;letter-spacing:1px}.ctlbox.muted{color:var(--muted)}
.count{margin-left:auto;font-size:10px;letter-spacing:2px;color:var(--muted)}.count b{color:#fff;font-weight:400}
.vmain{flex:1;display:flex;gap:12px;min-height:0}
.tablepanel{flex:1;min-width:0}
.tablewrap{flex:1;overflow:hidden;min-height:0;border-top:1px solid #1a0a0c;position:relative}
table.vt{border-collapse:collapse;font-family:var(--mono);font-size:11px;table-layout:fixed;width:100%}
table.vt thead th{position:sticky;top:0;z-index:1}
table.vt th{background:#0a0405;color:var(--muted);font-size:8px;letter-spacing:2px;padding:8px 9px;border-bottom:1px solid var(--red-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-weight:400}
table.vt td{padding:5px 9px;border-bottom:1px solid #140a0c;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:27px}
#tbody tr{cursor:pointer}#tbody tr:hover td{background:rgba(255,23,68,.08)}
table.vt tr.odd td{background:rgba(255,23,68,.025)}
table.vt tr.sel td{background:rgba(255,23,68,.16);color:#fff}
table.vt tr.new td{animation:rowin 1.4s ease both}
td.c-ret{color:var(--blue)}td.c-dd{color:var(--bright-red)}td.c-score{color:#fff}td.c-robust{color:var(--ok)}td.c-camp{color:var(--muted)}
.idbadge{font-size:10px;letter-spacing:.5px;color:var(--soft);border:1px solid var(--line2);border-radius:9px;padding:1px 6px;background:#0a0405}
.inspector{width:440px;flex:none}
.iclose{margin-left:auto;color:var(--muted);font-size:11px;letter-spacing:1px;cursor:pointer}.iclose:hover{color:var(--red)}
.insp-inner{display:flex;flex-direction:column;gap:10px;overflow:hidden;min-height:0;flex:1;padding-right:4px}
.titlerow{display:flex;align-items:flex-start;gap:10px;flex:none}
.insp-title{flex:1;min-width:0;font-family:var(--mono)}
.insp-title .big{font-size:16px;color:var(--red);letter-spacing:2px;text-shadow:0 0 12px rgba(255,23,68,.45)}
.insp-title .dep{font-size:9px;color:#5a3a40;letter-spacing:1px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gauge{position:relative;width:72px;height:72px;flex:none}.gauge canvas{position:absolute;inset:0;width:100%;height:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);flex:none}
.chips .c{font-size:8.5px;letter-spacing:1px;border:1px solid var(--line2);border-radius:12px;padding:4px 9px;color:var(--soft);background:#0a0405}
.chips .c b{color:#fff;font-weight:600}.chips .c .k{color:var(--muted)}
.sect{font-size:8.5px;letter-spacing:3px;color:var(--red);margin:4px 0 2px;display:flex;align-items:center;gap:8px;font-family:var(--mono);flex:none}
.sect::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--red-deep),transparent)}
.sect .dim{color:var(--muted);letter-spacing:1px;font-size:7.5px}
.compbar{display:flex;height:14px;border-radius:3px;overflow:hidden;border:1px solid #1a0a0c;background:#0a0405;flex:none}
.compbar .cseg{height:100%;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.complegend{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-family:var(--mono);flex:none}
.complegend .cl{display:flex;align-items:center;gap:5px;font-size:7.5px;letter-spacing:1px;color:var(--muted)}
.complegend .sw{width:8px;height:8px;border-radius:2px;flex:none}.complegend b{color:#fff;font-weight:600}
.dnawrap{position:relative;height:104px;flex:none;background:var(--bg);border:1px solid #1a0a0c;border-radius:4px}
.dnawrap canvas,.eqwrap canvas{position:absolute;inset:0;width:100%;height:100%}
.eqwrap{position:relative;height:150px;flex:none}
.verdict{border:1px solid var(--line2);border-radius:6px;padding:9px 11px;font-family:var(--mono);background:#0a0405;flex:none}
.vrow{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:10px}
.vrow.hd{border-bottom:1px solid #1a0a0c;padding-bottom:6px;margin-bottom:4px}
.vrow .k{color:var(--muted);letter-spacing:1px;font-size:8.5px}.vrow .v{color:#fff}.vrow .v.ok{color:var(--ok)}.vrow .v.bl{color:var(--blue)}
.vtag{font-size:8px;letter-spacing:2px;padding:2px 8px;border-radius:10px;border:1px solid rgba(124,255,176,.4);color:var(--ok)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:none}
.scard{display:flex;justify-content:space-between;align-items:center;background:#0a0405;border:1px solid #1a0a0c;border-radius:3px;padding:5px 8px}
.scard .k{font-size:7.5px;letter-spacing:1.5px;color:var(--muted);font-weight:700}
.scard .v{font-family:var(--mono);font-size:11.5px;font-weight:700;color:#fff}.scard .v.bl{color:var(--blue)}.scard .v.rd{color:var(--bright-red)}
.actrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:none}
.actbtn{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-align:center;padding:9px 0;border-radius:4px;border:1px solid var(--red-deep);color:var(--soft);background:#0a0405;transition:all .2s}
.actbtn:hover{border-color:var(--red);color:#fff;box-shadow:0 0 16px rgba(255,23,68,.25)}
.actbtn.danger{color:#FF6680;border-color:#5a1620}

/* ===== SCENE 4: PORTFOLIOS ===== */
.ptop{flex:1.25;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr);gap:11px;min-height:0}
.plist{flex:1;overflow:hidden;font-family:var(--mono);font-size:10.5px;min-height:0}
.pli{padding:8px 9px;border-bottom:1px solid var(--line);border-left:2px solid transparent;display:flex;align-items:center;gap:8px;cursor:pointer}
.pli:hover{background:rgba(255,23,68,.05)}
.pli.sel{border-left-color:var(--red);background:rgba(255,23,68,.08)}
.pli .nm{color:#fff;letter-spacing:1px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pli .cnt{color:var(--muted);font-size:8.5px}.pli .gr{font-weight:700}
.newbtn{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:2px;color:var(--red);border:1px dashed #3a0e16;border-radius:4px;text-align:center;padding:8px 0;margin-top:8px}
.newbtn:hover{border-color:var(--red)}
.pdsum{flex:none;font-family:var(--mono);font-size:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:5px}
.pdsum .g{font-size:26px;font-weight:800;line-height:1}
.pdsum .g.A{color:var(--ok)}.pdsum .g.B{color:#CFFFB0}.pdsum .g.C{color:var(--warn)}.pdsum .g.D{color:var(--red)}
.pdsum .kk{font-size:7.5px;letter-spacing:2px;color:var(--muted);display:block}.pdsum .vv{color:#fff}.pdsum .vv.ok{color:var(--ok)}
.drow{display:flex;flex-direction:column;gap:2px;padding:4px 0;border-bottom:1px solid var(--line);font-family:var(--mono)}
.drow .l1{display:flex;align-items:baseline;gap:8px;font-size:8.5px}
.drow .lb{color:var(--soft);letter-spacing:1px}.drow .tp{margin-left:auto;color:var(--muted)}.drow .tp b{color:#fff;font-weight:400}
.drow .bar{height:4px}.drow .bar i{box-shadow:none;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.drow .bar i.good{background:linear-gradient(90deg,#1d5c3c,var(--ok))}
.simpanel{flex:1}
.simbody{flex:1;display:flex;gap:12px;min-height:0}
.simstats{flex:0 0 190px;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);overflow:hidden}
.ss{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding:5px 0}
.ss .k{font-size:7.5px;letter-spacing:1.5px;color:var(--muted)}.ss .v{font-size:12px;color:#fff}
.ss .v.ok{color:var(--ok)}.ss .v.rd{color:var(--bright-red)}.ss .v.bl{color:var(--blue)}
.simwrap{flex:1;position:relative;min-height:0}.simwrap canvas{position:absolute;inset:0;width:100%;height:100%}

/* ===== scene dots, scroll cue, toast ===== */
.dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:800;display:flex;flex-direction:column;gap:12px}
.dots button{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:2px;color:transparent;transition:color .25s}
.dots button::after{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--red);transition:all .25s}
.dots button:hover{color:var(--muted)}
.dots button.on{color:var(--red)}
.dots button.on::after{background:var(--red);box-shadow:0 0 10px var(--red)}
.cue{position:fixed;right:12px;top:calc(50% + 78px);z-index:800;writing-mode:vertical-rl;font-family:var(--mono);font-size:9px;letter-spacing:3px;color:var(--glow);text-transform:uppercase;
  pointer-events:none;transition:opacity .4s;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}
#toast{position:fixed;right:20px;bottom:20px;z-index:9000;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
#toast div{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:#fff;background:rgba(13,7,8,.96);border:1px solid var(--red);border-radius:5px;padding:9px 14px;
  box-shadow:0 0 24px rgba(255,23,68,.3);animation:toastIn .35s cubic-bezier(.2,.8,.2,1) both}
#toast div.bye{animation:toastOut .35s ease both}
@keyframes toastIn{from{opacity:0;transform:translateX(40px) scale(.9)}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px)}}

/* ================= RESPONSIVE ================= */
@media (max-width:1150px){
  .hmain{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:repeat(4,minmax(0,1fr));
    grid-template-areas:"vault core" "camp core" "port equity" "genome feed"}
  .inspector{width:360px}.apills{display:none}.tnav-tag{display:none}
}
@media (min-width:1001px) and (max-width:1250px){table.vt th:nth-child(n+10),table.vt td:nth-child(n+10){display:none}}
@media (max-width:1000px){
  .hmain{grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"core"}
  .a-vault,.a-camp,.a-equity,.a-feed,.a-genome,.a-port,.hbottom{display:none}
  .cmain{grid-template-columns:1fr}#cC1,#cC3{display:none}
  .inspector{display:none}.ptop{grid-template-columns:1fr}#dP1,#dP3{display:none}
  .simstats{flex:0 0 110px}
  table.vt th:nth-child(n+6),table.vt td:nth-child(n+6){display:none}
  .controls .ctl-label,.controls .ctlbox{display:none}
  .wrap3d{inset:10px 24px 10px 10px}.asub{display:none}.awm{font-size:14px;letter-spacing:5px}.alogo{height:19px}
  .dots{right:6px}.dots button{font-size:0;gap:0}
}
@media (max-height:760px){.modes,.hbottom{display:none}.reado .gen{font-size:38px}}
@media (max-width:820px){.modes{display:none}.tnav{padding:0 12px}.tnav-wm{letter-spacing:2px;font-size:13px}.demo-tag{display:none}}
@media (max-width:560px){
  .tnav-wm,.uchip{display:none}.tnav-r{gap:8px}
  .tbtn{font-size:9px;padding:7px 9px;letter-spacing:1px}
  .seg2 .sgi{padding:7px 8px;letter-spacing:1px}
}
@media (prefers-reduced-motion:reduce){#cyber,#wm,#flicker{display:none}}