:root{--font-display:"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-sans:"Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Geist Mono", ui-monospace, monospace;--text-display:32px;--text-h1:22px;--text-h2:16px;--text-body:14px;--text-caption:12px;--text-mono:13px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-8:48px;--controls-height:44px;--preset-row-offset:calc(var(--space-5) + var(--controls-height) + var(--space-3));--color-bg:oklch(15% .01 285);--color-surface-1:oklch(21% .012 285/.92);--color-surface-2:oklch(28% .014 285/.6);--color-surface-3:oklch(32% .016 285/.8);--color-border:oklch(44% .02 285/.35);--color-border-subtle:oklch(44% .02 285/.2);--color-tick:oklch(44% .02 285/.5);--color-text:oklch(91% .008 285);--color-text-muted:oklch(66% .014 285);--color-text-subtle:oklch(52% .014 285);--color-primary:oklch(68% .15 300);--color-primary-hover:oklch(77% .14 300);--color-primary-muted:oklch(68% .15 300/.16);--color-primary-glow:transparent;--color-success:oklch(68% .15 300);--color-warning:oklch(78% .14 75);--color-error:oklch(65% .19 25);--color-category-fire:oklch(68% .19 30);--color-category-cosmic:oklch(70% .13 300);--color-category-energy:oklch(80% .14 80);--color-category-nature:oklch(75% .15 150);--color-category-weather:oklch(70% .12 240);--radius-sm:3px;--radius-md:4px;--radius-lg:6px;--radius-full:9999px;--blur-panel:0px;--shadow-panel:0 10px 30px oklch(12% .01 60/.55);--shadow-button:none;--shadow-button-hover:none;--shadow-glow:none;--duration-fast:.15s;--duration-normal:.2s;--ease-out:cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);font-family:var(--font-sans);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow:hidden}main{z-index:2;pointer-events:none;width:100vw;height:100vh;position:fixed;inset:0}canvas{z-index:0;display:block;position:fixed;inset:0}.skip-link{z-index:1001;border-radius:var(--radius-sm);color:#111;background:#fff;padding:10px 14px;font-weight:600;text-decoration:none;position:absolute;top:0;left:-9999px}.skip-link:focus{top:16px;left:16px}.panel{background:var(--color-surface-1);-webkit-backdrop-filter:blur(var(--blur-panel));border:1px solid var(--color-border);box-shadow:var(--shadow-panel);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);z-index:100;transition:transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);pointer-events:auto;position:absolute}#info{top:var(--space-5);left:var(--space-5);max-width:300px}#info:before{content:"";pointer-events:none;opacity:.55;background:linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 9px 1px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 1px 9px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 100% 0 / 9px 1px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 100% 0 / 1px 9px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 0 100% / 9px 1px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 0 100% / 1px 9px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 100% 100% / 9px 1px no-repeat, linear-gradient(var(--color-primary), var(--color-primary)) 100% 100% / 1px 9px no-repeat;position:absolute;inset:5px}#info h1{font-family:var(--font-display);font-size:var(--text-h1);margin-bottom:var(--space-3);color:var(--color-text);text-transform:uppercase;letter-spacing:.14em;font-weight:500;line-height:1.1}#info p{font-size:var(--text-body);color:var(--color-text-muted);margin-bottom:var(--space-2);line-height:1.5}#info p:last-child{margin-bottom:0}#active-preset{margin-top:var(--space-3)}#active-preset-description{font-size:var(--text-mono);color:var(--color-text-muted)}#stats{top:var(--space-5);right:var(--space-5);font-family:var(--font-mono);font-size:var(--text-mono);gap:var(--space-1);flex-direction:column;display:flex}.stat-value{color:var(--color-success);font-variant-numeric:tabular-nums;font-weight:600}#controls{bottom:var(--space-5);left:var(--space-5);gap:var(--space-2);z-index:100;pointer-events:auto;background:var(--color-surface-1);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);box-shadow:var(--shadow-panel);scrollbar-width:none;flex-wrap:nowrap;align-items:center;display:flex;position:absolute;right:300px;overflow-x:auto}#controls::-webkit-scrollbar{display:none}#controls>*{flex:none}.btn{color:var(--color-text-muted);border:1px solid var(--color-border);padding:7px var(--space-3);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-sans);letter-spacing:.07em;text-transform:uppercase;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);background:0 0;font-size:11px;font-weight:600}.btn:hover{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border)}.btn[aria-pressed=true]{background:var(--color-primary-muted);color:var(--color-primary);border-color:var(--color-primary)}.text-input{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border);padding:6px var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-caption);font-family:var(--font-sans);letter-spacing:.02em;width:6rem}.text-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn.recording,.btn.recording:hover{background:var(--color-primary-muted);color:var(--color-error);border-color:var(--color-error);animation:1.4s ease-in-out infinite recording-pulse}@keyframes recording-pulse{50%{border-color:oklch(65% .19 25/.4)}}.btn:active{background:var(--color-surface-3)}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.control-group{align-items:center;gap:var(--space-2);padding:0 var(--space-3);border-left:1px solid var(--color-border-subtle);color:var(--color-text);user-select:none;display:flex}.control-group label{color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;font-size:10px;font-weight:600}.control-value{text-align:right;min-width:48px;font-family:var(--font-mono);font-size:var(--text-caption);font-variant-numeric:tabular-nums;color:var(--color-primary);font-weight:500}input[type=range]{--slider-progress:50%;-webkit-appearance:none;background: repeating-linear-gradient(90deg, var(--color-tick) 0 1px, transparent 1px 12.5%) center / 100% 8px no-repeat,  linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--slider-progress), var(--color-surface-3) var(--slider-progress), var(--color-surface-3) 100%) center / 100% 3px no-repeat;cursor:pointer;outline:none;width:96px;height:14px}input[type=range]:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-text);cursor:pointer;width:4px;height:14px;transition:background var(--duration-fast) var(--ease-out);border:none;border-radius:1px}input[type=range]:hover::-webkit-slider-thumb{background:var(--color-primary)}input[type=range]::-moz-range-thumb{background:var(--color-text);cursor:pointer;border:none;border-radius:1px;width:4px;height:14px}input[type=range]:hover::-moz-range-thumb{background:var(--color-primary)}input[type=checkbox]{accent-color:var(--color-primary);width:var(--space-4);height:var(--space-4);cursor:pointer}input[type=checkbox]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}#presets{bottom:var(--preset-row-offset);left:var(--space-5);gap:var(--space-2);z-index:100;padding-bottom:var(--space-1);pointer-events:auto;scrollbar-width:none;-ms-overflow-style:none;align-items:center;display:flex;position:absolute;right:300px;overflow-x:auto}#presets::-webkit-scrollbar{display:none}#presets>*{flex:none}.preset-btn{padding:6px var(--space-3);font-family:var(--font-sans);letter-spacing:.03em;border:1px solid var(--color-border-subtle);background:var(--color-surface-1);color:var(--color-text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);font-size:11px;font-weight:500;position:relative;overflow:hidden}.preset-btn:before{content:"";left:var(--space-2);background:var(--category-color,var(--color-text-subtle));opacity:.7;width:6px;height:6px;transition:opacity var(--duration-fast) var(--ease-out);border-radius:50%;position:absolute;top:50%;transform:translateY(-50%)}.preset-btn[data-category=default]{--category-color:var(--color-text-subtle)}.preset-btn[data-category=fire]{--category-color:var(--color-category-fire)}.preset-btn[data-category=cosmic]{--category-color:var(--color-category-cosmic)}.preset-btn[data-category=energy]{--category-color:var(--color-category-energy)}.preset-btn[data-category=nature]{--category-color:var(--color-category-nature)}.preset-btn[data-category=weather]{--category-color:var(--color-category-weather)}.preset-btn{padding-left:calc(var(--space-4) + 10px)}.preset-btn:hover{background:var(--color-surface-3);color:var(--color-text);border-color:var(--color-border)}.preset-btn:hover:before{opacity:1}.preset-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.preset-btn-active{border-color:var(--color-primary);background:var(--color-primary-muted);color:var(--color-primary);font-weight:600}.preset-btn-active:before{opacity:1}#site-links{bottom:var(--space-5);right:var(--space-5);gap:var(--space-3);z-index:100;padding:var(--space-2) var(--space-4);align-items:center;display:flex}.site-link{color:var(--color-text-muted);font-size:var(--text-caption);transition:color var(--duration-fast) var(--ease-out);font-weight:500;text-decoration:none}.site-link:hover,.site-link:focus-visible{color:var(--color-text)}.site-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#presets:after{content:"";background:linear-gradient(to right, transparent, var(--color-bg));pointer-events:none;opacity:.6;width:48px;position:absolute;top:0;bottom:0;right:0}.error-modal{background:var(--color-surface-1);-webkit-backdrop-filter:blur(var(--blur-panel));color:var(--color-text);padding:var(--space-8);border-radius:var(--radius-lg);text-align:center;z-index:1000;border:1px solid #ef44444d;max-width:500px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 24px 64px #0009}.error-modal h2{color:var(--color-error);font-size:var(--text-h1);margin-bottom:var(--space-4)}.error-modal p{color:var(--color-text-muted);font-size:var(--text-body);margin-bottom:var(--space-3);line-height:1.5}@media (width<=768px){:root{--space-5:16px}#info{top:var(--space-4);left:var(--space-4);right:var(--space-4);max-width:none}#info h1{font-size:24px}#stats{top:auto;bottom:var(--space-4);right:var(--space-4);padding:var(--space-2) var(--space-3);background:var(--color-surface-1);border:1px solid var(--color-border-subtle);-webkit-backdrop-filter:blur(var(--blur-panel));text-align:right}#controls{bottom:var(--space-4);left:var(--space-4);right:var(--space-4)}#presets{bottom:var(--preset-row-offset);left:var(--space-4);right:var(--space-4)}#presets:after{width:32px}#site-links{left:var(--space-4);right:var(--space-4);top:auto;bottom:calc(var(--preset-row-offset) + 48px);padding:var(--space-2) var(--space-3);gap:var(--space-3);box-shadow:none;-webkit-backdrop-filter:none;background:0 0;border:none;flex-wrap:wrap;justify-content:center}.site-link{font-size:var(--text-caption)}.control-group{padding:var(--space-2) var(--space-3)}.preset-btn{padding:var(--space-2) var(--space-3);padding-left:calc(var(--space-3) + 10px)}}@media (width<=480px){#info h1{font-size:20px}#info p{font-size:var(--text-caption)}.btn{padding:var(--space-2) var(--space-3);font-size:var(--text-caption)}input[type=range]{width:80px}.control-value{min-width:44px;font-size:var(--text-caption)}}