.app{max-width:1280px;margin:0 auto;padding:24px 16px 48px}.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.top h1{margin:0}.lead{color:var(--muted);margin:4px 0 0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}.stage{position:sticky;top:16px;display:flex;flex-direction:column;align-items:center}.stage canvas{display:block;border-radius:4px;box-shadow:0 0 0 1px var(--line);max-width:100%}.preview{width:100%;display:flex;flex-direction:column;align-items:center}.preview-canvas.pannable{cursor:grab}.preview-canvas.panning{cursor:grabbing}.zoom-bar{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap;justify-content:center}.zoom-size{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;margin-left:4px;cursor:help;white-space:nowrap}.zoom-level{min-width:48px;text-align:center;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;cursor:help}.meta{font-size:12px;color:var(--muted);margin:8px 0 0;font-variant-numeric:tabular-nums}.side{display:flex;flex-direction:column;gap:14px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}.panel h2{font-size:13px;font-weight:600;letter-spacing:.06em;margin:0;color:var(--accent)}.panel-toggle{flex:1;display:flex;align-items:center;gap:8px;border:none;border-radius:0;background:none;padding:0;text-align:left;color:inherit;cursor:pointer;min-height:24px}.panel-toggle:hover{border:none}.panel-toggle .chev{width:12px;color:var(--muted);font-size:12px}.panel:has(.panel-toggle[aria-expanded=false]) .panel-head{margin-bottom:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;min-height:24px}.grid{display:grid;gap:10px}.field{display:block;font-size:13px;color:var(--muted)}.field>span:not(.chips):not(.inline){float:right;color:var(--text);font-variant-numeric:tabular-nums}.field input[type=range]{width:100%;accent-color:var(--accent)}select,input[type=number],input[type=text]{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;margin-top:2px}.inline{display:flex;align-items:center;gap:6px;color:var(--text)}.inline input{width:110px;margin:0}.chips{display:inline-flex;gap:6px;margin-top:6px}.row{display:flex;gap:8px;flex-wrap:wrap}button{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font:inherit;font-size:13px;cursor:pointer}button:hover{border-color:var(--accent-hover)}a.pill{color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:13px;white-space:nowrap}a.pill:hover{border-color:var(--accent-hover)}button.primary{background:var(--accent);color:#041322;border-color:var(--accent);font-weight:600;padding:8px 22px}button.icon{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px}button.chip{padding:2px 10px;font-size:12px}button.chip.on{border-color:var(--accent);color:var(--accent)}.name{flex:1;min-width:0;margin:0}.slots{list-style:none;margin:0;padding:0;display:grid;gap:6px}.slots li{display:flex;gap:6px;align-items:center}.slot-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.slot-name small{display:block;color:var(--muted);font-size:11px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:8px 16px;font-size:13px;max-width:90vw;overflow-wrap:anywhere}@media(max-width:900px){.layout{grid-template-columns:1fr}.stage{position:static}}@media(max-width:600px){.stage{position:sticky;top:0;z-index:20;background:var(--bg);padding:6px 0;margin:0 -16px;box-shadow:0 6px 12px -6px #00000080}.app{padding-top:12px}}.layers{list-style:none;margin:0;padding:0;display:grid;gap:4px}.layers li{display:flex;gap:4px;align-items:center;border:1px solid transparent;border-radius:8px;padding:2px}.layers li.on{border-color:var(--accent);background:#3399ff14}.layer-name{flex:1;text-align:left;border:none;padding:4px 8px}button:disabled{color:#55608a;border-color:#262c4e;cursor:default}button:disabled:hover{border-color:#262c4e}.toolbar{display:flex;flex-wrap:wrap;gap:6px}button.tool{min-width:34px;padding:3px 8px;font-size:14px}.layers{gap:2px}.layers li{padding-right:2px}.fold{width:22px;flex:none;background:none;border:none;padding:0;color:var(--muted);cursor:pointer;font-size:13px}button.eye{width:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:var(--muted);cursor:pointer}button.eye:hover{color:var(--text)}.layers li.hidden .eye{color:var(--accent)}.layers li.hidden .layer-name{opacity:.45}.layers li.hidden .layer-label{text-decoration:line-through;text-decoration-color:#ffffff4d}span.fold{display:inline-block;height:1px}.layer-name{display:flex;align-items:center;gap:0}.layer-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-meta{margin-left:auto;padding-left:8px;display:flex;align-items:center;gap:8px;flex:none}.layer-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.layer-swatch{width:30px;height:10px;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff38}.layer-dots{display:inline-flex}.layer-dots span{width:11px;height:11px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 1.5px var(--panel),inset 0 0 0 1px #ffffff38}.layer-dots span:first-child{margin-left:0}.grip{width:14px;flex:none;text-align:center;color:var(--muted);opacity:.5;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;font-size:13px}.layers li:hover .grip{opacity:1}.layers li{position:relative;touch-action:pan-y;cursor:grab}.layers li.dragging{opacity:.35}.layers li.drop-above:before,.layers li.drop-below:after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--accent);border-radius:1px;pointer-events:none}.layers li.drop-above:before{top:-2px}.layers li.drop-below:after{bottom:-2px}.layers li.drop-into{border-color:var(--accent);background:#3399ff2e}.layers.drop-root-bottom{box-shadow:0 2px 0 var(--accent)}body.dragging-layer,body.dragging-layer *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}.drag-ghost{position:fixed;z-index:100000;pointer-events:none;background:var(--panel);color:var(--text);border:1px solid var(--accent);border-radius:6px;padding:3px 10px;font-size:13px;box-shadow:0 4px 16px #00000080}.tooltip{position:fixed;z-index:100001;left:0;top:0;opacity:0;pointer-events:none;width:max-content;max-width:min(260px,calc(100vw - 16px));padding:6px 10px;border-radius:6px;background:var(--bg);color:var(--text);border:1px solid var(--accent);font:12px/1.55 var(--font);text-align:left;box-shadow:0 4px 16px #00000080}body.dragging-layer .tooltip{display:none}.palette{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.swatch-edit{position:relative}.swatch-input{width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}.swatch-x{position:absolute;top:-7px;right:-7px;width:18px;height:18px;padding:0;line-height:1;border-radius:50%;font-size:13px;background:var(--panel);color:var(--muted)}.swatch-add{width:38px;height:38px;padding:0;border-radius:8px;font-size:18px;border-style:dashed}.swatch-field{display:block}.swatch-label{font-size:13px;color:var(--muted);margin-bottom:4px}.swatches{display:flex;flex-wrap:wrap;gap:6px}.swatch{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid var(--line);box-shadow:inset 0 0 0 1px #ffffff1f}.swatch:hover{border-color:var(--muted)}.swatch.on{border-color:var(--text);outline:2px solid var(--accent);outline-offset:1px}.info-btn{width:24px;height:24px;padding:0;border-radius:50%;font-size:15px;line-height:1;color:var(--muted);border-color:transparent;background:none}.info-btn:hover,.info-btn.on{color:var(--accent);border-color:var(--accent)}.info-text{margin:0 0 10px;padding:8px 10px;border-left:2px solid var(--accent);background:#3399ff0f;border-radius:0 6px 6px 0;color:var(--text);opacity:.85}.info-note{display:grid;gap:6px;justify-items:start}.info-note .info-text{margin:0;justify-self:stretch}.modal-backdrop{position:fixed;inset:0;z-index:2000;background:#0000009e;display:flex;align-items:center;justify-content:center;padding:16px}.modal{width:min(460px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:0 12px 48px #0009}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}.modal-head h2{margin:0!important}.modal h2{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--accent);letter-spacing:.04em}.modal-body{color:var(--text);font-size:14px;line-height:1.7}.modal-body p{margin:0}.modal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:18px}button.danger{border-color:#c45a5a;color:#ffb3a0}button.danger:hover{background:#c45a5a26;border-color:#e07070}.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}.check input{accent-color:var(--accent);width:16px;height:16px;margin:0}.share-wide{flex:1 0 100%;padding:12px 22px;font-size:16px}.save-image{display:block;max-width:100%;max-height:55vh;width:auto;height:auto;margin:0 auto 10px;border-radius:4px;box-shadow:0 0 0 1px var(--line);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}.gap-form{display:grid;gap:10px}.modal:has(.gap-form){width:min(520px,100%)}.meta.warn{color:var(--accent2)}.gap-preview{position:sticky;top:0;z-index:2;margin:0 -20px 12px;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;justify-content:center}.gap-preview canvas{display:block;max-width:100%;max-height:38vh;border-radius:4px;box-shadow:0 0 0 1px var(--line);transition:opacity .15s}.gap-preview canvas.pending{opacity:.6}.actions{align-items:center}.actions button.primary,.actions button.gap-quick{flex:1 1 calc(50% - 4px);padding:14px 12px;font-size:16px}.actions button.x-share{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px}.menu{position:relative;display:inline-block}.menu.push{margin-left:auto}.menu-list{position:absolute;z-index:50;top:calc(100% + 4px);left:0;min-width:160px;display:grid;gap:2px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #00000080}.menu.right .menu-list{left:auto;right:0}.menu-list.menu-columns{grid-template-columns:repeat(3,max-content)}@media(max-width:560px){.menu-list.menu-columns{grid-template-columns:repeat(2,max-content)}}.menu-list.menu-columns2{grid-template-columns:repeat(2,max-content)}.menu-subheading{margin-top:6px}.menu-divider{grid-column:1 / -1;height:1px;background:#ffffff1f;margin:4px 0}.menu-heading.menu-colhead{grid-column:auto;margin-top:0}.menu-check{display:inline-block;width:1.2em;margin-right:4px;text-align:center}.menu-swatches{display:inline-flex;gap:2px;margin-right:10px}.menu-swatches i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}.palette-menu{display:block;margin-top:2px}.palette-menu>.menu-button{width:100%;text-align:left;display:flex;align-items:center}.palette-menu .menu-list{min-width:100%}.menu-list button.menu-wide{grid-column:1 / -1}.menu-list button{border:none;border-radius:6px;text-align:left;padding:6px 12px;white-space:nowrap}.menu-list button:hover,.menu-list button:focus-visible{background:#3399ff1f}.menu-list button:disabled{background:none}.menu-heading{padding:4px 12px 6px;font-size:12px;opacity:.65;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:4px;grid-column:1 / -1;white-space:nowrap}button.accent{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}button.accent:hover{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,transparent)}.kind{flex:none;margin-right:8px}.kind-disc,.kind-ring,.kind-moon,.kind-beads,.kind-rays,.kind-star{color:var(--accent)}.kind-torus,.kind-petals{color:var(--accent2)}.kind-group{color:var(--muted)}.menu-icon{display:inline-flex;width:18px;margin-right:10px;vertical-align:middle}.menu-list button{display:flex;align-items:center}