:root{--font-display:"Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:Consolas, "Courier New", Courier, monospace;--borderRadiusMedium:4px;--borderRadiusLarge:6px;--borderRadiusXLarge:8px;--durationFast:.15s;--durationNormal:.2s;--durationSlow:.3s;--durationSlower:.4s;--curveDecelerateMid:cubic-bezier(0, 0, 0, 1);--curveEasyEase:cubic-bezier(.33, 0, .67, 1);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.5}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#141414;--bg-2:#1f1f1f;--surface:#292929;--surface-raised:#333;--border:#ffffff12;--border-strong:#ffffff21;--text:#d6d6d6;--text-strong:#fff;--text-muted:#adadad;--accent:#479ef5;--accent-hover:#62abf5;--accent-2:#77bcf8;--shadow:0px 2px 4px #0000007a, 0px 0px 2px #0000003d;--shadow-elevated:0px 8px 16px #0000007a, 0px 0px 2px #0000003d;--dot-color:#479ef506;--input-bg:#1f1f1f;--preview-bg:#0f0f0f;--acrylic-bg:#292929b8;--focus-ring:0 0 0 2px #479ef533}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fafafa;--bg-2:#f5f5f5;--surface:#fff;--surface-raised:#fff;--border:#00000012;--border-strong:#00000021;--text:#424242;--text-strong:#242424;--text-muted:#616161;--accent:#0f6cbd;--accent-hover:#115ea3;--accent-2:#0f548c;--shadow:0px 2px 4px #00000024, 0px 0px 2px #0000001f;--shadow-elevated:0px 8px 16px #00000024, 0px 0px 2px #0000001f;--dot-color:#0f6cbd06;--input-bg:#fff;--preview-bg:#f5f5f5;--acrylic-bg:#ffffffb8;--focus-ring:0 0 0 2px #0f6cbd26}*{box-sizing:border-box}html{background:var(--bg);transition:background var(--durationSlower) var(--curveEasyEase)}body{min-width:320px;min-height:100vh;color:var(--text);background:radial-gradient(circle, var(--dot-color) 1px, transparent 1px) 0 0 / 24px 24px, var(--bg);font-family:var(--font-body);transition:color var(--durationSlower) var(--curveEasyEase), background var(--durationSlower) var(--curveEasyEase);margin:0;font-size:14px}body,button,input{font-family:var(--font-body)}code,pre{font-family:var(--font-mono)}#root{width:100%;height:100dvh}h1,h2,p{margin:0}h1{font-family:var(--font-display);color:var(--text-strong);letter-spacing:-.02em;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:600;line-height:1.1}a{color:var(--accent)}.app-shell{grid-template-rows:auto 1fr;height:100vh;display:grid;overflow:hidden}.render-mode{background:0 0;justify-content:center;align-items:center;width:100vw;height:100dvh;margin:0;padding:0;display:flex;overflow:hidden}.render-mode svg{width:100%;height:100%;display:block}.toolbar{border-bottom:1px solid var(--border);background:var(--acrylic-bg);-webkit-backdrop-filter:saturate(180%)blur(20px);z-index:100;height:48px;transition:background var(--durationSlower) var(--curveEasyEase), border-color var(--durationSlower) var(--curveEasyEase);flex-shrink:0;align-items:center;gap:12px;padding:0 16px;display:flex;position:relative}.brand{font-family:var(--font-body);color:var(--text-strong);white-space:nowrap;cursor:pointer;transition:color var(--durationFast) var(--curveEasyEase);background:0 0;border:none;flex-shrink:0;padding:0;font-size:14px;font-weight:600}.brand:hover{color:var(--accent)}.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--borderRadiusMedium)}.mode-picker{border-bottom:1px solid var(--border)}.mode-picker-toggle{cursor:pointer;text-align:left;width:100%;transition:background var(--durationFast) var(--curveEasyEase);background:0 0;border:none;align-items:center;gap:8px;padding:10px 12px;display:flex}.mode-picker-toggle:hover{background:var(--surface-raised)}.mode-picker-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.mode-picker-current{flex:1;min-width:0}.mode-picker-label{font-family:var(--font-body);color:var(--text-strong);font-size:13px;font-weight:600;line-height:1.3;display:block}.mode-picker-desc{font-family:var(--font-body);color:var(--text-muted);font-size:11px;line-height:1.3;display:block}.mode-picker-chevron{color:var(--text-muted);transition:transform var(--durationFast) var(--curveEasyEase);flex-shrink:0}.mode-picker-chevron[data-open]{transform:rotate(180deg)}.mode-card-grid{grid-template-columns:1fr 1fr;gap:4px;padding:0 8px 8px;display:grid}.mode-card{border:1px solid var(--border);border-radius:var(--borderRadiusMedium);cursor:pointer;text-align:left;transition:background var(--durationFast) var(--curveEasyEase), border-color var(--durationFast) var(--curveEasyEase);background:0 0;flex-direction:column;gap:2px;padding:8px;display:flex}.mode-card:hover{background:var(--surface-raised);border-color:var(--border-strong)}.mode-card[data-active]{background:var(--accent);border-color:var(--accent)}.mode-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.mode-card-name{font-family:var(--font-body);color:var(--text-strong);font-size:11px;font-weight:600;line-height:1.2}.mode-card[data-active] .mode-card-name{color:#fff}.mode-card-desc{font-family:var(--font-body);color:var(--text-muted);font-size:10px;line-height:1.3}.mode-card[data-active] .mode-card-desc{color:#ffffffbf}.toolbar-right{flex-shrink:0;align-items:center;gap:4px;margin-left:auto;display:flex}.theme-toggle{border-radius:var(--borderRadiusMedium);color:var(--text-muted);font-family:var(--font-body);cursor:pointer;white-space:nowrap;transition:background var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);background:0 0;border:none;flex-shrink:0;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:400;display:flex}.theme-toggle:hover{background:var(--surface-raised);color:var(--text-strong)}.theme-toggle:active{transform:scale(.98)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.theme-toggle-icon{font-size:14px;line-height:1}.github-link{border-radius:var(--borderRadiusMedium);width:32px;height:32px;color:var(--text-muted);transition:background var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);flex-shrink:0;place-items:center;text-decoration:none;display:grid}.github-link:hover{background:var(--surface-raised);color:var(--text-strong)}.workspace{grid-template-columns:19.5rem 1fr;display:grid;overflow:hidden}.sidebar{border-right:1px solid var(--border);background:var(--surface);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;transition:background var(--durationSlower) var(--curveEasyEase), border-color var(--durationSlower) var(--curveEasyEase);overflow-y:auto}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:0 0}.sidebar::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}.canvas{background:var(--preview-bg);min-height:0;transition:background var(--durationSlower) var(--curveEasyEase);justify-content:center;align-items:center;padding:32px;display:flex;overflow:hidden}.control-panel{padding:12px}.control-group{gap:8px;display:grid}.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-chips+.field,.control-group.mode-params+.control-group.two-up,.control-group.two-up+.button-row{border-top:1px solid var(--border);padding-top:10px}.field{gap:4px;margin-bottom:8px;display:grid}.field span{color:var(--text-muted);font-size:12px;font-weight:500;font-family:var(--font-body);text-transform:none;letter-spacing:normal}.field input{border:1px solid var(--border-strong);border-radius:var(--borderRadiusMedium);background:var(--input-bg);width:100%;min-width:0;height:32px;color:var(--text-strong);font-family:var(--font-body);transition:border-color var(--durationFast) var(--curveEasyEase), box-shadow var(--durationFast) var(--curveEasyEase);padding:0 8px;font-size:13px}.field input:hover{border-color:var(--text-muted)}.field input:focus-visible{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none}.field-color input{cursor:pointer;min-height:32px;padding:3px}.dimension-group{grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;margin-bottom:8px;display:grid}.dimension-group .field{margin-bottom:0}.aspect-lock-btn{border:1px solid var(--border-strong);border-radius:var(--borderRadiusMedium);width:28px;height:32px;color:var(--text-muted);cursor:pointer;transition:background var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);background:0 0;place-items:center;display:grid}.aspect-lock-btn:hover{background:var(--surface-raised);color:var(--text-strong)}.aspect-lock-btn[data-locked]{background:var(--accent);border-color:var(--accent);color:#fff}.aspect-lock-btn:active{transform:scale(.98)}.aspect-lock-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.preset-chips{flex-wrap:wrap;gap:4px;margin-bottom:8px;display:flex}.preset-chip{border:1px solid var(--border-strong);border-radius:var(--borderRadiusMedium);color:var(--text-muted);font-family:var(--font-body);cursor:pointer;transition:background var(--durationFast) var(--curveEasyEase), color var(--durationFast) var(--curveEasyEase);background:0 0;padding:2px 8px;font-size:11px;font-weight:500}.preset-chip:hover{background:var(--surface-raised);color:var(--text-strong)}.preset-chip[data-active]{background:var(--accent);border-color:var(--accent);color:#fff}.preset-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.mode-params{margin-bottom:4px}.field-slider{margin-bottom:6px}.slider-row{grid-template-columns:1fr 4rem;align-items:center;gap:8px;display:grid}.slider-input{appearance:none;background:var(--border-strong);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.slider-input::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--surface);cursor:pointer;width:14px;height:14px;transition:transform var(--durationFast) var(--curveDecelerateMid);border-radius:50%;box-shadow:0 1px 2px #0000004d}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider-input::-moz-range-thumb{background:var(--accent);border:2px solid var(--surface);cursor:pointer;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 2px #0000004d}.slider-input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.slider-number{border:1px solid var(--border-strong);border-radius:var(--borderRadiusMedium);background:var(--input-bg);width:100%;min-width:0;height:26px;color:var(--text-strong);font-family:var(--font-mono);text-align:right;transition:border-color var(--durationFast) var(--curveEasyEase);padding:0 4px;font-size:11px}.slider-number:focus-visible{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none}.button-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px;display:grid}.button-row+.button-row{margin-top:4px}.button-row button{border:1px solid var(--border-strong);border-radius:var(--borderRadiusMedium);background:var(--surface-raised);min-height:34px;color:var(--text-strong);font-family:var(--font-body);cursor:pointer;transition:background var(--durationFast) var(--curveEasyEase), border-color var(--durationFast) var(--curveEasyEase);padding:6px 10px;font-size:13px;font-weight:600}.button-row button:hover{background:var(--bg-2)}.button-row button:active{transform:scale(.98)}.button-row button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.button-row .button-strong{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.button-row .button-strong:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.preview-panel{width:100%;min-width:0;height:100%;min-height:0;box-shadow:none;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;display:flex;position:relative}.preview-meta{z-index:10;align-items:center;gap:8px;display:flex;position:absolute;top:0;right:0}.preview-meta p{display:none}.preview-meta span{color:var(--text-muted);font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);border-radius:var(--borderRadiusMedium);opacity:.7;transition:opacity var(--durationFast) var(--curveEasyEase);padding:2px 8px;font-size:11px}.preview-meta span:hover{opacity:1}.preview-stage{cursor:zoom-in;background:0 0;border:none;justify-content:center;align-items:center;width:100%;min-width:0;height:100%;min-height:0;padding:0;display:flex;overflow:hidden}.preview-svg{justify-content:center;align-items:center;min-width:0;max-width:100%;min-height:0;max-height:100%;display:flex}.preview-svg svg{border-radius:var(--borderRadiusXLarge);width:auto;max-width:100%;height:auto;max-height:100%;box-shadow:var(--shadow-elevated);display:block}.fullscreen-overlay{z-index:1000;cursor:zoom-out;animation:overlayIn var(--durationNormal) var(--curveDecelerateMid);background:#000000eb;justify-content:center;align-items:center;padding:4vh 4vw;display:flex;position:fixed;inset:0}.fullscreen-art{justify-content:center;align-items:center;max-width:100%;max-height:100%;display:flex}.fullscreen-art svg{width:auto;max-width:92vw;height:auto;max-height:92dvh;display:block}.explorer-overlay{z-index:900;animation:overlayIn var(--durationNormal) var(--curveDecelerateMid);background:#0006;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.explorer-panel{background:var(--surface);border-radius:var(--borderRadiusXLarge);border:none;width:100%;max-width:76rem;max-height:92vh;padding:32px;overflow-y:auto;box-shadow:0 32px 64px #0000003d,0 0 8px #0000001f}.explorer-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.explorer-header h2{font-family:var(--font-body);color:var(--text-strong);margin:0;font-size:20px;font-weight:600}.explorer-actions{gap:8px;display:flex}.explorer-actions button{border:1px solid var(--border-strong);border-radius:var(--borderRadiusMedium);background:var(--surface-raised);min-height:32px;color:var(--text-strong);font-family:var(--font-body);cursor:pointer;transition:background var(--durationFast) var(--curveEasyEase);padding:5px 12px;font-size:14px;font-weight:600}.explorer-actions button:hover{background:var(--bg-2)}.explorer-actions button:active{transform:scale(.98)}.explorer-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.explorer-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.explorer-item{border:1px solid var(--border);border-radius:var(--borderRadiusXLarge);background:var(--surface);cursor:pointer;box-shadow:var(--shadow);transition:box-shadow var(--durationFast) var(--curveEasyEase), transform var(--durationFast) var(--curveEasyEase);gap:0;padding:0;display:grid;overflow:hidden}.explorer-item:hover{box-shadow:var(--shadow-elevated);transform:translateY(-2px)}.explorer-item:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.explorer-thumb{aspect-ratio:16/9;background:var(--preview-bg);overflow:hidden}.explorer-thumb svg{width:100%;height:100%;display:block}.explorer-seed{font-family:var(--font-mono);color:var(--text-muted);text-align:center;border-top:1px solid var(--border);padding:6px 8px;font-size:11px}.toast{z-index:2000;border-radius:var(--borderRadiusMedium);background:var(--acrylic-bg);-webkit-backdrop-filter:saturate(180%)blur(20px);border:1px solid var(--border);color:var(--text-strong);font-family:var(--font-body);box-shadow:var(--shadow-elevated);animation:toastIn var(--durationNormal) var(--curveDecelerateMid);padding:8px 16px;font-size:13px;font-weight:500;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@media (width<=768px){.app-shell{height:auto;min-height:100dvh}.toolbar{gap:6px;height:44px;padding:0 10px}.brand{font-size:13px}.toolbar-right{gap:2px}.theme-toggle{padding:4px 6px;font-size:11px}.theme-toggle-icon{font-size:13px}.github-link{width:28px;height:28px}.workspace{grid-template-columns:1fr;overflow:visible}.sidebar{border-right:none;order:1;overflow:visible}.canvas{order:0;min-height:40dvh;padding:12px}.preview-svg svg{max-height:40dvh}.mode-card-grid{grid-template-columns:1fr 1fr;gap:3px;padding:0 6px 6px}.mode-card{padding:6px}.mode-card-name{font-size:10px}.mode-card-desc{font-size:9px}.control-panel{padding:10px}.dimension-group{grid-template-columns:1fr auto 1fr}.button-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.button-row button{min-height:36px;padding:6px;font-size:12px}.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}.explorer-overlay{padding:8px}.explorer-panel{border-radius:var(--borderRadiusLarge);padding:16px}.explorer-header{flex-wrap:wrap;gap:8px;margin-bottom:12px}.explorer-header h2{font-size:16px}.explorer-grid{grid-template-columns:repeat(2,1fr);gap:8px}.explorer-seed{padding:4px 6px;font-size:10px}.fullscreen-art{width:96vw;height:96dvh}.slider-row{grid-template-columns:1fr 3.5rem}.toast{padding:6px 12px;font-size:12px;bottom:12px}}@media (width<=380px){.toolbar{gap:4px;padding:0 8px}.brand{font-size:12px}.mode-card-grid,.button-row,.two-up{grid-template-columns:1fr}}