:root{--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--rail-width:56px;--topbar-height:56px;--panel-width:320px;--transition-fast:.12s ease;--transition-med:.18s ease;--bg:#f4f4f7;--surface-1:#fff;--surface-2:#fafafb;--surface-raised:#fff;--border:#e4e4e8;--border-strong:#d0d0d6;--text:#18181b;--text-dim:#6b6b75;--text-faint:#9b9ba3;--accent:#6366f1;--accent-hover:#4f52d4;--accent-fg:#fff;--danger:#dc2626;--grid-dot:#00000014;--shadow-sm:0 1px 2px #0f172a0a;--shadow-md:0 4px 12px #0f172a14;--shadow-lg:0 12px 32px #0f172a1f}[data-theme=dark]{--bg:#0a0a0b;--surface-1:#141416;--surface-2:#1c1c1f;--surface-raised:#202024;--border:#26262a;--border-strong:#36363c;--text:#e6e6ea;--text-dim:#8a8a93;--text-faint:#5a5a62;--accent:#7c7ff5;--accent-hover:#9396f7;--accent-fg:#fff;--danger:#f87171;--grid-dot:#ffffff0f;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 16px #00000080;--shadow-lg:0 16px 40px #0009}*{box-sizing:border-box}html,body{width:100%;height:100dvh;font-family:var(--font-sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;padding:0;overflow:hidden}button{cursor:pointer;font-family:inherit}.app{grid-template-columns:var(--rail-width) var(--panel-width) minmax(0, 1fr);grid-template-rows:var(--topbar-height) minmax(0, 1fr);background:var(--bg);width:100%;height:100dvh;display:grid;position:relative}.app .icon-rail{grid-area:1/1/3}.app .topbar{grid-area:1/2/auto/4}.app .panel{grid-area:2/2}.app .stage-wrap{grid-area:2/3}.app.splash-mode{grid-template-columns:var(--rail-width) minmax(0, 1fr)}.app.splash-mode .topbar{grid-column:2}.app.splash-mode .panel{display:none}.app.splash-mode .stage-wrap{grid-area:2/2}.app.splash-mode #stage{background:0 0;border:0;justify-content:stretch;align-items:stretch;padding:0;overflow-y:auto}.icon-rail{background:var(--surface-1);border-right:1px solid var(--border);padding:var(--space-3) 0;align-items:center;gap:var(--space-2);z-index:5;flex-direction:column;display:flex}.icon-rail .logo{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent), var(--accent-hover));width:32px;height:32px;color:var(--accent-fg);margin-bottom:var(--space-3);justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.icon-rail .rail-spacer{flex:1}.rail-btn{border-radius:var(--radius-md);width:40px;height:40px;color:var(--text-dim);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:0;justify-content:center;align-items:center;display:flex;position:relative}.rail-btn:hover:not(:disabled){background:var(--surface-2);color:var(--text)}.rail-btn:disabled{opacity:.4;cursor:not-allowed}.rail-btn.active{background:var(--surface-2);color:var(--accent)}.rail-btn svg{width:18px;height:18px}.topbar{background:var(--surface-1);border-bottom:1px solid var(--border);padding:0 var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);z-index:5;display:flex}.topbar-left{align-items:center;gap:var(--space-3);min-width:0;display:flex}.topbar-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.topbar-subtitle{color:var(--text-faint);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.topbar-right{align-items:center;gap:var(--space-2);display:flex}.chip{align-items:center;gap:var(--space-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-dim);font-variant-numeric:tabular-nums;padding:6px 10px;font-size:12px;display:inline-flex}.chip.button{cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast)}.chip.button:hover{background:var(--surface-raised);border-color:var(--border-strong);color:var(--text)}.chip-input{width:9ch;min-width:0;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;padding:0}.btn,.panel button:not(.cell-btn):not(.back-link):not(.rail-btn){justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--border);background:var(--surface-1);height:32px;color:var(--text);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);white-space:nowrap;letter-spacing:-.01em;padding:0 12px;font-family:inherit;font-size:12.5px;font-weight:500;display:inline-flex}.panel button:not(.cell-btn):not(.back-link):not(.rail-btn):hover{background:var(--surface-raised);border-color:var(--border-strong)}.panel button:not(.cell-btn):not(.back-link):not(.rail-btn):active{transform:translateY(1px)}.btn{background:var(--accent);color:var(--accent-fg);border-color:#0000}.btn:hover{background:var(--accent-hover)}.btn:active{transform:translateY(1px)}.btn.ghost{background:var(--surface-1);color:var(--text);border-color:var(--border)}.btn.ghost:hover{background:var(--surface-raised);border-color:var(--border-strong)}.btn.subtle{color:var(--text-dim);background:0 0;border-color:#0000}.btn.subtle:hover{background:var(--surface-2);color:var(--text)}.btn.sm{height:28px;padding:0 10px;font-size:12px}.export-menu{isolation:isolate;align-items:center;display:inline-flex;position:relative}.export-primary{border-top-right-radius:0;border-bottom-right-radius:0;min-width:74px;padding-right:8px}.export-toggle{border-top-left-radius:0;border-bottom-left-radius:0;width:24px;min-width:24px;margin-left:-1px;border-left-color:var(--border)!important;padding:0!important}.export-toggle svg{width:13px;height:13px;display:block}.export-popover{z-index:40;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);min-width:128px;box-shadow:var(--shadow-lg);padding:4px;display:grid;position:absolute;top:calc(100% + 6px);right:0}.export-popover[hidden]{display:none}.export-popover button{height:28px;color:var(--text-dim);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:4px;padding:0 10px;font-size:12px}.export-bg-row{border-bottom:1px solid var(--border);height:30px;color:var(--text);cursor:pointer;justify-content:space-between;align-items:center;gap:12px;margin-bottom:4px;padding:0 10px;font-size:12px;display:flex}.export-bg-row input{width:14px;height:14px;accent-color:var(--accent);margin:0}.export-popover button:hover,.export-popover button.active{background:var(--surface-2);color:var(--text)}.btn.icon{width:32px;height:32px;color:var(--text-dim);background:0 0;border:0;padding:0}.btn.icon:hover{background:var(--surface-2);color:var(--text)}.btn.icon svg{width:16px;height:16px}button:disabled{opacity:.5;cursor:not-allowed}.panel{background:var(--surface-1);border-right:1px solid var(--border);min-width:0;padding:var(--space-4);overflow:auto}.back-link{color:var(--text-dim);margin-bottom:var(--space-2);cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:4px 0;font-size:12px;display:inline-flex}.back-link:hover{color:var(--text)}#sidenav-header{margin-bottom:var(--space-3)}.panel h2{color:var(--text);margin:0 0 4px;font-size:16px;font-weight:600}.panel .meta{margin:0 0 var(--space-3);color:var(--text-faint);font-size:12px;font-family:var(--font-mono)}.panel-section{padding:var(--space-3) var(--space-3) calc(var(--space-3) - 4px);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-3)}.panel-section:last-child{margin-bottom:0}.panel-section h3{margin:0 0 var(--space-3);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);font-size:11px;font-weight:600}.toolbar{gap:var(--space-2);margin-bottom:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.preset-row{gap:var(--space-1);margin-bottom:var(--space-2);grid-template-columns:repeat(3,1fr);display:grid}.control{align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);color:var(--text-dim);grid-template-columns:1fr auto;font-size:12px;display:grid}.control.check{grid-template-columns:auto 1fr}.range-wrap{gap:var(--space-1);grid-template-columns:96px 36px;align-items:center;display:grid}.range-wrap span{font-family:var(--font-mono);color:var(--text-dim);text-align:right;font-size:11px}input[type=text],input[type=number],select,textarea{background:var(--surface-1);height:30px;color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none;padding:0 8px;font-family:inherit;font-size:12.5px}textarea{height:auto;padding:6px 8px}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238a8a93' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:10px 10px;padding-right:24px}input[type=text]:focus,input[type=number]:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}input[type=number]{width:80px}input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}input[type=range]{appearance:none;background:0 0;width:100%;height:16px;margin:0;padding:0}input[type=range]::-webkit-slider-runnable-track{background:var(--border-strong);border-radius:4px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);width:14px;height:14px;transition:transform var(--transition-fast), background var(--transition-fast);border:0;border-radius:50%;margin-top:-5px}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]:focus{outline:none}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent)}input[type=range]::-moz-range-track{background:var(--border-strong);border-radius:4px;height:4px}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:14px;height:14px}input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent)}.layer-row{padding:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:var(--space-2);background:var(--surface-1)}.cell-list{gap:var(--space-1);margin-bottom:var(--space-2);flex-direction:column;display:flex}.cell-row{align-items:center;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-1);grid-template-columns:56px 1fr auto;padding:6px;display:grid}.cell-thumb{background:#ede1bf;border-radius:4px}.cell-meta{color:var(--text-dim);flex-direction:column;min-width:0;font-size:11px;display:flex}.cell-id{color:var(--text);font-weight:600}.cell-buttons{grid-template-columns:repeat(5,minmax(32px,auto));align-items:center;gap:4px;display:grid}.cell-btn{font-variant-numeric:tabular-nums;min-width:32px}.calibrate-cell-btn{height:32px;padding:0 10px}.calibrate-cell-btn[data-rating=good],.calibrate-cell-btn[data-rating=bad],.calibrate-cell-btn[data-rating=clear],.calibrate-cell-btn[data-rating=favorite]{width:32px;padding:0}.calibrate-cell-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.calibrate-actions{padding-top:var(--space-2);border-top:1px solid var(--border);grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.calibrate-actions .btn{width:100%}.calibrate-summary{margin:0 0 var(--space-2);color:var(--text-dim);font-size:12px}.calibrate-empty{color:var(--text-faint);margin:0;font-size:12px}.cell-seed{color:var(--text-faint);font-size:10px;font-family:var(--font-mono)}.seed-input-wrap{gap:var(--space-1);grid-template-columns:1fr auto;display:grid}.seed-input-wrap input{width:100%}.seed-input-wrap button{padding:4px 10px;font-size:12px}.stage-wrap{min-width:0;min-height:0;padding:var(--space-4);background:radial-gradient(circle, var(--grid-dot) 1px, transparent 1.2px) 0 0 / 24px 24px, var(--bg);justify-content:stretch;align-items:stretch;display:flex;position:relative}#stage{background:var(--preview-bg,var(--surface-1));border:1px solid var(--border);border-radius:var(--radius-lg);min-width:0;min-height:0;box-shadow:var(--shadow-md);padding:var(--space-3);transition:background var(--transition-med);flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}#stage canvas,#stage svg,#art-canvas{max-width:100%;max-height:100%;display:block}.status-chips{left:var(--space-4);bottom:var(--space-4);gap:var(--space-2);pointer-events:none;display:flex;position:absolute}.status-chips .chip{pointer-events:auto}.splash{align-items:center;gap:var(--space-6);width:100%;min-height:100%;padding:var(--space-6);box-sizing:border-box;flex-direction:column;display:flex}.splash>:first-child{margin-top:auto}.splash>:last-child{margin-bottom:auto}.splash h1{color:var(--text);letter-spacing:-.01em;margin:0;font-size:28px;font-weight:600}.splash-grid{gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));width:100%;max-width:1080px;display:grid}.splash-card{align-items:stretch;gap:var(--space-2);padding:var(--space-4);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;text-align:left;color:var(--text);transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);flex-direction:column;font-family:inherit;display:flex}.splash-card:hover:not(.disabled):not(:disabled){box-shadow:var(--shadow-lg);border-color:var(--border-strong);transform:translateY(-2px)}.splash-card.disabled,.splash-card:disabled{cursor:not-allowed;opacity:.5}.splash-card h2{margin:0;font-size:16px;font-weight:600}.splash-card p{color:var(--text-dim);margin:0;font-size:13px}.splash-thumb{aspect-ratio:1;background:var(--surface-2);border-radius:var(--radius-md);width:100%;color:var(--text-faint);justify-content:center;align-items:center;font-size:13px;display:flex;overflow:hidden}.splash-thumb svg{display:block}.splash-thumb.placeholder{background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-1) 8px, var(--surface-1) 16px)}.app[data-mode=nodes]{grid-template-columns:var(--rail-width) minmax(0, 1fr) 6px var(--preview-width,560px)}.app[data-mode=nodes] .topbar{grid-column:2/5}.app[data-mode=nodes] .panel{display:none}.app[data-mode=nodes] #node-canvas-wrap{grid-area:2/2}.app[data-mode=nodes] #preview-divider{grid-area:2/3;display:block}.app[data-mode=nodes] .stage-wrap{background:var(--surface-1);padding:var(--space-4);grid-area:2/4}#preview-divider{cursor:col-resize;background:var(--border);transition:background var(--transition-fast);z-index:4;display:none;position:relative}#preview-divider:before{content:"";position:absolute;inset:0 -3px}#preview-divider:hover,#preview-divider.dragging{background:var(--accent)}.app[data-mode=nodes] #stage{background:var(--preview-bg,var(--bg));border-color:var(--border)}#node-canvas-wrap{display:none}.app[data-mode=nodes] #node-canvas-wrap{display:block}.node-canvas{background-color:var(--bg);background-image:radial-gradient(circle, var(--grid-dot) 1px, transparent 1.2px);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;background-position:0 0;background-size:24px 24px;outline:none;width:100%;height:100%;position:relative;overflow:hidden}.node-canvas.panning{cursor:grabbing}.node-viewport{transform-origin:0 0;width:0;height:0;position:absolute;top:0;left:0}.node-view-controls{z-index:6;background:color-mix(in oklab, var(--surface-1) 92%, transparent);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);grid-template-columns:auto auto auto auto;align-items:center;gap:4px;padding:4px;display:grid;position:absolute;bottom:12px;right:12px}.node-view-controls span{min-width:42px;color:var(--text-faint);font-family:var(--font-mono);text-align:center;padding:0 6px;font-size:11px}.node-view-controls button{height:24px!important;color:var(--text-dim)!important;background:0 0!important;border:1px solid #0000!important;border-radius:4px!important;padding:0 8px!important;font-size:11.5px!important}.node-view-controls button:hover{background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text)!important}.node-wires{pointer-events:none;width:1px;height:1px;position:absolute;overflow:visible}.node-wire{fill:none;stroke:var(--border-strong);stroke-width:1.5px;transition:stroke var(--transition-fast)}.node-wire:hover{stroke:var(--accent)}.node{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--text);-webkit-user-select:none;user-select:none;transition:box-shadow var(--transition-fast), border-color var(--transition-fast);font-size:12.5px;position:absolute;top:0;left:0}.node:hover{border-color:var(--border-strong)}.node.dragging{box-shadow:var(--shadow-lg);border-color:var(--accent);z-index:10}.node-header{align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border);cursor:grab;touch-action:none;padding:10px 12px;display:flex}.node-header:active{cursor:grabbing}.node-icon{width:18px;height:18px;color:var(--text-dim);justify-content:center;align-items:center;display:flex}.node-icon svg{width:100%;height:100%}.node-title{color:var(--text);letter-spacing:-.01em;font-size:13px;font-weight:600}.node-body{flex-direction:column;gap:8px;padding:10px 12px;display:flex}.node-row{grid-template-columns:60px minmax(0,1fr);align-items:center;gap:10px;display:grid}.node-row-label{color:var(--text-dim);font-size:11.5px}.node-port{background:var(--port-color,var(--accent));border:2px solid var(--surface-raised);pointer-events:none;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;transform:translateY(-50%)}.node-port-input{left:-6px}.node-port-output{right:-6px}.node-slider{grid-template-columns:minmax(0,1fr) 36px;align-items:center;gap:8px;display:grid}.node-slider input[type=range]{width:100%}.node-slider-value{font-family:var(--font-mono);color:var(--text-dim);text-align:right;font-size:11px}.node-stepper{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);grid-template-columns:24px minmax(0,1fr) 24px;align-items:center;height:28px;display:grid;overflow:hidden}.node-stepper button{font-size:14px;height:100%!important;color:var(--text-dim)!important;background:0 0!important;border:0!important;border-radius:0!important;padding:0!important}.node-stepper button:hover{background:var(--surface-2)!important;color:var(--text)!important}.node-stepper span{text-align:center;font-family:var(--font-mono);color:var(--text);font-size:12px}.node-segmented{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);grid-auto-columns:1fr;grid-auto-flow:column;gap:0;padding:2px;display:grid}.node-segmented.preset{grid-column:1/-1}.node-segmented button{height:24px!important;color:var(--text-dim)!important;background:0 0!important;border:0!important;border-radius:4px!important;padding:0 8px!important;font-size:11.5px!important;font-weight:500!important}.node-segmented button:hover{color:var(--text)!important;background:var(--surface-2)!important}.node-segmented button.active{box-shadow:var(--shadow-sm);background:var(--surface-raised)!important;color:var(--text)!important}.node-select{width:100%;min-width:0;height:28px;color:var(--text);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px}.node-chip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.node-chip{text-transform:capitalize;min-width:0;background:var(--surface-1)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;height:26px!important;color:var(--text-dim)!important;padding:0 8px!important;font-size:11.5px!important}.node-chip:hover{color:var(--text)!important;border-color:var(--border-strong)!important}.node-chip.active{background:var(--surface-raised)!important;color:var(--text)!important;border-color:var(--accent)!important}.node-swatches{grid-template-columns:repeat(6,1fr);gap:4px;margin-top:2px;display:grid}.node-swatch{aspect-ratio:1;border:1px solid var(--border);border-radius:4px;width:100%}.node-actions{grid-template-columns:1fr 1fr;gap:6px;display:grid}.node-export-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px;display:grid}.node-check{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:11.5px;display:inline-flex}.node-check input[type=checkbox]{margin:0}.node-color{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;width:100%;height:24px;padding:0}.node-palette{flex-direction:column;gap:8px;display:flex}.node-palette-selector{grid-template-columns:minmax(0,1fr) 28px 28px;align-items:center;gap:4px;display:grid}.node-icon-btn{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-dim);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);justify-content:center;align-items:center;padding:0;display:inline-flex}.node-icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}.node-icon-btn svg{width:14px;height:14px}.node-palette-editor{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:8px;margin-top:4px;padding:8px;display:flex}.node-palette-name{align-items:center;gap:8px;display:flex}.node-palette-name input{flex:auto;min-width:0;height:28px}.node-palette-slots{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.node-palette-slot{color:var(--text-dim);grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:6px;font-size:11px;display:grid}.node-palette-slot input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;width:32px;height:24px;padding:0}.node-palette-actions{flex-wrap:wrap;gap:6px;display:flex}.node-palette-actions .btn{flex:1}.node-layer-row{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);flex-direction:column;gap:6px;padding:8px;display:flex}.node-layer-head{justify-content:space-between;align-items:center;display:flex}.node-layer-extras{border-top:1px dashed var(--border);gap:12px;padding-top:4px;display:flex}#node-canvas-wrap{width:100%;min-width:0;height:100%;min-height:0}.btn.icon.star-active{color:#f5b100}.btn.icon.star-active:hover{color:#ffc933}.drawer-panel{top:var(--topbar-height);left:var(--rail-width);background:var(--surface-1);border-right:1px solid var(--border);width:380px;max-width:90vw;box-shadow:var(--shadow-lg);z-index:30;visibility:hidden;pointer-events:none;flex-direction:column;transition:transform .22s,visibility 0s linear .22s;display:flex;position:fixed;bottom:0;transform:translate(-100%)}.drawer-panel.open{visibility:visible;pointer-events:auto;transition:transform .22s,visibility linear;transform:translate(0)}.favorites-drawer-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.favorites-drawer-title{color:var(--text);font-size:13px;font-weight:600}.favorites-drawer-body{min-height:0;padding:var(--space-3);gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow:auto}.settings-section{gap:var(--space-2);flex-direction:column;display:flex}.settings-section h3{color:var(--text);margin:0;font-size:12px;font-weight:600}.settings-desc{color:var(--text-dim);margin:0;font-size:12px;line-height:1.4}.settings-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.changelog-list{gap:var(--space-3);flex-direction:column;display:flex}.changelog-entry{gap:var(--space-1);flex-direction:column;display:flex}.changelog-entry-head{align-items:baseline;gap:var(--space-2);flex-wrap:wrap;display:flex}.changelog-version{color:var(--text);font-size:12px;font-weight:600}.changelog-date,.changelog-title{color:var(--text-dim);font-size:11px}.changelog-changes{padding-left:var(--space-4);flex-direction:column;gap:2px;margin:0;display:flex}.changelog-changes li{color:var(--text-dim);font-size:12px;line-height:1.4}.change-kind{margin-right:var(--space-1);text-transform:uppercase;letter-spacing:.04em;color:var(--accent,var(--text));font-size:10px;font-weight:600;display:inline-block}.favorites-empty{margin:var(--space-5) auto;text-align:center;max-width:240px;color:var(--text-faint);font-size:12px;line-height:1.5}.favorites-grid{gap:var(--space-3);grid-template-columns:repeat(2,1fr);display:grid}.favorite-item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--transition-fast), transform var(--transition-fast);flex-direction:column;gap:6px;padding:8px;display:flex}.favorite-item:hover{border-color:var(--border-strong);transform:translateY(-1px)}.favorite-thumb{aspect-ratio:1;background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);justify-content:center;align-items:center;display:flex;overflow:hidden}.favorite-thumb svg{max-width:100%;max-height:100%;display:block}.favorite-thumb.placeholder{background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--surface-1) 6px, var(--surface-1) 12px)}.favorite-meta{flex-direction:column;gap:1px;padding:0 2px;display:flex}.favorite-seed{font-family:var(--font-mono);color:var(--text);font-size:11px}.favorite-date{color:var(--text-faint);font-size:10.5px}.favorite-actions{grid-template-columns:1fr auto;align-items:center;gap:4px;display:grid}.favorite-actions .btn{width:100%}.favorites-footer{padding-top:var(--space-2);border-top:1px solid var(--border);justify-content:flex-end;display:flex}.preview-bg-picker{right:var(--space-4);bottom:var(--space-4);position:absolute}.preview-bg-trigger{background:var(--surface-2);height:28px;color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast), border-color var(--transition-fast);align-items:center;gap:6px;padding:0 8px 0 6px;font-family:inherit;font-size:11px;display:inline-flex}.preview-bg-trigger:hover{background:var(--surface-raised);border-color:var(--border-strong);color:var(--text)}.preview-bg-trigger:after{content:"BG";letter-spacing:.04em;font-weight:600}.preview-bg-swatch{border:1px solid var(--border-strong);border-radius:3px;width:14px;height:14px;display:inline-block}.preview-bg-popover{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:20;min-width:180px;padding:10px;position:absolute;bottom:calc(100% + 6px);right:0}.preview-bg-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;display:grid}.preview-bg-option{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;height:36px;color:var(--text-dim);transition:border-color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:11px;display:flex}.preview-bg-option:hover{border-color:var(--border-strong)}.preview-bg-option.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}.preview-bg-option span{border-radius:3px;width:100%;height:100%}.preview-bg-option.auto{font-weight:500}.preview-bg-custom{color:var(--text-dim);border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding-top:6px;font-size:11.5px;display:flex}.preview-bg-custom input[type=color]{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;width:28px;height:24px;padding:0}@media (width<=860px){:root{--topbar-height:52px}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-height) minmax(0, 1fr) auto 56px}.icon-rail{border-right:0;border-top:1px solid var(--border);padding:0 var(--space-3);flex-direction:row;grid-area:4/1;justify-content:space-around;width:100%;height:56px}.icon-rail .logo,.icon-rail .rail-spacer{display:none}.topbar{grid-area:1/1}.stage-wrap{padding:var(--space-3);grid-area:2/1}.panel{border-right:0;border-top:1px solid var(--border);max-height:45dvh;padding:var(--space-3);grid-area:3/1}.app[data-mode=nodes]{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-height) 38dvh minmax(0, 1fr) 56px}.app[data-mode=nodes] .topbar{grid-area:1/1}.app[data-mode=nodes] .stage-wrap{padding:var(--space-2);border-left:0;border-bottom:1px solid var(--border);grid-area:2/1}.app[data-mode=nodes] #node-canvas-wrap{grid-area:3/1;display:block}.app[data-mode=nodes] .icon-rail{grid-area:4/1}.app[data-mode=nodes] #preview-divider,.app[data-mode=nodes] .panel{display:none}.app.splash-mode{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-height) minmax(0, 1fr) 56px}.app.splash-mode .icon-rail{grid-area:3/1}.app.splash-mode .topbar{grid-area:1/1}.app.splash-mode .stage-wrap{grid-area:2/1}.splash-grid{gap:var(--space-3);grid-template-columns:1fr}.toolbar,.preset-row{grid-template-columns:1fr}.topbar-subtitle{display:none}.drawer-panel{left:0;top:var(--topbar-height);border-right:0;width:100%;max-width:100%;bottom:56px}}