/* Unified editing workspace, with source and typography accents. */
:root{--accent:#60c9df;--warm:#deb676;--studio-radius:20px}body{line-height:1.65}header{padding:20px 3.5%;gap:20px}.brand{font-size:25px;letter-spacing:-.8px}.brand span{letter-spacing:2.2px}.header-right{gap:16px}main{max-width:1800px;margin:auto;padding:28px 3.5%}.guide{border-radius:24px;padding:24px}.guide-heading h1{font-size:clamp(24px,2.6vw,38px);letter-spacing:-.7px}.guide-cards{gap:14px}.guide figure{border-radius:16px}.guide figure h2{font-size:14px}.settings{border-radius:20px;padding:20px;gap:16px;margin-bottom:24px}.workspace{grid-template-columns:240px minmax(260px,1fr) 270px;gap:20px;align-items:start}.workspace>aside{border-radius:20px;padding:20px;box-shadow:0 12px 35px #0000000a}.workspace>aside:first-child{border-top:3px solid #5fb5d2}.workspace>aside:last-child{border-top:3px solid #cfaa6d}.step{padding-bottom:12px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:2px}.editor{border-radius:22px;box-shadow:0 18px 50px #00000015}.bar{padding:16px 20px}.stage{min-height:550px;padding:30px;background-size:20px 20px}.exports{padding:16px;gap:10px;border-top:1px solid var(--line)}button,.button{border-radius:11px;min-height:42px;font-size:12px;font-weight:500;transition:background .18s,transform .18s,box-shadow .18s}input:not([type=checkbox]),select,textarea{border-radius:10px;min-height:40px}textarea{line-height:1.8;min-height:110px}.drop{border-radius:16px;padding:30px 12px}.drop strong{font-size:14px}.drop small{line-height:1.9}.primary{border-radius:12px}#scan{font-weight:700;letter-spacing:.2px}#png,#copyimage{font-weight:600}.layer{border-radius:10px;padding:10px 12px}.history button{min-height:36px}.box.active{border-color:#61bed7;box-shadow:0 0 0 1px #0a0d12bb}.box.active .resize{background:#5fc1db;width:14px;height:14px;border-radius:4px}.region-preview{border-color:#61bed7}button:focus-visible,.button:focus-within,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#status{border-radius:12px;padding:12px;line-height:1.95}fieldset label{line-height:1.8}footer{padding:20px 2px}.exports button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #0002}
html[data-theme=dark]{--page:#080b0f;--panel:#11171e;--text:#e5ecf3;--line:#293542;--muted:#9baaba;--tint:#18212b;--stage:#0b1016}html[data-theme=dark] header{background:linear-gradient(110deg,#111920,#0b1118)}html[data-theme=dark] .guide,html[data-theme=dark] .settings{background:#10161d;border-color:#293542}html[data-theme=dark] .guide figure{background:#151f29;border-color:#2b3b49}html[data-theme=dark] .workspace>aside:first-child{background:linear-gradient(155deg,#14232e,#101820 70%)}html[data-theme=dark] .workspace>aside:last-child{background:linear-gradient(155deg,#24211b,#181a1d 70%)}html[data-theme=dark] .workspace>aside button,html[data-theme=dark] .workspace>aside .button{background:#18242e;border-color:#324655;color:#dce9f2}html[data-theme=dark] .workspace>aside:last-child button{background:#28261f;border-color:#4e4535;color:#eadcc5}html[data-theme=dark] .workspace>aside input:not([type=checkbox]),html[data-theme=dark] .workspace>aside select,html[data-theme=dark] .workspace>aside textarea{background:#10171e;border-color:#38424b;color:#e6edf4}html[data-theme=dark] #scan{background:#71cce0;color:#08212b;border-color:#71cce0;box-shadow:0 6px 20px #2c9cb329}html[data-theme=dark] .exports{background:#111a23}html[data-theme=dark] .exports button{background:#192936;border-color:#355063;color:#d5edf8}html[data-theme=dark] #png{background:#d6b87c;border-color:#d6b87c;color:#2a2111}html[data-theme=dark] #status{background:#0c1821;color:#a8cfdf;border:1px solid #294251}html[data-theme=dark] .layer.selected{background:#244456!important;border-color:#62a8c1!important;color:#e2f5ff!important}html[data-theme=dark] #empty{color:#8da5b8}html[data-theme=dark] .bar{background:#141d26;color:#9fb1c0}html[data-theme=light]{--page:#f0f3f6;--panel:#fff;--line:#d7dfe7;--text:#203344;--muted:#617487}html[data-theme=light] #scan{background:#215d78;color:#fff;border-color:#215d78}html[data-theme=light] #png{background:#84632c;color:#fff;border-color:#84632c}html[data-theme=light] .editor{background:#e4eaf0}html[data-theme=light] .stage{background-color:#e9edf2}html[data-theme=light] .guide figure{background:#f7f9fb}html[data-theme=light] #status{background:#eaf3f8;color:#325c74}html[data-theme=light] .workspace>aside:last-child{background:#fffcf6}
@media(max-width:1200px){.workspace{grid-template-columns:210px minmax(260px,1fr)}.workspace>aside:last-child{grid-column:1/-1}.workspace>aside:last-child fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stage{min-height:450px}}@media(max-width:700px){header{padding:16px 5%;flex-wrap:wrap}.header-right{width:100%;justify-content:space-between}.preferences{flex:1;gap:10px}main{padding:20px 4%}.guide{padding:18px}.settings{padding:16px}.workspace{display:flex;flex-direction:column;gap:16px}.workspace>aside,.editor{width:100%}.workspace>aside:last-child fieldset{display:block}.workspace>aside:first-child{padding:16px}.stage{min-height:340px;padding:14px}.exports button{flex:1 1 120px}.brand span{display:inline-block;font-size:9px}.design-credit{font-size:10px}.badge{display:none}.guide figure{padding:12px}#paper{max-width:100%}}@media(prefers-reduced-motion:reduce){button,.button{transition:none!important;transform:none!important}}
/* Compact phone-sized preview; desktop tools stay beside the image. */
@media(min-width:900px){.workspace{display:grid;grid-template-columns:minmax(170px,210px) minmax(220px,520px) minmax(210px,250px);gap:16px;justify-content:center;align-items:start}.workspace>aside:last-child{grid-column:auto}.workspace>aside:last-child fieldset{display:block}.workspace>aside{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin}.workspace>aside:last-child{top:16px;max-height:calc(100dvh - 32px)}.exports button,.exports .button{flex:1 1 125px;white-space:normal}}
.stage{height:clamp(350px,62vh,580px);min-height:0;padding:20px;overflow:hidden;align-items:center;justify-content:center}#paper{flex-shrink:0;max-width:100%;margin:auto}#paper canvas{width:100%;height:auto}#empty{font-size:26px}#empty h2{font-size:16px}.editor{width:100%;max-width:560px;justify-self:center}.bar{padding:12px 14px}.exports{padding:12px;gap:8px}
@media(min-width:701px) and (max-width:899px){.workspace{display:grid;grid-template-columns:180px minmax(220px,1fr);gap:14px}.workspace>aside:last-child{grid-column:1/-1;position:static;max-height:none}.workspace>aside:last-child fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.editor{max-width:560px;align-self:center}.stage{height:clamp(330px,60vh,520px);padding:14px}.workspace>aside{position:static;max-height:none}.workspace>aside:last-child{position:static;max-height:none}.workspace>aside:last-child fieldset{display:block}}
@media print{.stage{height:auto;overflow:visible}#paper{max-width:none}}
/* Larger editor with an independent, scrollable image zoom. */
@media(min-width:900px){.workspace{grid-template-columns:minmax(170px,205px) minmax(260px,660px) minmax(210px,250px)}.editor{max-width:700px}}
.stage{height:clamp(420px,70vh,680px);display:block;overflow:auto;padding:18px;overscroll-behavior:contain}.stage:has(#empty:not([hidden])){display:flex;align-items:center;justify-content:center}.preview-surface{display:flex;align-items:center;justify-content:center;position:relative}.preview-surface #paper{max-width:none!important;flex-shrink:0;margin:0}.preview-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:11px}.preview-tools-group{display:flex;align-items:center;gap:6px}.preview-tools button{padding:6px 10px;min-height:32px;font-size:11px}.preview-tools output{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}.preview-tools small{color:var(--muted);font-size:10px}@media(max-width:700px){.stage{height:clamp(390px,66vh,600px);padding:12px}.preview-tools{padding:8px 10px}.preview-tools small{width:100%}}@media print{.preview-tools{display:none}.preview-surface{width:auto!important;height:auto!important}.stage{height:auto;overflow:visible}}
.preview-surface[hidden]{display:none!important}