:root{--ground:#070B0E;--panel:#0B1115;--line:#1C2A30;--text:#D7E3E6;--bright:#E8F4F6;--muted:#8AA0A8;--cyan:#4FD8E8;--amber:#F2B35E;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
main{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
header{display:flex;align-items:center;justify-content:space-between}
.word{font-weight:700;letter-spacing:.22em;color:var(--bright);font-size:18px}
.chip{font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;padding:6px 8px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}
.chip.on{color:var(--cyan);border-color:#24545C}.chip.busy{color:var(--amber);border-color:#5C4522}

/* The whole screen is the orb. */
.stage{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.orb{position:relative;width:min(72vw,300px);aspect-ratio:1;display:grid;place-items:center;border:0;padding:0;background:transparent;border-radius:50%;cursor:pointer;color:inherit}
.orb:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}
.ring{position:absolute;border-radius:50%;pointer-events:none}
.r1{inset:0;border:1px dashed #24545C;animation:spin 18s linear infinite}
.r2{inset:7%;border:2px solid transparent;border-top-color:var(--cyan);border-right-color:var(--cyan);animation:spin 26s linear infinite reverse}
.r3{inset:17%;border:1px solid var(--line)}
.dot{width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#BFF4FA 0,#4FD8E8 34%,#12505A 72%,#0B1115 100%);box-shadow:0 0 70px rgba(79,216,232,.42),0 0 160px rgba(79,216,232,.16);animation:breathe 3s ease-in-out infinite;pointer-events:none;transition:transform .09s linear,box-shadow .12s linear,background .5s ease,filter .5s ease;will-change:transform}
.ring{transition:border-color .5s ease,opacity .5s ease}
.orb.idle .dot{background:radial-gradient(circle at 50% 42%,#4FD8E8 0,#1B5F6A 55%,#0B1115 100%);box-shadow:0 0 44px rgba(79,216,232,.2)}
.orb.idle .r2{border-top-color:#2E6E79;border-right-color:#2E6E79}
.orb.waiting .dot{animation-duration:4s;box-shadow:0 0 50px rgba(79,216,232,.26)}
/* While listening the orb follows your voice: --level is set from the microphone, 0 to 1. */
.orb.listening .dot,.orb.waiting .dot{animation:none;transform:scale(calc(.94 + var(--level,0)*.34));box-shadow:0 0 calc(54px + var(--level,0)*110px) rgba(79,216,232,calc(.34 + var(--level,0)*.4)),0 0 160px rgba(79,216,232,.16)}
.orb.waiting .dot{filter:saturate(.55) brightness(.8)}
.orb.listening .r2{animation-duration:5s}
.orb.listening .r1{border-color:#2E6E79}
.orb.starting .dot{animation:breathe 1s ease-in-out infinite;filter:saturate(.5)}
.orb.thinking .r2{border-top-color:var(--amber);border-right-color:var(--amber);animation-duration:1.6s}
.orb.thinking .dot{background:radial-gradient(circle at 50% 42%,#FBE3BC 0,#F2B35E 36%,#5C4522 74%,#0B1115 100%);box-shadow:0 0 70px rgba(242,179,94,.36);animation:breathe 1.4s ease-in-out infinite}
.orb.error .dot{animation:none;background:radial-gradient(circle at 50% 42%,#F6C4C4 0,#D96A6A 40%,#4A1F1F 76%,#0B1115 100%);box-shadow:0 0 50px rgba(217,106,106,.3)}
.orb.error .r2{border-top-color:#D96A6A;border-right-color:#D96A6A;animation:none}
.orb.busy .r2{border-top-color:var(--amber);border-right-color:var(--amber);animation-duration:2.2s}
.orb.busy .dot{background:radial-gradient(circle at 50% 42%,#FBE3BC 0,#F2B35E 36%,#5C4522 74%,#0B1115 100%);box-shadow:0 0 70px rgba(242,179,94,.36)}
.orb.speaking .dot{animation:speak .9s ease-in-out infinite}
.orb.speaking .r3{border-color:#2E6E79;animation:speak .9s ease-in-out infinite -.3s}
.state{font:600 14px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--cyan);text-align:center;transition:color .4s ease}
.notice{margin:0;max-width:36ch;text-align:center;font-size:15px;line-height:1.4;color:var(--text);animation:rise .25s ease-out}
.notice.dim{color:var(--muted)}
.notice.error{color:#F3B7B7}
.version{margin:4px 0 0;font:12px ui-monospace,Menlo,Consolas,monospace;color:var(--muted);text-align:center}
.caption{margin:0;max-width:34ch;max-height:22dvh;overflow-y:auto;text-align:center;color:var(--muted);font-size:15px}

.actions{display:flex;flex-direction:column;gap:8px;width:min(100%,320px)}
.composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
textarea,#code,#device{width:100%;min-height:48px;padding:12px;border-radius:10px;border:1px solid #24343B;background:var(--panel);color:var(--bright);font:inherit;resize:none}
textarea:focus,input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
button,.linkbtn{min-height:48px;padding:0 16px;border-radius:10px;font:600 15px system-ui,sans-serif;cursor:pointer}
.primary{border:0;background:var(--cyan);color:#04252B}
.ghost{border:1px solid #24343B;background:transparent;color:var(--text)}
.ghost[aria-pressed="true"],.ghost[aria-expanded="true"]{border-color:#24545C;color:var(--cyan)}
.wide{width:100%}
.linkbtn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.menu{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.toggle{display:flex;align-items:center;gap:10px;color:var(--text);font-size:15px;min-height:44px}
.toggle input{width:22px;height:22px;accent-color:var(--cyan)}
#pair{justify-content:center;gap:16px}
#pair h1{margin:0;font-size:24px;color:var(--bright)}#pair p{margin:0;color:var(--muted)}
#pair form{display:flex;flex-direction:column;gap:10px}#pair label{font-size:14px;color:var(--muted)}
#code{font:600 28px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3em;text-align:center}
#pair-error{color:#F0B4B4;min-height:1.4em}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.72;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@keyframes speak{0%,100%{transform:scale(.92)}50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}