:root{--bs-bg: #0f1115;--bs-surface: #1a1d24;--bs-border: #2c313c;--bs-text: #e8eaf0;--bs-text-muted: #9aa1b1;--bs-accent: #6ee7b7;--bs-error: #f87171;--cell-popover-gap: 8px;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bs-bg);color:var(--bs-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4}#app{max-width:960px;margin:0 auto;padding:1rem}.app-header{padding:.5rem 0 1rem}.app-header h1{margin:0;font-size:1.5rem}.tab-bar{display:flex;gap:.25rem;border-bottom:1px solid var(--bs-border)}.tab-button{background:transparent;border:1px solid transparent;border-bottom:none;border-radius:.375rem .375rem 0 0;padding:.5rem .9rem;color:var(--bs-text-muted);cursor:pointer}.tab-button:hover{color:var(--bs-text);border-color:var(--bs-border)}.tab-button[aria-selected=true]{color:var(--bs-text);background:var(--bs-surface);border-color:var(--bs-border);margin-bottom:-1px}.tab-panel[hidden]{display:none}.tab-panel{padding-top:1rem}.app-main{display:flex;flex-direction:column;gap:2rem}section h2{font-size:1.1rem;margin:0 0 .75rem}.preview-section{display:flex;flex-direction:column;gap:.75rem}.preview-layout{display:grid;gap:1.25rem;justify-items:center}.preview-col-side{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:340px}@media (min-width: 720px){.preview-layout{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start;justify-items:stretch}.preview-col-side{max-width:none;align-items:flex-start}}.preview-sticky{position:sticky;top:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;background:var(--bs-bg);padding-bottom:.5rem}.preview-container{position:relative;width:100%;max-width:320px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.5rem;padding:1rem;color:var(--bs-text-muted);text-align:center}.cell-overlay-root{position:absolute;top:1rem;right:1rem;bottom:1rem;left:1rem;pointer-events:none}.cell-overlay{position:absolute;top:0;left:0;width:var(--cell-overlay-w, 100%);height:var(--cell-overlay-h, 100%);display:grid}.cell-hit{margin:0;padding:0;border:1px solid transparent;background:transparent;border-radius:2px;cursor:pointer;pointer-events:auto;transition:background .1s ease,border-color .1s ease}.cell-hit:hover,.cell-hit:focus-visible{outline:none;border-color:var(--bs-accent);background:color-mix(in srgb,var(--bs-accent) 12%,transparent)}.cell-hit[aria-pressed=true]{border-color:var(--bs-accent);background:color-mix(in srgb,var(--bs-accent) 20%,transparent)}.cell-popover{position:absolute;z-index:2;pointer-events:auto;display:flex;flex-direction:column;gap:.5rem;padding:.6rem;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.5rem;box-shadow:0 8px 24px #0006;text-align:left}.cell-primitives{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}.cell-primitive{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:3px;background:var(--bs-bg);border:1px solid var(--bs-border);border-radius:.35rem;color:var(--bs-text);cursor:pointer}.cell-primitive svg{width:100%;height:100%}.cell-primitive[aria-pressed=true]{border-color:var(--bs-accent)}.cell-rotation{display:flex}.cell-rotation button{flex:1;padding:.25rem .4rem;background:var(--bs-bg);border:1px solid var(--bs-border);color:var(--bs-text-muted);font-size:.8rem;cursor:pointer}.cell-rotation button:first-child{border-radius:.35rem 0 0 .35rem}.cell-rotation button:last-child{border-radius:0 .35rem .35rem 0}.cell-rotation button+button{border-left:0}.cell-rotation button[aria-pressed=true]{color:var(--bs-text);border-color:var(--bs-accent)}.cell-invert{display:flex;align-items:center;gap:.4rem;color:var(--bs-text-muted);font-size:.85rem}.preview-container svg{width:100%;height:100%}.preview-container.preview-error{border-color:var(--bs-error);color:var(--bs-error)}.shape-id-row{display:flex;flex-wrap:wrap;gap:.4rem;width:100%;max-width:340px}.shape-id-input{flex:1 1 100%;min-width:0;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.375rem;padding:.4rem .5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem}.id-action{padding:.3rem .6rem;font-size:.8rem}.id-action:disabled{opacity:.4;cursor:not-allowed}.tile-repeat{display:flex;align-items:center;gap:.4rem;font-size:.9rem;margin:.25rem 0}.tile-repeat-input{width:3.5rem;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.375rem;padding:.3rem .4rem}.tile-seam-status{color:var(--bs-text-muted)}.tile-seam-status[data-seamless=true]{color:green}.section-hint{margin:0 0 .75rem;font-size:.85rem;color:var(--bs-text-muted);max-width:60ch}button,input{font:inherit;color:inherit}button{background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.375rem;padding:.5rem .9rem;cursor:pointer}button:hover{border-color:var(--bs-accent)}.seed-hint{font-size:.78rem;color:var(--bs-text-muted);max-width:44ch}.tile-repeat-hint{margin:0}.seed-row{display:flex;gap:.4rem}.randomize-button,.copy-seed-button{padding:.4rem .7rem;font-size:.85rem;white-space:nowrap}.composition-panel{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:340px;border:1px solid var(--bs-border);border-radius:.5rem;background:var(--bs-surface);padding:.75rem}.composition-controls{display:flex;flex-wrap:wrap;gap:.5rem .75rem;align-items:end}.composition-controls label{display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--bs-text-muted)}.composition-controls input{background:var(--bs-bg);border:1px solid var(--bs-border);border-radius:.375rem;padding:.35rem .45rem}.composition-controls input[type=number]{width:3.5rem}.composition-actions{display:flex;flex-wrap:wrap;gap:.5rem}.composition-actions button{flex:1 1 8rem;padding:.5rem .6rem;font-weight:600}.composition-actions .randomize-button{border-color:var(--bs-accent)}.composition-primitives{display:flex;flex-wrap:wrap;gap:.35rem}.primitive-toggle{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .45rem .2rem .25rem;font-size:.78rem;background:var(--bs-bg);border:1px solid var(--bs-border);border-radius:.375rem;cursor:pointer}.primitive-toggle[aria-pressed=false]{opacity:.5;background:transparent;border-style:dashed}.primitive-toggle[aria-pressed=false] .primitive-toggle-name{text-decoration:line-through}.primitive-toggle[data-used=true]{background:color-mix(in srgb,var(--bs-accent) 18%,transparent);border-color:var(--bs-accent)}.primitive-toggle-badge:not(:empty){color:var(--bs-accent);font-variant-numeric:tabular-nums}.composition-legend{margin:0;font-size:.72rem}.primitive-icon{display:inline-flex;width:1.5rem;height:1.5rem;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.25rem;padding:.15rem}.primitive-icon svg{width:100%;height:100%}.catalog-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.75rem}.catalog-entry{display:flex;flex-direction:column;align-items:center;gap:.35rem;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:.5rem;padding:.6rem;text-align:center}.catalog-entry-preview{width:100%;aspect-ratio:1 / 1}.catalog-entry-preview svg{width:100%;height:100%}.catalog-entry-name{font-size:.85rem}.catalog-entry-tags{font-size:.7rem;color:var(--bs-text-muted)}@media (max-width: 420px){.catalog-view{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.composition-controls{align-items:stretch}}.ramp-panel-container{width:100%;max-width:320px}.morph-panel{border:1px solid var(--bs-border);border-radius:6px;background:var(--bs-surface);padding:.5rem .75rem;font-size:.85rem}.morph-panel>summary{cursor:pointer;color:var(--bs-text-muted);font-weight:600;list-style:none}.morph-panel>summary:before{content:"▸ "}.morph-panel[open]>summary:before{content:"▾ "}.morph-controls{display:flex;gap:.75rem;margin-top:.6rem}.morph-select{display:flex;flex-direction:column;gap:.2rem;flex:1;color:var(--bs-text-muted);font-size:.78rem}.morph-select select,.morph-add{background:var(--bs-bg);border:1px solid var(--bs-border);color:var(--bs-text);border-radius:4px;padding:.25rem}.morph-tracks{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}.morph-track{display:grid;grid-template-columns:3.5rem 1fr 1fr 1.5rem;align-items:center;gap:.4rem}.morph-track-name{color:var(--bs-text-muted);font-size:.78rem}.morph-slider{display:flex;flex-direction:column;align-items:center}.morph-slider input[type=range]{width:100%}.morph-readout{font-size:.72rem;color:var(--bs-text-muted)}.morph-track-remove{padding:.1rem .3rem;font-size:.75rem;line-height:1}.morph-footer{display:flex;justify-content:space-between;gap:.5rem;margin-top:.6rem}.trace-section{display:flex;flex-direction:column}.trace-section-body{display:flex;flex-direction:column;gap:1rem}.trace-dropzone{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.25rem;border:1px dashed var(--bs-border);border-radius:.5rem;text-align:center;color:var(--bs-text-muted)}.trace-dropzone.is-dragover{border-color:var(--bs-accent);border-style:solid}.trace-dropzone p{margin:0;font-size:.85rem}.trace-dropzone>*{pointer-events:none}.trace-dropzone input[type=file]{pointer-events:auto}.trace-controls{display:flex;flex-direction:column;gap:.75rem}.trace-controls label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--bs-text-muted)}.trace-grid-readout,.trace-threshold-readout{font-variant-numeric:tabular-nums}.trace-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.trace-panel{display:flex;flex-direction:column;gap:.4rem}.trace-caption{margin:0;font-size:.8rem;color:var(--bs-text-muted)}.trace-compare img,.trace-compare svg,.trace-compare canvas{max-width:100%;height:auto;border:1px solid var(--bs-border);border-radius:.375rem}.trace-status{margin:0;font-size:.85rem;color:var(--bs-text-muted)}.poster-tab{display:flex;flex-direction:column;gap:1rem}.poster-shape-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.poster-shape-input{flex:1 1 16rem;min-width:0;padding:.4rem .5rem;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:4px;color:var(--bs-text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.poster-shape-input.is-invalid{border-color:var(--bs-error)}.poster-shape-note{flex-basis:100%;color:var(--bs-error);font-size:.85rem;min-height:1rem}.poster-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}.poster-field{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--bs-text-muted)}.poster-field input,.poster-field select{padding:.4rem .5rem;background:var(--bs-surface);border:1px solid var(--bs-border);border-radius:4px;color:var(--bs-text)}.poster-preview{display:flex;justify-content:center;padding:1rem;border:1px solid var(--bs-border);border-radius:6px;background:repeating-conic-gradient(#20242c,#20242c 25%,#171a20 0%,#171a20 50%) 50% / 24px 24px}.poster-preview svg{width:auto;max-width:100%;max-height:70vh;height:auto;box-shadow:0 4px 24px #0006}.poster-export{display:flex;gap:.5rem}