:root{--bg-primary:#06060e;--bg-secondary:#0c0c1a;--glass-bg:#ffffff0a;--glass-border:#ffffff14;--glass-hover:#ffffff14;--text-primary:#ffffffeb;--text-secondary:#ffffff8c;--text-muted:#ffffff4d;--accent-glow:#7c6aef;--accent-pink:#e06aaf;--accent-cyan:#5ce0d8;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-full:999px;--blur:20px;--font-display:"Space Grotesk", sans-serif;--font-body:"Inter", sans-serif;--transition:.3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg-primary);width:100%;height:100%;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}.velari-canvas-layer{z-index:1;position:fixed;inset:0}.velari-canvas-layer canvas{cursor:crosshair;display:block;width:100%!important;height:100%!important}.velari-ui{z-index:10;pointer-events:none;position:fixed;inset:0}.velari-ui>*{pointer-events:auto}.velari-ui.drawing>:not(.velari-logo){opacity:0;pointer-events:none;transition:opacity .6s}.velari-ui>*{transition:opacity .4s}.velari-logo{letter-spacing:4px;color:#fff;cursor:default;text-shadow:0 0 10px #7c6aef4d;will-change:transform;font-family:Stalinist One,sans-serif;font-size:20px;font-weight:400;animation:8s cubic-bezier(.4,0,.2,1) infinite logoPulseTransform;position:absolute;top:32px;left:36px}.velari-logo:after{content:"VELARI";color:#0000;text-shadow:0 0 20px #907effcc,0 0 40px #907eff66;opacity:0;will-change:opacity;pointer-events:none;animation:8s cubic-bezier(.4,0,.2,1) infinite logoPulseBloom;position:absolute;inset:0}@keyframes logoPulseTransform{0%,92%,to{transform:scale(1)}96%{transform:scale(1.03)}}@keyframes logoPulseBloom{0%,92%,to{opacity:0}96%{opacity:1}}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(var(--blur));transition:var(--transition)}.glass-panel:hover{border-color:#ffffff1f}.velari-toolbar{flex-direction:column;gap:6px;padding:8px;display:flex;position:absolute;top:50%;right:24px;transform:translateY(-50%)}.toolbar-btn{border-radius:var(--radius-sm);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.toolbar-btn svg{width:20px;height:20px;transition:var(--transition)}.toolbar-btn:hover{background:var(--glass-hover);color:var(--text-primary)}.toolbar-btn:hover svg{transform:scale(1.1)}.toolbar-btn.active{color:var(--accent-glow);background:#7c6aef26}.toolbar-btn.active:after{content:"";background:var(--accent-glow);width:3px;height:16px;box-shadow:0 0 8px var(--accent-glow);border-radius:2px;position:absolute;top:50%;right:-8px;transform:translateY(-50%)}.toolbar-btn__tooltip{border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;color:var(--text-primary);opacity:0;pointer-events:none;background:#141428e6;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:500;transition:opacity .2s,transform .2s;position:absolute;top:50%;right:calc(100% + 12px);transform:translateY(-50%)translate(4px)}.toolbar-btn:hover .toolbar-btn__tooltip{opacity:1;transform:translateY(-50%)translate(0)}.atmosphere-ring{gap:8px;padding:8px 14px;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.atmo-btn{cursor:pointer;width:36px;height:36px;transition:var(--transition);border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex;position:relative}.atmo-btn:hover{border-color:#fff3;transform:scale(1.2)}.atmo-btn.active{border-color:#ffffff80;transform:scale(1.15);box-shadow:0 0 20px #7c6aef4d}.atmo-btn__label{border:1px solid var(--glass-border);white-space:nowrap;color:var(--text-primary);opacity:0;pointer-events:none;background:#141428e6;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:500;transition:opacity .2s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.atmo-btn:hover .atmo-btn__label{opacity:1}.velari-landing{z-index:100;background:radial-gradient(#0c0c1ed9 0%,#06060ef7 70%);flex-direction:column;justify-content:center;align-items:center;gap:5vh;animation:1.2s ease-out landingIn;display:flex;position:fixed;inset:0}.velari-landing.exiting{animation:.8s ease-in forwards landingOut}.hero-velari{perspective:1000px;justify-content:center;align-items:center;width:100%;margin:0;display:flex}.hero-velari-text{text-align:center;text-transform:uppercase;letter-spacing:4px;color:#fff;margin:0;font-family:Stalinist One,sans-serif;font-size:clamp(40px,11vw,200px);font-weight:400;line-height:1.1}.hero-tagline{font-family:var(--font-body);letter-spacing:5px;text-transform:uppercase;color:#fff;text-align:center;margin:0;font-size:14px;font-weight:400}.landing-cta{color:#fff;letter-spacing:2.5px;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:100px;padding:16px 42px;font-family:Iceland,sans-serif;font-size:18px;font-weight:400;transition:all .6s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;transform:translateY(0)scale(1)}.landing-cta:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-4px)scale(1.02)}.landing-cta:active{transition:all .2s cubic-bezier(.16,1,.3,1);transform:translateY(2px)scale(.96)}@keyframes landingIn{0%{opacity:0}to{opacity:1}}@keyframes landingOut{0%{opacity:1}to{opacity:0;pointer-events:none}}@keyframes taglineGlow{0%{filter:brightness()}to{filter:brightness(1.15)}}.symmetry-controls{gap:4px;padding:6px;display:flex;position:absolute;top:24px;left:50%;transform:translate(-50%)}.sym-btn{color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:8px;padding:6px 14px;font-size:12px;font-weight:500}.sym-btn:hover{color:var(--text-primary);background:var(--glass-hover)}.sym-btn.active{color:var(--text-primary);background:#7c6aef2e}.sound-toggle{align-items:center;gap:8px;padding:8px 14px;display:flex;position:absolute;top:24px;right:24px}.sound-toggle__label{color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase;font-size:11px;font-weight:500}.sound-toggle__switch{cursor:pointer;width:36px;height:20px;transition:var(--transition);background:#ffffff1a;border:none;border-radius:10px;position:relative}.sound-toggle__switch:after{content:"";background:var(--text-secondary);width:14px;height:14px;transition:var(--transition);border-radius:50%;position:absolute;top:3px;left:3px}.sound-toggle__switch.active{background:#7c6aef66}.sound-toggle__switch.active:after{background:var(--accent-glow);box-shadow:0 0 8px var(--accent-glow);left:19px}.info-panel{color:var(--text-muted);font-variant-numeric:tabular-nums;padding:10px 14px;font-size:11px;position:absolute;bottom:32px;right:24px}.info-panel span{margin-left:12px}.flow-meter{flex-direction:column;gap:4px;padding:10px 16px;display:flex;position:absolute;bottom:32px;left:28px}.flow-meter__label{letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);font-size:10px;font-weight:500}.flow-meter__state{font-family:var(--font-display);background:linear-gradient(90deg, var(--accent-glow), var(--accent-cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:14px;font-weight:500}@media (width<=768px){.velari-logo{padding:8px 12px;top:16px;left:16px}.velari-logo__text{letter-spacing:2px;font-size:13px}.velari-toolbar{right:12px}.toolbar-btn{width:38px;height:38px}.atmosphere-ring{gap:6px;padding:6px 10px;bottom:20px}.atmo-btn{width:30px;height:30px;font-size:14px}.symmetry-controls{top:16px}.sound-toggle{top:16px;right:12px}.info-panel{bottom:20px;right:12px}.flow-meter{bottom:20px;left:16px}.dna-panel{bottom:20px;left:50%;right:auto;transform:translate(-50%)}}.dna-panel{pointer-events:auto;white-space:nowrap;align-items:center;gap:10px;padding:8px 14px 8px 10px;display:flex;position:absolute;bottom:92px;left:50%;transform:translate(-50%)}.dna-panel__icon{width:20px;height:20px;color:var(--accent-glow);opacity:.75;flex-shrink:0}.dna-panel__icon svg{width:100%;height:100%}.dna-panel__content{flex-direction:column;gap:1px;display:flex}.dna-panel__label{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);font-size:9px;font-weight:600}.dna-panel__code{letter-spacing:2px;background:linear-gradient(90deg, var(--accent-glow), var(--accent-cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;min-width:80px;font-family:Space Mono,Courier New,monospace;font-size:13px;font-weight:500}@keyframes driftBadgePulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=768px){.export-panel{gap:5px;padding:5px 8px;top:56px;right:12px}.export-btn{gap:4px;padding:5px 8px;font-size:10px}.export-btn svg{width:12px;height:12px}.desktop-only{display:none}.mobile-only{display:inline}.export-toggle{gap:4px;padding-left:4px}}.velari-video{width:100%}.dna-panel__copy{width:28px;height:28px;color:var(--text-muted);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.dna-panel__copy svg{width:14px;height:14px}.dna-panel__copy:hover{background:var(--glass-hover);color:var(--text-primary)}.dna-panel__copy.copied{color:var(--accent-cyan);font-size:14px;font-weight:700}.info-badge{letter-spacing:.5px;border-radius:4px;align-items:center;gap:3px;margin-left:6px;padding:1px 6px;font-size:10px;font-weight:600;display:inline-flex}.drift-badge{color:var(--accent-glow);background:#7c6aef33;animation:2s ease-in-out infinite driftBadgePulse}.gyro-badge{color:var(--accent-cyan);background:#5ce0d833}.export-panel{align-items:center;gap:8px;padding:6px 10px;display:flex;position:absolute;top:72px;right:24px}.export-btn{color:var(--text-primary);font-family:var(--font-body);cursor:pointer;transition:var(--transition);background:#ffffff0d;border:1px solid #0000;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:500;display:flex;position:relative}.export-btn svg{width:14px;height:14px;color:var(--accent-cyan);transition:var(--transition)}.export-btn:hover{background:var(--glass-hover);border-color:#ffffff26;transform:translateY(-1px)}.export-btn:hover svg{transform:scale(1.1)}.export-btn.copied{color:var(--accent-cyan);background:#5ce0d826;border-color:#5ce0d84d}.export-toggle{border-left:1px solid var(--glass-border);cursor:pointer;align-items:center;gap:6px;padding-left:6px;display:flex}.export-toggle__label{color:var(--text-secondary);letter-spacing:.5px;transition:var(--transition);font-size:10px;font-weight:600}.export-toggle:hover .export-toggle__label{color:var(--text-primary)}.export-toggle__switch{width:28px;height:16px;transition:var(--transition);background:#ffffff1a;border-radius:8px;position:relative}.export-toggle__switch:after{content:"";background:var(--text-secondary);width:12px;height:12px;transition:var(--transition);border-radius:50%;position:absolute;top:2px;left:2px}.export-toggle__switch.active{background:#5ce0d84d}.export-toggle__switch.active:after{background:var(--accent-cyan);box-shadow:0 0 6px var(--accent-cyan);left:14px}.mobile-only{display:none}@media (width<=768px){.export-panel{gap:5px;padding:5px 8px;top:56px;right:12px}.export-btn{gap:4px;padding:5px 8px;font-size:10px}.export-btn svg{width:12px;height:12px}.desktop-only{display:none}.mobile-only{display:inline}.export-toggle{gap:4px;padding-left:4px}}.velari-video-bg{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.velari-video{object-fit:cover;will-change:transform;width:100%;height:100%;transform:translateZ(0)}