: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: rgba(12, 12, 24, .72);--color-surface-2: rgba(255, 255, 255, .06);--color-surface-3: rgba(255, 255, 255, .1);--color-border: rgba(255, 255, 255, .1);--color-border-subtle: rgba(255, 255, 255, .06);--color-text: #ffffff;--color-text-muted: rgba(255, 255, 255, .7);--color-text-subtle: rgba(255, 255, 255, .5);--color-primary: #8b5cf6;--color-primary-hover: #7c3aed;--color-primary-muted: rgba(139, 92, 246, .15);--color-primary-glow: rgba(139, 92, 246, .35);--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 rgba(0, 0, 0, .5);--shadow-button: 0 2px 4px rgba(0, 0, 0, .2);--shadow-button-hover: 0 4px 8px rgba(0, 0, 0, .3);--shadow-glow: 0 0 20px var(--color-primary-glow);--duration-fast: .15s;--duration-normal: .2s;--ease-out: cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:var(--color-bg);font-family:var(--font-sans);color:var(--color-text);-webkit-font-smoothing:antialiased}main{position:fixed;inset:0;width:100vw;height:100vh;z-index:2;pointer-events:none}canvas{position:fixed;inset:0;display:block;z-index:0}.skip-link{position:absolute;left:-9999px;top:0;z-index:1001;padding:10px 14px;border-radius:var(--radius-sm);background:#fff;color:#111;text-decoration:none;font-weight:600}.skip-link:focus{left:16px;top:16px}.panel{position:absolute;background:var(--color-surface-1);backdrop-filter:blur(var(--blur-panel));-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}#info{top:var(--space-5);left:var(--space-5);max-width:340px}#info h1{font-size:var(--text-display);font-weight:700;margin-bottom:var(--space-3);background:linear-gradient(135deg,#fff 0%,#a78bfa 50%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;letter-spacing:-.03em;line-height:1.1}#info p{font-size:var(--text-body);line-height:1.5;color:var(--color-text-muted);margin-bottom:var(--space-2)}#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);display:flex;flex-direction:column;gap:var(--space-1)}.stat-value{color:var(--color-success);font-weight:600;font-variant-numeric:tabular-nums}#controls{position:absolute;bottom:var(--space-5);left:var(--space-5);right:340px;display:flex;flex-wrap:nowrap;gap:var(--space-3);z-index:100;align-items:center;overflow-x:auto;padding-bottom:var(--space-1);pointer-events:auto}#controls>*{flex:0 0 auto}.btn{background:var(--color-primary);color:#fff;border:none;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--text-body);font-weight:600;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-sans);box-shadow:var(--shadow-button),inset 0 1px #ffffff1a}.btn:hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-button-hover),var(--shadow-glow),inset 0 1px #ffffff1a}.btn:active{transform:translateY(0);box-shadow:var(--shadow-button),inset 0 1px #ffffff1a}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.control-group{display:flex;align-items:center;gap:var(--space-3);background:var(--color-surface-1);backdrop-filter:blur(var(--blur-panel));-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)}.control-group:hover{background:#0c0c18d1;border-color:#ffffff24}.control-group label{color:var(--color-text-muted);font-weight:500;white-space:nowrap;cursor:pointer}.control-value{min-width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text);font-weight:500}input[type=range]{--slider-progress: 50%;-webkit-appearance:none;width:120px;height:6px;background:linear-gradient(to right,var(--color-primary) 0%,var(--color-primary) var(--slider-progress),rgba(255,255,255,.15) var(--slider-progress),rgba(255,255,255,.15) 100%);border-radius:3px;outline:none;transition:opacity var(--duration-fast) var(--ease-out)}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;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);box-shadow:0 1px 4px #0000004d,0 0 0 1px #0000001a;border:none}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{width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;border:none;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{position:absolute;bottom:var(--preset-row-offset);left:var(--space-5);right:340px;display:flex;gap:var(--space-2);align-items:center;z-index:100;overflow-x:auto;padding-bottom:var(--space-1);pointer-events:auto;scrollbar-width:none;-ms-overflow-style:none}#presets::-webkit-scrollbar{display:none}#presets>*{flex:0 0 auto}.preset-btn{padding:var(--space-2) var(--space-4);font-size:var(--text-caption);font-weight:500;border:1px solid var(--color-border);background:var(--color-surface-1);backdrop-filter:blur(var(--blur-panel));-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);position:relative;overflow:hidden}.preset-btn:before{content:"";position:absolute;left:var(--space-2);top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--category-color, var(--color-text-subtle));opacity:.7;transition:opacity var(--duration-fast) var(--ease-out)}.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);transform:translateY(-1px) scale(1.02);border-color:#ffffff2e}.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);font-weight:600;box-shadow:0 0 16px var(--color-primary-glow)}.preset-btn-active:before{opacity:1;box-shadow:0 0 6px var(--category-color)}#site-links{bottom:var(--space-5);right:var(--space-5);display:flex;gap:var(--space-3);align-items:center;z-index:100;padding:var(--space-2) var(--space-4)}.site-link{color:var(--color-text-muted);text-decoration:none;font-size:var(--text-caption);font-weight:500;transition:color var(--duration-fast) var(--ease-out)}.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{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#presets:after{content:"";position:absolute;right:0;top:0;bottom:0;width:48px;background:linear-gradient(to right,transparent,var(--color-bg));pointer-events:none;opacity:.6}.error-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-surface-1);backdrop-filter:blur(var(--blur-panel));-webkit-backdrop-filter:blur(var(--blur-panel));color:var(--color-text);padding:var(--space-8);border-radius:var(--radius-lg);text-align:center;max-width:500px;z-index:1000;border:1px solid rgba(239,68,68,.3);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);line-height:1.5;margin-bottom:var(--space-3)}@media (max-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);backdrop-filter:blur(var(--blur-panel));-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);justify-content:center;flex-wrap:wrap;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.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 (max-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)}}