:root{color:#1d2430;background:#eef1f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:0;min-height:100vh}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);min-height:100vh}.control-panel{display:flex;flex-direction:column;gap:20px;padding:24px;border-right:1px solid #d8dde5;background:#fbfcfe}.brand-block{display:grid;gap:10px}h1{margin:0;font-size:24px;font-weight:720;letter-spacing:0}.status-pill{display:inline-flex;align-items:center;min-height:30px;width:fit-content;max-width:100%;padding:6px 10px;border:1px solid #cfd6e0;border-radius:8px;color:#415165;background:#f4f7fa;font-size:13px;overflow-wrap:anywhere}.status-pill[data-mode=busy]{color:#7a4b00;border-color:#efc163;background:#fff8e6}.status-pill[data-mode=error]{color:#9d213f;border-color:#f0a6ba;background:#fff0f4}.control-section{display:grid;gap:14px}.file-picker{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border:1px solid #27364a;border-radius:8px;color:#fff;background:#27364a;cursor:pointer}.file-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.field,.range-field,.checkbox-field{display:grid;gap:8px;color:#344155;font-size:14px}.field select,.field input[type=number]{width:100%;min-height:38px;padding:7px 9px;border:1px solid #cbd3df;border-radius:8px;color:#1d2430;background:#fff}.number-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.range-field span{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.range-field output{color:#1d2430;font-variant-numeric:tabular-nums}.range-field input[type=range]{width:100%;accent-color:#e2357a}.checkbox-field{grid-template-columns:18px 1fr;align-items:center;gap:10px}.checkbox-field input{width:18px;height:18px;accent-color:#e2357a}.stats{display:grid;gap:8px;margin:auto 0 0;padding-top:16px;border-top:1px solid #e1e5eb}.stats div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:baseline}.stats dt{color:#66758a;font-size:13px}.stats dd{margin:0;color:#1d2430;font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.workspace{min-width:0;padding:24px;overflow:auto}.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:18px;align-items:start}.preview-panel{display:grid;gap:10px;min-width:0;margin:0}.preview-panel figcaption{color:#344155;font-size:15px;font-weight:650}canvas{display:block;max-width:100%;height:auto;border:1px solid #d3dae4;border-radius:8px;background:#fff}@media(max-width:920px){.app-shell{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid #d8dde5}.preview-grid{grid-template-columns:1fr}}@media(max-width:520px){.control-panel,.workspace{padding:14px}h1{font-size:21px}.number-grid{grid-template-columns:1fr}.stats div{grid-template-columns:76px minmax(0,1fr)}.preview-panel{gap:8px}}