:root{--bg: #0b0b0c;--panel: #111113;--raise: #18181b;--line: #222226;--line-2: #303036;--text: #ebe9e4;--muted: #8b8a90;--dim: #5b5a60;--accent: #d8ff3c;--font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:12px/1.4 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button{height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .12s,border-color .12s}button:hover{background:var(--raise);border-color:#44444b}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:#0b0b0c;border-color:var(--accent)}button.primary:hover{background:#e4ff74}button.icon{width:28px;padding:0;justify-content:center}kbd{font:10px var(--font);padding:1px 4px;border:1px solid var(--line-2);border-radius:3px;color:var(--muted)}button.primary kbd{border-color:#00000040;color:#0009}code{color:var(--accent)}#app{display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:48px minmax(0,1fr);height:100%}.top{grid-column:1 / -1;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;align-items:center;gap:10px;width:276px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.brand .mark{width:14px;height:14px;background:linear-gradient(90deg,var(--accent) 50%,transparent 50%) 0 0 / 4px 4px,linear-gradient(var(--accent) 50%,transparent 50%) 0 0 / 4px 4px;border:1px solid var(--accent)}.brand .home{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand .home:hover{color:var(--accent)}.brand .ver{color:var(--dim);letter-spacing:0;text-transform:none}.brand .by{color:var(--muted);font-weight:400;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}.brand .by:hover{color:var(--accent)}.spacer{flex:1}.select-wrap{position:relative;flex:1;min-width:0}.select-wrap:after{content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}.select-wrap.preset{flex:0 0 180px}select{appearance:none;width:100%;height:28px;padding:0 26px 0 10px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg);cursor:pointer}select:hover{border-color:#44444b}.panel{overflow-y:auto;border-right:1px solid var(--line);background:var(--panel);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}.section{border-bottom:1px solid var(--line)}.section-head{width:100%;height:38px;padding:0 14px;border:0;border-radius:0;justify-content:space-between;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted)}.section-head:hover{background:transparent;color:var(--text)}.section-head .chev{color:var(--dim)}.section.collapsed .section-body{display:none}.section.collapsed .chev{transform:rotate(90deg)}.section-body{display:flex;flex-direction:column;gap:12px;padding:2px 14px 16px}.row{display:flex;align-items:center;gap:10px}.row-label{color:var(--muted);flex:0 0 84px}.row.range,.row.text,.row.palette{flex-direction:column;align-items:stretch;gap:6px}.row.text>.row-label{flex:none}.range-head{display:flex;justify-content:space-between;align-items:center}.value{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{--p: 50%;appearance:none;width:100%;height:14px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--text) var(--p),var(--line-2) var(--p))}input[type=range]::-moz-range-track{height:2px;background:var(--line-2)}input[type=range]::-moz-range-progress{height:2px;background:var(--text)}input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-4px;border-radius:2px;background:var(--text);transition:transform .1s}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:2px;background:var(--text)}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.25);background:var(--accent)}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}.segmented button{border:0;border-radius:0;justify-content:center;color:var(--muted);padding:0 4px}.segmented button+button{border-left:1px solid var(--line-2)}.segmented button.on{background:var(--raise);color:var(--accent)}.toggle{border:0;padding:0;height:auto;color:var(--muted)}.toggle:hover{background:transparent;color:var(--text)}.toggle .box{width:14px;height:14px;display:inline-grid;place-items:center;border:1px solid var(--line-2);border-radius:3px;font-size:11px}.toggle.on{color:var(--text)}.toggle.on .box{border-color:var(--accent);color:var(--accent)}input[type=text],textarea{width:100%;padding:7px 9px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg);resize:vertical;outline:none}input[type=text]:focus,textarea:focus,select:focus-visible{border-color:var(--accent);outline:none}.chips{display:flex;flex-wrap:wrap;gap:4px}.chips button{height:22px;padding:0 7px;font-size:11px;color:var(--muted)}.chips button.on{color:var(--accent);border-color:var(--accent)}.color-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1}.swatch{position:relative;width:28px;height:28px;border:1px solid var(--line-2);border-radius:4px;cursor:pointer;overflow:hidden}.swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}.palette-swatches{display:flex;gap:4px}.palette-swatches .swatch{flex:1;height:32px}.palette-tools{display:flex;gap:4px}.palette-tools .mini{width:22px;height:22px;padding:0;justify-content:center;color:var(--muted)}.palette-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.palette-chips button{height:14px;padding:0;border-radius:2px;border-color:var(--line)}.palette-chips button:hover{border-color:var(--text)}.upload{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 10px;border:1px dashed var(--line-2);border-radius:4px;cursor:pointer}.upload:hover{border-color:var(--accent)}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.row:has(.upload){flex-direction:column;align-items:stretch;gap:6px}.hint{margin:0;color:var(--dim);font-size:11px;line-height:1.5}.hint:empty{display:none}.layer-list{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:4px;overflow:hidden}.layer{display:flex;align-items:center;height:32px}.layer+.layer{border-top:1px solid var(--line)}.layer.on{background:var(--raise);box-shadow:inset 2px 0 var(--accent)}.layer button{height:32px;border:0;border-radius:0}.layer button:hover{background:transparent}.layer .eye{width:32px;padding:0;justify-content:center}.layer .eye:before{content:"";width:7px;height:7px;border:1px solid var(--dim);border-radius:50%}.layer .eye.on:before{background:var(--muted);border-color:var(--muted)}.layer .eye:hover:before{border-color:var(--text)}.layer-name{flex:1;min-width:0;padding:0 10px 0 0;gap:8px;justify-content:flex-start}.layer-index{color:var(--dim);min-width:10px}.layer-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left;color:var(--muted)}.layer-name:hover .layer-label,.layer.on .layer-label{color:var(--text)}.layer.hidden .layer-label,.layer.hidden .layer-index{color:var(--dim)}.layer-meta{color:var(--dim);font-size:11px}.layer-tools{display:flex;gap:4px}.layer-tools .mini{height:24px;padding:0 8px;font-size:11px;color:var(--muted)}.layer-tools .mini:not(:disabled):hover{color:var(--text)}.stage{position:relative;display:grid;grid-template-rows:minmax(0,1fr) 44px;background:radial-gradient(circle,#1d1d21 1px,transparent 1.2px) 0 0 / 16px 16px,#08080a}.viewport{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden}.frame{position:relative;background:repeating-conic-gradient(#141417 0 25%,#0e0e10 0 50%) 0 0 / 16px 16px;box-shadow:0 0 0 1px var(--line-2),0 30px 80px #00000080}.frame.fill{box-shadow:none}.frame canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.toolbar{display:flex;align-items:center;gap:10px;padding:0 12px;border-top:1px solid var(--line);background:var(--panel)}.aspects{display:flex;gap:2px}.aspects button{border-color:transparent;color:var(--muted);padding:0 8px}.aspects button.on{color:var(--accent);border-color:var(--line-2)}.stat{color:var(--dim);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}.dropzone{position:absolute;inset:12px 12px 56px;display:grid;place-items:center;border:1px dashed var(--accent);border-radius:8px;background:#08080acc;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .15s}.dropzone.on{opacity:1;pointer-events:auto}dialog{width:min(680px,calc(100vw - 32px));padding:0;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);color:var(--text)}dialog::backdrop{background:#0009}dialog>*{margin:0 16px 12px}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted)}.dialog-head button{border:0;font-size:16px}dialog textarea{height:180px;font-size:11px;color:var(--muted);resize:none;word-break:break-all}.dialog-actions{display:flex;flex-wrap:wrap;gap:6px}.dialog-actions:last-child{margin-bottom:16px}#leave-dialog{width:min(440px,calc(100vw - 32px))}#leave-text{margin-bottom:18px;line-height:1.6}.toast{position:fixed;left:50%;bottom:64px;padding:8px 14px;border:1px solid var(--line-2);border-radius:4px;background:var(--raise);transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}.toast.on{opacity:1;transform:translate(-50%)}@media(max-width:820px){#app{grid-template-columns:1fr;grid-template-rows:48px 55vh minmax(0,1fr)}.stage{grid-row:2}.panel{grid-row:3;border-right:0;border-top:1px solid var(--line)}.brand{width:auto}.top #mutate,.top kbd{display:none}}