:root{--bg: #0a0e14;--surface-1: #10151d;--surface-2: #161c26;--grid-line: rgba(126, 227, 255, .06);--text: #e6edf3;--text-muted: #7d8590;--accent: #7ee3ff;--accent-support: #ff9d5c;--success: #7ee787;--danger: #ff6b6b;--font-display: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--space-6: 48px;--rail-width: 64px;--radius: 4px;--glow: 0 0 12px rgba(126, 227, 255, .25);--ease-out: cubic-bezier(.16, 1, .3, 1);color-scheme:dark}*{box-sizing:border-box;scrollbar-color:var(--text-muted) var(--surface-1);scrollbar-width:thin}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:var(--surface-1)}*::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius);border:2px solid var(--surface-1)}*::-webkit-scrollbar-thumb:hover{background:var(--accent)}html,body{margin:0;min-height:100%;background:var(--bg);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:32px 32px;color:var(--text);font-family:var(--font-mono);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column}button,input,select{font-family:inherit;color:inherit}a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}.app-shell{position:relative;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto auto}.app-header{grid-row:1;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--grid-line)}.wordmark{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.04em;margin:0;background:linear-gradient(100deg,var(--accent) 0%,var(--text) 35%,var(--accent-support) 65%,var(--accent) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordmark-sweep 8s linear infinite}@keyframes wordmark-sweep{to{background-position:-220% 0}}.header-actions{display:flex;align-items:center;gap:var(--space-2)}.editor-toggle,.mute-toggle{background:var(--surface-1);border:1px solid var(--grid-line);border-radius:var(--radius);min-width:44px;min-height:44px;cursor:pointer;transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out);font-size:18px}.editor-toggle{font-family:var(--font-mono);font-size:14px;color:var(--text-muted)}.editor-toggle:hover{border-color:var(--accent);color:var(--accent)}.editor-toggle:active{transform:translateY(1px)}.editor-toggle[aria-pressed=true]{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}.mute-toggle:hover{border-color:var(--accent)}.mute-toggle:active{transform:translateY(1px)}.mute-toggle[aria-pressed=true]{color:var(--text-muted)}.header-link{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:var(--surface-1);border:1px solid var(--grid-line);border-radius:var(--radius);color:var(--text-muted);transition:border-color .15s var(--ease-out),color .15s var(--ease-out)}.header-link:hover{border-color:var(--accent);color:var(--accent)}.header-link:active{transform:translateY(1px)}.stage{grid-row:2;position:relative;min-height:60vh;overflow:hidden}.stage canvas{display:block;width:100%;height:100%}.frame-crossfade{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none;transition:opacity var(--crossfade-duration, .2s) var(--ease-out)}.frame-crossfade--out{opacity:0}.stage-error{position:absolute;inset:auto var(--space-4) var(--space-4) var(--space-4);z-index:3;background:var(--surface-2);border:1px solid var(--danger);border-radius:var(--radius);padding:var(--space-3);font-size:13px;color:var(--danger);white-space:pre-wrap;max-height:30vh;overflow:auto;animation:error-pulse .15s var(--ease-out)}.stage-error:empty{display:none}@keyframes error-pulse{0%{box-shadow:0 0 0 2px var(--danger)}to{box-shadow:none}}.editor-panel{position:absolute;top:0;right:0;bottom:0;z-index:2;width:min(440px,100%);display:flex;flex-direction:column;background:color-mix(in srgb,var(--surface-2) 96%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:1px solid var(--grid-line);transform:translate(100%);transition:transform .2s var(--ease-out)}.editor-panel[data-open=true]{transform:translate(0)}.editor-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--grid-line);font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.editor-close{background:none;border:1px solid var(--grid-line);border-radius:var(--radius);color:var(--text-muted);min-width:44px;min-height:44px;cursor:pointer;transition:border-color .15s var(--ease-out),color .15s var(--ease-out)}.editor-close:hover{border-color:var(--accent-support);color:var(--accent-support)}.editor-close:active{transform:translateY(1px)}.editor-panel-body{flex:1 1 auto;min-height:0;overflow:hidden}.editor-panel-body .cm-editor{height:100%}.editor-panel-body .cm-editor.cm-focused{outline:none}.gallery-rail{grid-row:3;display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--surface-1);border-top:1px solid var(--grid-line);overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.preset-card{flex:0 0 auto;display:flex;align-items:stretch;gap:var(--space-1);background:var(--surface-2);border:1px solid var(--grid-line);border-radius:var(--radius);min-width:140px;scroll-snap-align:start;transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out)}.preset-card:has(.preset-card-select[aria-pressed=true]){border-color:var(--accent);box-shadow:var(--glow)}.preset-card:has(.preset-card-select:hover){border-color:var(--accent)}.preset-card-select{flex:1 1 auto;display:flex;align-items:center;gap:var(--space-2);background:none;border:none;padding:var(--space-2) var(--space-3);min-height:44px;cursor:pointer;text-align:left}.preset-card-select:active{transform:translateY(1px)}.preset-card-thumb{flex:0 0 auto;width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--grid-line);object-fit:cover}.preset-card-thumb-fallback{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius);border:1px solid var(--grid-line);background:var(--surface-1);color:var(--text-muted);font-size:14px}.preset-card-label{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.preset-card-select .name{font-family:var(--font-display);font-weight:500;font-size:14px;color:var(--text)}.preset-card-select .description{font-size:12px;color:var(--text-muted)}.preset-card-fork{flex:0 0 auto;align-self:center;width:44px;height:44px;margin-right:var(--space-2);background:var(--surface-1);border:1px solid var(--grid-line);border-radius:var(--radius);color:var(--text-muted);cursor:pointer;font-size:14px;transition:border-color .15s var(--ease-out),color .15s var(--ease-out)}.preset-card-fork:hover{border-color:var(--accent-support);color:var(--accent-support)}.preset-card-fork:active{transform:translateY(1px)}.gallery-divider{flex:0 0 auto;padding:var(--space-2) var(--space-3) 0;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.control-dock{grid-row:4;position:relative;background:color-mix(in srgb,var(--surface-1) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--grid-line)}.control-dock--error{animation:control-dock-error-pulse .15s var(--ease-out)}@keyframes control-dock-error-pulse{0%{box-shadow:inset 0 0 0 2px var(--danger)}to{box-shadow:none}}.control-dock-handle{display:none}.control-dock-body{display:flex;flex-wrap:wrap;align-items:end;gap:var(--space-4);padding:var(--space-3) var(--space-4)}.uniform-controls{display:contents}.control{display:flex;flex-direction:column;gap:var(--space-1);min-width:140px}.control label{font-size:12px;color:var(--text-muted);display:flex;justify-content:space-between}.control .readout{color:var(--accent)}.control input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:44px;background:transparent;outline-offset:4px}.control input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--grid-line)}.control input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--grid-line)}.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .1s var(--ease-out)}.control input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--accent);cursor:pointer;transition:transform .1s var(--ease-out)}.control input[type=range]:active::-webkit-slider-thumb{transform:scale(.85)}.control input[type=range]:active::-moz-range-thumb{transform:scale(.85)}.control input[type=color]{width:44px;height:44px;border:1px solid var(--grid-line);border-radius:var(--radius);background:var(--surface-2);cursor:pointer;padding:2px}.control select{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:140px;min-height:44px;padding:var(--space-1) var(--space-5) var(--space-1) var(--space-3);background:var(--surface-2);border:1px solid var(--grid-line);border-radius:var(--radius);font-family:var(--font-mono);font-size:13px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out)}.control select:hover{border-color:var(--accent)}.control select:focus-visible{border-color:var(--accent);box-shadow:var(--glow)}.export-panel{display:flex;align-items:end;flex-wrap:wrap;gap:var(--space-2)}.export-progress{display:flex;flex-direction:column;gap:var(--space-1);min-width:120px}.export-progress[hidden]{display:none}.export-progress-track{width:100%;height:4px;border-radius:2px;background:var(--grid-line);overflow:hidden}.export-progress-fill{height:100%;width:0%;background:var(--accent-support);transition:width .15s var(--ease-out)}.export-progress-label{font-size:12px;color:var(--text-muted)}.export-download{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-3);background:var(--surface-2);border:1px solid var(--success);border-radius:var(--radius);color:var(--success);font-family:var(--font-display);font-weight:500;font-size:13px;text-decoration:none;transition:box-shadow .15s var(--ease-out),transform .1s var(--ease-out)}.export-download:hover{box-shadow:0 0 12px #7ee78759}.export-download:active{transform:translateY(1px)}.export-download[hidden]{display:none}.export-button{background:var(--accent-support);color:#1a1000;border:none;border-radius:var(--radius);padding:var(--space-2) var(--space-4);font-family:var(--font-display);font-weight:700;font-size:14px;min-height:44px;cursor:pointer;transition:box-shadow .15s var(--ease-out),transform .1s var(--ease-out)}.export-button:hover{box-shadow:0 0 12px #ff9d5c66}.export-button:active{transform:translateY(1px)}.export-button:disabled{opacity:.5;cursor:progress}.export-button.success{background:var(--success)}.export-button.error{background:var(--danger);color:#1a0000}@media (prefers-reduced-motion: reduce){.wordmark{animation:none}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (max-width: 899.98px){.control-dock-handle{display:block;position:relative;width:100%;min-height:44px;background:none;border:none;cursor:pointer}.control-dock-handle:before{content:"";position:absolute;top:50%;left:50%;width:40px;height:4px;border-radius:2px;background:var(--grid-line);transform:translate(-50%,-50%);transition:background-color .15s var(--ease-out)}.control-dock-handle:hover:before{background:var(--accent)}.control-dock-body{max-height:45vh;overflow-y:auto;align-items:stretch;transition:max-height .2s var(--ease-out),opacity .15s var(--ease-out)}.control-dock.is-collapsed .control-dock-body{max-height:0;opacity:0;overflow:hidden;padding-top:0;padding-bottom:0}}@media (min-width: 900px){.app-shell{grid-template-columns:var(--rail-width) 1fr;grid-template-rows:auto 1fr}.app-header{grid-column:1 / -1}.gallery-rail{grid-row:2;flex-direction:column;border-top:none;border-right:1px solid var(--grid-line);overflow-y:auto;overflow-x:hidden}.preset-card{position:relative;min-width:0}.preset-card-select{flex-direction:column;justify-content:center;padding:var(--space-2)}.preset-card-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.preset-card-fork{position:absolute;top:var(--space-1);right:var(--space-1);margin-right:0;width:22px;height:22px;font-size:11px;opacity:0}.preset-card:hover .preset-card-fork,.preset-card:focus-within .preset-card-fork{opacity:1}.stage{grid-row:2}.control-dock{grid-row:1 / -1;position:absolute;left:var(--rail-width);right:0;bottom:0}}.page-info{border-top:1px solid var(--grid-line);padding:var(--space-6) var(--space-4)}.page-info-inner{max-width:68ch;margin:0 auto}.page-info h2{font-family:var(--font-display);font-weight:700;font-size:31px;line-height:1.2;margin:0 0 var(--space-3)}.page-info-lead{color:var(--text-muted);margin:0 0 var(--space-5)}.page-info-cols{display:grid;gap:var(--space-4);margin-bottom:var(--space-5)}.page-info-cols h3{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--accent);margin:0 0 var(--space-1)}.page-info-cols p{margin:0;color:var(--text-muted);font-size:14px}.page-info code{font-family:var(--font-mono);font-size:12px;color:var(--accent);background:var(--surface-2);border:1px solid var(--grid-line);border-radius:var(--radius);padding:1px 4px}.page-info-faq-heading{font-family:var(--font-display);font-weight:700;font-size:20px;margin:0 0 var(--space-3)}.page-info-faq{margin:0 0 var(--space-5)}.page-info-faq dt{font-weight:500;color:var(--text);margin-top:var(--space-3)}.page-info-faq dd{margin:var(--space-1) 0 0;color:var(--text-muted);font-size:14px}.page-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);background:var(--accent);color:#04121a;border-radius:var(--radius);font-family:var(--font-display);font-weight:700;font-size:14px;text-decoration:none;transition:box-shadow .15s var(--ease-out),transform .1s var(--ease-out)}.page-cta:hover{box-shadow:var(--glow)}.page-cta:active{transform:translateY(1px)}.page-footer{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center;justify-content:space-between;padding:var(--space-4);border-top:1px solid var(--grid-line);background:var(--surface-1);font-size:13px;color:var(--text-muted)}.page-footer-mark{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;color:var(--text)}.page-footer a{text-decoration:none}.page-footer a:hover{text-decoration:underline}@media (min-width: 720px){.page-info-cols{grid-template-columns:repeat(3,1fr)}}