:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#171717;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--surface:#fff;--surface-alt:#f0f3ef;--border:#d7ddd2;--text-muted:#596053;--accent:#d13b43;--accent-strong:#981b23;--green:#1b7f65;--ink:#151515;--panel-width:340px;--workspace-gap:18px;--comparison-max-width:859px;--shell-max-width:calc(var(--panel-width) + var(--workspace-gap) + var(--comparison-max-width));background:#f6f7f3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{color:var(--ink);cursor:pointer;background:#fff;border:1px solid #c8cec3;border-radius:6px;min-height:38px;padding:0 14px}button:hover:not(:disabled){background:#f7f8f5;border-color:#9da794}button:disabled{color:#9da49a;cursor:not-allowed;background:#edf0ea}.shell{width:min(var(--shell-max-width), calc(100vw - 32px));margin:0 auto;padding:24px 0 40px}.topbar{justify-content:space-between;align-items:center;gap:20px;padding:18px 2px 22px;display:flex}.topbar h1{letter-spacing:0;margin:0;font-size:clamp(30px,5vw,48px);line-height:1}.brand-line{align-items:flex-end;gap:18px;min-width:0;display:flex}.brand-line p{color:var(--text-muted);overflow-wrap:anywhere;margin:0;font-size:clamp(18px,2.2vw,25px);font-weight:750;line-height:1.16}.workspace{grid-template-columns:var(--panel-width) minmax(0, var(--comparison-max-width));gap:var(--workspace-gap);justify-content:center;align-items:start;display:grid}.control-panel,.preview-card{background:var(--surface);border:1px solid var(--border);border-radius:8px}.control-panel{padding:16px;position:sticky;top:18px}.drop-zone{text-align:center;background:var(--surface-alt);cursor:pointer;border:1px dashed #aeb8a6;border-radius:8px;place-items:center;width:100%;min-height:306px;padding:0;display:grid;position:relative;overflow:hidden}.drop-zone.is-over{border-color:var(--accent);background:linear-gradient(135deg,#d13b4326,#0000 44%),#fff}.drop-zone input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.drop-placeholder{color:var(--ink);pointer-events:none;background:linear-gradient(135deg,#d13b4314,#0000 42%),#f0f3efe6;place-items:center;padding:18px;font-size:19px;font-weight:700;display:none;position:absolute;inset:0}.drop-zone.is-empty .drop-placeholder{display:grid}.message{color:#374036;background:#f8faf6;border:1px solid #d7ddd2;border-radius:6px;min-height:48px;margin:14px 0;padding:12px;font-size:14px}.message[data-type=ok]{background:#1b7f6514;border-color:#1b7f6559}.message[data-type=warn]{background:#b87a1814;border-color:#b87a1859}.message[data-type=error]{color:var(--accent-strong);background:#d13b4314;border-color:#d13b4361}.meta-list{gap:10px;margin:18px 0 0;display:grid}.meta-list div{border-top:1px solid #edf0ea;grid-template-columns:118px minmax(0,1fr);align-items:start;gap:12px;padding-top:10px;display:grid}.meta-list dt{color:var(--text-muted);font-size:12px}.meta-list dd{overflow-wrap:anywhere;margin:0;font-size:13px;font-weight:650}.meta-list dd[data-state=ok]{color:var(--green)}.meta-list dd[data-state=error]{color:var(--accent-strong)}.panel-links{border-top:1px solid #edf0ea;justify-content:flex-end;margin-top:18px;padding-top:12px;font-size:12px;display:flex}.panel-links a{color:var(--text-muted);text-underline-offset:2px}.panel-links a:hover{color:#374036}.preview-grid{grid-template-columns:minmax(0,1fr);gap:18px;display:grid}.preview-card{overflow:hidden}.preview-card header{border-bottom:1px solid #edf0ea;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 14px;display:flex}.preview-card h2{letter-spacing:0;min-width:0;margin:0;font-size:15px}.preview-card header span{color:var(--text-muted);white-space:nowrap;font-size:12px}.header-action{color:#374036;white-space:nowrap;min-height:32px;padding:4px 10px;font-size:12px;line-height:1.2}.overlay-control{color:var(--text-muted);white-space:nowrap;justify-content:flex-end;align-items:center;gap:8px;font-size:12px;display:flex}.overlay-control input{width:118px;accent-color:var(--accent)}.overlay-control output{text-align:right;color:#374036;font-variant-numeric:tabular-nums;width:34px}button.overlay-toggle{width:28px;height:28px;min-height:28px;color:var(--accent-strong);background:#fff;border-color:#b9c3b1;place-items:center;padding:0;font-size:14px;line-height:1;display:grid;box-shadow:inset 0 0 0 1px #ffffffbf}button.overlay-toggle[aria-pressed=false]{color:var(--text-muted);background:#f7f8f5}canvas{width:100%;min-height:220px;image-rendering:pixelated;background-color:#0000;background-image:linear-gradient(45deg,#f2f4ef 25%,#0000 25%),linear-gradient(-45deg,#f2f4ef 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f2f4ef 75%),linear-gradient(-45deg,#0000 75%,#f2f4ef 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-repeat:repeat,repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box;display:block}#sourceCanvas,#warpedCanvas{image-rendering:auto}#sourceCanvas{background:#fff;width:304px;max-width:100%;height:304px;min-height:0}.comparison-card canvas{aspect-ratio:1;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;min-height:0}.comparison-card canvas.is-edit-disabled{cursor:not-allowed}.comparison-card header,.export-card header{align-items:center}.export-header-main{flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0;display:flex}.export-cell-size-control{color:var(--text-muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;display:flex}.export-cell-size-control select{min-height:28px;color:var(--ink);font:inherit;background:#fff;border:1px solid #c8cec3;border-radius:6px;padding:2px 8px;font-size:12px}.export-cell-size-note{color:var(--text-muted);white-space:nowrap;font-size:11px;line-height:1.2}.export-panel{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:14px;display:grid}.export-panel button{align-content:center;gap:3px;width:100%;min-height:66px;padding:8px 10px;line-height:1.22;display:grid}.export-option{align-content:stretch;gap:6px;display:grid}.button-main,.button-sub{display:block}.button-main{font-weight:750}.button-sub{color:inherit;white-space:pre-line;font-size:12px}.hidden-canvas,.hidden-canvas[aria-hidden=true]{display:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-footer{color:#7a8275;text-align:center;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:18px;font-size:11px;line-height:1.4;display:flex}.site-footer a{color:inherit;text-underline-offset:2px}.site-footer a:hover{color:#374036}@media (width<=980px){.workspace{grid-template-columns:1fr}.control-panel{position:static}}@media (width<=720px){.shell{width:min(100vw - 18px, var(--shell-max-width));padding-top:10px}.topbar,.brand-line{display:block}.brand-line p{margin-top:8px}.comparison-card header{flex-direction:column;align-items:flex-start}.overlay-control{justify-content:flex-start;width:100%}.overlay-control input{flex:1;min-width:80px}.preview-grid,.export-panel{grid-template-columns:1fr}.meta-list div{grid-template-columns:1fr;gap:4px}}