.compare-button:not(:disabled){border-color:#3d7381;background:#152329;color:#e1faff}
.compare-button:not(:disabled):hover{background:#20353c}
body.comparison-open{overflow:hidden}
.comparison-view{position:fixed;inset:0;z-index:200;background:#030505;color:#edf5f6;display:flex;flex-direction:column;
  width:100vw;height:100dvh;overflow:hidden;font:13px/1.3 "Segoe UI",system-ui,sans-serif;overscroll-behavior:contain}
.comparison-view[hidden]{display:none!important}
.comparison-view:fullscreen{width:100%;height:100%;background:#030505}
.compare-toolbar{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;column-gap:6px;row-gap:7px;
  padding:7px 10px;flex:none;border-bottom:1px solid #253438;background:#101719}
.compare-toolbar button,.compare-toolbar select{min-height:38px;padding:6px 10px;
  border:1px solid #34464a;border-radius:9px;background:#1a2427;color:#eef5f7;cursor:pointer}
.compare-toolbar button:hover{background:#273639}
.compare-toolbar button.active{background:#21444d;border-color:#4ba4ba}
.compare-toolbar select{min-width:0;width:100%;flex:1;overflow:hidden;text-overflow:ellipsis}
.compare-landscape{grid-column:1;grid-row:1;font-size:25px;line-height:1;padding:0!important;width:42px}
.compare-close{grid-column:3;grid-row:1;font-size:24px;line-height:1;padding:0!important;width:42px}
.compare-modes{grid-column:2;grid-row:1;display:flex;gap:5px;align-items:center;justify-content:center;min-width:0}
.compare-modes button{min-width:0;max-width:46%;padding:5px 9px}
.compare-pickers{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:7px;min-width:0;width:100%}
.compare-pickers label{display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.compare-pickers label span{font-weight:700;color:#b3d4de}
.compare-pickers button{flex:none;width:38px;padding:6px 0}
.compare-range{grid-column:1/-1;grid-row:3;font-size:11px;color:#b5c2c7;text-align:center;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.compare-stage{position:relative;flex:1;min-height:140px;overflow:hidden;touch-action:none;cursor:crosshair;
  background:#010303;overscroll-behavior:contain;user-select:none}
.compare-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#compareAxes{touch-action:none}
.compare-status{position:absolute;inset:0;z-index:4;display:grid;place-content:center;text-align:center;
  background:rgba(2,4,5,.82);font-size:15px;color:#c6dbdf;pointer-events:none}
.compare-footer{flex:none;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  padding:7px 12px 9px;border-top:1px solid #27353a;background:#101719}
.compare-legend{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;width:100%;min-width:0}
.compare-legend .key{display:flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.compare-legend .key::before{content:"";width:10px;height:10px;flex:none;border-radius:3px;background:var(--key-color)}
.compare-a{color:#98f64b}.compare-b{color:#14d673}
.compare-legend .key-a{--key-color:#98f64b}
.compare-legend .key-b{--key-color:#14d673}
.compare-legend .filename{min-width:0;flex:0 1 auto;overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  scrollbar-width:thin;scrollbar-color:#47646e transparent;touch-action:pan-x;overscroll-behavior-inline:contain}
.compare-strength{flex:none;color:#cbd6da;font-size:12px}
.compare-threshold{display:flex;gap:7px;align-items:center;white-space:nowrap;color:#adbbc0}
.compare-threshold input{width:94px;accent-color:#48bfdf}
.compare-threshold output{width:42px;color:#e1ecf0}
.compare-readout{display:flex;gap:7px 13px;align-items:center;flex-wrap:wrap;min-height:27px;
  color:#cbd6da;font-variant-numeric:tabular-nums}
.compare-readout strong{font-size:12px}
.compare-note{font-size:11px;color:#8fa0a5}
.comparison-view[data-mode="side"] .compare-legend,.comparison-view[data-mode="side"] .compare-threshold{display:none}
.comparison-view.compare-rotated{left:100vw!important;top:0!important;width:100dvh!important;height:100vw!important;
  transform:rotate(90deg)!important;transform-origin:top left!important}
@media(max-width:820px){
  .compare-toolbar{padding:6px;column-gap:4px}
  .compare-toolbar button,.compare-toolbar select{min-height:38px;padding:6px}
  .compare-modes button{font-size:11px;padding:5px}
  .compare-footer{padding:6px 9px;gap:5px 12px}
  .compare-legend{font-size:11px}
  .compare-readout{font-size:11px}
  .compare-note{display:none}
}
@media(max-width:370px){
  .compare-toolbar{grid-template-columns:38px minmax(0,1fr) 38px}
  .compare-close,.compare-landscape{width:38px}
  .compare-modes button{font-size:10px}
}