.spotdiff-area { max-width:880px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stats { display:flex; gap:16px; color:var(--muted); font-size:14px; flex-wrap:wrap; }
.stats b { color:var(--ink); font-size:16px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.frame { margin:0; border:1px solid var(--rule); background:var(--panel); padding:8px; }
.frame figcaption { font:600 11px ui-monospace,monospace; color:var(--muted); margin-bottom:6px; }
.frame canvas { display:block; width:100%; height:auto; cursor:crosshair; touch-action:none; }
.win-panel { max-width:360px; margin:14px auto 0; padding:24px; text-align:center; }
.win-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.win-panel p { color:var(--muted); font-size:14px; margin:0 0 14px; }
@media (max-width:780px) { .controls { flex-direction:column; align-items:stretch; } .stats { justify-content:space-between; } .pair { grid-template-columns:1fr; } }