:root{color:#111;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--border:#d9d9de;--muted:#666;--surface:#fff;--soft:#f4f4f6;--active:#111;background:#fff;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:#111;background:#fff;min-width:320px}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}.appShell{width:100%;height:100dvh;min-height:100%;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);background:#fff;grid-template-rows:minmax(0,1fr) auto;display:grid}.appShell.isAligning{grid-template-rows:minmax(0,1fr) 58px}.mainArea{min-height:0;overflow:hidden}.selectionArea{display:grid}.selectionGrid{grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px;height:100%;min-height:0;padding:12px;display:grid}.selectionCard{border:1px solid var(--border);background:var(--surface);border-radius:22px;grid-template-rows:auto minmax(0,1fr) auto auto;gap:10px;min-height:0;padding:14px;display:grid;overflow:hidden;box-shadow:0 8px 24px #0000000f}.selectionCard.hasError{border-color:#d23b3b}.selectionTitle{letter-spacing:-.01em;margin:0;font-size:1rem;font-weight:700}.selectionPreview{background:var(--soft);color:#8b8b92;border-radius:16px;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.selectionPreview>svg{width:54px;height:54px}.selectionPreview img{object-fit:contain;width:100%;min-width:0;height:100%;min-height:0;display:block;position:absolute;inset:0}.chooseButton{color:#fff;cursor:pointer;background:#111;border:0;border-radius:999px;width:100%;min-height:48px;font-weight:700}.chooseButton:active{transform:translateY(1px)}.selectionStatus,.selectionError{text-align:center;margin:0;font-size:.85rem}.selectionStatus{color:var(--muted)}.selectionError{color:#b42318;font-weight:600}.fileInput{display:none}.comparisonStage{width:100%;height:100%;min-height:0;padding:8px}.comparison{border:1px solid var(--border);background:#f7f7f8;border-radius:18px;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;box-shadow:0 8px 24px #0000000f}.sideBySide{flex-direction:column;display:flex}.sideBySide.isTall{flex-direction:column}.sideBySide.isWide{flex-direction:row}.panel{background:#f7f7f8;flex:1 1 0;place-items:center;min-width:0;min-height:0;display:grid;position:relative;overflow:hidden}.sideBySide.isTall .beforePanel{border-bottom:1px solid var(--border)}.sideBySide.isWide .beforePanel{border-right:1px solid var(--border);border-bottom:0}.panel img,.baseImage,.revealImage,.alignmentLayer img{object-fit:contain;object-position:center;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;min-width:0;height:100%;min-height:0;display:block}.panel img,.alignmentLayer img{position:absolute;inset:0}.alignedImage{transform:translate(var(--align-pan-x,0%), var(--align-pan-y,0%)) scale(var(--align-zoom,1));transform-origin:50%}.badge{z-index:5;color:#fff;letter-spacing:.01em;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#111111b8;border-radius:999px;align-items:center;min-height:26px;padding:4px 9px;font-size:.75rem;font-weight:700;display:inline-flex;position:absolute;top:8px;left:8px}.sliderComparison{--slider-pct:50%;--slider-inverse-pct:50%;touch-action:none;cursor:ew-resize;outline:none}.sliderComparison.vertical{cursor:ns-resize}.sliderComparison:focus-visible,.alignmentEditor:focus-visible{box-shadow:0 0 0 3px #007aff66,0 8px 24px #0000000f}.baseLayer,.baseImage,.revealLayer,.revealCropLayer,.revealImage,.afterBadgeLayer,.divider{position:absolute;inset:0}.baseLayer{z-index:1}.baseLayer,.revealCropLayer,.alignmentLayer{clip-path:inset(var(--crop-top,0px) var(--crop-right,0px) var(--crop-bottom,0px) var(--crop-left,0px))}.revealLayer{z-index:2;pointer-events:none;overflow:hidden}.revealCropLayer{overflow:hidden}.afterBadgeLayer{z-index:3;pointer-events:none;overflow:hidden}.sliderComparison.horizontal .revealLayer{clip-path:inset(0 var(--slider-inverse-pct) 0 0)}.sliderComparison.vertical .revealLayer{clip-path:inset(0 0 var(--slider-inverse-pct) 0)}.sliderComparison.horizontal .afterBadgeLayer{clip-path:inset(0 0 0 var(--slider-pct))}.sliderComparison.vertical .afterBadgeLayer{clip-path:inset(var(--slider-pct) 0 0 0)}.beforeBadge{top:8px;left:8px}.afterBadge{top:8px;left:auto;right:8px}.sliderComparison.vertical .afterBadge{inset:auto auto 8px 8px}.divider{z-index:4;pointer-events:none}.sliderComparison.horizontal .divider{right:auto;left:var(--slider-pct);border-left:4px solid #fff;width:0;transform:translate(-2px)}.sliderComparison.vertical .divider{bottom:auto;top:var(--slider-pct);border-top:4px solid #fff;height:0;transform:translateY(-2px)}.handle{color:#111;background:#fff;border:0;border-radius:999px;place-items:center;width:26px;height:42px;display:grid;position:absolute;box-shadow:0 5px 14px #0000002e}.handle svg{width:12px;height:18px}.sliderComparison.horizontal .handle{top:50%;left:0;transform:translate(-50%,-50%)}.sliderComparison.vertical .handle{top:0;left:50%;transform:translate(-50%,-50%)rotate(90deg)}.alignmentEditor{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;outline:none}.alignmentEditor:active{cursor:grabbing}.alignmentLayer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.referenceLayer{z-index:1}.activeLayer{z-index:2}.alignmentBadges{z-index:3;pointer-events:none;flex-wrap:wrap;gap:6px;display:flex;position:absolute;top:8px;left:8px;right:8px}.alignmentBadge{position:static}.alignmentPanel{z-index:10;border-top:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;align-self:end;gap:8px;padding:8px 10px 10px;display:grid;box-shadow:0 -8px 24px #00000014}.alignmentPanelRow{align-items:center;gap:8px;min-width:0;display:grid}.alignmentPanelTopRow{grid-template-columns:auto auto;justify-content:space-between}.alignmentControlRow{grid-template-columns:58px minmax(0,1fr) auto}.alignmentTargetGroup{grid-template-columns:1fr 1fr;display:inline-grid}.alignmentTargetButton{color:#111;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;min-width:86px;min-height:36px;padding:0 14px;font-weight:700}.alignmentTargetButton.isActive{color:#fff;background:#111;border-color:#111;box-shadow:0 2px 8px #0000002e}.alignmentDoneButton,.alignmentResetButton{color:#fff;cursor:pointer;background:#111;border:1px solid #111;border-radius:999px;min-height:38px;padding:0 16px;font-weight:800}.alignmentResetButton{border-color:var(--border);color:#111;background:#fff}.alignmentControlLabel,.alignmentValue{font-size:.84rem;font-weight:800}.alignmentValue{text-align:right;min-width:3.7em;color:var(--muted)}.alignmentRange{accent-color:#111;width:100%;min-width:0}.toolbar{border-top:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:6px;min-height:58px;padding:7px 8px 8px;display:grid;overflow:hidden}.toolbarSlot{align-items:center;min-width:0;display:flex}.modeSlot,.alignSlot{justify-content:flex-start}.alignButton{border-color:var(--border);background:#fff}.sliderControlsSlot{justify-content:center;gap:6px}.sliderControlsSlot.isHidden{visibility:hidden;pointer-events:none}.replaceSlot{justify-content:flex-end}.toolbarGroup{flex:none;align-items:center;gap:4px;display:inline-flex}.segmented{border:1px solid var(--border);background:var(--soft);border-radius:999px;gap:0;padding:3px}.toolbarButton{color:#111;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:3px;min-width:42px;height:42px;font-weight:700;display:inline-flex}.toolbarButton svg{flex:none;width:23px;height:23px}.toolbarButton.isActive{color:#fff;background:#111;border-color:#111;box-shadow:0 2px 8px #0000002e}.toolbarButton:disabled{cursor:default}.toolbarButton:focus-visible,.chooseButton:focus-visible,.alignmentTargetButton:focus-visible,.alignmentDoneButton:focus-visible,.alignmentResetButton:focus-visible,.alignmentRange:focus-visible{outline-offset:2px;outline:3px solid #007aff73}.replaceGroup{gap:4px}.replaceControl{position:relative}.replaceButton{border-color:var(--border);background:#fff;flex-direction:column;gap:0;min-width:58px;padding:0 7px;font-size:.68rem;line-height:1}.replaceButton svg{width:20px;height:20px}@media (aspect-ratio>=1){.selectionGrid{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (width<=360px){.toolbar{gap:3px;padding-left:4px;padding-right:4px}.toolbarButton{min-width:38px;height:38px}.toolbarButton svg{width:21px;height:21px}.replaceButton{min-width:48px;padding-left:4px;padding-right:4px;font-size:.6rem}.replaceButton svg{width:18px;height:18px}.alignmentPanel{gap:6px;padding-left:8px;padding-right:8px}.alignmentControlRow{grid-template-columns:52px minmax(0,1fr) auto;gap:6px}.alignmentTargetButton{min-width:74px;padding-left:10px;padding-right:10px}.alignmentDoneButton,.alignmentResetButton{padding-left:12px;padding-right:12px}}