:root{--bg-dark: #0a0a1a;--bg-glass: rgba(15, 15, 35, .65);--bg-glass-hover: rgba(25, 25, 55, .75);--border-glass: rgba(255, 255, 255, .08);--border-glass-hover: rgba(255, 255, 255, .15);--text-primary: #f0f0ff;--text-secondary: rgba(240, 240, 255, .6);--text-muted: rgba(240, 240, 255, .35);--accent-pink: #f472b6;--accent-purple: #a78bfa;--accent-lavender: #c4b5fd;--accent-mint: #6ee7b7;--accent-coral: #fb923c;--accent-gold: #fbbf24;--accent-cyan: #22d3ee;--grad-primary: linear-gradient(135deg, #f472b6, #a78bfa, #818cf8);--grad-warm: linear-gradient(135deg, #f472b6, #fb923c);--grad-cool: linear-gradient(135deg, #818cf8, #22d3ee);--grad-nature: linear-gradient(135deg, #6ee7b7, #a78bfa);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--glass-blur: 20px;--glass-blur-heavy: 40px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Inter,Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hidden{display:none!important}#loading-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);transition:opacity .6s ease,visibility .6s ease}#loading-screen.fade-out{opacity:0;visibility:hidden}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-flower{animation:floatSpin 3s ease-in-out infinite}.loading-flower .petal{animation:petalPulse 2s ease-in-out infinite}.loading-flower .p1{animation-delay:0s}.loading-flower .p2{animation-delay:.33s}.loading-flower .p3{animation-delay:.66s}.loading-flower .p4{animation-delay:1s}.loading-flower .p5{animation-delay:1.33s}.loading-flower .p6{animation-delay:1.66s}@keyframes floatSpin{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(15deg)}}@keyframes petalPulse{0%,to{opacity:.7}50%{opacity:1}}.loading-title{font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:700;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.loading-subtitle{font-size:.9rem;color:var(--text-secondary);text-align:center;max-width:280px;line-height:1.5}.loading-bar{width:200px;height:3px;background:#ffffff14;border-radius:2px;overflow:hidden}.loading-bar-fill{width:0%;height:100%;background:var(--grad-primary);border-radius:2px;transition:width .4s ease}#app{position:fixed;inset:0;overflow:hidden}#webcam{display:none}#bg-canvas,#draw-canvas{position:absolute;top:0;left:0;width:100%;height:100%}#bg-canvas{z-index:1}#draw-canvas{z-index:2}#cursor-indicator{position:fixed;z-index:10;pointer-events:none;transition:opacity .2s ease}.cursor-ring{width:40px;height:40px;border:2px solid var(--accent-pink);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:cursorPulse 1.5s ease-in-out infinite;box-shadow:0 0 15px #f472b64d}.cursor-ring.drawing{border-color:var(--accent-gold);box-shadow:0 0 20px #fbbf2466;animation:cursorPulseActive .8s ease-in-out infinite}.cursor-dot{width:8px;height:8px;background:var(--accent-pink);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #f472b680}@keyframes cursorPulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.3}}@keyframes cursorPulseActive{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.7}}#top-bar{position:fixed;top:16px;left:16px;right:16px;z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none}#top-bar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-glass);border-radius:var(--radius-lg)}.brand-icon{font-size:1.3rem}.brand-text{font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:600;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.gesture-badge{display:flex;align-items:center;gap:8px;padding:8px 18px;background:var(--bg-glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-glass);border-radius:var(--radius-lg);transition:all .3s ease}.gesture-badge.active{border-color:#a78bfa4d;box-shadow:0 0 20px #a78bfa1a}.gesture-badge.drawing{border-color:#fbbf244d;box-shadow:0 0 20px #fbbf241a}.gesture-badge.gathering{border-color:#6ee7b74d;box-shadow:0 0 20px #6ee7b71a}.gesture-icon{font-size:1.2rem;transition:transform .3s ease}.gesture-text{font-size:.8rem;font-weight:500;color:var(--text-secondary);transition:color .3s ease}.stat-badge{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-glass);border-radius:var(--radius-lg)}.stat-icon{font-size:1rem}.stat-value{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary)}#control-panel{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:20;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-glass);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border:1px solid var(--border-glass);border-radius:var(--radius-xl);box-shadow:0 8px 32px #0000004d}.control-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 18px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all .25s ease;position:relative}.control-btn:hover{background:var(--bg-glass-hover);border-color:var(--border-glass-hover);color:var(--text-primary)}.control-btn:active{transform:scale(.95)}.control-btn.active{color:var(--accent-mint);background:#6ee7b714;border-color:#6ee7b726}.control-btn.muted{color:#f0f0ff40}.control-icon{width:22px;height:22px}.control-label{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.mic-level-bar{position:absolute;bottom:-2px;left:10%;width:80%;height:3px;background:#ffffff0f;border-radius:2px;overflow:hidden}.mic-level-fill{width:0%;height:100%;background:var(--grad-cool);border-radius:2px;transition:width .05s linear}.mic-threshold-line{position:absolute;top:0;left:60%;width:2px;height:100%;background:var(--accent-coral);border-radius:1px}#help-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.help-card{position:relative;max-width:580px;width:90%;padding:36px;background:var(--bg-glass);backdrop-filter:blur(var(--glass-blur-heavy));-webkit-backdrop-filter:blur(var(--glass-blur-heavy));border:1px solid var(--border-glass);border-radius:var(--radius-xl);box-shadow:0 16px 64px #0006}.help-card h2{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:600;margin-bottom:24px;background:var(--grad-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.help-close{position:absolute;top:16px;right:16px;width:32px;height:32px;background:#ffffff0f;border:1px solid var(--border-glass);border-radius:50%;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.help-close:hover{background:#ffffff1f;color:var(--text-primary)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.help-item{padding:16px;background:#ffffff08;border:1px solid var(--border-glass);border-radius:var(--radius-md);transition:all .2s ease}.help-item:hover{background:#ffffff0f;border-color:var(--border-glass-hover)}.help-gesture{font-size:2rem;margin-bottom:8px}.help-item h3{font-size:.9rem;font-weight:600;margin-bottom:6px;color:var(--text-primary)}.help-item p{font-size:.78rem;color:var(--text-secondary);line-height:1.5}#blow-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:none;animation:blowFadeIn .3s ease}@keyframes blowFadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.blow-wave{width:120px;height:120px;border:2px solid rgba(34,211,238,.3);border-radius:50%;position:absolute;animation:blowWaveExpand 1.5s ease-out infinite}.blow-wave:nth-child(2){animation-delay:.5s}.blow-wave:nth-child(3){animation-delay:1s}@keyframes blowWaveExpand{0%{width:60px;height:60px;opacity:.6}to{width:200px;height:200px;opacity:0}}.blow-text{font-size:1.1rem;font-weight:600;color:var(--accent-cyan);text-shadow:0 0 20px rgba(34,211,238,.4);z-index:1}@media(max-width:600px){.help-grid{grid-template-columns:1fr}.help-card{padding:24px}#control-panel{padding:6px 8px;gap:4px}.control-btn{padding:8px 12px}.brand-text{display:none}}