:root{--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", 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:56px;--preset-row-offset:calc(var(--space-5) + var(--controls-height) + var(--space-3));--color-bg:#050510;--color-surface-1:#0c0c18b8;--color-surface-2:#ffffff0f;--color-surface-3:#ffffff1a;--color-border:#ffffff1a;--color-border-subtle:#ffffff0f;--color-text:#fff;--color-text-muted:#ffffffb3;--color-text-subtle:#ffffff80;--color-primary:#8b5cf6;--color-primary-hover:#7c3aed;--color-primary-muted:#8b5cf626;--color-primary-glow:#8b5cf659;--color-success:#22c55e;--color-warning:#f59e0b;--color-error:#ef4444;--color-category-fire:#ef4444;--color-category-cosmic:#8b5cf6;--color-category-energy:#f59e0b;--color-category-nature:#22c55e;--color-category-weather:#3b82f6;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:9999px;--blur-panel:16px;--shadow-panel:0 8px 32px #00000080;--shadow-button:0 2px 4px #0003;--shadow-button-hover:0 4px 8px #0000004d;--shadow-glow:0 0 20px var(--color-primary-glow);--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:340px}#info h1{font-size:var(--text-display);margin-bottom:var(--space-3);background:linear-gradient(135deg, #fff 0%, #a78bfa 50%, var(--color-primary) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.03em;background-clip:text;font-weight:700;line-height:1.1;display:inline-block}#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-3);z-index:100;padding-bottom:var(--space-1);pointer-events:auto;flex-wrap:nowrap;align-items:center;display:flex;position:absolute;right:340px;overflow-x:auto}#controls>*{flex:none}.btn{background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-body);transition:all var(--duration-fast) var(--ease-out);font-weight:600;font-family:var(--font-sans);box-shadow:var(--shadow-button), inset 0 1px 0 #ffffff1a;border:none}.btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-button-hover), var(--shadow-glow), inset 0 1px 0 #ffffff1a;transform:translateY(-1px)}.btn:active{box-shadow:var(--shadow-button), inset 0 1px 0 #ffffff1a;transform:translateY(0)}.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-3);background:var(--color-surface-1);-webkit-backdrop-filter:blur(var(--blur-panel));border:1px solid var(--color-border);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);color:var(--color-text);font-size:var(--text-body);user-select:none;transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);display:flex}.control-group:hover{background:#0c0c18d1;border-color:#ffffff24}.control-group label{color:var(--color-text-muted);white-space:nowrap;cursor:pointer;font-weight:500}.control-value{text-align:right;font-variant-numeric:tabular-nums;min-width:56px;color:var(--color-text);font-weight:500}input[type=range]{--slider-progress:50%;-webkit-appearance:none;background:linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--slider-progress), #ffffff26 var(--slider-progress), #ffffff26 100%);width:120px;height:6px;transition:opacity var(--duration-fast) var(--ease-out);border-radius:3px;outline:none}input[type=range]:hover{opacity:.9}input[type=range]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:16px;height:16px;transition:transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);background:#fff;border:none;border-radius:50%;box-shadow:0 1px 4px #0000004d,0 0 0 1px #0000001a}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 8px #0006,0 0 0 1px #0000001a}input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #0000004d,0 0 0 1px #0000001a}input[type=range]::-moz-range-progress{background:var(--color-primary);border-radius:3px;height:6px}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:340px;overflow-x:auto}#presets::-webkit-scrollbar{display:none}#presets>*{flex:none}.preset-btn{padding:var(--space-2) var(--space-4);font-size:var(--text-caption);border:1px solid var(--color-border);background:var(--color-surface-1);-webkit-backdrop-filter:blur(var(--blur-panel));color:var(--color-text-muted);border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);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:#ffffff2e;transform:translateY(-1px)scale(1.02)}.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-text);box-shadow:0 0 16px var(--color-primary-glow);font-weight:600}.preset-btn-active:before{opacity:1;box-shadow:0 0 6px var(--category-color)}#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)}}