:root{color-scheme:dark;--bg:#14191c;--panel:#1b2125;--raised:#242c31;--line:#313b41;--text:#e5ecec;--muted:#a0afb4;--accent:#c6f277;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--line);border-radius:6px;padding:8px 12px;transition:background .15s}button:hover{background:#303c42}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:0 24px}.brand{display:flex;align-items:center;gap:12px}.brandmark{display:grid;place-items:center;width:36px;height:36px;background:var(--accent);border-radius:7px;color:#17251b;font-size:29px}.brand strong{letter-spacing:1.5px;font-size:17px}.brand strong span{font-weight:400;color:var(--muted);margin-left:6px}.edition{align-self:flex-start;color:var(--accent);font:12px monospace}.headnote{color:var(--muted);border-left:1px solid var(--line);padding-left:24px;font-size:14px}.primary{background:var(--accent);color:#1b291c;font-weight:650;border:0;display:flex;gap:24px;align-items:center}header .primary{margin-left:auto}.primary:hover{background:#d9ff9b}main{height:calc(100dvh - 72px);display:grid;grid-template-columns:240px minmax(260px,1fr) 320px;min-height:550px}aside{background:var(--panel);display:flex;flex-direction:column;min-height:0}.left{border-right:1px solid var(--line);padding-bottom:12px}.right{border-left:1px solid var(--line)}.panel-heading{min-height:58px;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--line);font-weight:650;font-size:12px;letter-spacing:1.2px}.badge{background:var(--raised);border-radius:4px;padding:3px 6px;color:var(--muted);font:12px monospace}.icon-button{width:28px;height:28px;padding:0;font-size:22px;margin-left:auto}.panel-heading .badge:last-child{margin-left:auto}#layers{overflow:auto;padding:12px 10px;max-height:45vh}.layer{display:flex;align-items:center;gap:9px;margin:4px 0;padding:12px 10px;border:1px solid transparent;border-radius:7px;cursor:pointer}.layer:hover{background:var(--raised)}.layer.selected{background:#2b3533;border-color:#6d8652}.layer-swatch{height:36px;width:36px;flex:0 0 36px;border:1px solid #ffffff25;border-radius:5px;display:grid;place-items:center;font-size:22px}.layer-copy{flex:1;min-width:0}.layer-copy strong{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}.layer-copy small{color:var(--muted);font-size:12px;display:block;margin-top:4px}.visibility{padding:4px;border:0;font-size:18px}.layer.off{opacity:.5}.add-button{margin:2px 18px 20px;border-style:dashed;color:var(--muted);padding:10px}.canvas-settings{border-top:1px solid var(--line);padding:20px 18px;margin-top:auto;display:grid;gap:14px}.section-title{font-size:12px;font-weight:650;letter-spacing:1.2px;color:var(--muted);margin-bottom:4px}.side-foot{padding:6px 18px;color:var(--muted);font-size:12px}.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:6px}label{display:flex;flex-direction:column;gap:7px;color:#b7c4c8;font-size:14px}input[type=number],select,input[type=text]{width:100%;min-width:0;background:#151b1e;border:1px solid var(--line);border-radius:5px;padding:8px 9px;color:var(--text);height:36px}input[type=color]{width:32px;height:30px;padding:2px;border:1px solid var(--line);background:transparent;border-radius:4px;cursor:pointer}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;margin:2px 0}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.color-label{flex-direction:row;align-items:center;gap:10px}.color-label span{font:12px monospace;margin-left:auto;color:var(--muted)}.workspace{display:flex;flex-direction:column;min-width:0;min-height:0;background:#111619}.workspace-toolbar{height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-shrink:0}.segmented{display:flex;padding:3px;background:#20282c;border:1px solid var(--line);border-radius:7px}.segmented button{border:0;padding:6px 13px;color:var(--muted)}.segmented button.active{background:#394348;color:var(--text)}.zoom-control{display:flex;align-items:center;gap:6px}.zoom-control button{border:0;padding:4px 6px;color:var(--muted)}.zoom-control span{font:12px monospace;color:var(--muted)}#stage-wrap{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:38px;background-image:radial-gradient(#364044 1px,transparent 1px);background-size:16px 16px}#stage{position:relative;flex-shrink:0;box-shadow:0 12px 55px #0007;border:1px solid #56616644}#stage svg,#stage canvas{display:block;width:100%;height:100%}#stage [hidden]{display:none}#rendering{position:absolute;bottom:14px;left:14px;background:#1b2125df;padding:7px 12px;border-radius:5px;font-size:12px}.workspace-footer{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-top:1px solid var(--line);color:var(--muted);font:12px monospace;gap:10px}#inspector{overflow:auto;padding-bottom:24px;flex:1}.inspector-section{padding:18px;border-bottom:1px solid var(--line);display:grid;gap:14px}.inspector-section:last-child{border:0}.source-box{background:#141a1d;border:1px dashed #4a585e;border-radius:7px;padding:14px;display:flex;gap:12px;align-items:center}.source-icon{font-size:25px;color:var(--accent)}.source-box strong{font-size:14px;font-weight:500;display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-box small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.full{width:100%}.hint{font-size:12px;color:var(--muted);line-height:1.5;margin:0}.field-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.field-top label{color:#b7c4c8}.value{font:12px monospace;color:var(--accent)}.offset{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px}.offset input{width:77px;height:28px;font:12px monospace;padding:4px 7px}.check{flex-direction:row;align-items:center;justify-content:space-between}.preset-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.preset-options button{padding:9px 3px;display:grid;gap:7px;place-items:center;font-size:12px;color:var(--muted)}.preset-options button span{font-size:23px;color:var(--text)}.preset-options button.active{border-color:var(--accent);background:#303d2d;color:var(--accent)}.preset-options button.active span{color:var(--accent)}.seed-row{display:grid;grid-template-columns:1fr 36px;gap:8px}.seed-row button{padding:0;font-size:19px}.layer-actions{display:flex;gap:7px}.layer-actions button{flex:1;font-size:12px;padding:7px 4px}.layer-actions .danger{color:#f89a9a}details summary{cursor:pointer;font-size:12px;color:var(--muted)}details .offset{margin-top:10px}.effect-heading{display:flex;justify-content:space-between;align-items:center}.effect-heading strong{font-size:16px;font-weight:550}.effect-heading input{width:18px;height:18px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e7f2ec;color:#1b2820;box-shadow:0 10px 35px #0005;padding:12px 18px;border-radius:7px;max-width:90vw;z-index:9;line-height:1.5}[hidden]{display:none!important}.mobile-tabs{display:none}@media(min-width:1600px){main{grid-template-columns:260px minmax(400px,1fr) 350px}}@media(max-width:1050px){main{grid-template-columns:200px minmax(220px,1fr) 290px}.headnote{display:none}#stage-wrap{padding:20px}.workspace-toolbar{padding:0 10px}.zoom-control{gap:0}.segmented button{padding:6px 8px}.canvas-settings{padding:18px 12px}.layer{padding:9px 5px;gap:6px}}@media(max-width:780px){header{height:64px;padding:0 14px}.brand strong{font-size:14px}.brandmark{width:30px;height:30px}.edition{display:none}header .primary{font-size:12px;padding:9px 12px;gap:7px}main{height:auto;min-height:calc(100dvh - 64px);grid-template-columns:1fr 1fr;grid-template-rows:minmax(360px,60dvh) auto}.workspace{grid-column:1/-1;grid-row:1}.left,.right{min-height:500px}.right{border-top:1px solid var(--line)}.left{border-top:1px solid var(--line)}#layers{max-height:280px}.workspace-footer{font-size:11px}.inspector-section{padding:16px 12px}.preset-options{grid-template-columns:1fr 1fr}.canvas-settings{margin-top:20px}#stage-wrap{padding:20px}.panel-heading{padding:0 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.field-top input.value-input{width:70px;flex:0 0 70px;height:27px;padding:3px 5px;font:12px monospace;color:var(--accent)}
.layer{flex-wrap:wrap}.layer-actions{width:100%;padding-left:45px}.layer-actions button{padding:4px 6px;flex:0 0 26px}.layer-actions button:last-child{flex:1}.layer-actions button:disabled{opacity:.25}
.range-heading{display:flex;justify-content:space-between;gap:10px;color:var(--text);font-size:14px;margin-bottom:12px}.range-heading span{font-size:11px;color:var(--muted)}.range-field .pair label{font-size:11px}.range-field .pair input{font:13px monospace;color:var(--accent)}
.dual-range{position:relative;height:30px;margin:9px 9px 0}.dual-range:before{content:'';position:absolute;top:13px;left:0;right:0;height:4px;border-radius:3px;background:linear-gradient(to right,var(--line) 0 var(--low),var(--accent) var(--low) var(--high),var(--line) var(--high) 100%)}
.dual-range input[type=range]{position:absolute;inset:0;width:100%;height:30px;margin:0;background:transparent;appearance:none;pointer-events:none;outline-offset:0}.dual-range input::-webkit-slider-runnable-track{background:transparent;height:4px}.dual-range input::-webkit-slider-thumb{appearance:none;pointer-events:auto;width:16px;height:16px;border:2px solid var(--panel);border-radius:50%;background:var(--accent);margin-top:-6px;cursor:ew-resize;box-shadow:0 0 0 1px #8bab55}.dual-range input::-moz-range-track{background:transparent;height:4px}.dual-range input::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border:2px solid var(--panel);border-radius:50%;background:var(--accent);cursor:ew-resize}.dual-range input:focus-visible{z-index:2}.dual-range input:first-child{z-index:1}.range-limits{display:flex;justify-content:space-between;color:var(--muted);font:11px monospace}
.dual-range{touch-action:none;cursor:ew-resize}