.orb-root{position:relative;width:min(72vw,360px);aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 24px rgba(255,107,26,.28)) drop-shadow(0 18px 60px rgba(255,107,26,.22));transition:filter .6s ease;will-change:filter}.orb-state-listening{filter:drop-shadow(0 0 36px rgba(255,107,26,.45)) drop-shadow(0 18px 70px rgba(255,107,26,.32))}.orb-state-thinking{filter:drop-shadow(0 0 30px rgba(255,107,26,.36)) drop-shadow(0 18px 70px rgba(255,107,26,.28))}.orb-state-speaking{filter:drop-shadow(0 0 44px rgba(255,107,26,.55)) drop-shadow(0 18px 80px rgba(255,107,26,.4))}.orb-wrap{width:100%;height:100%;transition:transform .04s linear;will-change:transform}.orb-svg{width:100%;height:100%;display:block}:root{--color-ink: #0E0E0E;--color-mute: #6B6B6B;--color-mute-soft: #9A9A9A;--color-bg: #FFFFFF;--color-orange: #FF6B1A;--color-orange-deep: #E54A0E;--color-orange-soft: #FFE9D6;--color-error: #C7361A;--font-display: "Unbounded", system-ui, sans-serif;--font-serif: "Instrument Serif", "Times New Roman", serif;--font-ui: "Manrope", system-ui, sans-serif;--safe-top: max(env(safe-area-inset-top), 16px);--safe-bottom: max(env(safe-area-inset-bottom), 16px)}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}body{background:radial-gradient(1200px 600px at 50% 110%,rgba(255,107,26,.06),transparent 60%),radial-gradient(900px 700px at 50% -10%,rgba(255,138,61,.05),transparent 60%),var(--color-bg)}button{font-family:inherit}.app{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto auto;padding:var(--safe-top) 24px var(--safe-bottom);max-width:560px;margin:0 auto;gap:16px}.head{text-align:center;margin-top:24px}.brand-name{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,11vw,56px);letter-spacing:-.02em;color:var(--color-ink);margin:0;line-height:1}.brand-sub{font-family:var(--font-serif);font-style:italic;font-size:clamp(20px,5.5vw,26px);color:var(--color-orange);margin:6px 0 0;line-height:1;letter-spacing:.01em}.orb-stage{display:flex;align-items:center;justify-content:center;padding:8px 0}.caption{text-align:center;min-height:80px;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 8px}.caption-q{font-family:var(--font-serif);font-style:italic;font-size:17px;color:var(--color-mute);margin:0;line-height:1.3}.caption-a{font-family:var(--font-ui);font-weight:500;font-size:17px;color:var(--color-ink);margin:0;line-height:1.4;animation:fade-up .25s ease-out}.caption-hint{font-family:var(--font-ui);font-size:15px;color:var(--color-mute-soft);margin:0;letter-spacing:.01em}.caption-error{font-family:var(--font-ui);font-size:14px;color:var(--color-error);margin:0}@keyframes fade-up{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.controls{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:8px}.mic-btn{width:76px;height:76px;border-radius:50%;border:none;background:var(--color-ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;box-shadow:0 8px 24px #0000001f,0 2px 4px #00000014;transition:background .2s ease,transform .12s ease,box-shadow .2s ease}.mic-btn:active{transform:scale(.96)}.mic-btn.mic-listening{background:var(--color-orange);box-shadow:0 0 0 8px #ff6b1a2e,0 0 0 16px #ff6b1a14,0 8px 24px #ff6b1a59;animation:pulse-rec 1.4s ease-in-out infinite}.mic-btn.mic-thinking{background:var(--color-mute);opacity:.7}.mic-btn.mic-speaking{background:var(--color-ink);opacity:.5}@keyframes pulse-rec{0%,to{box-shadow:0 0 0 8px #ff6b1a2e,0 0 0 16px #ff6b1a14,0 8px 24px #ff6b1a59}50%{box-shadow:0 0 0 14px #ff6b1a1a,0 0 0 24px #ff6b1a0a,0 8px 28px #ff6b1a73}}.mic-hint{font-family:var(--font-ui);font-size:12px;color:var(--color-mute-soft);margin:0;letter-spacing:.06em;text-transform:uppercase}@media (min-width: 720px){.app{padding-top:48px;padding-bottom:48px}.head{margin-top:0}}
