:root{color:#18202b;background:#f4f6f8;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{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button,select,input[type=number]{min-height:42px;border:1px solid #cdd5df;border-radius:8px;background:#fff}button{padding:.65rem .9rem;font-weight:800;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}.app{min-height:100vh;padding:clamp(1rem,3vw,2rem)}.masthead{display:flex;align-items:end;justify-content:space-between;gap:1rem;max-width:1240px;margin:0 auto 1rem}.eyebrow{margin:0 0 .35rem;color:#cf2839;font-size:.78rem;font-weight:900;letter-spacing:0;text-transform:uppercase}h1{max-width:13ch;margin:0;color:#101722;font-size:clamp(2.1rem,6vw,4.6rem);line-height:.96;letter-spacing:0}.primary{min-width:148px;border-color:#101722;color:#fff;background:#101722}.workspace{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:1rem;max-width:1240px;margin:0 auto}.panel,.preview-area{border:1px solid #d9e0e8;border-radius:8px;background:#fff}.controls{display:grid;align-content:start;gap:1rem;padding:1rem}.file-drop{display:grid;gap:.3rem;border:1px dashed #9eabb9;border-radius:8px;padding:1rem;color:#4b5a6b;background:#f8fafc;cursor:pointer}.file-drop input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.file-drop span{color:#101722;font-weight:900}.file-drop small{line-height:1.35}.field{display:grid;gap:.45rem}.label,label{color:#526173;font-size:.86rem;font-weight:800}select,input[type=number]{width:100%;padding:0 .75rem}input[type=range]{width:100%;accent-color:#cf2839}.split{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.swatches{display:grid;grid-template-columns:repeat(5,minmax(36px,1fr));gap:.5rem}.swatch{aspect-ratio:1;min-height:42px;padding:0;border:2px solid #cdd5df}.swatch.active{border-color:#101722;box-shadow:0 0 0 3px #10172224}.check{display:flex;align-items:center;gap:.55rem;color:#273342;font-weight:700}.preview-area{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:620px;padding:1rem}.canvas-shell{position:relative;display:grid;place-items:center;min-height:0;border-radius:8px;overflow:hidden;background:#111827}canvas{display:block;width:min(100%,700px);height:auto;max-height:min(76vh,900px);touch-action:none}.empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:.4rem;padding:1rem;color:#fff;text-align:center;background:linear-gradient(135deg,#111827cc,#263e59b8)}.empty.hidden{display:none}.empty strong{font-size:clamp(1.7rem,4vw,3.5rem);line-height:1}.empty span{color:#ffffffc2}.meta{padding-top:.9rem;color:#526173;font-size:.92rem;font-weight:800}@media(max-width:860px){.masthead{align-items:stretch;flex-direction:column}.workspace{grid-template-columns:1fr}.preview-area{min-height:520px}.primary{width:100%}}@media(max-width:520px){.split{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(5,1fr)}}