:root{--bg-primary: #0a0a0a;--stroke-color: #ffffff;--accent-color: #666666;--text-primary: #ffffff;--text-secondary: #888888;--control-bg: rgba(255, 255, 255, .05);--control-border: rgba(255, 255, 255, .1);--control-hover: rgba(255, 255, 255, .1);--control-active: rgba(255, 255, 255, .2);--stroke-width: 2.5px;--stroke-linecap: round;--transition-fast: .15s ease;--transition-normal: .3s ease;--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}[data-theme=light]{--bg-primary: #ffffff;--stroke-color: #0a0a0a;--accent-color: #999999;--text-primary: #0a0a0a;--text-secondary: #666666;--control-bg: rgba(0, 0, 0, .03);--control-border: rgba(0, 0, 0, .1);--control-hover: rgba(0, 0, 0, .05);--control-active: rgba(0, 0, 0, .1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-primary);background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal);display:flex;align-items:center;justify-content:center}#face-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}#face-svg{width:100%;height:100%}.face-stroke{fill:none;stroke:var(--stroke-color);stroke-width:var(--stroke-width);stroke-linecap:var(--stroke-linecap);stroke-linejoin:round;transition:stroke var(--transition-normal)}#thinking-label{position:absolute;top:15%;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;padding:8px 16px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:20px;font-size:14px;color:var(--text-secondary);opacity:1;transition:opacity var(--transition-normal)}#thinking-label.hidden{opacity:0;pointer-events:none}.thinking-text{font-weight:500;letter-spacing:.5px}.thinking-dots{animation:thinking-pulse 1.5s ease-in-out infinite}@keyframes thinking-pulse{0%,to{opacity:.3}50%{opacity:1}}.menu-toggle{position:fixed;bottom:24px;right:24px;width:48px;height:48px;border-radius:50%;background:var(--control-bg);border:1px solid var(--control-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:1001;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.menu-toggle:hover{background:var(--control-hover);transform:scale(1.05)}.menu-toggle:active{transform:scale(.95)}.menu-icon{font-size:20px;color:var(--text-primary);transition:transform var(--transition-normal)}.menu-toggle.active .menu-icon{transform:rotate(90deg)}#controls-panel{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(0);display:flex;flex-direction:column;gap:16px;padding:20px 24px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:90vw;z-index:1000;transition:transform var(--transition-normal),opacity var(--transition-normal)}#controls-panel.collapsed{transform:translate(-50%) translateY(calc(100% + 48px));opacity:0;pointer-events:none}@media (orientation: landscape) and (max-height: 500px){#controls-panel{transform:translate(-50%) translateY(calc(100% + 48px));opacity:0;pointer-events:none}#controls-panel.force-visible{transform:translate(-50%) translateY(0);opacity:1;pointer-events:auto}.menu-toggle{bottom:16px;right:16px;width:40px;height:40px}}#controls-panel h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-bottom:-8px}.button-group{display:flex;flex-wrap:wrap;gap:8px}.state-btn,.theme-btn{padding:8px 16px;font-size:13px;font-weight:500;font-family:var(--font-primary);color:var(--text-primary);background:transparent;border:1px solid var(--control-border);border-radius:8px;cursor:pointer;transition:all var(--transition-fast)}.state-btn:hover,.theme-btn:hover{background:var(--control-hover)}.state-btn.active,.theme-btn.active{background:var(--control-active);border-color:var(--text-secondary)}.toggle-group{display:flex;align-items:center}.toggle-group label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);cursor:pointer}.toggle-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--stroke-color)}.hidden{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 600px){#controls-panel{bottom:16px;padding:16px;gap:12px}.state-btn,.theme-btn{padding:6px 12px;font-size:12px}}@keyframes subtle-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.002)}}.connection-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);margin-top:8px}.status-indicator{width:8px;height:8px;border-radius:50%;background:#666}.status-indicator.connected{background:#4ade80;box-shadow:0 0 8px #4ade8080}.swipe-hint{position:fixed;bottom:50%;left:50%;transform:translate(-50%);padding:12px 24px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:30px;font-size:14px;color:var(--text-secondary);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:100}.swipe-hint.visible{opacity:1}#face-container{cursor:grab;user-select:none;-webkit-user-select:none}#face-container:active{cursor:grabbing}#face-group{transition:opacity .1s ease}#face-group.hidden{opacity:0;pointer-events:none}