.compact { padding:24px; --split:0%; }
.comparison-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.comparison-kicker { color:#b5a6c9; font-size:11px; letter-spacing:.02em; }
.comparison-status { margin:5px 0 0; font-size:14px; color:#eee7f6; }
.comparison-actions { display:flex; gap:8px; } .comparison-actions button { color:#d9cce8; background:#1c1628; border:1px solid #3d304f; border-radius:6px; padding:8px 12px; min-height:36px; font-size:11px; }
.comparison-actions button:hover { background:#30223e; }
.comparison-canvas { position:relative; touch-action:pan-y; }
.areas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
.area { min-width:0; } .area-label { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; margin-bottom:12px; font-size:11px; }
.area-label strong { font-weight:550; color:#e6ddf0; } .area-label strong > span { color:#9584a9; font:10px/1.5 monospace; margin-right:6px; } .area-label > span { color:#9e93ad; font-size:9px; }
.pair { display:grid; position:relative; isolation:isolate; overflow:hidden; border-radius:10px; }
.pair > .specimen { grid-area:1/1; min-width:0; } .pair > .before { display:none; } .js-ready .pair > .before { display:block; }
.pair > .after { z-index:1; }
.canvas-divider { display:none; position:absolute; inset:0 auto 0 var(--split); width:1px; background:#c8a8f5; box-shadow:0 0 0 1px #201429,0 0 18px #b18de37a; z-index:2; pointer-events:none; }
.js-ready[data-between="true"] .canvas-divider { display:block; }
.canvas-divider > span { position:sticky; top:200px; margin-top:150px; display:grid; place-items:center; width:38px; height:38px; margin-left:-19px; border-radius:50%; background:#2e2042; border:1px solid #ceaff4; color:#fff; font-size:17px; pointer-events:auto; cursor:ew-resize; }
.comparison-control { display:flex; align-items:center; gap:16px; margin-top:24px; color:#d6c6e9; font-size:11px; }
.comparison-control input { flex:1; min-width:0; accent-color:#c5a1ed; cursor:ew-resize; } .comparison-control output { width:4ch; font-variant-numeric:tabular-nums; text-align:right; color:#a69ab6; }
.standalone { max-width:1320px; margin:auto; } .standalone h1 { font-weight:550; font-size:32px; letter-spacing:-.04em; margin:8px 0 0; } .standalone-note { color:#a89bb9; font-size:12px; margin-top:24px; }
@media (max-width:800px) { .areas { grid-template-columns:1fr; } .area-label > span { font-size:10px; } }
@media (max-width:450px) { .compact { padding:16px 10px; } .comparison-head { gap:12px; margin-bottom:20px; } .comparison-actions button { padding:7px 10px; } .comparison-control { gap:10px; } .area-label { padding-inline:2px; } .comparison-status { font-size:12px; } }