body { margin:0; }
.pair-page,.pair-page * { box-sizing:border-box; }
.pair-page { max-width:760px;margin:auto;padding:12px 16px 24px; }
.pair-page button,.pair-page select { font:inherit;color:var(--site-ink);min-height:44px;border:1px solid var(--site-line);border-radius:10px;background:white; }
.pair-page button { cursor:pointer;padding:8px 14px; }
.pair-page :focus-visible { outline:3px solid var(--site-blue);outline-offset:3px; }
.pair-context { display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:.85rem; }
.pair-context select { max-width:100%;padding:6px; }
.pair-hud { display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin:10px 0;font-size:.85rem; }
.pair-hud progress { width:100%;height:8px;accent-color:var(--site-blue); }
#pair-instruction { margin:8px 0;font-size:.9rem; }
.pair-board { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.pair-page .pair-card { position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:120px;padding:8px;border:2px solid var(--site-line);border-radius:16px;box-shadow:0 3px 12px #16365308; }

.pair-card .fraction-pizza { width:94px; }
.pair-card .math-fraction { font-size:2rem;margin:0; }
.pair-card__state { position:absolute;top:6px;right:9px;font-size:.9rem;font-weight:700; }
.pair-page .pair-card.is-selected { border-color:var(--site-blue);background:#edf5fa;box-shadow:inset 0 0 0 1px var(--site-blue); }
.pair-page .pair-card.is-matched { border-color:#47775b;background:#edf7ef;opacity:1;cursor:default; }
.pair-page .pair-card.is-wrong { border-style:dashed;border-color:#995a42;background:#fff7ef; }
.pair-page .pair-card:disabled:not(.is-matched) { cursor:default; }
.pair-column-headings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0; }
.pair-column-headings h2 { margin:0;text-align:center;font-size:.8rem;font-weight:600;color:var(--site-muted); }
.pair-card[data-side=left] { grid-column:1; }
.pair-card[data-side=right] { grid-column:2; }
.pair-operation { display:flex;align-items:center;justify-content:center;gap:6px; }
.pair-card .pair-operation .math-fraction { font-size:clamp(1.25rem,5vw,1.8rem); }
#pair-message { min-height:1.4em;margin:8px 0;font-size:.9rem; }
.pair-actions { display:flex;gap:8px;flex-wrap:wrap; }
.pair-actions button,#pair-again,#pair-next-level { background:#fff3c9; }
.pair-win { margin:12px 0;padding:16px;border:1px solid var(--site-line);border-radius:16px;background:#edf7ef; }
.pair-win h2 { font-size:1.2rem; }
.pair-win a { display:block;margin-top:16px; }
.pair-back,.pair-win a { color:var(--site-blue); }
@media(min-width:620px) { .pair-board { gap:14px; }.pair-page .pair-card { min-height:145px; }.pair-card .fraction-pizza { width:110px; } }

@media(max-width:619px) {
 .pair-context label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
 .pair-context select { width:100%; }
}