.compare-page { min-height:100dvh; height:auto; display:block; overflow:auto; }
.compare-nav { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 24px; border-bottom:2px solid var(--ink); background:var(--white); }
.compare-nav nav { display:flex; gap:20px; font-size:13px; }
.compare-nav a { color:var(--ink); }
.compare-main { display:block; width:100%; overflow:visible; padding:20px 24px 12px; max-width:1600px; margin:auto; }
.compare-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.compare-heading h1 { font-family:var(--display); font-size:28px; margin:0; }
.compare-heading p { font-size:13px; margin:6px 0 0; }
.compare-heading button { min-height:46px; flex-shrink:0; }
.compare-status { font-size:13px; min-height:20px; margin:12px 0; }
.compare-status.error { color:#a91f30; }
.compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.compare-pane { min-width:0; border:2px solid var(--ink); border-radius:18px; overflow:hidden; background:var(--white); }
.compare-label { min-height:56px; display:flex; align-items:center; gap:12px; padding:12px 20px; border-bottom:2px solid var(--ink); }
.compare-label h2 { font-family:var(--display); font-size:22px; margin:0; }
.compare-label span { font-size:12px; line-height:1.5; }
.compare-pane .perform { position:relative; inset:auto; z-index:0; height:clamp(430px,calc(100dvh - 300px),850px); min-height:430px; padding:12px 20px; gap:12px; }
.compare-pane .perf-num { font-size:clamp(80px,15vh,150px); }
.compare-pane .perf-canvas { height:80px; }
.compare-pane .perf-bird { width:clamp(92px,16vh,160px); }
.compare-pane .perf-bubble { max-width:min(300px,calc(50vw - 85px)); font-size:14px; }
.compare-details { padding:10px 20px; border-top:1px solid var(--ink); font-size:12px; line-height:1.6; }
.compare-details summary { cursor:pointer; min-height:24px; }
.compare-details p { margin:6px 0; overflow-wrap:anywhere; white-space:pre-line; }
.compare-note { font-size:11px; text-align:center; margin:12px 0 0; line-height:1.6; }
.compare-page :focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
@media (max-width:650px) {
 .compare-nav { padding:12px; }
 .compare-nav .brand-name { display:none; }
 .compare-nav nav { gap:14px; font-size:11px; }
 .compare-main { display:block; width:100%; overflow:visible; padding:14px 8px; }
 .compare-heading { flex-wrap:wrap; padding:0 4px; gap:12px; }
 .compare-heading h1 { font-size:24px; }
 .compare-heading p { font-size:11px; }
 .compare-heading button { width:100%; }
 .compare-status { font-size:11px; padding:0 4px; line-height:1.6; }
 .compare-grid { gap:8px; }
 .compare-pane { border-radius:12px; }
 .compare-label { padding:10px 8px; display:block; min-height:76px; }
 .compare-label h2 { font-size:20px; }
 .compare-label span { font-size:10px; }
 .compare-pane .perform { padding:10px 8px; height:450px; gap:10px; }
 .compare-pane .perf-num { font-size:78px; text-shadow:3px 4px 0 var(--ink); }
 .compare-pane .perf-caption { font-size:11px; padding:5px 7px; margin-top:10px; }
 .compare-pane .perf-bird { width:96px; }
 .compare-pane .perf-elapsed { font-size:11px; padding:3px 7px; }
 .compare-pane .perf-streak { font-size:11px; padding:3px 6px; gap:3px; }
 .compare-pane .perf-streak img { width:14px; height:14px; }
 .compare-pane .perf-bubble { font-size:11px; padding:10px; max-width:calc(50vw - 35px); }
 .compare-pane .perf-canvas { height:68px; }
 .compare-details { padding:8px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
 .compare-pane *, .compare-pane *::before, .compare-pane *::after { animation:none !important; transition:none !important; }
}

.compare-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.compare-record-dot { width:12px; height:12px; flex:none; border-radius:50%; background:var(--white); }
.is-recording .compare-record-dot { border-radius:3px; }
#compare-start:disabled { cursor:not-allowed; background:var(--border-light); color:var(--text-2); box-shadow:none; border-color:var(--divider); }
#compare-start:disabled .compare-record-dot { background:var(--muted); }
#compare-retry { min-height:44px; }
@media (max-width:650px) {
 .compare-actions { width:100%; flex-direction:column; gap:10px; }
}

.compare-detector-control { padding:10px 20px; border-bottom:1px solid var(--ink); }
.compare-detector-control label { display:block; font-size:12px; font-weight:600; margin-bottom:5px; }
.compare-detector-control select { width:100%; min-height:44px; padding:8px 10px; font:inherit; font-size:13px; color:var(--ink); background:var(--white); border:2px solid var(--ink); border-radius:9px; }
.compare-detector-control p { min-height:33px; margin:6px 0 0; font-size:11px; color:var(--text-2); line-height:1.5; }
@media (max-width:650px) {
 .compare-detector-control { padding:10px 8px; }
 .compare-detector-control label { font-size:11px; }
 .compare-detector-control select { font-size:11px; padding:8px 4px; }
 .compare-detector-control p { font-size:10px; min-height:45px; }
}