.es{display:grid;grid-template-columns:370px minmax(0,1fr);min-height:calc(100vh - 85px);background:#f4f2f6;font-family:"DM Sans",Arial,sans-serif;color:#0d0e14}
.es aside{background:#fff;border-right:1px solid #e7e1ea;padding:22px 20px 40px;overflow-y:auto;max-height:calc(100vh - 85px);position:sticky;top:85px}
.es h1{margin:0;font:900 30px/1 "Barlow Condensed",Impact,sans-serif;text-transform:uppercase}
.es .sub{margin:6px 0 18px;color:#6b6475;font-size:13.5px}
.step{border-top:1px solid #eee8f0;padding:16px 0}
.step h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:800 16px/1.2 "DM Sans",Arial,sans-serif}
.step h2 b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e6007e;color:#fff;font-size:13px}
.drop{display:grid;place-items:center;gap:4px;padding:22px 14px;border:2px dashed #d9d0de;border-radius:14px;background:#faf8fb;text-align:center;cursor:pointer}
.drop.over,.drop:hover{border-color:#e6007e;background:#fff0f8}
.drop b{font-size:15px}.drop span{font-size:12.5px;color:#6b6475}
.drop input{display:none}
.hint{font-size:12.5px;color:#6b6475;margin:8px 0 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.b{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid #d9d0de;border-radius:10px;background:#fff;color:#0d0e14;font:800 13.5px "DM Sans",Arial,sans-serif;cursor:pointer;text-align:center}
.b:hover:not([disabled]){border-color:#e6007e}
.b.main{background:#e6007e;border-color:#e6007e;color:#fff}
.b.dark{background:#0d0e14;border-color:#0d0e14;color:#fff}
.b.green{background:#178a4f;border-color:#178a4f;color:#fff}
.b[disabled]{opacity:.45;cursor:not-allowed}
.b[aria-pressed="true"]{border-color:#e6007e;background:#fff0f8;color:#b8006a}
.b small{display:block;font-weight:500;font-size:11px;opacity:.85}
.field{display:grid;gap:5px;margin-top:10px;font-size:13px}
.field label{display:flex;justify-content:space-between;font-weight:700}
.field label output{font-variant-numeric:tabular-nums;color:#b8006a}
.field input[type=range]{width:100%;accent-color:#e6007e}
.check{display:flex;gap:9px;align-items:flex-start;margin-top:10px;font-size:13.5px}
.check input{width:17px;height:17px;margin-top:1px;accent-color:#e6007e}
.check span small{display:block;color:#6b6475;font-size:12px}
select,input[type=number]{min-height:42px;padding:0 10px;border:1px solid #d9d0de;border-radius:10px;font:600 14px "DM Sans",Arial,sans-serif;background:#fff;color:#0d0e14;width:100%}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid #0002;vertical-align:-2px;margin-right:4px}
.suggest{padding:10px 12px;border-radius:10px;background:#f6f1f8;font-size:13px;margin-bottom:10px}
.dl{display:grid;gap:8px}
.es main{display:flex;flex-direction:column;min-width:0}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e7e1ea;position:sticky;top:85px;z-index:3}
.toolbar .sep{flex:1}
.toolbar .b{min-height:38px;font-size:12.5px}
.stats{font-size:12.5px;color:#6b6475}
#stage{flex:1;display:grid;place-items:center;padding:24px;min-height:60vh;overflow:auto}
#stage[data-bg="check"]{background:repeating-conic-gradient(#d8d4dc 0 25%,#fff 0 50%) 0 0/20px 20px}
#stage[data-bg="black"]{background:#0d0e14}#stage[data-bg="white"]{background:#fff}#stage[data-bg="green"]{background:#3fbf5f}
#view,#svgView{max-width:100%;max-height:calc(100vh - 240px);width:auto;height:auto;box-shadow:0 10px 40px #0002;touch-action:none}
#stage.painting #view{cursor:crosshair}
.empty{max-width:380px;text-align:center;color:#6b6475}.empty b{display:block;color:#0d0e14;font-size:18px;margin-bottom:6px}
body:not(.has-image) #view,body:not(.has-image) #svgView{display:none}
body.has-image .empty{display:none}
.status{min-height:22px;padding:10px 16px;font-size:13.5px;background:#fff;border-top:1px solid #e7e1ea}
.status[data-kind="error"]{color:#b0003a;font-weight:700}.status[data-kind="ok"]{color:#14703f;font-weight:700}
.progress{height:5px;background:#f0e8f3;border-radius:9px;overflow:hidden;margin-top:10px}.progress i{display:block;height:100%;width:0;background:#e6007e;transition:width .2s}
body.is-busy #stage{opacity:.7}
@media(max-width:1100px){.es{min-height:calc(100vh - 73px)}.es aside{max-height:none;position:static}.toolbar{top:73px}}
@media(max-width:900px){.es{grid-template-columns:1fr}.es aside{border-right:0;border-bottom:1px solid #e7e1ea}.es main{order:-1}#stage{min-height:46vh;padding:14px}#view,#svgView{max-height:55vh}.toolbar{position:static}}
.b:has(small){flex-direction:column;gap:1px;padding:8px 10px;line-height:1.15}