:root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#111827cc;--accent-primary:#00e5ff;--accent-secondary:#06b6d4;--accent-glow:#00e5ff4d;--text-primary:#f0f4f8;--text-secondary:#f0f4f899;--text-muted:#f0f4f84d;--color-idle:#06b6d4;--color-listening:#22d3ee;--color-thinking:#8b5cf6;--color-speaking:#00e5ff;--color-error:#ef4444;--font-family:"Inter", sans-serif;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--transition-fast:.15s ease;--transition-base:.3s ease-in-out;--transition-slow:.6s ease-in-out;--border-radius:12px;--border-radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);background-image:radial-gradient(circle at 50% -20%,#06b6d426 0%,#0000 60%);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.app-container{opacity:0;flex-direction:column;width:100vw;height:100dvh;animation:.8s ease-out .2s forwards page-entrance;display:flex;position:relative}@keyframes page-entrance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.top-bar{padding:var(--space-md) var(--space-xl);z-index:10;opacity:.6;transition:opacity var(--transition-base);justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.top-bar:hover{opacity:1}.top-bar__title{font-size:var(--font-size-lg);letter-spacing:.5px;font-weight:600}.top-bar__settings{color:var(--text-primary);cursor:pointer;padding:var(--space-xs);background:0 0;border:none}.main-content{padding:var(--space-2xl) var(--space-xl) var(--space-xl);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.orb-container{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.caption-area{min-height:3rem;max-height:6rem;margin-bottom:var(--space-2xl);text-align:center;padding:0 var(--space-xl);justify-content:center;align-items:center;display:flex;overflow:hidden}.caption__text{font-size:var(--font-size-xl);color:var(--accent-primary);letter-spacing:.01em;transition:color var(--transition-fast);font-weight:500;line-height:1.6}.caption__word{white-space:pre;display:inline-block}.caption--pulse{animation:1.5s ease-in-out infinite caption-pulse}@keyframes caption-pulse{0%,to{opacity:1}50%{opacity:.4}}.caption--error{color:var(--color-error)}.controls-bar{padding:var(--space-md);margin-bottom:var(--space-xl);justify-content:center;align-items:center;display:flex}.orb{border-radius:var(--border-radius-full);width:180px;height:180px;transition:all var(--transition-slow);cursor:pointer;justify-content:center;align-items:center;display:flex;position:relative}@media (width>=768px){.orb{width:240px;height:240px}}@media (width>=1024px){.orb{width:280px;height:280px}}.orb__inner{border-radius:var(--border-radius-full);background:radial-gradient(circle at 30% 30%, var(--accent-primary) 0%, var(--accent-secondary) 100%);z-index:2;transition:all var(--transition-slow);position:absolute;inset:0}.orb__glow{border-radius:var(--border-radius-full);background:var(--accent-glow);filter:blur(20px);z-index:1;transition:all var(--transition-slow);opacity:.6;position:absolute;inset:-10px}.orb__ripple{border-radius:var(--border-radius-full);border:2px solid var(--accent-primary);z-index:0;opacity:0;position:absolute;inset:0;transform:scale(1)}.orb--idle{animation:4s ease-in-out infinite orb-breathing}.orb--idle .orb__inner{background:radial-gradient(circle at 30% 30%, var(--color-idle) 0%, #0369a1 100%)}.orb--idle .orb__glow{background:var(--color-idle);opacity:.4}.orb--listening{animation:2s ease-in-out infinite orb-listening-pulse}.orb--listening .orb__inner{background:radial-gradient(circle at 30% 30%, var(--color-listening) 0%, var(--accent-secondary) 100%)}.orb--listening .orb__glow{background:var(--color-listening);opacity:.8;filter:blur(30px)}.orb--listening .orb__ripple{animation:2s linear infinite orb-ripple-anim}.orb--thinking .orb__inner{background:conic-gradient(from 0deg, var(--color-thinking), var(--accent-primary), var(--color-thinking));animation:2s linear infinite orb-thinking-rotate}.orb--thinking .orb__glow{background:var(--color-thinking);opacity:.5}.orb--speaking{animation:1.5s ease-in-out infinite orb-speaking-pulse}.orb--speaking .orb__inner{background:radial-gradient(circle at 30% 30%, #fff 0%, var(--color-speaking) 50%, var(--accent-secondary) 100%)}.orb--speaking .orb__glow{background:var(--color-speaking);opacity:1;filter:blur(40px)}.orb--error{animation:none;transform:scale(.95)}.orb--error .orb__inner{background:radial-gradient(circle at 30% 30%, #9ca3af 0%, var(--color-error) 100%);filter:grayscale(.5)}.orb--error .orb__glow{background:var(--color-error);opacity:.2;filter:blur(10px)}@keyframes orb-breathing{0%,to{transform:scale(.97)}50%{transform:scale(1.03)}}@keyframes orb-listening-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes orb-thinking-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes orb-speaking-pulse{0%,to{transform:scale(1)}25%{transform:scale(1.08)}75%{transform:scale(.95)}}@keyframes orb-ripple-anim{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}.controls-bar{justify-content:center;align-items:center;gap:var(--space-xl);padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--border-radius-full);z-index:10;background:#11182766;border:1px solid #ffffff0d;display:flex;position:relative;box-shadow:0 4px 20px #0003}.control-btn{color:var(--text-primary);justify-content:center;align-items:center;gap:var(--space-xs);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;outline:none;flex-direction:column;display:flex;position:relative}.control-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:4px;border-radius:8px}.control-btn--secondary{opacity:.5;padding:var(--space-sm);min-width:44px;min-height:44px}@media (width<=767px){.controls-bar{width:90%;max-width:400px;margin-left:auto;margin-right:auto}}.control-btn--secondary:hover{opacity:1;transform:scale(1.05)}.control-btn--secondary svg{transition:stroke var(--transition-fast)}.control-btn__label{text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:500}.control-btn--secondary.is-muted{opacity:.8;color:var(--color-error)}.control-btn--secondary.is-muted svg{stroke:var(--color-error)}.control-btn--primary{background:var(--accent-secondary);color:#fff;z-index:2;border-radius:50%;width:64px;height:64px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 15px #06b6d44d}.control-btn--primary:hover{background:var(--accent-primary);transform:scale(1.05);box-shadow:0 6px 20px #00e5ff66}.control-btn--primary:focus-visible{border-radius:50%}.control-btn--primary svg{z-index:2;position:relative}.control-btn--primary.is-active{background:var(--color-speaking);animation:1.5s infinite mic-pulse;box-shadow:0 0 #00e5ffb3}@keyframes mic-pulse{0%{box-shadow:0 0 #00e5ffb3}70%{box-shadow:0 0 0 15px #00e5ff00}to{box-shadow:0 0 #00e5ff00}}.mic-ripple{background:var(--accent-primary);opacity:0;pointer-events:none;z-index:1;border-radius:50%;position:absolute;inset:0;transform:scale(0)}.control-btn--primary.is-tapped .mic-ripple{animation:.5s ease-out ripple-expand}@keyframes ripple-expand{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(2.5)}}.overlay-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;opacity:0;pointer-events:none;background:#00000080;align-items:flex-end;transition:opacity .3s;display:none;position:fixed;inset:0}.overlay-backdrop:not([hidden]){display:flex}.overlay-backdrop.is-active{opacity:1;pointer-events:auto}.history-drawer{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:100%;height:65vh;color:var(--text-primary);border-top:1px solid #ffffff1a;border-radius:20px 20px 0 0;flex-direction:column;transition:transform .4s cubic-bezier(.32,.72,0,1);display:flex;transform:translateY(100%);box-shadow:0 -10px 40px #0000004d}.overlay-backdrop.is-active .history-drawer{transform:translateY(0)}.history-drawer__header{padding:var(--space-md) var(--space-xl);border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;display:flex}.history-drawer__header h2{font-size:var(--font-size-lg);font-weight:600}.history-drawer__close{color:var(--text-secondary);cursor:pointer;padding:var(--space-xs);transition:color var(--transition-fast);background:0 0;border:none}.history-drawer__close:hover{color:var(--text-primary)}.history-drawer__content{padding:var(--space-md) var(--space-xl);scrollbar-width:thin;scrollbar-color:#fff3 transparent;flex:1;overflow-y:auto}.history-drawer__content::-webkit-scrollbar{width:6px}.history-drawer__content::-webkit-scrollbar-thumb{border-radius:var(--border-radius-full);background-color:#fff3}.history-list{gap:var(--space-md);flex-direction:column;list-style:none;display:flex}.history-item{border-radius:var(--border-radius);padding:var(--space-md);transition:background var(--transition-fast);gap:var(--space-xs);background:#ffffff05;border:1px solid #ffffff0d;flex-direction:column;display:flex}.history-item:hover{background:#ffffff0d}.history-item__header{font-size:var(--font-size-sm);justify-content:space-between;align-items:center;display:flex}.history-item__role{color:var(--accent-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.7rem;font-weight:600}.history-item__time{color:var(--text-muted)}.history-item__text{font-size:var(--font-size-base);color:var(--text-primary);line-height:1.5}.history-empty{text-align:center;height:100%;color:var(--text-secondary);justify-content:center;align-items:center;gap:var(--space-xs);flex-direction:column;display:flex}.text-muted{color:var(--text-muted);font-size:var(--font-size-sm)}.settings-modal{background:var(--bg-card);border-radius:var(--border-radius);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);width:90%;max-width:400px;color:var(--text-primary);border:1px solid #ffffff1a;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);transform:scale(.95);box-shadow:0 10px 40px #00000080}.overlay-backdrop.is-active .settings-modal{transform:scale(1)}.settings-modal__header{padding:var(--space-md) var(--space-xl);border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;display:flex}.settings-modal__header h2{font-size:var(--font-size-lg);font-weight:600}.settings-modal__content{padding:var(--space-xl);gap:var(--space-lg);flex-direction:column;display:flex}.setting-item{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.setting-item__info{flex:1}.setting-item__info label{font-size:var(--font-size-base);margin-bottom:var(--space-xs);font-weight:500;display:block}.setting-item__desc{color:var(--text-secondary);font-size:.8rem;line-height:1.4}.toggle-switch{cursor:pointer;width:50px;height:26px;transition:background var(--transition-base);background:#ffffff1a;border:2px solid #0000;border-radius:13px;outline:none;position:relative}.toggle-switch[aria-checked=true]{background:var(--accent-primary)}.toggle-switch:focus-visible{border-color:#fff}.toggle-switch__knob{width:22px;height:22px;transition:transform var(--transition-base);background:#fff;border-radius:50%;position:absolute;top:0;left:0;box-shadow:0 2px 4px #0003}.toggle-switch[aria-checked=true] .toggle-switch__knob{transform:translate(24px)}body.reduce-motion *{transition-duration:.2s!important;animation-duration:.01ms!important}body.reduce-motion .orb{animation:4s ease-in-out infinite orb-breathing-reduced!important}@keyframes orb-breathing-reduced{0%,to{opacity:.8}50%{opacity:1}}body.reduce-motion .orb__ripple{display:none!important}