.workspace{max-width:1100px;margin:0 auto 3rem;padding:1.25rem;border:1px solid var(--border-color,#d7dce5);border-radius:1.25rem;background:var(--surface,#fff)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}.workspace label{display:grid;gap:.45rem;font-weight:700}.workspace input,.workspace select,.workspace textarea{width:100%;padding:.75rem;border:1px solid #b7bec9;border-radius:.7rem;font:inherit}.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}.actions button{padding:.75rem 1rem;border:0;border-radius:.75rem;cursor:pointer}.preview-stage{min-height:280px;display:grid;place-items:center;margin:1rem 0;border-radius:1rem;overflow:hidden;background:#e5e7eb}.preview-stage canvas,.preview-stage img{max-width:100%;max-height:520px}.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-top:1rem}.metric{padding:1rem;border-radius:1rem;background:rgba(127,127,127,.09)}.metric strong{display:block;font-size:1.3rem;overflow-wrap:anywhere}.swatch{width:100%;height:90px;border-radius:1rem;border:1px solid rgba(0,0,0,.15)}.shape{width:min(360px,80vw);aspect-ratio:4/3;background:linear-gradient(135deg,#8b5cf6,#22d3ee);transition:clip-path .2s}.note{font-size:.92rem;opacity:.82}@media(max-width:700px){.workspace{margin-inline:.75rem}}