:root{--bg:#05080d;--sh:#0d151e;--ink:#e9f3f8;--mute:#8aa0ae;--c:#2ef2ff;--m:#ff3ea5;--ln:#1e3140}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--m);outline-offset:2px}
#stage{position:fixed;top:0;left:0;right:0;height:58%;background:#000}
video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hud{position:absolute;top:env(safe-area-inset-top,0);left:0;right:0;display:flex;gap:8px;align-items:center;padding:12px;z-index:3}
.sp{flex:1}
.pill{background:rgba(5,8,13,.7);backdrop-filter:blur(8px);border:1px solid var(--ln);padding:6px 12px;border-radius:99px;font:500 13px ui-monospace,Menlo,monospace;color:var(--c)}
.ib{background:rgba(5,8,13,.7);backdrop-filter:blur(8px);border:1px solid var(--ln);width:42px;height:42px;border-radius:50%;font-size:19px}
#toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(5,8,13,.85);border:1px solid var(--c);padding:7px 14px;border-radius:99px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}
#sheet{position:fixed;left:0;right:0;bottom:0;height:44%;background:var(--sh);border-radius:22px 22px 0 0;border-top:1px solid var(--ln);padding:10px 16px calc(12px + env(safe-area-inset-bottom,0));overflow-y:auto;z-index:4}
#tabs{display:flex;gap:6px;margin-bottom:8px}
.tab{flex:1;background:none;border:0;border-bottom:2px solid var(--ln);padding:8px;color:var(--mute)}
.tab.on{color:var(--c);border-color:var(--c)}
#chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px}
.chip{flex:none;border:1px solid var(--ln);background:none;border-radius:99px;padding:5px 12px;font-size:14px}
.chip.on{background:var(--c);color:#02161a;border-color:var(--c)}
#info h1{font-size:27px;margin:0;text-transform:capitalize;display:flex;align-items:center;gap:10px}
.sw{width:18px;height:18px;border-radius:50%;border:2px solid #fff3;display:inline-block}
.meter{height:5px;border-radius:5px;background:var(--ln);margin:6px 0 4px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--m))}
.k{font-size:12px;color:var(--mute);margin:12px 0 1px}
#info p{margin:0}
.rng{display:flex;align-items:center;gap:10px;margin:14px 0 8px;font-size:14px;color:var(--mute)}
.rng input{flex:1;accent-color:var(--c)}
#bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#bar button,.wide{padding:10px 4px;border-radius:10px;border:1px solid var(--ln);background:none;font-size:14px}
#bar .p{background:var(--c);color:#02161a;border-color:var(--c);font-weight:700}
.wide{width:100%;margin-top:10px}
.hi{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ln)}
.hi small{color:var(--mute);margin-left:auto}
#gate{position:fixed;inset:0;z-index:10;background:radial-gradient(circle at 50% 30%,#0e2a35,var(--bg) 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:28px}
#gate h1{font-size:40px;margin:0;letter-spacing:-.02em}
#gate p{color:var(--mute);max-width:30ch;margin:0}
.big{background:var(--c);color:#02161a;border:0;border-radius:14px;padding:15px 34px;font-size:18px;font-weight:700}
#msg{color:var(--m);min-height:22px;font-size:14px;max-width:32ch}
.orb{width:96px;height:96px;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 40px var(--c),inset 0 0 30px #2ef2ff55;animation:p 2.4s ease-in-out infinite}
@keyframes p{50%{transform:scale(1.08);box-shadow:0 0 70px var(--c),inset 0 0 40px #2ef2ff88}}
@media(prefers-reduced-motion:reduce){.orb{animation:none}#toast{transition:none}}
#bar button.on{border-color:var(--c);color:var(--c);box-shadow:0 0 12px #2ef2ff55}
.src{font-size:12px;color:var(--mute);margin-top:10px}
#sheet.tall{height:70%}#stage.small{height:30%}
#chat:not([hidden]){display:flex;flex-direction:column;height:calc(100% - 52px)}
#qs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
#msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 0}
.m{max-width:88%;padding:9px 12px;border-radius:14px;font-size:15px;word-wrap:break-word}
.m.user{align-self:flex-end;background:var(--c);color:#02161a}
.m.assistant{align-self:flex-start;background:#17232f;border:1px solid var(--ln)}
.m.err{align-self:center;color:var(--m);font-size:13px;text-align:center}
.m.dots{align-self:flex-start;color:var(--mute)}
#inrow{display:flex;gap:8px;padding-top:8px}
#inrow input{flex:1;min-width:0;background:#0a1118;border:1px solid var(--ln);border-radius:12px;padding:11px;color:var(--ink);font:inherit}
#inrow button,#bar2 button{border:1px solid var(--ln);background:none;border-radius:12px;padding:0 14px;min-height:42px}
#inrow .p,#bar2 .p{background:var(--c);color:#02161a;border-color:var(--c);font-weight:700}
.f{display:block;font-size:13px;color:var(--mute);margin-bottom:10px}
.f input:not([type=checkbox]),.f select{display:block;width:100%;margin-top:4px;background:#0a1118;border:1px solid var(--ln);border-radius:10px;padding:10px;color:var(--ink);font:inherit}
.f.row{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink)}
#bar2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}