:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:#010817;color:#def8ff}button,input{font:inherit}
.scene{min-height:100dvh;position:relative;isolation:isolate;overflow:hidden;padding:max(env(safe-area-inset-top),16px) max(env(safe-area-inset-right),18px) max(env(safe-area-inset-bottom),16px) max(env(safe-area-inset-left),18px);display:flex;flex-direction:column;background:radial-gradient(ellipse 70% 45% at 50% 42%,#0b4162 0%,#07172f 55%,#020716 100%)}
.scene::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 60% 25% at 50% 48%,#2cdfff12,transparent 75%)}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(to bottom,transparent 0 5px,#77dfff07 6px 7px)}
.sky{position:absolute;inset:0;pointer-events:none;z-index:-2;background-image:radial-gradient(circle at 17% 21%,#a8e8ffbd 0 1px,transparent 2px),radial-gradient(circle at 75% 18%,#a8e8ff80 0 1px,transparent 2px),radial-gradient(circle at 21% 66%,#7cd7fa99 0 1px,transparent 2px),radial-gradient(circle at 83% 63%,#a8e8ff60 0 1px,transparent 2px);animation:drift 15s alternate ease-in-out infinite}
.floor{position:absolute;left:-25%;right:-25%;height:50vh;bottom:-21vh;z-index:-1;background-image:linear-gradient(#27c9ff26 1px,transparent 1px),linear-gradient(90deg,#27c9ff26 1px,transparent 1px);background-size:36px 36px;transform:perspective(360px) rotateX(65deg);mask-image:linear-gradient(transparent,black 28%,transparent 92%);pointer-events:none}
.header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding-top:12px;padding-bottom:12px;border-bottom:1px solid #7beaff55;flex:none}
.brand{letter-spacing:.19em;font-weight:900;font-size:clamp(15px,4vw,24px);text-shadow:0 0 22px #49deff70}.brand span{font-size:.7em;color:#75c7e5}.strap{font-size:9px;letter-spacing:.15em;color:#7db2c8;font-weight:500;margin-top:6px}
.demo{font-size:9px;letter-spacing:.11em;color:#9bd8e8;border:1px solid #6adcfb72;padding:8px;border-radius:8px;white-space:nowrap;background:#07325499}
.hud{display:flex;justify-content:space-between;align-items:center;color:#8bd3e9;font-size:11px;letter-spacing:.12em;margin-top:17px;flex:none}.dot{display:inline-block;background:#7bffce;border-radius:50%;height:8px;width:8px;box-shadow:0 0 13px #8cffff;margin-right:8px}
.orb-stage{flex:1 1 auto;min-height:180px;display:grid;place-items:center;position:relative}
.orb{width:min(76vw,52vh,530px);height:min(76vw,52vh,530px);position:relative;display:grid;place-items:center;filter:drop-shadow(0 0 25px #39d8ff53)}
.orb::before{content:"";position:absolute;inset:-11%;border-radius:50%;border:1px solid #6ee9ff28;box-shadow:0 0 36px #08ccff14,inset 0 0 50px #1cb3ee10}
.outer-circle{position:absolute;inset:0;border-radius:50%;border:1px solid #52d6f188;box-shadow:inset 0 0 26px #29bdee4a,0 0 32px #21bded4b}
.ring{position:absolute;border-radius:50%;pointer-events:none}.r1{inset:4%;border:3px solid transparent;border-top-color:#b0ffff;border-bottom-color:#36c5fa;box-shadow:0 0 20px #36cafa33;animation:spin 17s linear infinite}.r2{inset:12%;border:2px dashed #4cd9faaf;animation:spin 26s linear infinite reverse}.r3{inset:21%;border:8px solid transparent;border-left-color:#9effffbc;border-right-color:#56c6f7b9;box-shadow:inset 0 0 28px #51c6f84a;animation:spin 12s ease-in-out infinite}.r4{inset:30%;border:1px dotted #c2ffffb0;box-shadow:0 0 25px #3cf8ff66,inset 0 0 25px #31dcf15e;animation:breathe 2.9s ease-in-out infinite}
.crosshair{position:absolute;background:linear-gradient(90deg,transparent,#5ae5ff4f,transparent)}.crosshair.x{width:115%;height:1px}.crosshair.y{height:115%;width:1px;background:linear-gradient(transparent,#5ae5ff4f,transparent)}
.core{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle at 36% 28%,#dfffff 0%,#78efff 17%,#19a6dc 40%,#074c81 67%,#04142b 93%);border:1px solid #c7ffff;box-shadow:0 0 28px #30d9ff,0 0 75px #00bdff99,inset 0 0 26px #d9ffffa3;animation:breathe 3.1s ease-in-out infinite}.core-inner{position:absolute;inset:32%;border-radius:50%;background:#ecffff;box-shadow:0 0 22px 12px #e2ffff88,0 0 46px #d2ffff}
.orbit-label{position:absolute;font-size:9px;letter-spacing:.16em;color:#77d6ed;white-space:nowrap;text-shadow:0 0 9px #41ccf8}.l1{left:-1%;top:37%}.l2{right:-3%;top:62%}
.interact{position:relative;z-index:5;flex:none;width:min(100%,650px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}.eyebrow{text-align:center;color:#6fe6fb;font-size:11px;letter-spacing:.22em;font-weight:800}.answer{font-size:clamp(14px,2.8vw,19px);line-height:1.5;text-align:center;min-height:58px;max-height:120px;overflow:auto;max-width:620px;text-shadow:0 0 16px #3dcfff44}.buttons{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;width:100%}
.talk{background:linear-gradient(155deg,#124b70,#081d34);color:#c3faff;border:1px solid #57e0ff92;min-height:52px;border-radius:12px;font-size:12px;font-weight:750;letter-spacing:.05em;padding:10px 15px;cursor:pointer;touch-action:manipulation}.primary{background:linear-gradient(140deg,#86fcff,#028ed2);color:#04253c;border-color:#e8ffff;box-shadow:0 0 24px #27d2ff71}.mute{font-size:10px}
#form{display:flex;gap:8px;width:100%}#form input{flex:1;min-width:0;background:#061c32e0;border:1px solid #51d2f587;border-radius:11px;padding:13px 14px;color:#eaffff;font-size:16px}#form button{background:#0d5277;border:1px solid #64e5ffb0;color:#c3ffff;border-radius:11px;font-size:22px;width:54px}.footer{font-size:10px;max-width:520px;text-align:center;color:#8ab1c3;line-height:1.45}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.listening .core,.speaking .core{animation:talk .6s ease-in-out infinite alternate}.listening .orb{filter:drop-shadow(0 0 40px #43fbffb3)}.processing .r1{animation-duration:3s}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{50%{transform:scale(1.08);filter:brightness(1.4)}}@keyframes talk{to{transform:scale(1.18);filter:brightness(1.8)}}@keyframes drift{to{transform:translateY(15px)}}
@media(max-height:730px){.scene{padding-top:max(env(safe-area-inset-top),8px);padding-bottom:max(env(safe-area-inset-bottom),6px)}.header{padding-top:5px;padding-bottom:8px}.hud{margin-top:8px}.orb{width:min(68vw,40vh);height:min(68vw,40vh)}.interact{gap:7px}.answer{min-height:42px;max-height:75px}.talk{min-height:44px;padding:6px 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}