:root{--bg:#000;--bg2:#020403;--panel:rgba(5,8,7,.94);--panelSolid:#050807;--line:#133C42;--line2:#1F5F68;--text:#DCECEE;--dim:#8FB3BA;--faint:#3D6470;--accent:#5FE1E8;--accent2:#FFA630;--hot:#fff;--alert:#FF4D5E;--edge:#4F9AA8;--ok:#3DDC97;--display:'Orbitron';--mono:'Fira Code';--body:'Rajdhani'}
html,body{width:100vw;height:100vh;min-width:1180px;min-height:700px}
#app{width:100%;height:100%}
#top{width:100%}
main{width:100%;height:calc(100% - 56px)}
#graphwrap{width:calc(100% - 430px);height:100%}
#neo{left:auto;right:0;height:100%}
#graph{position:absolute;inset:0}
#graph canvas{outline:none}
#ambient{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
#ambient.on{opacity:.28}
.demo-flag{color:var(--alert);border:1px dashed var(--alert);padding:4px 9px;letter-spacing:.1em}
#tools span{cursor:pointer;user-select:none}#tools span:hover{color:var(--text)}
#tools .fps{cursor:default;color:var(--ok);border-color:var(--line)}
#settings{position:absolute;right:16px;top:84px;width:300px;padding:14px 16px;z-index:6;background:linear-gradient(160deg,#07100E,#050807);box-shadow:inset 0 0 0 1px var(--line2);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);display:flex;flex-direction:column;gap:9px;font-weight:600;font-size:15.5px;transition:opacity .25s,transform .25s}
#settings.hidden{opacity:0;transform:translateY(-6px);pointer-events:none}
#settings .sh{font-family:var(--display);font-size:9.5px;letter-spacing:.2em;color:var(--accent)}
#settings label{display:flex;gap:9px;align-items:center;cursor:pointer}
#settings input{accent-color:#5FE1E8;width:15px;height:15px}
#settings em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim)}
#settings .keys{font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.6;border-top:1px solid var(--line);padding-top:8px}
#settings .keys b{color:var(--accent);font-weight:500}
/* detail panel slide */
#detail{transform:translateX(-400px);opacity:0;pointer-events:none}
#detail.open{pointer-events:auto}
#detail .x{cursor:pointer}
#legend{left:16px}
#hint{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.04em;opacity:.9;transition:opacity .6s;pointer-events:none;white-space:nowrap}
#hint b{color:var(--accent);font-weight:500}
#hint.gone{opacity:0}
#toast{position:absolute;right:16px;bottom:72px;transform:translateY(8px);font-family:var(--mono);font-size:12px;color:var(--text);padding:6px 12px;background:#050807;box-shadow:inset 0 0 0 1px var(--line2);opacity:0;transition:opacity .4s,transform .4s;white-space:nowrap;z-index:4}
#toast.show{opacity:1;transform:none}
#toast b{color:var(--accent);font-weight:500}
/* ring / wake */
.neohead{align-items:center}
#wake{font-family:var(--display);font-size:9.5px;letter-spacing:.14em;color:#001214;background:var(--accent);border:0;padding:6px 10px;cursor:pointer;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);display:flex;gap:7px;align-items:center}
#wake kbd{font-family:var(--mono);font-size:10px;background:#001214;color:var(--accent);padding:0 4px}
#wake:hover{filter:brightness(1.15)}#wake:disabled{opacity:.5;cursor:default}
#ringbox{position:relative}
#burst{display:block;position:absolute;left:-18px;top:-16px;width:430px;height:292px;pointer-events:none}
#ring{position:relative}
#ring .seg{transition:fill .12s,opacity .3s}
#state{min-height:15px}
#transcript .said{min-height:38px}
#transcript .said.typing::after{content:"▍";color:var(--accent);animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* 3D labels */
.lbl{font-family:var(--body);font-weight:600;font-size:14px;color:var(--dim);white-space:nowrap;pointer-events:none;padding:1px 6px 1px 7px;margin-left:12px;background:rgba(0,0,0,.85);border-left:2px solid var(--c);transition:opacity .35s,color .35s;text-shadow:0 0 3px #000}
.lbl.hub{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--hot)}
.lbl.proj{font-size:13px;color:#fff}
.lbl.sel{color:var(--accent)}
.lbl.nb{color:var(--text)}
.tip{font-family:var(--body);font-weight:600;font-size:14px;color:var(--text);background:#050807;padding:4px 8px;box-shadow:inset 0 0 0 1px var(--line2)}
.tip small{font-family:var(--mono);font-size:10.5px;color:var(--dim);display:block}
.scene-tooltip{font-family:var(--body)!important}
@media (prefers-reduced-motion: reduce){#detail,#legend,#toast,#settings{transition:none}}
body.rm #detail,body.rm #legend,body.rm #toast{transition:none}