:root{--bg:#02070d;--panel:rgba(4,19,31,.78);--cyan:#68f5ff;--cyan2:#1cbfd0;--line:rgba(104,245,255,.22);--text:#dafcff;--muted:#75aeb7}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 16%,#082635 0,#031019 31%,#02070d 65%,#000 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}body{min-height:100dvh}.hidden{display:none!important}
.boot-screen{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;background:radial-gradient(circle,#092b3b,#02070d 58%,#000)}
.boot-title{font-size:clamp(34px,10vw,62px);letter-spacing:.28em;margin-left:.28em;text-shadow:0 0 24px rgba(104,245,255,.7)}
.boot-sub{margin-top:12px;color:var(--muted);font-size:11px;letter-spacing:.27em}
.boot-track{width:min(560px,82vw);height:3px;background:#0a1e29;margin-top:32px;overflow:hidden;box-shadow:0 0 10px rgba(104,245,255,.16)}
.boot-fill{height:100%;width:1%;background:linear-gradient(90deg,#1cbfd0,#b4ffff);box-shadow:0 0 16px #68f5ff}
.boot-pct{margin-top:10px;color:#8eeff6;font-variant-numeric:tabular-nums;letter-spacing:.15em}
.app{min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 4px 12px}
.brand{letter-spacing:.25em;font-size:18px}.tiny,.label{font-size:9px;letter-spacing:.2em;color:var(--muted);margin-top:5px}.clock{font-size:17px;letter-spacing:.14em}
.hud{height:min(45dvh,430px);min-height:300px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.grid-floor{position:absolute;bottom:-25%;left:-20%;width:140%;height:58%;background:linear-gradient(rgba(70,230,240,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,230,240,.12) 1px,transparent 1px);background-size:28px 28px;transform:perspective(330px) rotateX(65deg);mask-image:linear-gradient(to top,#000,transparent)}
.orb-wrap{position:relative;width:210px;height:210px;display:grid;place-items:center;filter:drop-shadow(0 0 20px rgba(104,245,255,.18))}
.core{width:76px;height:76px;border:1px solid #8efaff;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 20px #1cbfd0,inset 0 0 28px rgba(104,245,255,.25);animation:pulse 2s ease-in-out infinite}
.core-inner{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,#d6ffff 0,#77f7ff 18%,#0b6d7b 55%,transparent 72%);box-shadow:0 0 25px #68f5ff}
.ring{position:absolute;border:1px solid rgba(104,245,255,.58);border-radius:50%}
.ring-a{width:132px;height:132px;animation:spin 9s linear infinite;border-left-color:transparent;border-right-color:transparent}
.ring-b{width:170px;height:102px;transform:rotateX(66deg) rotateZ(15deg);animation:spin2 7s linear infinite}
.ring-c{width:202px;height:202px;border-style:dashed;border-color:rgba(104,245,255,.26);animation:spin 19s linear infinite reverse}
.target{position:absolute;width:24px;height:24px;border-color:#68f5ff;opacity:.65}.t1{left:4px;top:4px;border-left:1px solid;border-top:1px solid}.t2{right:4px;top:4px;border-right:1px solid;border-top:1px solid}.t3{left:4px;bottom:4px;border-left:1px solid;border-bottom:1px solid}.t4{right:4px;bottom:4px;border-right:1px solid;border-bottom:1px solid}
.state{font-size:12px;letter-spacing:.25em;margin-top:10px}.substate{font-size:8px;letter-spacing:.2em;color:var(--muted);margin-top:6px;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.card{background:linear-gradient(180deg,rgba(8,30,44,.72),rgba(3,14,22,.72));border:1px solid var(--line);padding:10px;min-height:57px;font-size:10px;letter-spacing:.08em}
.chat-panel{margin-top:10px;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);min-height:220px;display:flex;flex-direction:column}
.chat{flex:1;padding:12px;max-height:30dvh;overflow-y:auto}.msg{margin:7px 0;padding:9px 11px;border-left:2px solid var(--cyan2);background:rgba(7,30,42,.45);font-size:13px;line-height:1.45}.msg.user{border-left-color:#63747b;color:#cbd8da}
.composer{display:grid;grid-template-columns:44px 1fr 64px;gap:7px;padding:9px;border-top:1px solid var(--line)}input,button{font:inherit}input{min-width:0;background:#03111b;border:1px solid rgba(104,245,255,.25);color:white;padding:11px;outline:none}button{background:#06212d;color:#b9fbff;border:1px solid rgba(104,245,255,.35);letter-spacing:.1em;font-size:10px}.mic{font-size:18px}
.listening .core{animation:pulse .55s ease-in-out infinite}.thinking .ring-a{animation-duration:2s}.speaking .core{box-shadow:0 0 38px #68f5ff,inset 0 0 32px rgba(104,245,255,.38)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin2{from{transform:rotateX(66deg) rotateZ(15deg)}to{transform:rotateX(66deg) rotateZ(375deg)}}@keyframes pulse{50%{transform:scale(1.07);filter:brightness(1.3)}}
@media(max-width:520px){.card{padding:8px;font-size:8px}.hud{min-height:285px}.orb-wrap{transform:scale(.92)}}

.voice-enable{
  margin-top:14px;padding:9px 14px;border:1px solid rgba(104,245,255,.5);
  background:rgba(5,30,42,.75);color:#cfffff;letter-spacing:.18em;
  font-size:9px;box-shadow:0 0 14px rgba(104,245,255,.12)
}
.voice-enable.ready{opacity:.58}