.spot-page{box-sizing:border-box;width:min(100% - 20px,760px);margin:0 auto;padding:12px 0 108px;color:var(--ink,#252820)}
.spot-heading h1{margin:0;font-size:1.35rem}.spot-heading p{margin:.16em 0 0;color:#586052;font-size:.84rem}.spot-status{min-height:1.3em;margin:7px 0;color:#485044;font-size:.84rem;line-height:1.45}
.spot-setup{display:grid;gap:9px;max-width:480px;margin:12px auto;padding:14px;border:1px solid #d5d9cf;border-radius:16px;background:#fff}.spot-setup label{display:grid;gap:4px;font-size:.86rem;font-weight:700}.spot-setup select{box-sizing:border-box;width:100%;min-height:42px;padding:7px 10px;border:1px solid #c5cbbd;border-radius:10px;background:#fff;color:inherit;font:inherit;font-weight:400}.spot-setup button,.spot-actions button,.spot-split-mode{min-height:40px;padding:7px 12px;border:1px solid #c5cbbd;border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:.84rem;cursor:pointer}.spot-setup #spot-start{border-color:#49643c;background:#49643c;color:#fff;font-weight:700}.spot-setup button:disabled,.spot-actions button:disabled{opacity:.45;cursor:default}.spot-setup p{margin:0;color:#586052;font-size:.78rem;line-height:1.5}
.spot-editor[hidden]{display:none!important}.spot-editor{display:grid;min-width:0;gap:8px}.spot-source-label,.spot-edit-help{margin:0;color:#586052;font-size:.78rem;line-height:1.45}.spot-preview{display:grid;justify-items:center;gap:5px;margin:0}.spot-preview figcaption{width:100%;color:#586052;font-size:.78rem}.spot-preview canvas{box-sizing:border-box;display:block;width:min(100%,min(52vh,512px));height:auto;max-height:52vh;object-fit:contain;image-rendering:pixelated;touch-action:none;border:1px solid #c5cbbd;border-radius:5px;background-color:#fff;background-image:linear-gradient(45deg,#e3e5df 25%,transparent 25%),linear-gradient(-45deg,#e3e5df 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e5df 75%),linear-gradient(-45deg,transparent 75%,#e3e5df 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.spot-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.spot-actions #spot-confirm{grid-column:1/-1;border-color:#49643c;background:#49643c;color:#fff;font-weight:700}.spot-candidates{display:grid;gap:5px;max-height:36vh;overflow:auto;margin:0;padding:0;list-style:none;overscroll-behavior:contain}.spot-candidates li{min-width:0}.spot-candidates label{box-sizing:border-box;display:flex;align-items:center;gap:9px;min-height:40px;padding:6px 10px;border:1px solid #d5d9cf;border-radius:10px;background:#fff;font-size:.82rem;cursor:pointer}.spot-candidates input{width:20px;height:20px;flex:0 0 auto;accent-color:#335cbe}.spot-confirmed{margin:0;padding:10px;border-radius:12px;background:#e5eddf;color:#31482a;font-weight:700;text-align:center}.spot-page :focus-visible{outline:3px solid #335cbe;outline-offset:2px}.spot-page [hidden]{display:none!important}.spot-page .app-tabs{z-index:30}

/* The comparison image owns the editor viewport; its labels and actions float at the edges. */
body.spot-editing{height:100%;min-width:320px;overflow:hidden;overscroll-behavior:none}
body.spot-editing .site-header,body.spot-editing .site-footer,body.spot-editing .spot-heading{display:none}
body.spot-editing #spot-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.spot-editing .spot-page{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;margin:0;padding:0;overflow:hidden}
body.spot-editing .spot-editor{position:absolute;inset:0;display:block;min-height:0}
.spot-preview{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;margin:0;background:radial-gradient(ellipse at 50% 45%,#fff 0%,#f1f2ed 72%,#e7e9e3 100%)}
.spot-preview figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.spot-preview canvas{width:min(calc(100vw - 16px),calc((100dvh - 8.5rem)*var(--spot-aspect,1)));height:auto;max-width:calc(100vw - 16px);max-height:calc(100dvh - 8.5rem);border:0;border-radius:0;box-shadow:0 18px 55px rgba(25,35,30,.14);transform:translate3d(var(--spot-pan-x,0px),var(--spot-pan-y,0px),0) scale(var(--spot-zoom,1));transform-origin:center;will-change:transform}
.spot-source-label{position:absolute;top:max(.55rem,env(safe-area-inset-top));left:.65rem;z-index:4;max-width:calc(100% - 7rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.38rem .62rem;border:1px solid rgba(27,32,37,.08);border-radius:999px;color:#485044;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);font-size:.68rem}
#spot-play-local{position:absolute;left:50%;bottom:calc(5.3rem + env(safe-area-inset-bottom));z-index:9;transform:translateX(-50%);width:max-content;max-width:calc(100% - 1.2rem);min-height:44px;padding:.55rem 1rem;border:1px solid #49643c;border-radius:999px;background:#49643c;color:#fff;box-shadow:0 8px 24px rgba(20,30,24,.22);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
#spot-play-local:not([hidden])~.spot-edit-hint{display:none}
.spot-settings{position:absolute;top:max(.55rem,env(safe-area-inset-top));right:.6rem;z-index:8;width:min(23rem,calc(100% - 1.2rem));pointer-events:none}
.spot-settings summary{display:flex;width:max-content;min-height:2.25rem;align-items:center;margin-left:auto;padding:0 .8rem;border:1px solid rgba(27,32,37,.11);border-radius:999px;color:#26312a;background:rgba(255,255,255,.84);box-shadow:0 5px 18px rgba(20,30,24,.08);backdrop-filter:blur(14px);font-size:.78rem;font-weight:700;cursor:pointer;pointer-events:auto;list-style:none}.spot-settings summary::-webkit-details-marker{display:none}.spot-settings summary::before{content:"＋";margin-right:.38rem;font-size:.9rem}.spot-settings[open] summary::before{content:"−"}
.spot-settings__sheet{display:grid;gap:9px;max-height:min(68dvh,34rem);margin-top:.45rem;padding:12px;overflow:auto;overscroll-behavior:contain;border:1px solid rgba(27,32,37,.12);border-radius:16px;color:var(--ink);background:rgba(255,255,255,.95);box-shadow:0 14px 35px rgba(20,30,24,.18);backdrop-filter:blur(18px);pointer-events:auto}.spot-settings__sheet .spot-edit-help{font-size:.74rem}.spot-split-mode[aria-pressed=true]{border-color:#335cbe;background:#f2f5ff;font-weight:700}.spot-settings[open]~.spot-edit-hint{opacity:0}
.spot-zoom{position:absolute;right:.75rem;bottom:calc(4.8rem + env(safe-area-inset-bottom));z-index:5;padding:.28rem .5rem;border-radius:999px;color:#fff;background:rgba(20,28,24,.62);font-size:.68rem;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none}.spot-zoom[data-visible=true]{opacity:1}
.spot-edit-hint{position:absolute;right:.65rem;bottom:calc(7.45rem + env(safe-area-inset-bottom));z-index:5;max-width:45%;margin:0;padding:.35rem .55rem;border-radius:999px;color:#485044;background:rgba(255,255,255,.72);font-size:.68rem;line-height:1.3;text-align:right;pointer-events:none}
body.spot-editing .app-tabs{z-index:30}
@media(max-width:380px){.spot-page{width:calc(100% - 14px);padding-top:8px}.spot-heading h1{font-size:1.18rem}.spot-heading p,.spot-status{font-size:.76rem}.spot-status{margin:4px 0 6px}.spot-setup{gap:8px;margin:7px auto;padding:11px}.spot-setup label{font-size:.8rem}.spot-setup select{min-height:38px}.spot-setup button,.spot-actions button,.spot-split-mode{min-height:36px;padding:5px 8px;font-size:.78rem}.spot-editor{gap:6px}.spot-actions{gap:5px}.spot-preview canvas{width:min(100%,min(47vh,512px));max-height:47vh}.spot-candidates label{min-height:38px}}
@media(max-height:650px){.spot-page{padding-top:5px;padding-bottom:86px}.spot-heading h1{font-size:1.15rem}.spot-heading p,.spot-status,.spot-source-label,.spot-edit-help,.spot-preview figcaption{font-size:.72rem}.spot-status{min-height:1em;margin:2px 0 4px}.spot-setup{gap:7px;margin:5px auto;padding:10px}.spot-setup select{min-height:36px}.spot-editor{gap:5px}.spot-preview canvas{width:min(100%,min(42vh,512px));max-height:42vh}.spot-actions button{min-height:34px}.spot-candidates{gap:4px}.spot-settings__sheet{max-height:56dvh}}
@media(max-width:380px) and (max-height:650px){.spot-page{padding-bottom:80px}.spot-preview canvas{width:min(100%,min(38vh,512px));max-height:38vh}.spot-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.spot-settings__sheet{max-height:48dvh}.spot-edit-hint{max-width:37%;font-size:.62rem}}
@media(orientation:landscape) and (max-height:500px){body.spot-editing .spot-preview canvas{width:min(calc(100vw - 16px),calc((100dvh - 5.5rem)*var(--spot-aspect,1)));max-height:calc(100dvh - 5.5rem)}.spot-source-label,.spot-settings{top:max(.35rem,env(safe-area-inset-top))}.spot-settings__sheet{max-height:68dvh}.spot-edit-hint{right:.6rem;bottom:max(.45rem,env(safe-area-inset-bottom));max-width:38%}.spot-zoom{right:.6rem;bottom:max(.45rem,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.spot-page button{transition:none}.spot-preview canvas{will-change:auto}}
/* Keep the image large and wholly above the shared bottom navigation. */
body.spot-editing .spot-preview{bottom:calc(5rem + env(safe-area-inset-bottom))}
body.spot-editing .spot-preview canvas{width:min(calc(100vw - 12px),calc((100dvh - 6.5rem)*var(--spot-aspect,1)));max-width:calc(100vw - 12px);max-height:calc(100dvh - 6.5rem)}
@media(orientation:landscape) and (max-height:500px){body.spot-editing .spot-source-label{max-width:min(26vw,11rem)}body.spot-editing .spot-edit-hint{display:none}}
@media(orientation:landscape) and (max-height:400px){
  .app-page--tool-spot-difference:not(.spot-editing) .site-header,.app-page--tool-spot-difference:not(.spot-editing) .site-footer{display:none}
  .app-page--tool-spot-difference:not(.spot-editing) .spot-page{padding-top:5px}
  .app-page--tool-spot-difference:not(.spot-editing) .spot-heading p,.app-page--tool-spot-difference:not(.spot-editing) .spot-setup p{display:none}
  .app-page--tool-spot-difference:not(.spot-editing) .spot-setup{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px;margin-top:3px;padding:8px}
  .app-page--tool-spot-difference:not(.spot-editing) .spot-setup button{min-height:34px}
}
.spot-publish { display: block; width: min(100%, 28rem); min-height: 44px; margin: 12px auto; }
.spot-publish-actions { position: absolute; right: .6rem; bottom: calc(5.4rem + env(safe-area-inset-bottom)); left: .6rem; z-index: 12; display: flex; justify-content: center; gap: .4rem; width: min(100% - 1.2rem, 28rem); margin-inline: auto; pointer-events: none; }
.spot-publish-actions button { box-sizing: border-box; flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: .45rem .5rem; border: 1px solid #49643c; border-radius: 999px; background: #49643c; color: #fff; box-shadow: 0 8px 24px rgba(20,30,24,.22); font: inherit; font-size: clamp(.66rem, 2.6vw, .78rem); font-weight: 700; line-height: 1.2; cursor: pointer; pointer-events: auto; }
.spot-publish-actions button[hidden] { display: none !important; }
body.spot-editing .spot-preview { bottom: calc(9rem + env(safe-area-inset-bottom)); }
body.spot-editing .spot-preview canvas { width: min(calc(100vw - 16px), calc((100dvh - 10rem) * var(--spot-aspect,1))); max-height: calc(100dvh - 10rem); }
body.spot-editing .spot-edit-hint { bottom: calc(10rem + env(safe-area-inset-bottom)); }
body.spot-editing .spot-publish-actions:has(#spot-publish:not([hidden])) ~ .spot-edit-hint,
body.spot-editing .spot-publish-actions:has(#spot-play-local:not([hidden])) ~ .spot-edit-hint { display: none; }