:root{--bg:#f7f7f8;--surface:#fff;--surface-sunken:#f1f1f3;--border:#e1e1e6;--border-strong:#c9c9d1;--text:#16161a;--text-muted:#6b6b76;--accent:#2b6cb0;--accent-hover:#245d99;--accent-soft:#e8f0f9;--danger:#c53030;--danger-soft:#fdecec;--ok:#2f855a;--ok-soft:#e6f4ec;--radius:10px;--shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04);--bar-height:48px}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#131316;--surface:#1c1c20;--surface-sunken:#232329;--border:#2e2e36;--border-strong:#43434e;--text:#ececf1;--text-muted:#9a9aa6;--accent:#6ba3e0;--accent-hover:#86b5e8;--accent-soft:#1e2a38;--danger:#f06a6a;--danger-soft:#331c1c;--ok:#68d391;--ok-soft:#1b2b22;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25)}}:root[data-theme=dark]{--bg:#131316;--surface:#1c1c20;--surface-sunken:#232329;--border:#2e2e36;--border-strong:#43434e;--text:#ececf1;--text-muted:#9a9aa6;--accent:#6ba3e0;--accent-hover:#86b5e8;--accent-soft:#1e2a38;--danger:#f06a6a;--danger-soft:#331c1c;--ok:#68d391;--ok-soft:#1b2b22}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%}body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}.app{height:100dvh;display:grid;grid-template-rows:var(--bar-height) auto 1fr;overflow:hidden}.app-bar{display:flex;gap:14px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface)}.app-bar,.brand{align-items:center}.brand{display:inline-flex;gap:8px;font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--text)}.brand svg{color:var(--accent)}.brand-note{color:var(--text-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace{min-height:0;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}.banner{display:flex;align-items:center;gap:12px;margin:10px 16px 0;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-sunken);font-size:13.5px}.banner[data-kind=error]{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.banner-hint{color:var(--text-muted);font-size:12.5px}.banner[data-kind=error] .banner-hint{color:inherit;opacity:.85}.banner-close{margin-left:auto;border:0;background:none;color:inherit;opacity:.7;font-size:12.5px;cursor:pointer}.banner-close:hover{opacity:1}.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:32px;border:2px dashed var(--border-strong);border-radius:14px;background:var(--surface);cursor:pointer;text-align:center;transition:border-color .12s ease,background .12s ease}.hero:focus-visible,.hero:hover{border-color:var(--accent);background:var(--accent-soft);outline:none}.hero[data-dragging=true]{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}.hero[data-disabled=true]{cursor:progress;opacity:.6}.hero-art{width:132px;height:auto;margin-bottom:14px;color:var(--accent)}.hero-art-raster{fill:none;stroke:var(--border-strong);stroke-width:1.6}.hero-art-blob{fill:var(--border-strong);opacity:.55}.hero-art-vector{fill:none;stroke:var(--border-strong);stroke-width:1.6;stroke-linecap:round}.hero-art-curve{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.hero-art-node{fill:var(--surface);stroke:currentColor;stroke-width:1.8}.hero-art-arrow{fill:var(--border-strong)}.hero strong{font-size:22px;font-weight:650;letter-spacing:-.01em}.hero-sub{color:var(--text-muted);font-size:14px}.hero-cta{margin-top:16px;padding:10px 22px;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:600}.hero:hover .hero-cta{background:var(--accent-hover)}.hero-formats{margin-top:14px;color:var(--text-muted);font-size:12.5px}.hero-formats kbd{padding:1px 5px;border:solid var(--border-strong);border-width:1px 1px 2px;border-radius:4px;background:var(--surface-sunken);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}.button-primary{padding:9px 16px;border:1px solid transparent;border-radius:8px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:600}.button-primary:hover:not(:disabled){background:var(--accent-hover)}.button-primary:disabled{opacity:.45}.button-ghost{padding:9px 14px;border:1px solid var(--border-strong);border-radius:8px;background:transparent;color:var(--text);font-size:13.5px}.button-ghost:hover:not(:disabled){background:var(--surface-sunken)}.viewer{flex:1 1 auto;min-height:0;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:column}.toolbar,.viewer{background:var(--surface);display:flex}.toolbar{align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--border);flex-wrap:wrap}.tool-group{display:flex;align-items:center;gap:2px}.tool-sep{width:1px;align-self:stretch;margin:2px 5px;background:var(--border)}.tool-spacer{flex:1 1 auto}.toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;min-width:34px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text-muted)}.toolbar button:hover:not(:disabled){background:var(--surface-sunken);color:var(--text)}.toolbar button:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}.toolbar button[data-active=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.toolbar button:disabled{opacity:.35}.tool-text{padding:6px 10px!important;font-size:13px}.tool-text[data-dirty=true]{position:relative;color:var(--accent)}.tool-text[data-dirty=true]:after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}.palette-readout{gap:6px;padding:0 4px;color:var(--text-muted);font-size:13px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.zoom-readout{min-width:52px;padding-left:4px;text-align:right;font-size:12px;color:var(--text-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.download-button{background:var(--accent)!important;color:#fff!important;padding:7px 14px!important;font-weight:600;font-size:13px;letter-spacing:.01em}.download-button:hover:not(:disabled){background:var(--accent-hover)!important}.download-size{padding-left:8px;margin-left:2px;border-left:1px solid hsla(0,0%,100%,.35);font-weight:500;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;opacity:.9}.viewer-body{min-height:0}.viewer-body,.viewport{flex:1 1 auto;display:flex}.viewport{position:relative;min-width:0;overflow:hidden;align-items:center;justify-content:center;cursor:-webkit-grab;cursor:grab;touch-action:none;background-color:#fff;background-image:linear-gradient(45deg,#e9e9ee 25%,transparent 0),linear-gradient(-45deg,#e9e9ee 25%,transparent 0),linear-gradient(45deg,transparent 75%,#e9e9ee 0),linear-gradient(-45deg,transparent 75%,#e9e9ee 0);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .viewport{background-color:#17171b;background-image:linear-gradient(45deg,#202027 25%,transparent 0),linear-gradient(-45deg,#202027 25%,transparent 0),linear-gradient(45deg,transparent 75%,#202027 0),linear-gradient(-45deg,transparent 75%,#202027 0)}}.viewport[data-dragging=true]{cursor:-webkit-grabbing;cursor:grabbing}.viewport-empty{font-size:14px}.viewport-empty,.viewport-note{color:var(--text-muted);margin:0}.viewport-note{padding:9px 14px;border-top:1px solid var(--border);background:var(--surface-sunken);font-size:12px;line-height:1.5}.stage{transform-origin:center center}.compare-row{display:flex;gap:24px;align-items:flex-start}.frame{position:relative;margin:0;flex:0 0 auto;outline:1px solid hsla(240,5%,53%,.35)}.frame[data-busy=true]>img{opacity:.45;filter:saturate(.4)}.frame figcaption{position:absolute;top:100%;left:0;right:0;margin-top:6px;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);transform:scale(calc(1 / var(--stage-zoom, 1)))}.frame>div,.frame>div>svg,.frame>img{display:block;width:100%;height:100%}.pixel-layer{image-rendering:pixelated;image-rendering:crisp-edges}.vector-layer{position:relative}.vector-layer svg{display:block}.outline-layer{position:absolute;inset:0;pointer-events:none}.outline-layer svg{display:block;overflow:visible}.outline-layer svg circle,.outline-layer svg ellipse,.outline-layer svg path,.outline-layer svg polygon,.outline-layer svg polyline,.outline-layer svg rect{fill:none!important;stroke:#12d8f5!important;stroke-width:1!important;vector-effect:non-scaling-stroke;paint-order:stroke}.working{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(280px,70%);padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}.working p{margin:0;font-size:13px;color:var(--text-muted)}.working-bar{width:100%;height:4px;border-radius:2px;background:var(--surface-sunken);overflow:hidden}.working-bar span{display:block;width:40%;height:100%;border-radius:2px;background:var(--accent);animation:sweep 1.1s ease-in-out infinite}@keyframes sweep{0%{transform:translateX(-100%)}to{transform:translateX(250%)}}.elapsed{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--text)}@media (prefers-reduced-motion:reduce){.stage{will-change:auto}.working-bar span{width:100%;animation:none}}.settings-drawer{flex:0 0 272px;border-left:1px solid var(--border);background:var(--surface);overflow-y:auto}.settings{padding:16px}.settings-head h2{margin:0 0 3px;font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.settings-head p{margin:0 0 16px;font-size:12.5px;line-height:1.45;color:var(--text-muted)}.settings-actions{display:flex;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}.settings-actions .button-primary{flex:1 1 auto}.field{margin-bottom:14px}.field label{display:block;margin-bottom:5px;font-size:12.5px;font-weight:550}.field input[type=number],.field select{width:100%;padding:7px 9px;border:1px solid var(--border-strong);border-radius:7px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:-1px}.field .hint{display:block;margin-top:4px;color:var(--text-muted);font-size:11.5px;line-height:1.4}.checkbox{display:flex;align-items:center;gap:8px;font-weight:550}.checkbox input{width:15px;height:15px;accent-color:var(--accent)}.advanced{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--border)}.advanced summary{cursor:pointer;font-size:12.5px;font-weight:550;color:var(--text-muted);margin-bottom:12px}.advanced summary:hover{color:var(--text)}.stats-strip{flex:0 0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:6px 20px;padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-size:12.5px}.stats-strip .stat{display:inline-flex;align-items:baseline;gap:6px}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}.stat-value{font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.stat-breakdown{margin-left:auto}.stat-breakdown summary{cursor:pointer;color:var(--text-muted);font-size:12px}.stat-breakdown div{display:flex;gap:14px;flex-wrap:wrap;padding-top:8px;color:var(--text-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}@media (max-width:720px){.app{height:auto;min-height:100dvh;overflow:visible}.brand-note{display:none}.viewport{min-height:60vh}.viewer-body{flex-direction:column}.settings-drawer{flex:0 0 auto;border-left:0;border-top:1px solid var(--border)}.hero strong{font-size:18px}.hero-art{width:104px}}.drop-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none;background:color-mix(in srgb,var(--accent) 12%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:drop-in .12s ease-out}.drop-overlay:before{content:"";position:absolute;inset:10px;border:2px dashed var(--accent);border-radius:14px}.drop-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 34px;border-radius:14px;background:var(--surface);box-shadow:0 10px 40px rgba(0,0,0,.22);color:var(--text);text-align:center}.drop-card svg{color:var(--accent);margin-bottom:2px}.drop-card strong{font-size:17px;font-weight:650}.drop-card span{font-size:13px;color:var(--text-muted)}@keyframes drop-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.drop-overlay{animation:none}}.viewer[data-maximized=true]{position:fixed;inset:0;z-index:150;border-radius:0;border:0}.viewer:-webkit-full-screen{background:var(--surface)}.viewer:fullscreen{background:var(--surface)}.viewer[data-maximized=true] .viewport{min-height:0}.lens{z-index:2;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px var(--accent),0 0 0 4px hsla(0,0%,100%,.85),0 6px 24px rgba(0,0,0,.35)}.lens,.lens-mirror{position:absolute;pointer-events:none}.lens-mirror{display:flex;align-items:center;justify-content:center}