.matching-page{--color-paper:#f6f9fc;--color-paper-2:#e8f0f6;--color-ink:#112b40;--color-muted:#485a6b;--color-rule:#83919e;--color-accent:#005c94;--color-focus:#005c94;--color-error:#9b1e22;--color-success:#0c532f;--font-display:"Microsoft YaHei", "PingFang SC", sans-serif;--font-body:"Microsoft YaHei", "PingFang SC", sans-serif;--font-number:"Consolas", "Courier New", monospace;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--ease-out:cubic-bezier(.16,1,.3,1);--dur-micro:.12s}@supports (color:lab(0% 0 0)){.matching-page{--color-paper:lab(97.6822% -.690907 -1.72737);--color-paper-2:lab(94.204% -1.63347 -4.13193);--color-ink:lab(16.3711% -4.26672 -16.4011);--color-muted:lab(37.3395% -4.1278 -11.7724);--color-rule:lab(59.3991% -3.22276 -8.51853);--color-accent:lab(36.9324% -6.78936 -38.8742);--color-focus:lab(36.9324% -6.78936 -38.8742);--color-error:lab(34.5744% 50.677 31.8589);--color-success:lab(30.4028% -28.8518 14.8986)}}
html,body{overflow-x:clip}.matching-page{padding:var(--space-xl) 0;color:var(--color-ink);background:var(--color-paper);font-family:var(--font-body)}.matching-wrap{width:min(1160px,100% - 32px);margin-inline:auto}.matching-heading{margin-bottom:var(--space-xl)}.matching-heading h1{font-family:var(--font-display);overflow-wrap:anywhere;margin:0;font-size:clamp(28px,4vw,44px);font-style:normal}.matching-page p{color:var(--color-muted);line-height:1.65}.matching-page h2{margin:0 0 var(--space-md);overflow-wrap:anywhere;min-width:0;scroll-margin-top:100px;font-size:24px}.matching-page h3{margin:0 0 var(--space-sm);font-size:16px}.matching-layout{gap:var(--space-xl);grid-template-columns:minmax(0,1fr);display:grid}.matching-play{min-width:0}.matching-page button{min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-ink);cursor:pointer;transition:transform var(--dur-micro) var(--ease-out);border-radius:6px}.matching-page button:active{transform:translateY(1px)}.matching-page :is(button,input):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.matching-page button:disabled{cursor:not-allowed;opacity:.65}.matching-page .matching-primary{color:var(--color-accent);border-color:var(--color-accent);white-space:nowrap;margin-top:var(--space-md);font-weight:700}.matching-play form{gap:var(--space-sm);max-width:480px;margin-top:var(--space-lg);display:grid}.matching-play input{width:100%;min-width:0;min-height:48px;padding:var(--space-sm);border:1px solid var(--color-rule);color:var(--color-ink);background:var(--color-paper);border-radius:6px}.matching-play form p{margin:0;font-size:14px}.matching-status{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap;display:flex}.matching-time{font-family:var(--font-number);font-variant-numeric:tabular-nums;white-space:nowrap}.matching-status .matching-time{font-size:28px}.matching-final-time{margin-block:var(--space-lg);font-size:52px;display:block}.matching-play progress{width:100%;height:8px;accent-color:var(--color-accent);margin-bottom:var(--space-lg)}.matching-columns{gap:var(--space-sm);grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);display:grid}.matching-columns>div{min-width:0}.matching-options{gap:var(--space-sm);display:grid}.matching-page .matching-option{overflow-wrap:anywhere;flex-direction:column;justify-content:center;gap:4px;width:100%;min-height:64px;display:flex}.matching-option img{aspect-ratio:5/3;object-fit:contain;background:var(--color-paper-2);width:100%;height:auto;display:block}.matching-page .matching-option.is-selected{outline:2px solid var(--color-accent);outline-offset:2px;background:var(--color-paper-2)}.matching-page .matching-option.is-matched{color:var(--color-success);border-style:dashed;border-color:var(--color-success);opacity:1;background:var(--color-paper-2)}.matching-check{font-size:14px}.matching-feedback{min-height:28px}.matching-page .matching-feedback.error{color:var(--color-error)}.matching-page .matching-feedback.success{color:var(--color-success)}.matching-rules{border-top:1px solid var(--color-rule);padding-top:var(--space-md);margin-top:var(--space-lg);font-size:14px}.matching-ranking{border-top:1px solid var(--color-rule);padding-top:var(--space-lg);min-width:0}.matching-ranking-heading{gap:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.matching-ranking-heading h2{margin:0}.matching-ranking-heading button{white-space:nowrap}.matching-ranking ol{padding:0;list-style:none}.matching-ranking li{align-items:center;gap:var(--space-xs);padding-block:var(--space-md);border-bottom:1px solid var(--color-rule);grid-template-columns:24px minmax(0,1fr) auto;display:grid}.matching-ranking li div{overflow-wrap:anywhere;gap:4px;display:grid}.matching-ranking li div span{color:var(--color-muted);font-size:14px}.matching-rank-number{font-family:var(--font-number);color:var(--color-accent)}.matching-qr{align-items:center;gap:var(--space-lg);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule);flex-wrap:wrap;display:flex}.matching-qr img{background:#fff;width:232px;max-width:100%;height:auto}.matching-page .matching-penalty-rule{color:var(--color-accent)}.matching-page .matching-picture-round{gap:var(--space-md);grid-template-columns:minmax(0,1fr)}.matching-picture-round .matching-options{grid-template-columns:repeat(2,minmax(0,1fr))}.matching-page .matching-picture-round .matching-option{padding:6px;position:relative}.matching-picture-round .matching-option img{aspect-ratio:auto;height:clamp(96px,25vw,160px)}.matching-picture-round .matching-option:has(img) .matching-check{background:var(--color-paper);border-radius:50%;width:24px;height:24px;line-height:24px;position:absolute;top:8px;right:8px}@media (hover:hover){.matching-page button:not(:disabled):hover,.matching-play input:hover{background:var(--color-paper-2)}}@media (min-width:960px){.matching-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:64px}.matching-ranking{border-top:0;border-left:1px solid var(--color-rule);padding:0 0 0 var(--space-lg)}.matching-columns{gap:var(--space-lg)}}@media (prefers-reduced-motion:reduce){.matching-page button{transition:none}.matching-page button:active{transform:none}}