.spot-difference-game,.spot-difference-main{gap:1rem;min-width:0;display:grid}.spot-difference-game>*{margin-block:0}.spot-difference-game button{border:1px solid color-mix(in srgb, currentColor 28%, transparent);background:var(--surface,#fff);min-height:44px;color:inherit;cursor:pointer;border-radius:.75rem;padding:.65rem .85rem}.spot-difference-game button[aria-pressed=true]{border-color:#316b5f;box-shadow:inset 0 0 0 2px #76c8ad}.spot-difference-game button:disabled{cursor:not-allowed;opacity:.5}.spot-difference-game button:focus-visible,.spot-difference-game canvas:focus-visible{outline-offset:3px;outline:3px solid #236b5c}.spot-difference-stage{aspect-ratio:8/3;background:0 0;width:100%;min-width:0;position:relative}.spot-difference-stage canvas{z-index:1;touch-action:none;background:#dcebf7;width:100%;height:calc(100% - 6px);display:block;position:absolute;inset:3px 0}.spot-difference-clip-definitions{width:0;height:0;position:absolute;overflow:hidden}.spot-difference-stage[data-compare-layout=horizontal] canvas{clip-path:url(#spot-difference-horizontal-clip)}.spot-difference-stage[data-compare-layout=vertical] canvas{clip-path:url(#spot-difference-vertical-clip)}.spot-difference-overlays{pointer-events:none;gap:16px;display:grid;position:absolute;inset:3px 0}.spot-difference-stage[data-compare-layout=horizontal] .spot-difference-overlays{grid-template-columns:repeat(2,minmax(0,1fr))}.spot-difference-stage[data-compare-layout=vertical] .spot-difference-overlays{grid-template-rows:repeat(2,minmax(0,1fr))}.spot-difference-overlays:before{z-index:2;background:var(--color-background,#f7faf9);content:"";position:absolute;inset:0 calc(50% - 8px)}.spot-difference-comparison-overlay{background:var(--color-surface,#fff);min-width:0;min-height:0;box-shadow:var(--shadow-card,0 .45rem 1.1rem #122a241f);border-radius:.9rem;position:relative;overflow:hidden}.spot-difference-comparison-overlay:after{z-index:2;border:1px solid var(--color-border,#d6dfdc);border-radius:inherit;content:"";position:absolute;inset:0}.spot-difference-scene-label{z-index:3;color:var(--color-foreground,#18242b);background:#ffffffeb;border:1px solid #183e362e;border-radius:999px;margin:0;padding:.35rem .65rem;font-size:clamp(.8rem,1.2vw,.95rem);font-weight:800;line-height:1.25;position:absolute;inset:.75rem auto auto .75rem;box-shadow:0 .2rem .6rem #122a241a}.spot-difference-broad-region{z-index:3;background:#ffd34a3d;border:3px dashed #7a3e00;border-radius:1rem;width:50%;height:50%;position:absolute;box-shadow:inset 0 0 0 2px #ffffffe0,0 0 0 2px #7a3e00b8}.spot-difference-broad-region[data-broad-region=upper-left]{inset:0 auto auto 0}.spot-difference-broad-region[data-broad-region=upper-right]{inset:0 0 auto auto}.spot-difference-broad-region[data-broad-region=lower-left]{inset:auto auto 0 0}.spot-difference-broad-region[data-broad-region=lower-right]{inset:auto 0 0 auto}.spot-difference-broad-region[data-broad-region=center]{inset:25%}.spot-difference-wrong-ripple{z-index:3;border:.28rem solid #b00020;border-radius:50%;width:2.5rem;height:2.5rem;animation:.7s ease-out both spot-difference-wrong-ripple;position:absolute;translate:-50% -50%;box-shadow:0 0 0 .18rem #fff}.spot-difference-wrong-ripple:before,.spot-difference-wrong-ripple:after{content:"";background:#b00020;border-radius:999px;height:.2rem;position:absolute;inset:50% 17% auto;rotate:45deg}.spot-difference-wrong-ripple:after{rotate:-45deg}@keyframes spot-difference-wrong-ripple{0%{opacity:1;scale:.7}to{opacity:.35;scale:1.15}}.spot-difference-stage [role=status]{z-index:4;background:#ffffffe6;border-radius:999px;padding:.8rem 1rem;position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.spot-difference-hud{gap:.75rem;min-width:0;display:grid}.spot-difference-operation-panel{width:calc(50% - 8px);min-width:0}.spot-difference-status,.spot-difference-mode,.spot-difference-controls,.spot-difference-dialog-actions{flex-wrap:wrap;align-items:center;gap:.55rem;display:flex}.spot-difference-status{background:#76c8ad29;border-radius:.8rem;justify-content:space-between;padding:.8rem}.spot-difference-level-progress{gap:.35rem;min-width:0;display:grid}.spot-difference-level-track{isolation:isolate;scrollbar-gutter:stable;scrollbar-width:thin;gap:.375rem;min-width:0;padding:4px 2px;display:flex;position:relative;overflow-x:auto}.spot-difference-level-track:before{z-index:-1;background:color-mix(in srgb, #316b5f 38%, var(--color-border,#d6dfdc));content:"";height:2px;position:absolute;top:50%;left:22px;right:22px}.spot-difference-level-track button{background:var(--color-surface,#fff);border-radius:50%;flex:0 0 44px;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:.8rem;font-weight:800;display:grid}.spot-difference-level-track button[data-level-state=completed]{color:#135f39;background:#e3f7ea;border-color:#218351;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #218351}.spot-difference-level-track button[data-level-state=current]{color:#fff;background:#176853;border-color:#176853;scale:1.08;box-shadow:0 0 0 3px #fff,0 0 0 5px #176853}.spot-difference-level-track button[data-level-state=unlocked]{border-style:dashed;border-color:#5f9c8d}.spot-difference-level-track button[data-level-state=locked]{color:#65716d;background-color:#f1f3f2;background-image:repeating-linear-gradient(135deg,#0000 0 6px,#65716d1f 6px 9px)}.spot-difference-feedback{min-height:1.5em;font-weight:650}.spot-difference-dialog-backdrop{z-index:50;background:#0e19209e;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}body:has(.spot-difference-dialog-backdrop) .ad-slot{visibility:hidden}.spot-difference-dialog{background:var(--surface,#fff);width:min(34rem,100%);max-height:min(80vh,42rem);color:var(--text,#18242b);border-radius:1rem;padding:1.25rem;overflow:auto;box-shadow:0 1.2rem 3rem #00000040}.spot-difference-dialog-actions a{border:1px solid;border-radius:.75rem;align-items:center;min-height:44px;padding:.65rem .85rem;display:inline-flex}@media (width<=767px){.spot-difference-stage{aspect-ratio:2/3}.spot-difference-stage canvas,.spot-difference-overlays{width:calc(100% - 10.666px);height:100%;inset:0 5.333px}.spot-difference-overlays:before{inset:calc(50% - 8px) 0}.spot-difference-operation-panel{width:100%}.spot-difference-status>*{flex:45%}}@media (prefers-reduced-motion:reduce){.spot-difference-game *,.spot-difference-dialog-backdrop{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.spot-difference-wrong-ripple{animation:none!important}}