:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#090b10;color:#f4f7fb}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% 38%,#18263c 0,#090b10 45%,#050609)}main{min-height:100dvh;display:grid;grid-template-rows:1fr auto auto;place-items:center;padding:max(24px,env(safe-area-inset-top)) 28px max(24px,env(safe-area-inset-bottom))}.orb-shell{display:grid;place-items:center;gap:28px}.orb{width:min(42vw,260px);aspect-ratio:1;border:0;border-radius:50%;background:color-mix(in srgb,#4c88ff 15%,transparent);box-shadow:0 0 50px #2c78ff55,inset 0 0 30px #9dc3ff33;padding:18%;transition:transform .16s ease,box-shadow .2s ease}.orb:active{transform:scale(.96)}.orb-core{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 36% 30%,#d8efff,#4a8fff 26%,#174acc 64%,#081b5e);box-shadow:0 0 48px #3181ffbb}.state{margin:0;font-size:clamp(22px,3vw,32px);font-weight:600;letter-spacing:.01em}.transcript-shell{min-height:110px;width:min(820px,90vw);text-align:center}.transcript{font-size:clamp(18px,2.3vw,25px);line-height:1.35;margin:0;color:#dae4f5}.latency{color:#8190a8;font-variant-numeric:tabular-nums}footer{display:flex;gap:14px}.secondary,dialog button{border:1px solid #8292ab66;color:#eef5ff;background:#192231cc;border-radius:999px;padding:13px 24px;font-size:17px}dialog{border:1px solid #7085a466;border-radius:20px;background:#101722;color:#fff;padding:28px;max-width:430px}dialog::backdrop{background:#000b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog form{display:grid;gap:16px}dialog h1,dialog p{margin:0}dialog input{width:100%;border:1px solid #7890b266;border-radius:12px;background:#070b11;color:#fff;padding:14px;font-size:18px}body[data-state=speaking] .orb{animation:pulse 1.15s infinite ease-in-out;box-shadow:0 0 85px #20d9d999}body[data-state=thinking] .orb-core{animation:spin 1.5s linear infinite;background:conic-gradient(#55e3da,#4b70ff,#b55cff,#55e3da)}body[data-state=muted] .orb,body[data-state=error] .orb{filter:grayscale(.8);box-shadow:0 0 30px #ff4f5a44}@keyframes pulse{50%{transform:scale(1.06)}}@keyframes spin{to{transform:rotate(360deg)}}