html,body{height:100%}body{overflow:hidden;display:flex;flex-direction:column;background:var(--surface-0)}@supports (height: 100dvh){body{height:100dvh}}.site-nav{flex-shrink:0;position:static}.app{flex:1;min-height:0;display:flex;flex-direction:column}.app-head{display:flex;align-items:baseline;gap:16px;padding:12px 24px 8px;flex-shrink:0}.app-title{font-family:var(--font-display);font-weight:600;font-size:1.375rem;line-height:1.2;color:var(--ink);margin:0}.app-sub{font-size:.875rem;color:var(--ink-soft);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-btn{height:36px;padding:0 16px;border-radius:var(--radius-full);border:none;background:var(--surface-2);color:var(--ink);font-size:.8125rem;font-weight:600;cursor:pointer;flex-shrink:0}.chip-btn:hover{background:var(--line)}.stage-zone{flex:1;min-height:0;padding:0 24px 24px}.stage{position:relative;width:100%;height:100%;background:var(--canvas);border-radius:var(--radius-l);overflow:hidden;display:flex;align-items:center;justify-content:center}.upload-zone{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;padding:24px;overflow-y:auto;cursor:pointer;border:none;background:transparent;transition:background .15s var(--ease)}.upload-zone.drag{background:#ffffff0d}.upload-zone input[type=file]{display:none}.entry-inner{margin:auto;width:100%;max-width:1000px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:20px;pointer-events:none}.entry-head{display:flex;flex-direction:column;gap:6px;text-align:center}.entry-heading{font-family:var(--font-display);font-weight:600;font-size:1.5rem;line-height:1.2;color:var(--ink-on-dark);margin:0}.entry-sub{font-size:.9375rem;color:var(--ink-faint);margin:0}.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;flex:1;min-height:0;max-height:460px}.entry-demo{background:var(--surface-1);border-radius:var(--radius-m);box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column}.entry-wipe{position:relative;flex:1;min-height:200px}.entry-wipe-after{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.entry-wipe-cutout{width:34%;max-width:150px;height:auto;filter:drop-shadow(0 2px 5px rgba(20,16,12,.25))}.entry-wipe-before{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 50% 0 0);animation:entry-wipe-sweep 9s var(--ease) infinite}.entry-wipe-before picture,.entry-wipe-before img{display:block;width:100%;height:100%;object-fit:cover}@keyframes entry-wipe-sweep{0%,12%{clip-path:inset(0 0 0 0)}40%,62%{clip-path:inset(0 0 0 100.5%)}90%,to{clip-path:inset(0 0 0 0)}}.entry-demo-caption{font-size:.8125rem;color:var(--ink-soft);margin:0;padding:12px 16px 14px;text-align:center}.upload-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 24px;border:1.5px dashed rgba(245,245,247,.28);border-radius:var(--radius-m);background:var(--canvas-soft);transition:border-color .15s var(--ease),background .15s var(--ease)}.upload-zone.drag .upload-cta{border-color:var(--accent);background:#3b4cca24}.upload-cta strong{font-size:1.0625rem;font-weight:600;color:var(--ink-on-dark)}.upload-cta span{font-size:.875rem;color:var(--ink-faint)}.upload-cta .entry-choose{margin-top:10px;height:40px;display:inline-flex;align-items:center;padding:0 22px;border-radius:var(--radius-full);background:var(--accent);color:#fff;font-size:.875rem;font-weight:600}.entry-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;font-size:.8125rem;color:var(--ink-faint)}.entry-steps li{display:inline-flex;align-items:center;gap:8px;position:relative}.entry-steps li:not(:last-child):after{content:"→";position:absolute;right:-19px;color:var(--ink-faint);opacity:.6}.entry-steps b{width:20px;height:20px;border-radius:50%;background:var(--canvas-soft);color:var(--ink-on-dark);font-weight:600;font-size:.6875rem;display:grid;place-items:center;flex-shrink:0}.editor-zoom-wrap{max-width:100%;max-height:100%;overflow:hidden;touch-action:none}.editor-canvas-wrap{position:relative;display:inline-block;line-height:0;transform-origin:center center;touch-action:none;border-radius:var(--radius-s)}.editor-canvas-wrap canvas{width:100%;height:auto;touch-action:none;display:block}.editor-canvas-wrap[data-phase=holes] .round-guide,.editor-canvas-wrap[data-phase=erase] .round-guide{display:none}.punch-fx{position:absolute;width:34px;height:34px;margin-left:-17px;margin-top:-17px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;animation:punch-pop .32s var(--ease) forwards}@keyframes punch-pop{0%{transform:scale(.4);opacity:.95}55%{transform:scale(1.15);opacity:.55}to{transform:scale(1.5);opacity:0}}.stage-discard{position:absolute;left:12px;top:12px;z-index:4;width:40px;height:40px;padding:0;border-radius:50%;font-size:1rem;line-height:1}.stage-toolbar{position:absolute;top:12px;right:12px;z-index:4;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:calc(100% - 64px)}.tb-btn{height:44px;padding:0 16px;border-radius:var(--radius-full);border:none;background:var(--canvas-soft);color:var(--ink-on-dark);font-size:.8125rem;font-weight:600;cursor:pointer}.tb-btn.disabled{opacity:.4;pointer-events:none}.tb-btn.active,.tb-primary{background:var(--accent);color:#fff}.tb-primary:hover{background:var(--accent-hover)}.zoom-cluster{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:var(--radius-full);background:var(--canvas-soft)}.zoom-cluster input[type=range]{width:100px;accent-color:var(--accent)}.zoom-cluster span{font-size:.75rem;color:var(--ink-on-dark);width:38px;text-align:right;font-variant-numeric:tabular-nums}.shape-controls{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:4;display:flex;gap:10px;background:var(--canvas-soft);border-radius:var(--radius-full);padding:8px;box-shadow:var(--shadow-2)}.shape-controls .text-btn{background:transparent;color:var(--ink-on-dark)}.shape-controls .text-btn:hover{background:#ffffff1a}.hole-mode-banner{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:4;display:flex;align-items:center;gap:10px;background:var(--canvas-soft);color:var(--ink-on-dark);font-size:.8125rem;font-weight:600;padding:10px 18px;border-radius:var(--radius-full);box-shadow:var(--shadow-2);pointer-events:none;max-width:calc(100% - 24px)}.hole-mode-banner span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hole-add-btn{pointer-events:auto;flex-shrink:0;background:#ffffff24;color:var(--ink-on-dark)}.hole-add-btn:hover{background:var(--accent)}.guided-hole-bar{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:4;display:flex;align-items:center;gap:10px;background:var(--canvas-soft);color:var(--ink-on-dark);padding:8px 10px 8px 18px;border-radius:var(--radius-full);box-shadow:var(--shadow-2);max-width:calc(100% - 24px)}.guided-hole-status{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guided-hole-stepper{display:flex;gap:6px;flex-shrink:0}.stepper-btn{width:44px;height:44px;border-radius:50%;border:none;background:#ffffff24;color:var(--ink-on-dark);font-size:1.25rem;font-weight:600;line-height:1;cursor:pointer;flex-shrink:0}.stepper-btn:hover{background:var(--accent)}.guided-hole-remove{flex-shrink:0;background:transparent;color:var(--ink-on-dark);border:1px solid rgba(255,255,255,.3)}.guided-hole-remove:hover{background:var(--danger);border-color:var(--danger);color:#fff}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#17171a00;z-index:55;display:flex;transition:background .25s var(--ease)}.sheet-backdrop.open{background:#17171a73}.sheet-backdrop[hidden]{display:none}.sheet{background:var(--surface-1);box-shadow:var(--shadow-2);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(16px);transition:transform .25s var(--ease),opacity .25s var(--ease);width:380px;max-width:calc(100vw - 48px);max-height:80vh;border-radius:var(--radius-l);margin:auto}.sheet-backdrop.open .sheet{opacity:1;transform:none}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.sheet-title{font-size:1rem;font-weight:600;color:var(--ink);margin:0}.sheet-close{width:36px;height:36px;border-radius:50%;border:none;background:var(--surface-2);color:var(--ink-soft);font-size:.875rem;cursor:pointer;flex-shrink:0}.sheet-close:hover{background:var(--line);color:var(--ink)}.sheet-foot{display:flex;justify-content:flex-end;margin-top:4px}.accent-btn{height:40px;padding:0 20px;border-radius:var(--radius-full);border:none;background:var(--accent);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer}.accent-btn:hover{background:var(--accent-hover)}.adjust-group{display:flex;flex-direction:column;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}.adjust-group:last-of-type{border-bottom:none;padding-bottom:0}.control-label{display:flex;justify-content:space-between;font-size:.8125rem;font-weight:600;color:var(--ink-soft)}.adjust-group input[type=range]{width:100%;accent-color:var(--accent)}.adjust-row{display:flex;gap:8px;flex-wrap:wrap}.mode-toggle{display:block;width:100%;font-size:.8125rem;font-weight:600;border-radius:var(--radius-full);padding:10px 16px;cursor:pointer;border:none;background:var(--surface-2);color:var(--ink);text-align:left}.mode-toggle.active{background:var(--accent);color:#fff}.field-hint{font-size:.75rem;color:var(--ink-soft);line-height:1.4;margin:0}.result-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.result-card{background:var(--surface-1);border-radius:var(--radius-l);box-shadow:var(--shadow-2);display:flex;width:100%;max-width:720px;max-height:100%;overflow:hidden auto}.result-media{flex:1 1 260px;min-width:0;display:flex;align-items:center;justify-content:center;padding:28px;background:var(--canvas)}.result-media img{max-width:100%;max-height:220px;object-fit:contain;display:block}.result-media-photo{position:relative;width:220px;height:220px;border-radius:var(--radius-m);overflow:hidden}.result-media-photo img{width:100%;height:100%;max-height:none;object-fit:cover;display:block}.result-media-photo.stitch-off .stitch-handle,.result-media-photo.stitch-off svg{display:none}.result-panel{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:14px;padding:28px}.result-status{display:flex;align-items:center;gap:8px;margin:0;font-size:.9375rem;font-weight:600;color:var(--ink)}.saved-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;flex-shrink:0}.result-group{display:flex;flex-direction:column;gap:8px}.result-group .panel-label{font-size:.75rem;font-weight:600;color:var(--ink-soft);margin:0}.result-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:auto;padding-top:6px}.result-actions--stack{flex-direction:column;align-items:stretch}.result-actions--stack .accent-btn{width:100%}.thread-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.thread-swatch{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:50%;background:transparent;cursor:pointer}.thread-swatch:hover{background:var(--surface-2)}.thread-swatch.active{box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface-2)}.thread-spool{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:block}.mode-toggle-check{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--ink);cursor:pointer}.mode-toggle-check input{accent-color:var(--accent);width:16px;height:16px}.crop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.crop-card{background:var(--surface-2);border-radius:var(--radius-m);padding:10px 10px 12px;text-align:center}.crop-thumb{display:flex;align-items:center;justify-content:center;height:96px;border-radius:var(--radius-s);overflow:hidden}.crop-thumb img{max-width:100%;max-height:100%;object-fit:contain}.crop-hex{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.75rem;color:var(--ink-soft);margin-top:8px}.crop-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0}.crop-size{font-size:.6875rem;color:var(--ink-faint);margin-top:2px}.crop-actions{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:8px}.crop-download{font-size:.75rem;font-weight:600;color:var(--accent);text-decoration:none}.crop-download:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tb-btn:focus-visible,.stage-discard:focus-visible,.session-chip:focus-visible{outline-color:var(--ink-on-dark)}.tb-btn,.text-btn,.accent-btn,.sheet-close,.mode-toggle,.chip-btn,.stage-discard,.thread-swatch,.stepper-btn{transition:transform .1s var(--ease),background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}.tb-btn:not(.disabled):active,.text-btn:active,.accent-btn:active,.sheet-close:active,.mode-toggle:active,.chip-btn:active,.stage-discard:active,.thread-swatch:active,.stepper-btn:active{transform:scale(.97)}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0ms!important}.tb-btn:active,.stage-discard:active{transform:none}.entry-wipe-before{animation:none}}.text-btn,.site-nav a,.beta-badge,.feedback-fab,.cookie-cat-toggle{text-transform:none;letter-spacing:.01em}.text-btn{font-size:.8125rem;font-weight:600;border:none;background:var(--surface-2);color:var(--ink);padding:8px 14px;border-radius:var(--radius-full);min-height:36px}.text-btn:hover{background:var(--line);color:var(--ink)}.site-nav a{font-size:.8125rem;font-weight:500}.site-nav .nav-brand{color:var(--ink)}.beta-badge{font-size:.6875rem;font-weight:600}.feedback-fab{border:none;box-shadow:var(--shadow-1)}@media (max-width: 720px){.app-head{padding:8px 12px 6px;flex-wrap:wrap}.app-sub{display:none}.stage-zone{padding:0 12px 12px}.upload-zone{padding:12px}.entry-inner{height:auto;gap:14px}.entry-heading{font-size:1.25rem}.entry-sub{font-size:.875rem}.entry-grid{grid-template-columns:1fr;gap:12px;flex:none;max-height:none}.entry-wipe{flex:none;min-height:0;aspect-ratio:2 / 1}.entry-demo-caption{padding:10px 14px 12px}.upload-cta{padding:22px 16px}.entry-steps{flex-direction:column;align-items:center;gap:8px}.entry-steps li:not(:last-child):after{content:none}.stage-toolbar{top:8px;right:8px;left:60px;gap:6px;max-width:none}.tb-btn{height:44px;padding:0 12px;font-size:.75rem}.zoom-cluster{height:44px;padding:0 10px}.zoom-cluster input[type=range]{width:56px}.tb-primary{flex-basis:100%;text-align:center}.stage-discard{left:8px;top:8px;width:44px;height:44px}.shape-controls,.hole-mode-banner,.guided-hole-bar{bottom:12px}.hole-mode-banner{font-size:.75rem;padding:9px 14px;max-width:calc(100% - 24px);text-align:center}.guided-hole-bar{padding:6px 6px 6px 14px;gap:6px}.guided-hole-status{font-size:.75rem}.guided-hole-remove{padding:0 12px;font-size:.75rem}.result-screen{padding:12px}.result-card{flex-direction:column;max-height:100%}.result-media,.result-panel{padding:20px}.sheet{width:100%;max-width:none;max-height:82vh;margin:auto 0 0;border-radius:var(--radius-l) var(--radius-l) 0 0;transform:translateY(100%);opacity:1}.sheet-backdrop.open .sheet{transform:none}.sheet-close{width:44px;height:44px}.chip-btn,.accent-btn{min-height:44px}}