:root{--accent:#ff3ea5;--on-accent:#fff;--canvas:#f5f5f5;--dot:#d6d6d6;--surface:#fff;--border:#e4e4e4;--text:#111;--muted:#666;--dash:#bdbdbd;--hover:#f0f0f0;--pressed:#e6e6e6;--shadow:#00000014;--canvas-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23d6d6d6'/%3E%3C/svg%3E");--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--canvas:#1e1e1e;--dot:#363636;--surface:#2c2c2c;--border:#3d3d3d;--text:#f2f2f2;--muted:#a3a3a3;--dash:#5c5c5c;--hover:#383838;--pressed:#474747;--shadow:#00000059;--canvas-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1' fill='%23363636'/%3E%3C/svg%3E");--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=checker]{--canvas-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' shape-rendering='crispEdges'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M0 0h10v10H0zM10 10h10v10H10z' fill='%23e3e3e3'/%3E%3C/svg%3E")}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{background:var(--canvas-image) 0 0 / 20px 20px, var(--canvas);color:var(--text);-webkit-font-smoothing:antialiased;font:14px/1.5 system-ui,sans-serif}#app{min-height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);flex-direction:column;display:flex}svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:18px;height:18px}svg .fill{fill:currentColor;stroke:none}header{justify-content:center;padding:16px;display:flex}.toolbar{background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 16px var(--shadow);will-change:transform;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:6px;display:flex}.sep{background:var(--border);width:1px;height:24px;margin:0 4px}.themes{gap:2px;display:flex}button,.primary{appearance:none;height:36px;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;gap:6px;font:500 14px system-ui,sans-serif;text-decoration:none;display:flex}button.icon{width:40px}button.text{padding:0 12px}@media (hover:hover){button:hover{background:var(--hover)}}button[aria-pressed=true]{background:var(--pressed)}button:focus-visible,.primary:focus-visible,.frame:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.primary{background:var(--accent);color:var(--on-accent);padding:0 14px;font-weight:600}.primary:hover{filter:brightness(1.06)}.primary[aria-disabled=true]{opacity:.4;pointer-events:none}button:disabled,input:disabled{opacity:.4;cursor:default;background:0 0}#brush-size{width:96px;accent-color:var(--accent);margin:0 6px}#stage{flex:1;justify-content:center;align-items:center;min-height:0;padding:8px 16px 16px;display:flex}.frame-wrap{flex-direction:column;gap:8px;max-width:100%;display:flex}.frame-label{color:var(--muted);justify-content:space-between;gap:24px;font-size:12px;display:flex}#name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.done #name,.working #name{color:var(--accent);font-weight:600}#drop{border:1.5px dashed var(--dash);background:var(--surface);text-align:center;cursor:pointer;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:min(520px,100vw - 32px);min-height:360px;padding:40px 24px;transition:border-color .15s;display:flex}body:not(.empty) #drop{display:none}#drop:hover,.dragging #drop{border-color:var(--accent)}.tagline{margin:8px 0 4px;font-size:clamp(28px,7vw,40px)}.lettering{stroke:none;width:auto;display:block}.hint{color:var(--muted);margin-top:-8px;font-size:15px}#drop .primary{height:44px;padding:0 22px;font-size:15px}#frame{outline:1.5px solid var(--accent);margin:0;display:grid;position:relative}.dragging #frame{outline-style:dashed}#frame img,#sizer{object-fit:contain;grid-area:1/1;max-width:min(960px,100vw - 32px);max-height:calc(100dvh - 220px);display:block}#viewport,#view{display:contents}#sizer{visibility:hidden}#frame:not(.cropped) #sizer{display:none}#frame.cropped #viewport{display:block;position:absolute;inset:0;overflow:hidden}#frame.cropped #view{display:block;position:absolute}#frame.cropped img{width:100%;max-width:none;height:100%;max-height:none;position:absolute;inset:0}.working #original{opacity:.35;filter:grayscale(.6)}.done #original{visibility:hidden}.done.compare #original{visibility:visible}.done.compare #result{visibility:hidden}.handle{border:1.5px solid var(--accent);background:#fff;width:8px;height:8px;position:absolute}.tl{top:-4px;left:-4px}.tr{top:-4px;right:-4px}.bl{bottom:-4px;left:-4px}.br{bottom:-4px;right:-4px}#paint{opacity:.5;cursor:none;touch-action:none;width:100%;height:100%;position:absolute;inset:0}#brush-cursor{pointer-events:none;border:1.5px solid #fff;border-radius:50%;position:absolute;top:0;left:0;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #0009}#status{text-align:center;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}#status .wave{background:radial-gradient(circle, var(--accent) 1.6px, transparent 1.9px) 0 0 / 20px 20px fixed;animation:2.2s cubic-bezier(.3,0,.2,1) infinite wave;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 30%,#000 42% 46%,#0000 58%) 50%/0% 0% no-repeat;mask:radial-gradient(circle,#0000 30%,#000 42% 46%,#0000 58%) 50%/0% 0% no-repeat}@keyframes wave{to{-webkit-mask-size:320% 320%;mask-size:320% 320%}}.status-card{background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 24px var(--shadow);white-space:nowrap;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:14px 24px;display:flex;position:relative}.status-title{align-items:center;gap:12px;font-size:28px;display:flex}.status-title .mark{background:var(--accent);border-radius:3px;width:14px;height:14px;animation:1.6s cubic-bezier(.6,0,.3,1) infinite mark}@keyframes mark{0%,15%{transform:rotate(0)scale(1)}45%,60%{transform:rotate(90deg)scale(.7)}90%,to{transform:rotate(180deg)scale(1)}}.status-title .oops,#status.error .status-title .busy,#status.error .wave{display:none}#status.error .status-title .oops{display:inline}#status.error .mark{animation:none}#status .label{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px;font-weight:500}#status.error .label{color:var(--text);white-space:normal;max-width:320px}#retry{margin-top:8px}.bar{background:var(--border);border-radius:2px;width:100%;height:4px;margin-top:6px;overflow:hidden}.indeterminate .bar,#status.error .bar{display:none}.fill{background:var(--accent);width:0;height:100%;transition:width .2s}@media (prefers-reduced-motion:reduce){#status .wave{opacity:.25;animation:none;-webkit-mask:none;mask:none}.status-title .mark{animation:none}}.about-line{color:var(--muted);text-align:center;margin:4px 0 0;font-size:13px}body:not(.empty) .about-line{display:none}.link{height:auto;color:inherit;font:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--dash);text-decoration-color:var(--dash);text-underline-offset:3px;background:0 0;border-radius:2px;padding:0;display:inline}.link:hover{color:var(--accent);background:0 0;text-decoration-color:currentColor}.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#about{border:1px solid var(--border);background:var(--surface);width:min(480px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text);box-shadow:0 12px 40px var(--shadow);border-radius:12px;padding:0}#about::backdrop{background:#0000004d}.about-card{padding:24px;font-size:15px;line-height:1.55;position:relative}.about-card form{position:absolute;top:8px;right:8px}.about-card h2{margin:4px 40px 12px 0;font-size:clamp(22px,6.5vw,30px);font-weight:400}.about-card p{color:var(--muted);margin:0 0 12px}.about-card p:last-child{margin-bottom:0}.about-card strong{color:var(--text)}footer{justify-content:center;padding:0 16px 16px;display:flex;position:relative}body.empty .panel{visibility:hidden}.panel button.text{padding:0 12px}button.toggle[aria-pressed=true]{background:0 0}@media (hover:hover){button.toggle:hover{background:var(--hover)}}.switch{background:var(--dash);border-radius:8px;flex:none;width:26px;height:16px;margin-left:2px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #00000040}button.toggle[aria-pressed=true] .switch{background:var(--accent)}button.toggle[aria-pressed=true] .switch:after{transform:translate(10px)}button.toggle[aria-busy=true]{cursor:progress}button.toggle[aria-busy=true]>*{animation:.7s ease-in-out .2s infinite alternate busy}@keyframes busy{to{opacity:.35}}@media (prefers-reduced-motion:reduce){.switch,.switch:after{transition:none}button.toggle[aria-busy=true]>*{opacity:.5;animation:none}}#copy .ok,#copy.copied .idle{display:none}#copy.copied .ok{color:var(--accent);display:block}.hint-card{background:var(--surface);border:1px solid var(--border);width:min(600px,100vw - 32px);box-shadow:0 4px 16px var(--shadow);color:var(--muted);will-change:transform;border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 8px 8px 14px;font-size:13px;line-height:1.4;display:flex;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.hint-card strong{color:var(--text);font-weight:600}.hint-card>span{flex:260px}.hint-card button.text{white-space:nowrap;color:var(--accent);flex:none;padding:0 12px;font-weight:600}.hole-mark{outline:1.5px dashed var(--accent);outline-offset:2px;background:color-mix(in srgb, var(--accent) 15%, transparent);pointer-events:none;border-radius:4px;display:none;position:absolute}:is(body:has(#hint:not([hidden])) .hole-mark,body:has(#restore[aria-pressed=true]) .hole-mark){display:block}.compare .hole-mark{display:none!important}@media (width<=560px){.toolbar .label,.toolbar .switch,header .sep{display:none}button.toggle{position:relative}button.toggle[aria-pressed=true]{color:var(--accent)}button.toggle[aria-pressed=true]:after{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;position:absolute;bottom:3px}.toolbar{gap:2px}.toolbar button.icon,.toolbar button.text{width:36px;padding:0}.toolbar .primary{width:44px;padding:0}}