/* NULLSPACE: a comms deck, not a chat app. Black glass, neon edges, cut corners, a monospace stream, and a scope that twitches with traffic. */
:root{--a:#00f0ff;--b:#ff2bd6;--c:#f5ff3b;--bg:#05040a;--bg2:#0b0a14;--panel:#0e0d1a;--line:color-mix(in srgb,var(--a) 28%,transparent);--ink:#d9f7ff;--dim:#7d8fa6;--faint:#4a5568;--err:#ff3355;--ok:#3dffa8;--cut:12px;
  --mono:"Share Tech Mono",ui-monospace,monospace;--disp:"Orbitron",system-ui,sans-serif;--ui:"Rajdhani",system-ui,sans-serif;color-scheme:dark}
:root[data-theme="amber"]{--ink:#ffe7b3;--dim:#b38a4a;--faint:#6b5530;--bg:#080500;--bg2:#120b02;--panel:#140c02}
:root[data-theme="arasaka"]{--ink:#f6e7e9;--bg:#070304;--bg2:#120608;--panel:#16070a}
:root[data-theme="acid"]{--ink:#e6ffd0;--bg:#030603;--bg2:#081008;--panel:#0a140a}
:root[data-theme="ice"]{--ink:#f0fdff;--bg:#02060b;--bg2:#071019;--panel:#0a1622}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--mono);overflow:hidden}
body{background:radial-gradient(90% 60% at 10% 0%,color-mix(in srgb,var(--a) 9%,transparent),transparent 60%),radial-gradient(80% 60% at 100% 100%,color-mix(in srgb,var(--b) 8%,transparent),transparent 60%),linear-gradient(transparent 0 calc(100% - 1px),color-mix(in srgb,var(--a) 6%,transparent) 0) 0 0/100% 32px,var(--bg)}
button,input,textarea{font:inherit;color:inherit}a{color:var(--a)}.hidden{display:none!important}.dim{color:var(--dim)}.err{color:var(--err)}.warn{color:var(--c)}
::selection{background:var(--b);color:#000}
/* scanlines, vignette, flicker: the FX setting decides how much */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);opacity:0}
:root[data-fx="low"] body::after{opacity:.5}:root[data-fx="med"] body::after{opacity:.9}:root[data-fx="high"] body::after{opacity:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.55))}
:root[data-fx="high"] #app{animation:flick 7s infinite}@keyframes flick{0%,97%,100%{opacity:1}97.5%{opacity:.86}98.5%{opacity:.95}}
@media (prefers-reduced-motion:reduce){:root #app,.logo::before,.logo::after{animation:none!important}}
/* the cut corner, everywhere */
.cut,.nb,#pnl,.jc,.code,.drv,#fhead,.tx.me .msg{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
/* the logo glitches on its own, a little */
.logo{position:relative;font:900 18px/1 var(--disp);letter-spacing:.14em;color:var(--a);text-shadow:0 0 12px color-mix(in srgb,var(--a) 70%,transparent);white-space:nowrap}
.logo.big{font-size:clamp(28px,8vw,52px);margin-bottom:14px}
:root:not([data-fx="off"]) .logo::before,:root:not([data-fx="off"]) .logo::after{content:attr(data-t);position:absolute;inset:0;overflow:hidden;pointer-events:none}
:root:not([data-fx="off"]) .logo::before{color:var(--b);transform:translate(2px,0);clip-path:inset(0 0 60% 0);animation:gl1 3.2s infinite steps(1)}
:root:not([data-fx="off"]) .logo::after{color:var(--c);transform:translate(-2px,0);clip-path:inset(55% 0 0 0);animation:gl2 2.7s infinite steps(1)}
@keyframes gl1{0%,92%{opacity:0}93%{opacity:.9;transform:translate(3px,-1px)}95%{opacity:.9;transform:translate(-2px,1px)}97%{opacity:0}}
@keyframes gl2{0%,88%{opacity:0}89%{opacity:.8;transform:translate(-3px,1px)}91%{opacity:0}}
/* buttons */
.nb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border:0;background:color-mix(in srgb,var(--a) 14%,var(--panel));color:var(--a);font:700 13px var(--ui);letter-spacing:.14em;cursor:pointer;position:relative}
.nb:hover{background:color-mix(in srgb,var(--a) 26%,var(--panel))}.nb.pri{background:var(--a);color:#020208;box-shadow:0 0 18px color-mix(in srgb,var(--a) 50%,transparent)}.nb.warn{background:color-mix(in srgb,var(--err) 20%,var(--panel));color:var(--err)}.nb:disabled{opacity:.35;cursor:not-allowed}
.ic{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--a);font-size:16px;flex:none;cursor:pointer}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
label{display:block;margin:14px 0 6px;font:700 11px var(--ui);letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
input:not([type]),input[type=text]{width:100%;background:var(--bg2);border:1px solid var(--line);padding:10px 12px;outline:0;color:var(--ink)}input:focus{border-color:var(--a);box-shadow:0 0 0 1px var(--a),0 0 18px color-mix(in srgb,var(--a) 25%,transparent)}
/* boot + jack in */
#boot{position:fixed;inset:0;z-index:300;background:var(--bg);display:none;padding:calc(30px + env(safe-area-inset-top)) 22px;font:14px/1.7 var(--mono);color:var(--a);text-shadow:0 0 8px color-mix(in srgb,var(--a) 60%,transparent)}#boot.on{display:block}#boot div{animation:type .12s steps(8)}@keyframes type{from{clip-path:inset(0 100% 0 0)}}
#jack{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;padding:20px}#jack.on{display:flex}
.jc{width:min(460px,100%);padding:28px 22px;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);box-shadow:0 0 40px color-mix(in srgb,var(--a) 12%,transparent)}.jc p{color:var(--dim)}.jc .nb{width:100%;margin-top:14px;min-height:46px}
.cl{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--a);padding:6px 2px}.cl span{color:var(--b)}.cl input{border:0!important;box-shadow:none!important;background:none;padding:6px 0;font-size:20px;letter-spacing:.06em}
/* the deck */
#app{position:fixed;inset:0;display:grid;grid-template-columns:260px minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hud hud hud" "rail main side"}
#hud{grid-area:hud;display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--line);background:linear-gradient(color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--panel) 60%,transparent));min-width:0}
#hud .logo{margin-right:auto}
.hb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--line);background:var(--bg2);font:700 12px var(--ui);letter-spacing:.14em;color:var(--dim);cursor:pointer;white-space:nowrap}.hb i{width:8px;height:8px;background:var(--faint);transform:rotate(45deg)}.hb b{font:12px var(--mono);letter-spacing:0;color:var(--ink)}
.hb.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}.hb.on i{background:var(--ok);box-shadow:0 0 10px var(--ok)}.hb.mid i{background:var(--c);box-shadow:0 0 8px var(--c)}.hb.mid{color:var(--c)}.hb.err i{background:var(--err)}.hb.err{color:var(--err)}
.hclock{font:13px var(--mono);color:var(--dim);letter-spacing:.08em}
.hop{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--b);font:700 13px var(--ui);letter-spacing:.12em;cursor:pointer}
.sig{display:inline-block;vertical-align:middle;image-rendering:pixelated;filter:drop-shadow(0 0 4px currentColor)}
#b-menu,#b-side{display:none}
#rail{grid-area:rail;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:color-mix(in srgb,var(--panel) 55%,transparent)}
#tuner{flex:1;overflow-y:auto;padding:8px}
.lbl{font:700 11px var(--ui);letter-spacing:.24em;color:var(--dim);margin:10px 4px 6px}
.fq{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin:2px 0;border:1px solid transparent;background:none;text-align:left;cursor:pointer;position:relative}
.fq .mhz{font:12px var(--mono);color:var(--a);min-width:62px}.fq .fn{flex:1;min-width:0;font:700 14px var(--ui);letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fq.ob .mhz{color:var(--b)}
.fq:hover{border-color:var(--line)}.fq.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,transparent);box-shadow:inset 3px 0 0 var(--a)}.fq.ob.on{border-color:var(--b);box-shadow:inset 3px 0 0 var(--b)}
.fq i{font:700 10px var(--mono);font-style:normal;padding:1px 5px}.fq .un{background:var(--b);color:#000}.fq .rfb{color:var(--b);border:1px solid color-mix(in srgb,var(--b) 50%,transparent)}
.railb{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-top:1px solid var(--line)}.railb .nb{min-height:34px;font-size:11px;padding:0 8px}.railb .nb:first-child{grid-column:1/-1}
/* the stream */
#main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0}
#fhead{flex:none;margin:10px 12px 0;padding:10px 14px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 80%,transparent);display:flex;flex-direction:column}
#fname{font:700 17px var(--disp);letter-spacing:.14em;color:var(--a);text-shadow:0 0 10px color-mix(in srgb,var(--a) 50%,transparent)}#fsub{font:12px var(--mono);color:var(--dim)}
#stream{flex:1;min-height:0;overflow-y:auto;padding:10px 14px;overscroll-behavior:contain;scrollbar-color:var(--line) transparent}
.tx{display:grid;grid-template-columns:auto auto 1fr;gap:2px 10px;align-items:start;padding:5px 6px;margin:1px 0;border-left:2px solid transparent;position:relative}
.tx:hover{background:color-mix(in srgb,var(--a) 5%,transparent)}
.tx .ts{font-size:12px;color:var(--faint)}.tx .who{display:inline-flex;align-items:center;gap:6px;color:var(--u)}.tx .who b{font:700 14px var(--ui);letter-spacing:.12em;text-shadow:0 0 8px color-mix(in srgb,var(--u) 55%,transparent)}.anon{color:var(--b);font-style:normal}
.tx .msg{word-break:break-word;white-space:pre-wrap;min-width:0}.tx .meta{grid-column:3;display:flex;gap:6px;flex-wrap:wrap}
.tx.me{border-left-color:var(--b)}.tx.me .msg{color:color-mix(in srgb,var(--ink) 92%,var(--b))}
.tx.viarf{border-left-color:color-mix(in srgb,var(--b) 60%,transparent)}
.rt{font:700 10px var(--ui);letter-spacing:.16em;padding:0 6px;border:1px solid;opacity:.85}.rt.net{color:var(--a)}.rt.rf{color:var(--b)}.rt.br{color:var(--c)}.rt.q{color:var(--dim)}.rt.err{color:var(--err)}.rt.burnt{color:var(--err);border-color:var(--err)}
.tx.sys{display:block;color:var(--dim);font-size:12px;text-align:center;padding:4px}.tx.sys.ok{color:var(--ok)}.tx.sys.err{color:var(--err)}.sy{letter-spacing:.08em}
.tx .glitch{color:var(--a);text-shadow:2px 0 var(--b),-2px 0 var(--c)}
.tx.burning{animation:burn .9s forwards}@keyframes burn{40%{filter:blur(1px) hue-rotate(90deg);opacity:.7;transform:skewX(-8deg)}100%{opacity:0;filter:blur(6px);transform:translateX(30px) skewX(-20deg)}}
.sealed{color:var(--b);font-style:italic}.loc{color:var(--c)}
.img{display:inline-block;margin-top:6px;max-width:min(420px,80vw);font:11px var(--ui);letter-spacing:.2em;color:var(--dim);border:1px solid var(--line);padding:4px;position:relative}.img img{display:block;max-width:100%;filter:saturate(1.15) contrast(1.05)}
:root:not([data-fx="off"]) .img::after{content:"";position:absolute;inset:4px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
#typing{flex:none;min-height:16px;padding:0 18px;font:700 11px var(--ui);letter-spacing:.2em;color:var(--b)}
#hint{flex:none;display:flex;gap:14px;flex-wrap:wrap;padding:0 18px;font-size:12px;color:var(--dim)}#hint b{color:var(--a)}
#tools{flex:none;display:flex;gap:6px;align-items:center;padding:6px 12px 0;overflow-x:auto}#tools button{flex:none;height:28px;padding:0 10px;border:1px solid var(--line);background:var(--bg2);color:var(--dim);font:700 11px var(--ui);letter-spacing:.14em;cursor:pointer}#tools button.on{color:var(--err);border-color:var(--err)}#tools button:hover{color:var(--a)}
#count{margin-left:auto;font:12px var(--mono);color:var(--dim);white-space:nowrap}#count.over{color:var(--c)}
#cl{flex:none;display:flex;align-items:flex-end;gap:8px;margin:6px 12px calc(12px + env(safe-area-inset-bottom));padding:8px 8px 8px 12px;border:1px solid var(--a);background:color-mix(in srgb,var(--bg) 70%,var(--panel));box-shadow:0 0 22px color-mix(in srgb,var(--a) 16%,transparent),inset 0 0 18px color-mix(in srgb,var(--a) 6%,transparent)}
#cl .pr{color:var(--b);font-size:18px;line-height:30px;animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:.25}}
#cmd{flex:1;min-height:30px;max-height:130px;resize:none;border:0;outline:0;background:none;color:var(--ink);font:16px/1.4 var(--mono);caret-color:var(--a);padding:4px 0}
#send{flex:none;height:34px;padding:0 16px;border:0;background:var(--a);color:#020208;font:900 13px var(--disp);letter-spacing:.18em;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
/* the side */
#side{grid-area:side;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);padding:6px 10px;background:color-mix(in srgb,var(--panel) 55%,transparent);overflow-y:auto}
#scope{width:100%;height:90px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 80%,transparent)}
.stabs{display:flex;gap:4px;margin:10px 0 4px}.stabs button{flex:1;height:30px;border:1px solid var(--line);background:none;color:var(--dim);font:700 12px var(--ui);letter-spacing:.2em;cursor:pointer}.stabs button.on{color:var(--a);border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,transparent)}
.op,.node{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid color-mix(in srgb,var(--a) 10%,transparent);position:relative}.op b,.node b{font:700 13px var(--ui);letter-spacing:.1em}.op small,.node small{margin-left:auto;font-size:11px;color:var(--dim)}.op.me b{color:var(--b)}
.node{flex-wrap:wrap}.node .bar{display:block;width:100%;height:2px;background:linear-gradient(90deg,var(--b) calc(var(--q) * 100%),color-mix(in srgb,var(--a) 15%,transparent) 0)}
#radar{display:block;width:100%;max-width:240px;margin:6px auto;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 8%,transparent),transparent 70%)}
/* panels */
#pnl{position:fixed;z-index:120;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);width:min(560px,calc(100% - 20px));max-height:calc(100% - 40px);overflow:auto;background:color-mix(in srgb,var(--panel) 96%,transparent);border:1px solid var(--a);box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent),0 0 60px color-mix(in srgb,var(--a) 18%,transparent),0 30px 80px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:.18s}
#pnl.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.ph{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font:700 14px var(--disp);letter-spacing:.16em;color:var(--a);position:sticky;top:0;background:var(--panel);z-index:1}.ph .x{border:0;background:none;color:var(--a);font-size:18px;cursor:pointer}
.pb{padding:6px 16px 18px}.pb p{color:var(--ink)}
.big{font:900 34px var(--disp);color:var(--a);letter-spacing:.1em;text-shadow:0 0 16px color-mix(in srgb,var(--a) 60%,transparent)}
.code{font:13px var(--mono);padding:10px 12px;background:var(--bg2);border:1px solid var(--line);word-break:break-all;color:var(--c)}.code.sel{user-select:all}
.drv{padding:12px;margin:10px 0;border:1px solid var(--line);background:var(--bg2)}.drv b{font:700 14px var(--ui);letter-spacing:.16em;color:var(--a)}.drv b i{font-style:normal;color:var(--c);font-size:11px}.drv small{display:block;color:var(--dim)}
.rstat{font:700 13px var(--ui);letter-spacing:.18em;padding:10px;border:1px solid var(--line);text-align:center}.rstat.on{color:var(--ok);border-color:var(--ok)}.rstat.error{color:var(--err);border-color:var(--err)}.rstat.connecting{color:var(--c)}
pre{margin:0;max-height:180px;overflow:auto;padding:10px;background:#000;border:1px solid var(--line);font:11px/1.5 var(--mono);color:var(--ok);white-space:pre-wrap}pre.stat{color:var(--a)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.th{display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px 4px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:700 11px var(--ui);letter-spacing:.14em;cursor:pointer}.th i{display:inline-block;width:40px;height:4px;background:var(--ta);box-shadow:0 0 8px var(--ta)}.th i+i{background:var(--tb);box-shadow:0 0 8px var(--tb)}.th.on{border-color:var(--a);box-shadow:0 0 14px color-mix(in srgb,var(--a) 35%,transparent)}
.opbig{display:flex;gap:14px;align-items:center;margin:8px 0}.opbig b{font:900 22px var(--disp);letter-spacing:.12em;color:var(--b);display:block}.opbig small{color:var(--dim)}
.sw{width:34px;height:34px;border:2px solid var(--bg2);cursor:pointer}input[type=color]{width:46px;height:34px;border:1px solid var(--line);background:var(--bg2)}
input[type=range]{width:100%;accent-color:var(--a)}
.cmds div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--a) 10%,transparent)}.cmds b{color:var(--a)}.cmds span{color:var(--dim)}
#toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translate(-50%,10px);z-index:150;padding:8px 14px;background:var(--panel);border:1px solid var(--b);color:var(--b);font:700 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 0 20px color-mix(in srgb,var(--b) 30%,transparent);max-width:92vw;text-align:center}#toast.on{opacity:1;transform:translate(-50%,0)}
/* phones: the rail is a drawer, the side is a sheet */
@media (max-width:1100px){#app{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"hud hud" "rail main"}#side{position:fixed;z-index:90;right:0;top:0;bottom:0;width:min(320px,88vw);transform:translateX(100%);transition:transform .22s;padding-top:calc(60px + env(safe-area-inset-top));background:var(--panel)}#app.sidebar #side{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.6)}#b-side{display:inline-flex;align-items:center;justify-content:center}}
@media (max-width:760px){#app{grid-template-columns:minmax(0,1fr);grid-template-areas:"hud" "main"}#rail{position:fixed;z-index:95;left:0;top:0;bottom:0;width:min(300px,86vw);transform:translateX(-100%);transition:transform .22s;padding-top:calc(56px + env(safe-area-inset-top));background:var(--panel)}#app.drawer #rail{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.6)}#b-menu{display:inline-flex;align-items:center;justify-content:center}
  #hud{gap:6px;padding-left:8px;padding-right:8px}#hud .logo{font-size:13px;letter-spacing:.08em}.hclock,#h-br{display:none}.hb{padding:0 7px;font-size:11px}.hb b{font-size:11px}.hop b{display:none}#fhead{margin:8px 8px 0}#stream{padding:8px}.tx{grid-template-columns:auto 1fr;gap:0 8px}.tx .ts{grid-column:1;grid-row:1}.tx .who{grid-column:2;grid-row:1}.tx .msg{grid-column:1/-1}.tx .meta{grid-column:1/-1}#cl{margin-left:8px;margin-right:8px}}
#hud{position:relative;z-index:100}
@media (max-width:760px){#app.drawer #main,#app.sidebar #main{filter:brightness(.45)}}
@media (max-width:480px){.hb b{display:none}#hud .logo{font-size:11px}.hb{height:28px}}