/* Reserve the comparison toolbar before first paint. It never floats over controls. */
:root{--comparison-height:52px}
body{padding-top:var(--comparison-height)}
.header{top:var(--comparison-height)}
html{scroll-padding-top:calc(100px + var(--comparison-height));scrollbar-gutter:stable}
.site-comparison-bar{position:fixed;inset:0 0 auto;z-index:120;height:var(--comparison-height);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:0 24px;background:#070a0d;border-bottom:1px solid #26343e;color:#b7c6cf}
.comparison-identity{display:flex;align-items:center;gap:9px;font:11px 'Courier New',monospace;letter-spacing:1.3px;white-space:nowrap}
.comparison-identity>span:first-child{font:20px MGDisplay,Arial,sans-serif;color:#8cddfa}
.comparison-desktop-copy{color:#647683;font-size:11px;letter-spacing:1px}
.comparison-switch{display:flex;align-items:center;padding:3px;border:1px solid #30424e;border-radius:24px;background:#111a20;gap:2px}
.comparison-switch button{height:34px;min-width:108px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:20px;font-size:11px;font-weight:550;color:#9eafb9;transition:background .18s,color .18s}
.comparison-switch button[aria-pressed=true]{background:#d8f3ff;color:#0c202c;box-shadow:0 1px 4px #0003}
.comparison-switch button:hover:not([aria-pressed=true]){background:#20333f;color:#fff}
.comparison-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.comparison-live{justify-self:end;display:flex;gap:10px;align-items:center;min-height:44px;font-size:11px;color:#bed1dc}
.comparison-live>span[aria-hidden]{font-size:20px;color:#8cddfa}
.site-comparison-bar :focus-visible{outline-offset:2px}
.original-site-panel{position:fixed;inset:var(--comparison-height) 0 0;z-index:119;background:#10161b;display:flex;flex-direction:column;isolation:isolate}
.original-site-heading{display:grid;grid-template-columns:1fr auto;gap:8px 20px;padding:18px 28px 13px;border-bottom:1px solid #2c3d48;background:#10181e;flex-shrink:0}
.original-site-title{display:flex;align-items:center;gap:18px;min-width:0}
.original-site-title .eyebrow{font-size:11px;color:#8ba5b6;letter-spacing:1px}
.original-site-title h2{font-size:17px;font-weight:550;letter-spacing:-.3px}
.original-site-tools{display:flex;align-items:center;gap:12px}
.original-site-tools select{padding:9px 30px 9px 12px;font-size:11px;min-height:38px;background:#17232b;border-color:#31434e;border-radius:4px}
.comparison-zoom{display:flex;align-items:center;gap:12px;font-size:11px;min-height:38px;padding:7px 13px;border:1px solid #31434e;border-radius:4px;white-space:nowrap}
.original-site-caption{grid-column:1/-1;font-size:11px;line-height:1.6;color:#9aacb8}
.original-site-caption span{color:#7f929f}
.original-site-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:#27272d;position:relative}
.original-site-scroll:focus-visible{outline-offset:-3px}
.original-site-capture{margin:0 auto;width:100%;max-width:1363px;background:#27272d}
.original-site-capture img{display:block;width:100%;height:auto;max-width:none;user-select:none}
.original-site-scroll.is-zoomed .original-site-capture{width:1363px;max-width:none}
.original-site-loading{padding:70px 24px;text-align:center;color:#aebfc9;font-size:13px}
.original-site-error{padding:70px 24px;text-align:center;max-width:540px;margin:auto}
.original-site-error h3{font-size:24px;margin-bottom:10px}
.original-site-error p{color:#a2b1ba;line-height:1.7;margin-bottom:22px}
.original-site-error button,.original-site-error a{display:inline-flex;align-items:center;min-height:44px;padding:9px 17px;border:1px solid #547080;border-radius:4px;margin:5px}
.original-site-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding:30px 20px;background:#10181e;border-top:1px solid #30404b;font-size:12px}
.original-site-end>span{color:#94a8b5}
.original-site-end button{padding:12px 18px;min-height:44px;border:1px solid #7195a9;color:#d8f3ff;border-radius:4px}
body.comparison-open{overflow:hidden;overscroll-behavior:none}
body.comparison-open>:not(.site-comparison-bar):not(.original-site-panel):not([data-comparison-status]){visibility:hidden}
body.comparison-open .ticker-track,body.comparison-open .hero *{animation-play-state:paused!important}
@media(min-width:741px){
 .build-page .build-topbar{top:calc(70px + var(--comparison-height))}
 .scroll-builder .build-visual{top:calc(134px + var(--comparison-height));height:calc(100svh - 226px - var(--comparison-height))}
 .config-jump{top:calc(134px + var(--comparison-height))}
 .config-section,.configuration-review{scroll-margin-top:calc(218px + var(--comparison-height))}
}
@media(max-width:1100px){.comparison-desktop-copy{display:none}}
@media(max-width:740px){
 .site-comparison-bar{padding:0 12px;gap:8px;grid-template-columns:1fr auto 1fr}
 .comparison-identity{font-size:11px;letter-spacing:.8px;gap:5px}
 .comparison-identity>span:first-child{display:none}
 .comparison-switch button{min-width:84px;font-size:11px;height:36px}
 .comparison-live{gap:0;min-width:32px;justify-content:flex-end}
 .comparison-live>span:first-child{display:none}
 .original-site-heading{padding:14px 16px 12px;gap:9px}
 .original-site-title{display:flex;grid-column:1/-1;gap:12px;justify-content:space-between}
 .original-site-title .eyebrow{font-size:11px;white-space:nowrap}
 .original-site-title h2{font-size:14px;margin:0}
 .original-site-tools{gap:8px;grid-column:1/-1}
 .original-site-tools select{max-width:none;flex:1;font-size:11px;padding:10px 20px 10px 10px;min-height:44px}
 .comparison-zoom{padding:7px 10px;font-size:11px;min-height:44px;gap:5px}
 .comparison-zoom span{display:none}
 .original-site-caption{font-size:11px}
 .original-site-caption span{display:block}
 .original-site-end{padding:24px 18px;text-align:center}
 .scroll-builder .build-visual{top:calc(60px + var(--comparison-height))}
 .config-jump{top:calc(60px + var(--viewer-height) + var(--comparison-height))}
 .config-section,.configuration-review{scroll-margin-top:calc(60px + var(--viewer-height) + var(--jump-height) + 22px + var(--comparison-height))}
}
@media(max-width:370px){.site-comparison-bar{padding-inline:9px;gap:5px}.comparison-identity{font-size:11px}.comparison-switch button{min-width:79px}.original-site-title .eyebrow{font-size:11px}.original-site-title h2{font-size:13px}.original-site-heading{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.comparison-switch button{transition:none}}
