:root{color:#272124;font-synthesis:none;text-rendering:optimizelegibility;background:#f3eee7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}.app-shell{width:min(1180px,100%);margin:0 auto;padding:16px}.hero-card,.preview-card,.control-panel{background:#ffffffc7;border:1px solid #46323714;border-radius:28px;box-shadow:0 18px 45px #482d2814}.hero-card{gap:16px;margin-bottom:16px;padding:20px;display:grid}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:#9a656e;margin:0 0 6px;font-size:.72rem;font-weight:800}h1{letter-spacing:-.08em;margin:0;font-size:clamp(2rem,10vw,4.8rem);line-height:.92}h2{margin:0 0 12px;font-size:1rem}.subtle{color:#74696c;margin:8px 0 0;line-height:1.45}.small{font-size:.86rem}.workspace{gap:16px;display:grid}.preview-card{min-width:0;padding:12px}.preview-toolbar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}select,input{color:#30272a;background:#fffaf7;border:1px solid #e3d8d1;border-radius:14px;min-width:0;padding:11px 12px}select{width:100%}.toggle{white-space:nowrap;color:#62585b;align-items:center;gap:6px;font-size:.9rem;display:inline-flex}.svg-stage{background:linear-gradient(145deg,#fffdfb,#f2e9df);border-radius:22px;place-items:center;min-height:420px;display:grid;overflow:hidden}.svg-stage svg{width:min(100%,560px);height:auto;display:block}.svg-path{touch-action:manipulation;cursor:pointer;transition:filter .18s,opacity .18s}.svg-path:hover,.svg-path.selected{filter:drop-shadow(0 0 10px #9e5c708c)}.control-panel{gap:14px;padding:14px;display:grid}.panel-section{background:#fffaf7;border:1px solid #ede0d8;border-radius:22px;padding:14px}.segmented-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.segmented-grid.six{grid-template-columns:repeat(6,1fr)}.segmented-grid button,.primary-btn,.save-row button,.icon-btn{color:#392e31;background:#efe5de;border:0;border-radius:14px;min-height:42px;font-weight:750}.segmented-grid button.active,.primary-btn{color:#fffaf7;background:#2f2528}.primary-btn{justify-content:center;align-items:center;gap:8px;padding:12px 16px;display:inline-flex}.primary-btn.full{width:100%;margin-top:10px}.color-list{gap:10px;margin-top:12px;display:grid}.color-row{grid-template-columns:72px 46px 1fr;align-items:center;gap:8px;font-size:.9rem;display:grid}.color-row input[type=color]{width:46px;height:42px;padding:2px}.swatch-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.swatch-grid button{aspect-ratio:1;border:2px solid #fff;border-radius:14px;box-shadow:inset 0 0 0 1px #0000001f}.save-row{grid-template-columns:1fr 48px;gap:8px;display:grid}.preset-list{gap:10px;max-height:320px;margin-top:12px;display:grid;overflow:auto}.preset-card{grid-template-columns:1fr 42px;align-items:stretch;gap:8px;display:grid}.preset-main{text-align:left;background:#fff;border:1px solid #eaded6;border-radius:16px;gap:5px;padding:10px;display:grid}.preset-main span{color:#7d7073;font-size:.8rem}.mini-swatches{gap:4px;display:flex}.mini-swatches i{border:1px solid #00000014;border-radius:999px;width:20px;height:20px}.icon-btn{background:#f1e4df}@media (width>=860px){.app-shell{padding:26px}.hero-card{grid-template-columns:1fr auto;align-items:end;padding:28px}.workspace{grid-template-columns:minmax(0,1fr) 390px;align-items:start}.preview-card{padding:18px;position:sticky;top:20px}.svg-stage{min-height:680px}}.body-path,.handle-path{cursor:pointer}.handle-path{filter:drop-shadow(0 1px #0000000a)}.svg-path.selected{filter:drop-shadow(0 0 12px #58363e8c);outline:none}@media (width<=520px){.app-shell{padding:10px}.hero-card{border-radius:22px}.svg-stage{min-height:360px}.color-row{grid-template-columns:64px 46px 1fr}.segmented-grid.six{gap:5px}.segmented-grid.six button{min-height:38px}}.segmented-grid.two{grid-template-columns:repeat(2,1fr)}.range-row{color:#5f5457;gap:8px;margin-top:12px;font-size:.9rem;display:grid}.range-row input[type=range]{accent-color:#2f2528;width:100%;padding:0}.background-picker{margin-top:12px}.transparent-stage{background:0 0!important}.lock-button{color:#5f5457;background:#f1e4df;border:1px solid #eaded6;border-radius:14px;place-items:center;width:42px;height:42px;padding:0;display:inline-grid}.lock-button.active{color:#fffaf7;background:#2f2528;border-color:#2f2528}.color-row{grid-template-columns:72px 46px minmax(0,1fr) 42px}.color-row.is-locked{background:#fff3e7;border:1px solid #ead7c6;border-radius:16px;padding:6px}@media (width<=520px){.color-row{grid-template-columns:64px 46px minmax(0,1fr) 42px}}.mobile-top-bar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffc7;border:1px solid #00000014;border-radius:24px;justify-content:space-between;align-items:center;gap:16px;padding:14px;display:flex}.mobile-top-bar h1{margin:0;font-size:1.25rem}.active-color-dots{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:7px;display:flex}.active-color-dot{border:2px solid #ffffffe6;border-radius:999px;place-items:center;width:26px;height:26px;padding:0;display:grid;position:relative;box-shadow:0 4px 12px #00000029}.active-color-dot svg{background:#ffffffdb;border-radius:999px;padding:1px}.mobile-first-workspace{align-items:start}.mobile-preview-card{position:sticky;top:12px}.mobile-generate-btn{min-height:52px;margin-top:14px;font-size:1rem}.mobile-lock-note{margin-top:8px}.field-label{color:var(--muted);margin:12px 0 8px;font-size:.82rem;font-weight:700;display:block}.compact-section{gap:10px}@media (width<=820px){.app-shell{gap:10px;padding:10px}.mobile-top-bar{z-index:30;border-radius:18px;position:sticky;top:0}.workspace.mobile-first-workspace{flex-direction:column;gap:12px;display:flex}.mobile-preview-card{order:1;width:100%;position:relative;top:auto}.control-panel{order:2;width:100%}.preview-toolbar{gap:8px}.preview-toolbar select{flex:1;min-width:0}.svg-stage{min-height:320px}.segmented-grid,.segmented-grid.six,.segmented-grid.two{grid-template-columns:repeat(3,minmax(0,1fr))}.color-row{grid-template-columns:72px 44px 1fr 42px}}
