:root{--paper: oklch(.992 .002 265);--panel: oklch(.975 .003 265);--ink: oklch(.175 .02 264);--muted: oklch(.56 .015 264);--line: oklch(.905 .006 264);--line-2: oklch(.8 .01 264);--blue: oklch(.48 .28 264);--blue-t: oklch(.48 .28 264 / .1);--sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font-family:var(--sans);cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.app{max-width:1280px;margin:0 auto;padding:0 28px 40px}.masthead{border-bottom:1px solid var(--line)}.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 0;font-size:13px;color:var(--ink)}.topbar-mark{display:inline-flex;align-items:center;gap:8px;font-weight:500}.topbar .dot{width:9px;height:9px;border-radius:50%;background:var(--blue)}.topbar-center{text-align:center;color:var(--muted)}.topbar-right{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.hero{margin:8px 0 18px;font-size:clamp(44px,11.5vw,132px);font-weight:700;line-height:.92;letter-spacing:-.045em}.hero .accent{color:var(--blue)}.viewrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}.vlink{background:none;border:none;padding:0;font-size:15px;color:var(--muted)}.vlink:hover{color:var(--ink)}.vlink.on{color:var(--blue);text-decoration:underline;text-underline-offset:3px}.vsep{color:var(--line-2)}.layout{display:grid;grid-template-columns:344px 1fr;gap:44px;align-items:start;padding-top:24px}.panel{display:flex;flex-direction:column;gap:22px;position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow-y:auto;padding-right:10px;margin-right:-10px}.block{border:0;margin:0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-inline-size:0}.panel>.block:first-of-type{border-top:0;padding-top:4px}.block>legend{padding:0;margin-bottom:2px;font-size:12px;letter-spacing:.02em;color:var(--muted)}.block[disabled]{opacity:.4}.micro{margin:-4px 0 0;font-size:12px;color:var(--muted)}.uploader{display:block}.uploader input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.uploader-btn{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink);border-radius:999px;padding:9px 17px;font-size:14px;font-weight:500;transition:background .18s var(--ease),color .18s var(--ease)}.uploader-btn:before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid var(--ink)}.uploader:hover .uploader-btn{background:var(--ink);color:var(--paper)}.uploader:hover .uploader-btn:before{border-color:var(--paper)}.uploader-status{display:block;margin-top:8px;font-size:12px;color:var(--muted)}.presets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.preset{position:relative;aspect-ratio:1;padding:0;border:1px solid var(--line);background:var(--panel);overflow:hidden;transition:transform .18s var(--ease)}.preset img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2);transition:filter .18s var(--ease)}.preset:hover{transform:scale(1.05);z-index:2}.preset:hover img{filter:none}.preset.is-active{border-color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}.preset-id{position:absolute;left:4px;bottom:4px;font-size:9px;color:var(--paper);letter-spacing:.03em;opacity:0;transition:opacity .16s var(--ease);text-shadow:0 1px 2px rgba(0,0,0,.6)}.preset:hover .preset-id{opacity:1}.range{display:flex;flex-direction:column;gap:7px}.range-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}.range-head em{font-style:normal;color:var(--muted)}.range-head b{font-weight:500;font-variant-numeric:tabular-nums}.range input[type=range]{width:100%;height:18px;accent-color:var(--blue);cursor:ew-resize}.pills{display:flex;flex-wrap:wrap;gap:8px}.pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--ink);background:var(--paper);transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)}.pill:before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0;transition:background .16s var(--ease),border-color .16s var(--ease)}.pill:hover{border-color:var(--ink)}.pill.on{border-color:var(--blue)}.pill.on:before{background:var(--blue);border-color:var(--blue)}.pill.ghost{border-style:none;color:var(--muted);padding-left:4px;align-self:flex-start}.pill.ghost:before{display:none}.pill.ghost:hover{color:var(--blue)}.export{border:none;border-radius:999px;background:var(--blue);color:var(--paper);padding:15px;font-size:15px;font-weight:500;transition:background .18s var(--ease)}.export:hover:not(:disabled){background:var(--ink)}.export:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}.error{margin:0;padding:10px 14px;border-radius:12px;background:var(--blue-t);color:var(--blue);font-size:13px}.viewport{min-inline-size:0}.stage{position:relative;border:1px solid var(--line);background:var(--panel);overflow:hidden;display:grid;place-content:center;place-items:center}.stage>.preview-canvas{grid-area:1 / 1;max-width:100%;max-height:150vh;width:auto;height:auto;display:block}.stage>.corner-overlay{grid-area:1 / 1;width:100%;height:100%}.stage-placeholder{min-height:60vh;font-size:15px;color:var(--muted)}.stage-empty{color:var(--muted);font-size:15px}.corner-overlay{position:relative;touch-action:none}.corner-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.corner-lines polygon{fill:var(--blue-t);stroke:var(--blue);stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}.corner-handle{position:absolute;width:18px;height:18px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--blue);border:2.5px solid var(--paper);box-shadow:0 0 0 1px var(--blue);cursor:grab}.corner-handle:active{cursor:grabbing;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}.corner-tag{position:absolute;top:0;left:0;background:var(--ink);color:var(--paper);border-radius:3px;font-size:9px;letter-spacing:.02em;padding:2px 4px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}@media (max-width: 860px){.layout{grid-template-columns:1fr;gap:28px}}