:root{--bg:#0B0E11;--s1:#14181D;--s2:#1B2026;--line:#30363D;--text:#F2F4F5;--muted:#9AA4AE;--dim:#5E6973;--blue:#008AE4;--blue-d:#0564B0;--green:#2FBF71;--amber:#E0A43A;--red:#E5484D;--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--sans:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}
.hidden{display:none!important}
#stage{position:fixed;inset:0;background:var(--bg)}#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;transform:translate(-50%,14px);font:10px/1.3 var(--mono);color:var(--muted);background:rgba(11,14,17,.82);border:1px solid var(--line);padding:3px 6px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.lbl.running{color:#BFE6FF;border-color:var(--blue)}.lbl.blocked{color:#FFB4B7;border-color:var(--red)}.lbl.agent,.lbl.core{color:var(--text);font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.06em}
/* top bar */
.top{position:fixed;z-index:20;top:0;left:0;right:0;height:56px;background:var(--s1);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:16px}
.brand{display:flex;align-items:center;gap:10px}.mark{width:30px;height:30px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}.brand strong{font-size:12px;letter-spacing:.12em}.brand small{display:block;font:9px var(--mono);letter-spacing:.14em;color:var(--muted);margin-top:2px}
.conn{margin-left:auto;display:flex;align-items:center;gap:8px;font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}.conn i{width:8px;height:8px;background:var(--dim)}.conn[data-state=live] i{background:var(--green)}.conn[data-state=live] span{color:var(--text)}.conn[data-state=stale] i{background:var(--amber)}.conn[data-state=error] i{background:var(--red)}.conn time{color:var(--dim)}
.mic{height:36px;padding:0 14px;background:var(--s2);border:1px solid var(--line);color:var(--text);display:flex;align-items:center;gap:8px;font:600 10px var(--sans);letter-spacing:.1em}.mic:hover{border-color:var(--blue)}.mic:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.mic.listening{background:var(--blue-d);border-color:var(--blue)}.mic-ic{width:8px;height:13px;border:1.5px solid currentColor;border-radius:4px}
/* stats */
.stats{position:fixed;z-index:15;top:72px;left:88px;display:flex;background:var(--s1);border:1px solid var(--line)}.stats>div{padding:10px 14px;border-right:1px solid var(--line);min-width:104px}.stats>div:last-child{border-right:0}.stats span{display:block;font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}.stats b{display:block;margin-top:4px;font:500 20px var(--sans);letter-spacing:-.02em}
/* rail */
.rail{position:fixed;z-index:15;top:56px;left:0;bottom:0;width:72px;background:var(--s1);border-right:1px solid var(--line);display:flex;flex-direction:column;padding-top:16px}
.nav{height:54px;border:0;border-left:3px solid transparent;background:transparent;color:var(--muted);font:600 9px var(--sans);letter-spacing:.08em}.nav:hover{background:var(--s2);color:var(--text)}.nav.active{border-left-color:var(--blue);color:var(--text);background:var(--s2)}.nav:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.rail-tools{margin-top:auto;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr}.rail-tools button{height:48px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:18px}.rail-tools button:last-child{border-right:0}.rail-tools button.on{color:var(--blue)}
.legend{position:fixed;z-index:14;left:88px;top:142px;display:flex;gap:12px;font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.k{width:8px;height:8px;background:var(--dim)}.k.core{background:#fff}.k.agent{background:var(--blue)}.k.running{background:#4FC3FF}.k.todo{background:#6C7680}.k.blocked{background:var(--red)}.k.done{background:var(--green)}
/* inspector */
.inspector{position:fixed;z-index:16;right:16px;top:72px;width:340px;max-height:calc(100vh - 100px);overflow:auto;background:var(--s1);border:1px solid var(--line);padding:16px}
.inspector small{font:9px var(--mono);letter-spacing:.14em;color:var(--muted)}.inspector h2{margin:8px 28px 8px 0;font:500 15px/1.35 var(--sans)}.badge{display:inline-block;font:10px var(--mono);letter-spacing:.08em;padding:3px 7px;border:1px solid var(--line);color:var(--muted)}.badge.running{border-color:var(--blue);color:#BFE6FF}.badge.blocked{border-color:var(--red);color:#FFB4B7}.badge.done{border-color:var(--green);color:#B6F0CF}
.inspector dl{margin:14px 0 0;display:grid;grid-template-columns:104px 1fr;gap:8px 10px;font-size:11px}.inspector dt{color:var(--muted)}.inspector dd{margin:0;font-family:var(--mono);overflow-wrap:anywhere}
.close{position:absolute;right:8px;top:6px;border:0;background:none;color:var(--muted);font-size:20px;width:32px;height:32px}
.events{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}.events p{margin:0;padding:6px 0;border-bottom:1px solid var(--line);font:10px var(--mono);color:var(--muted)}.events p b{color:var(--text);font-weight:500}.events time{color:var(--dim);margin-right:8px}
/* log */
.log{position:fixed;z-index:16;left:88px;bottom:16px;width:460px;max-height:220px;background:var(--s1);border:1px solid var(--line);display:flex;flex-direction:column}.log-head{height:32px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}.log-head button{border:0;background:none;color:var(--muted);font-size:18px}#logRows{overflow:auto}#logRows p{margin:0;padding:6px 10px;border-bottom:1px solid var(--line);font:10px var(--mono);color:var(--muted)}#logRows p b{color:var(--text);font-weight:500}#logRows time{color:var(--dim);margin-right:8px}
/* jarvis */
.jarvis{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,160px);opacity:0;width:min(560px,calc(100% - 24px));background:var(--s1);border:1px solid var(--blue-d);padding:12px 14px;display:grid;grid-template-columns:44px 1fr 32px;grid-template-rows:auto auto;gap:6px 12px;align-items:center;transition:transform .2s,opacity .2s}.jarvis.show{transform:translate(-50%,0);opacity:1}
.orb{width:40px;height:40px;border:1px solid var(--blue);display:grid;place-items:center;grid-row:1/3}.orb i{width:10px;height:10px;background:var(--blue)}.orb.listening i{animation:blink .9s infinite}.orb.busy i{animation:blink .35s infinite}@keyframes blink{50%{opacity:.15}}
.jtext small{font:9px var(--mono);letter-spacing:.16em;color:var(--blue)}.jtext p{margin:4px 0 0;font-size:12px;line-height:1.45}.heard{color:var(--muted);font:10px var(--mono)}.cmd{grid-column:2/3;display:flex;gap:6px}.cmd input{flex:1;height:32px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:0 8px;font:12px var(--mono)}.cmd input:focus{outline:2px solid var(--blue);outline-offset:-1px}.cmd button{width:40px;border:1px solid var(--line);background:var(--s2);color:var(--text)}.jarvis>.close,#jClose{grid-column:3;grid-row:1;position:static}#jClose{border:0;background:none;color:var(--muted);font-size:20px}
.webgl-fail{position:fixed;z-index:25;left:50%;top:50%;transform:translate(-50%,-50%);max-width:420px;padding:16px;background:var(--s1);border:1px solid var(--red);font-size:12px}
.hint{position:fixed;z-index:12;right:16px;bottom:14px;font:9px var(--mono);letter-spacing:.06em;color:var(--dim)}
/* login */
.login-body{display:grid;place-items:center;overflow:auto}.login{width:min(380px,calc(100% - 32px));background:var(--s1);border:1px solid var(--line);padding:24px}.login form{margin-top:22px;display:grid;gap:10px}.login label{font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}.login input{height:44px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:0 10px;font:14px var(--mono)}.login input:focus{outline:2px solid var(--blue);outline-offset:-1px}.login button{height:44px;background:var(--blue-d);border:1px solid var(--blue);color:#fff;font:600 11px var(--sans);letter-spacing:.12em}.login .error{margin:0;color:var(--red);font-size:12px}
/* mobile */
@media (max-width:760px){
.top{height:52px;padding:0 10px;gap:8px}.brand small{display:none}.brand strong{font-size:11px}.conn time{display:none}.mic .mic-txt{display:none}.mic{width:44px;padding:0;justify-content:center}
.stats{left:8px;right:8px;top:60px;display:grid;grid-template-columns:repeat(4,1fr)}.stats>div{min-width:0;padding:7px 6px;border-bottom:1px solid var(--line)}.stats>div:nth-child(4n){border-right:0}.stats>div:nth-child(n+5){border-bottom:0}.stats span{font-size:7px}.stats b{font-size:15px}
.legend{left:8px;top:150px;gap:8px;flex-wrap:wrap;max-width:calc(100% - 16px)}.legend span{font-size:8px}
.rail{top:auto;bottom:0;left:0;right:0;width:auto;height:60px;flex-direction:row;padding:0;border-right:0;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.nav{flex:1;height:60px;border-left:0;border-top:3px solid transparent;font-size:8px}.nav.active{border-left:0;border-top-color:var(--blue)}.rail-tools{display:none}
.inspector{left:8px;right:8px;top:auto;bottom:68px;width:auto;max-height:46vh}.log{left:8px;right:8px;bottom:68px;width:auto;max-height:40vh}
.jarvis{bottom:68px;width:calc(100% - 16px)}.hint{display:none}.lbl{max-width:140px;font-size:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}