*{box-sizing:border-box}
:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050608;color:#fff}
body{min-height:100dvh}
.app{position:relative;width:100%;height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 45%,#111827 0,#07090e 38%,#030405 80%)}
#camera{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.app.camera-on #camera{opacity:.18}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 45%,rgba(0,0,0,.7))}
.topbar{position:absolute;z-index:4;top:max(18px,env(safe-area-inset-top));left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.14em}
.brand{display:flex;gap:9px;align-items:center;font-weight:700}.brand-dot{width:8px;height:8px;border-radius:50%;background:#9dfcff;box-shadow:0 0 14px #7cf9ff}
.status{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(0,0,0,.25);backdrop-filter:blur(10px);color:#aab2c4}
.landing{position:absolute;z-index:3;left:24px;right:24px;top:50%;transform:translateY(-47%);text-align:center}
.eyebrow{font-size:11px;letter-spacing:.24em;color:#91faff;margin-bottom:22px}
h1{font-size:clamp(44px,13vw,72px);line-height:.98;letter-spacing:-.055em;margin:0;font-weight:750}
h1 em{font-style:normal;background:linear-gradient(100deg,#fff,#9ffcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing p{margin:24px 0 34px;color:#9da6b8;font-size:16px;line-height:1.7}
.primary{border:0;color:#050608;background:#fff;border-radius:999px;padding:16px 25px;font-size:16px;font-weight:700;box-shadow:0 0 35px rgba(160,250,255,.18);cursor:pointer}
.primary span{margin-left:16px}.hint{font-size:11px;color:#606879;margin-top:16px}
.hidden{display:none!important}
.live{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:100px 20px 35px}
.orb-wrap{position:relative;width:210px;height:210px;display:grid;place-items:center}
.ring,.orb{position:absolute;border-radius:50%}
.ring{border:1px solid rgba(142,247,255,.25);animation:breathe 2.8s ease-in-out infinite}
.ring1{inset:15px}.ring2{inset:0;animation-delay:.25s}.ring3{inset:-22px;animation-delay:.5s;opacity:.5}
.orb{width:116px;height:116px;background:radial-gradient(circle at 35% 30%,#fff,#a3fbff 23%,#36b8c7 48%,#12232d 72%,#05070a);box-shadow:0 0 60px rgba(105,245,255,.45),inset 0 0 35px rgba(255,255,255,.35)}
.orb span{display:block;width:20px;height:20px;margin:31px auto;background:#fff;border-radius:50%;filter:blur(4px);opacity:.8}
.live.speaking .orb{animation:talk .55s ease-in-out infinite alternate}.live.listening .orb{animation:listen 1.1s ease-in-out infinite alternate}
.live-state{margin-top:35px;color:#dbe5f1;font-size:14px;letter-spacing:.08em}
.subtitle{height:52px;max-width:650px;margin:18px auto 0;text-align:center;color:#fff;font-size:17px;line-height:1.55;text-shadow:0 2px 20px #000}
.quick{position:absolute;bottom:max(86px,calc(70px + env(safe-area-inset-bottom)));display:flex;gap:8px;max-width:100%;overflow:auto;padding:0 8px}
.quick button{white-space:nowrap;border:1px solid rgba(255,255,255,.12);background:rgba(10,14,20,.55);color:#dfe7f2;border-radius:999px;padding:10px 13px;backdrop-filter:blur(12px);font-size:12px}
.stop{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));border:0;background:transparent;color:#737d8d;font-size:12px}
.error{position:absolute;z-index:10;left:18px;right:18px;bottom:20px;padding:14px;border-radius:14px;background:#341218;border:1px solid #73303c;color:#ffd9df;font-size:13px;line-height:1.5}
@keyframes breathe{50%{transform:scale(1.08);opacity:.55}}@keyframes listen{to{transform:scale(1.09)}}@keyframes talk{to{transform:scale(1.16)}} 
@media(min-width:700px){.landing{max-width:700px;left:50%;right:auto;width:700px;transform:translate(-50%,-47%)}}