:root {
  --model-a: #7896e8;
  --model-a-strong: #a8baf0;
  --model-a-soft: rgba(120, 150, 232, .14);
  --model-b: #d27a62;
  --model-b-strong: #e8aa98;
  --model-b-soft: rgba(210, 122, 98, .14);
  --delta: #c7a96e;
  --metric-paper: #0b0d12;
}

html[data-theme="light"] {
  --model-a: #3f67b3;
  --model-a-strong: #294d91;
  --model-a-soft: rgba(63, 103, 179, .1);
  --model-b: #a94736;
  --model-b-strong: #7f3024;
  --model-b-soft: rgba(169, 71, 54, .1);
  --delta: #745e32;
  --metric-paper: #fff;
}

html[data-theme="luminous"] {
  --model-a: #96acf0;
  --model-a-strong: #c8d3f6;
  --model-a-soft: rgba(150, 172, 240, .16);
  --model-b: #e09178;
  --model-b-strong: #f2b9a7;
  --model-b-soft: rgba(224, 145, 120, .16);
  --delta: #dcc99d;
}

.comparison-nav .lab-compare { text-decoration: none; }
.comparison-nav .lab-compare.is-current { border-style: solid; border-color: var(--gold-dim); color: var(--gold); }

.comparison-main {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: clamp(58px, 7vw, 106px) clamp(16px, 3.6vw, 58px) clamp(90px, 9vw, 150px);
}

.comparison-intro {
  display: grid;
  grid-template-columns: minmax(460px, 1.2fr) minmax(320px, .8fr);
  gap: 50px clamp(70px, 10vw, 170px);
  align-items: end;
  margin-bottom: clamp(54px, 6vw, 88px);
}

.comparison-intro h1 {
  max-width: 900px;
  margin: 17px 0 0;
  font-family: var(--serif);
  font-size: clamp(62px, 7.3vw, 116px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.06em;
}

.comparison-intro__reading { padding-top: 17px; border-top: 1px solid var(--line); }
.comparison-intro__reading > span,
.comparison-intro__reading small {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.comparison-intro__reading p { margin: 14px 0 17px; font-family: var(--serif); font-size: clamp(23px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.03em; }
.comparison-intro__reading small { display: block; max-width: 430px; }

.comparison-controls {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 66px minmax(250px, 1fr) minmax(290px, .9fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.comparison-model { display: grid; align-content: center; min-width: 0; min-height: 98px; padding: 14px 24px 16px 0; }
.comparison-model--b { padding-left: 24px; border-left: 1px solid var(--line-soft); }
.comparison-model > span,
.comparison-view legend,
.comparison-model > small {
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.comparison-model > span { display: flex; align-items: center; gap: 7px; }
.comparison-model > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--model-a); box-shadow: 0 0 0 3px var(--model-a-soft); }
.comparison-model--b > span i { background: var(--model-b); box-shadow: 0 0 0 3px var(--model-b-soft); }
.comparison-model select { width: 100%; margin: 7px 0 4px; padding: 0 25px 0 0; border: 0; appearance: none; background: transparent; color: var(--ivory); font-family: var(--serif); font-size: 20px; cursor: pointer; }
.comparison-model--a select { color: var(--model-a-strong); }
.comparison-model--b select { color: var(--model-b-strong); }
.comparison-model small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.comparison-swap { display: grid; place-content: center; gap: 3px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--dim); cursor: pointer; }
.comparison-swap span { font-size: 20px; line-height: 1; }
.comparison-swap small { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.comparison-swap:hover { color: var(--gold); }

.comparison-view { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 8px 18px; min-width: 0; margin: 0; padding: 13px 0 13px 24px; border: 0; border-left: 1px solid var(--line); }
.comparison-view legend { grid-column: 1 / -1; padding: 0; }
.comparison-view > div { display: flex; }
.comparison-view button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--ash); font-family: var(--mono); font-size: 9px; text-transform: uppercase; cursor: pointer; }
.comparison-view button + button { margin-left: -1px; }
.comparison-view button[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--gold-dim); background: color-mix(in srgb, var(--gold) 7%, transparent); color: var(--gold); }
.comparison-view > label { display: flex; align-items: center; gap: 7px; color: var(--ash); font-family: var(--mono); font-size: 9px; text-transform: uppercase; cursor: pointer; }
.comparison-view input { accent-color: var(--gold); }

.comparison-fixture-note { margin: 16px 0 19px; padding: 11px 14px; border: 1px solid var(--line-soft); border-left: 2px solid var(--model-b); background: linear-gradient(90deg, var(--model-b-soft), transparent 46%); color: var(--dim); font-family: var(--mono); font-size: 9px; line-height: 1.55; letter-spacing: .045em; text-transform: uppercase; }
.comparison-fixture-note b { color: var(--model-b-strong); font-weight: 400; }

.comparison-instrument {
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--void) 96%, transparent);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .15);
}

.comparison-stage { position: relative; display: grid; min-width: 0; min-height: 610px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--model-a) 2.5%, transparent), transparent 42%, color-mix(in srgb, var(--model-b) 2.5%, transparent)); }
.comparison-stage::before,
.comparison-stage::after { position: absolute; z-index: 0; width: 240px; height: 1px; content: ""; background: var(--line-soft); transform: rotate(-45deg); }
.comparison-stage::before { top: 76px; left: -70px; }
.comparison-stage::after { right: -60px; bottom: 90px; }
.comparison-loading { place-self: center; color: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.chart-pair { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; min-height: 610px; }
.chart-pair::after { position: absolute; top: 5%; bottom: 5%; left: 50%; width: 1px; content: ""; background: linear-gradient(transparent, var(--line), transparent); pointer-events: none; }
.chart-single { position: relative; z-index: 1; display: grid; place-items: center; min-height: 610px; padding: 10px max(12px, 8vw); }

.comparison-aperture-card { display: grid; grid-template-rows: 1fr auto; min-width: 0; margin: 0; border: 0; background: transparent; box-shadow: none; }
.comparison-aperture-stage { height: clamp(500px, 36vw, 610px); min-height: 500px; padding: 8px 2px 0; }
.comparison-aperture-card figcaption { display: grid; grid-template-columns: auto 1fr; gap: 4px 13px; margin: 0 clamp(22px, 4vw, 58px) 24px; padding: 15px 0 0; border-top: 1px solid var(--line-soft); }
.comparison-aperture-card figcaption span,
.comparison-aperture-card figcaption small { color: var(--dim); font: 8px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.comparison-aperture-card figcaption b { overflow: hidden; color: var(--ivory); font: 400 19px/1 var(--serif); text-overflow: ellipsis; white-space: nowrap; }
.comparison-aperture-card figcaption small { grid-column: 1 / -1; }
.comparison-aperture-card.model-a figcaption span { color: var(--model-a); }
.comparison-aperture-card.model-b figcaption span { color: var(--model-b); }

.comparison-aperture-card.capability-aperture.is-source-native.model-a { --aperture-profile: var(--model-a); --aperture-profile-soft: var(--model-a-soft); --aperture-source-fill: var(--model-a-soft); --aperture-trace-shadow: color-mix(in srgb, var(--model-a) 46%, transparent); --aperture-depth-line: color-mix(in srgb, var(--model-a) 30%, transparent); --aperture-depth-tether: color-mix(in srgb, var(--model-a) 38%, transparent); }
.comparison-aperture-card.capability-aperture.is-source-native.model-b { --aperture-profile: var(--model-b); --aperture-profile-soft: var(--model-b-soft); --aperture-source-fill: var(--model-b-soft); --aperture-trace-shadow: color-mix(in srgb, var(--model-b) 46%, transparent); --aperture-depth-floor: color-mix(in srgb, var(--model-b) 2.5%, transparent); --aperture-depth-face: color-mix(in srgb, var(--model-b) 7%, transparent); --aperture-depth-line: color-mix(in srgb, var(--model-b) 30%, transparent); --aperture-depth-tether: color-mix(in srgb, var(--model-b) 38%, transparent); }
.comparison-aperture-card.capability-aperture.is-source-native.is-overlap { width: min(960px, 100%); --aperture-profile: var(--model-a); --aperture-profile-soft: var(--model-a-soft); }
.is-overlap .comparison-source-membrane.is-a { fill: var(--model-a-soft); }
.is-overlap .comparison-source-membrane.is-b { fill: var(--model-b-soft); }
.is-overlap .comparison-trace.is-a { stroke: var(--model-a); }
.is-overlap .comparison-trace.is-b { stroke: var(--model-b); }
.is-overlap .comparison-trace-shadow.is-a { stroke: color-mix(in srgb, var(--model-a) 55%, transparent); }
.is-overlap .comparison-trace-shadow.is-b { stroke: color-mix(in srgb, var(--model-b) 55%, transparent); }
.is-overlap .aperture-score-stem.is-a { stroke: var(--model-a); }
.is-overlap .aperture-score-stem.is-b { stroke: var(--model-b); }
.is-overlap .aperture-score-shadow.is-a { fill: var(--model-a); }
.is-overlap .aperture-score-shadow.is-b { fill: var(--model-b); }
.is-overlap .aperture-score-node.is-a .aperture-score-point { stroke: var(--model-a); }
.is-overlap .aperture-score-node.is-a .aperture-score-core { fill: var(--model-a); }
.is-overlap .aperture-score-node.is-b .aperture-score-point { stroke: var(--model-b); }
.is-overlap .aperture-score-node.is-b .aperture-score-core { fill: var(--model-b); }
.is-overlap .aperture-baseline-point.is-a { stroke: var(--model-a); }
.is-overlap .aperture-baseline-point.is-b { stroke: var(--model-b); }
.comparison-delta-ribbon { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.comparison-delta-ribbon polygon { fill: color-mix(in srgb, var(--delta) 12%, transparent); stroke: var(--delta); stroke-width: .7; vector-effect: non-scaling-stroke; }
.comparison-delta-ribbon line { stroke: var(--delta); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.comparison-delta-ribbon text { fill: var(--delta); font: 8px var(--mono); letter-spacing: .04em; }
.comparison-delta-ribbon.is-selected { opacity: .95; }
.aperture-baseline-point { fill: var(--void-raised); stroke: var(--aperture-profile); stroke-width: 1; stroke-dasharray: 2 2; opacity: .65; vector-effect: non-scaling-stroke; }
.comparison-selection-layer { transform-origin: center; }
.comparison-selection-layer.is-entering { animation: comparison-channel-in 260ms cubic-bezier(.2, .75, .2, 1); }
.is-lines-only .comparison-source-membrane { opacity: 0; }

@keyframes comparison-channel-in {
  from { opacity: .15; transform: translateY(5px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.comparison-readout { display: grid; grid-template-columns: minmax(160px, .56fr) minmax(320px, 1fr) minmax(260px, .9fr) auto; gap: 18px clamp(22px, 3vw, 48px); align-items: center; padding: 22px clamp(22px, 3vw, 48px); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--void-raised) 94%, transparent); }
.comparison-readout > header,
.comparison-readout > footer { display: flex; justify-content: space-between; gap: 18px; color: var(--dim); font: 8px var(--mono); letter-spacing: .075em; text-transform: uppercase; }
.comparison-readout > header { grid-column: 1 / -1; }
.comparison-readout > footer { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.comparison-readout > header b,
.comparison-readout > footer b { color: var(--gold); font-weight: 400; text-align: right; }
.delta-inspector__title { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; margin: 55px 0 33px; }
.delta-inspector__title > span { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--line-strong); color: var(--gold); font: 9px var(--mono); }
.delta-inspector__title h2 { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2.2vw, 36px); font-weight: 400; line-height: 1; letter-spacing: -.035em; }
.comparison-readout .delta-inspector__title { margin: 0; }

.delta-pair { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.delta-pair article { min-width: 0; }
.delta-pair article:last-child { text-align: right; }
.delta-pair article > span,
.delta-pair article small,
.delta-pair__measure small { display: block; color: var(--dim); font: 8px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.delta-pair article strong { display: block; margin: 5px 0 3px; font: 400 28px/1 var(--serif); }
.delta-pair .is-a strong { color: var(--model-a-strong); }
.delta-pair .is-b strong { color: var(--model-b-strong); }
.delta-pair article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delta-pair__measure { text-align: center; }
.delta-pair__measure > span { color: var(--dim); font-size: 12px; }
.delta-pair__measure strong { display: block; margin: 2px 0; color: var(--delta); font: 500 12px var(--mono); }
.comparison-readout > p { margin: 0; color: var(--ash); font-size: 11px; line-height: 1.65; }

.delta-contributions { margin: 0; padding: 0; list-style: none; }
.delta-contributions li { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.delta-contributions span { overflow: hidden; color: var(--ash); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.delta-contributions b { color: var(--ivory); font: 400 9px var(--mono); }
.delta-contributions small { grid-column: 1 / -1; color: var(--dim); font: 8px var(--mono); text-transform: uppercase; }
.delta-inspector__action { align-self: stretch; display: flex; justify-content: space-between; align-items: center; min-width: 154px; margin: 0; padding: 14px 15px; border: 1px solid var(--line); background: transparent; color: var(--ivory); font: 9px var(--mono); letter-spacing: .065em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.delta-inspector__action:hover { color: var(--gold); }

.axis-weight-popover { position: absolute; z-index: 20; top: var(--quick-top, 120px); left: var(--quick-left, 50%); width: min(360px, calc(100% - 24px)); padding: 18px; border: 1px solid var(--gold-dim); background: color-mix(in srgb, var(--void-raised) 94%, transparent); color: var(--ivory); box-shadow: 0 28px 75px rgba(0, 0, 0, .32); backdrop-filter: blur(18px); }
.axis-weight-popover::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; content: ""; background: linear-gradient(var(--model-a), var(--gold), var(--model-b)); }
.axis-weight-popover[hidden] { display: none; }
.axis-weight-popover > header { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.axis-weight-popover > header span { color: var(--gold); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.axis-weight-popover h2 { margin: 5px 0 0; font: 400 27px/1 var(--serif); letter-spacing: -.03em; }
.axis-weight-popover > header button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); background: transparent; color: var(--ash); font-size: 19px; cursor: pointer; }
.axis-weight-popover > p { margin: 12px 0 5px; color: var(--dim); font: 8px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.quick-weight-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.quick-weight-row span { min-width: 0; }
.quick-weight-row b,
.quick-weight-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-weight-row b { font-size: 10px; font-weight: 450; }
.quick-weight-row small { margin-top: 3px; color: var(--dim); font: 7px var(--mono); text-transform: uppercase; }
.quick-weight-row output { color: var(--gold); font: 9px var(--mono); }
.quick-weight-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--gold); }
.quick-weight-more { margin: 0; padding: 8px 0; border-top: 1px solid var(--line-soft); color: var(--dim); font: 8px var(--mono); text-transform: uppercase; }
.axis-weight-popover > footer { display: grid; grid-template-columns: .85fr 1.15fr; margin: 9px -18px -18px; border-top: 1px solid var(--line); }
.axis-weight-popover > footer button { min-height: 48px; padding: 8px 12px; border: 0; background: transparent; color: var(--ash); font: 8px/1.4 var(--mono); text-align: left; text-transform: uppercase; cursor: pointer; }
.axis-weight-popover > footer button + button { display: flex; justify-content: space-between; align-items: center; border-left: 1px solid var(--line); color: var(--ivory); }
.axis-weight-popover > footer button:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); color: var(--gold); }
.axis-weight-popover > footer button:disabled { opacity: .38; cursor: default; }
.comparison-readout .delta-contributions { display: none; }

.weight-studio {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--void);
  color: var(--ivory);
}

.weight-studio::backdrop { background: rgba(2, 3, 5, .82); backdrop-filter: blur(7px); }
.weight-studio__shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.weight-studio__head { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 34px; align-items: center; min-height: 91px; padding: 16px clamp(20px, 3vw, 52px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--void-raised) 92%, transparent); }
.weight-studio__head > div > span { color: var(--gold); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.weight-studio__head h2 { margin: 7px 0 0; font: 400 clamp(25px, 2.7vw, 42px)/1 var(--serif); letter-spacing: -.04em; }
.weight-studio__head > button { min-height: 44px; padding: 0 15px; border: 1px solid var(--line); background: transparent; color: var(--ash); font: 9px var(--mono); text-transform: uppercase; cursor: pointer; }
.weight-studio__head > button span { margin-left: 16px; color: var(--dim); }
.weight-studio__head > button:hover { border-color: var(--gold-dim); color: var(--gold); }

.weight-studio__body { display: grid; grid-template-rows: minmax(440px, 52vh) minmax(390px, 1fr); min-height: 0; overflow: auto; }
.weight-studio__preview { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(110deg, color-mix(in srgb, var(--model-a) 3%, transparent), transparent 47%, color-mix(in srgb, var(--model-b) 3%, transparent)); }
.weight-studio__preview > div { min-height: 0; }
.weight-studio__charts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 100%; }
.weight-studio__charts::after { position: absolute; top: 7%; bottom: 7%; left: 50%; width: 1px; content: ""; background: linear-gradient(transparent, var(--line), transparent); }
.weight-studio .comparison-aperture-card.is-compact { position: relative; grid-template-rows: minmax(0, 1fr); }
.weight-studio .is-compact .comparison-aperture-stage { height: auto; min-height: 0; }
.weight-studio .is-compact figcaption { position: absolute; z-index: 2; top: 16px; left: clamp(16px, 2vw, 30px); display: block; width: max-content; max-width: 42%; margin: 0; padding: 9px 11px; border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--void-raised) 88%, transparent); backdrop-filter: blur(8px); }
.weight-studio .is-compact figcaption > * { display: block; }
.weight-studio .is-compact figcaption b { margin: 4px 0; font-size: 16px; }
.weight-studio__preview > footer { display: flex; justify-content: space-between; gap: 24px; padding: 10px clamp(22px, 3vw, 50px); border-top: 1px solid var(--line-soft); color: var(--dim); font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.weight-studio__preview > footer b { color: var(--gold); font-weight: 400; }

.weight-studio .composer-shell { grid-template-columns: 205px minmax(0, 1fr); min-height: 0; border: 0; }
.weight-studio .composer-axis-list { position: sticky; top: 0; align-self: start; min-height: 100%; }
.weight-studio .composer-workspace { align-self: start; padding-top: 28px; }
.weight-studio .composer-toolbar h3 { font-size: clamp(28px, 3vw, 46px); }

.comparison-section { margin-top: clamp(100px, 10vw, 160px); padding-top: clamp(74px, 8vw, 120px); border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.comparison-section__head { display: grid; grid-template-columns: minmax(410px, 1.15fr) minmax(300px, .85fr); gap: 50px clamp(70px, 9vw, 150px); align-items: end; margin-bottom: clamp(45px, 5vw, 72px); }
.comparison-section__head h2 { max-width: 800px; margin: 14px 0 0; font-family: var(--serif); font-size: clamp(44px, 5vw, 75px); font-weight: 400; line-height: .94; letter-spacing: -.05em; }
.comparison-section__head > p { margin: 0; color: var(--ash); font-size: 12px; line-height: 1.75; }
.comparison-section__head--compact h2 { max-width: 700px; font-size: clamp(41px, 4.2vw, 65px); }

.composer-shell { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); min-height: 720px; border: 1px solid var(--line); }
.composer-axis-list { padding: 18px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--void-raised) 90%, transparent); }
.composer-axis-list button { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 64px; padding: 9px 8px; border: 0; border-bottom: 1px solid var(--line-soft); background: transparent; color: var(--ash); text-align: left; cursor: pointer; }
.composer-axis-list button::before { position: absolute; top: 0; bottom: 0; left: -18px; width: 2px; content: ""; background: transparent; }
.composer-axis-list button[aria-pressed="true"] { color: var(--ivory); }
.composer-axis-list button[aria-pressed="true"]::before { background: var(--gold); }
.composer-axis-list button > span { color: var(--dim); font: 8px var(--mono); }
.composer-axis-list button > b { font-size: 10px; font-weight: 450; }
.composer-axis-list button > em { color: var(--gold); font: 400 9px var(--mono); font-style: normal; }

.composer-workspace { min-width: 0; padding: clamp(22px, 3vw, 44px); }
.composer-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.composer-toolbar > div:first-child > span { color: var(--gold); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.composer-toolbar h3 { margin: 8px 0 7px; font: 400 clamp(27px, 3vw, 42px)/1 var(--serif); letter-spacing: -.035em; }
.composer-toolbar p { margin: 0; color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }
.composer-toolbar p b { color: var(--ivory); font-weight: 400; }
.composer-presets { display: flex; }
.composer-presets button { min-height: 52px; padding: 8px 13px; border: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.composer-presets button + button { margin-left: -1px; }
.composer-presets button b,
.composer-presets button span { display: block; font-family: var(--mono); font-size: 8px; font-weight: 400; line-height: 1.45; text-transform: uppercase; }
.composer-presets button b { color: var(--ivory); }
.composer-presets button span { margin-top: 2px; color: var(--dim); }
.composer-presets button.is-active { position: relative; z-index: 1; border-color: var(--gold-dim); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.composer-presets button.is-active span { color: var(--gold); }

.composer-search { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; min-height: 61px; margin-top: 25px; padding: 0 16px; border: 1px solid var(--line); }
.composer-search > span { color: var(--dim); font: 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.composer-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ivory); font-size: 12px; }
.composer-search input::placeholder { color: var(--dim); }
.composer-search:focus-within { border-color: var(--gold-dim); }
.composer-search kbd { padding: 3px 6px; border: 1px solid var(--line); color: var(--dim); font: 8px var(--mono); }

.composer-columns { display: grid; grid-template-columns: minmax(260px, 1fr) 170px minmax(210px, .75fr); gap: 18px; padding: 25px 14px 10px; color: var(--dim); font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.benchmark-row { display: grid; grid-template-columns: minmax(260px, 1fr) 170px minmax(210px, .75fr); gap: 18px; align-items: center; min-height: 82px; padding: 13px 14px; border-top: 1px solid var(--line-soft); }
.benchmark-row.is-excluded { opacity: .47; }
.benchmark-identity { display: grid; grid-template-columns: 20px 1fr; gap: 13px; align-items: center; min-width: 0; cursor: pointer; }
.benchmark-identity input { width: 14px; height: 14px; margin: 0; accent-color: var(--gold); }
.benchmark-identity b,
.benchmark-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benchmark-identity b { color: var(--ivory); font-size: 11px; font-weight: 450; }
.benchmark-identity small { margin-top: 4px; color: var(--dim); font: 8px var(--mono); text-transform: uppercase; }
.benchmark-reading { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.benchmark-reading span { min-width: 0; padding-left: 9px; border-left: 1px solid var(--line); color: var(--dim); font: 8px var(--mono); text-transform: uppercase; }
.benchmark-reading b { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; }
.benchmark-reading .is-a b { color: var(--model-a-strong); }
.benchmark-reading .is-b b { color: var(--model-b-strong); }
.benchmark-weight { display: grid; grid-template-columns: 1fr 62px; gap: 12px; align-items: center; }
.benchmark-weight input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.benchmark-weight input[type="number"] { width: 62px; min-height: 34px; padding: 0 5px; border: 1px solid var(--line); background: transparent; color: var(--ivory); font: 9px var(--mono); text-align: right; }
.benchmark-row.is-excluded .benchmark-weight { pointer-events: none; }
.benchmark-row.is-excluded .benchmark-weight input { opacity: .3; }
.composer-empty { margin: 0; padding: 34px 14px; border-top: 1px solid var(--line-soft); color: var(--ash); font-size: 11px; }
.composer-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font: 8px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.composer-note b { color: var(--model-b-strong); font-weight: 400; }

.difference-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.difference-list li { display: grid; grid-template-columns: 40px minmax(170px, .8fr) minmax(220px, 1.7fr) auto; gap: 20px; align-items: center; min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.difference-list li:hover,
.difference-list li:focus-within { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 5%, transparent), transparent 55%); }
.difference-list .rank { color: var(--dim); font: 8px var(--mono); }
.difference-list button { padding: 0; border: 0; background: transparent; color: var(--ivory); font-family: var(--serif); font-size: 20px; text-align: left; cursor: pointer; }
.difference-track { position: relative; height: 10px; }
.difference-track::before { position: absolute; top: 4px; right: 0; left: 0; height: 1px; content: ""; background: var(--line); }
.difference-track i { position: absolute; top: 1px; left: 50%; width: var(--delta-width); height: 7px; background: var(--delta-color); transform-origin: left center; transform: var(--delta-transform); opacity: .75; }
.difference-track i::before { position: absolute; top: -2px; right: -1px; width: 1px; height: 11px; content: ""; background: var(--delta-color); }
.difference-values { display: flex; gap: 11px; color: var(--dim); font: 9px var(--mono); white-space: nowrap; }
.difference-values b { font-weight: 400; }
.difference-values .is-a { color: var(--model-a-strong); }
.difference-values .is-b { color: var(--model-b-strong); }
.difference-values .is-delta { min-width: 55px; color: var(--delta); text-align: right; }

.comparison-table-disclosure { margin-top: 32px; }
.comparison-table-disclosure summary { width: fit-content; color: var(--ash); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.comparison-table-wrap { margin-top: 18px; overflow-x: auto; }
.comparison-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 11px; }
.comparison-table caption { padding-bottom: 13px; color: var(--dim); font: 8px var(--mono); text-align: left; text-transform: uppercase; }
.comparison-table th,
.comparison-table td { padding: 13px 10px 13px 0; border-top: 1px solid var(--line-soft); text-align: left; }
.comparison-table th { color: var(--ash); font: 8px var(--mono); text-transform: uppercase; }
.comparison-table td:not(:first-child) { font-family: var(--mono); }

.comparison-error { align-self: center; max-width: 620px; margin: auto; padding: 40px; color: var(--ash); text-align: center; }
.comparison-error b { display: block; margin-bottom: 12px; color: var(--ivory); font-family: var(--serif); font-size: 30px; font-weight: 400; }

@media (max-width: 1240px) {
  .comparison-controls { grid-template-columns: 1fr 60px 1fr; }
  .comparison-view { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; padding: 14px 0; border-top: 1px solid var(--line-soft); border-left: 0; }
  .composer-columns,
  .benchmark-row { grid-template-columns: minmax(240px, 1fr) 145px minmax(190px, .7fr); }
}

@media (max-width: 1360px) {
  .chart-pair { padding-inline: 0; }
}

@media (max-width: 980px) {
  .comparison-intro,
  .comparison-section__head { grid-template-columns: 1fr; align-items: start; }
  .comparison-stage { min-height: 620px; }
  .composer-shell { grid-template-columns: 1fr; }
  .composer-axis-list { display: flex; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .composer-axis-list button { flex: 0 0 155px; }
  .composer-axis-list button::before { top: auto; right: 8px; bottom: -10px; left: 8px; width: auto; height: 2px; }
}

@media (max-width: 760px) {
  .comparison-nav .lab-compare { display: none; }
  .comparison-main { padding-top: 56px; }
  .comparison-intro { gap: 36px; }
  .comparison-intro h1 { font-size: clamp(58px, 17vw, 77px); }
  .comparison-intro__reading p { font-size: 25px; }
  .comparison-controls { grid-template-columns: 1fr 48px; }
  .comparison-model { padding: 14px 0; }
  .comparison-model--a { grid-column: 1 / -1; border-bottom: 1px solid var(--line-soft); }
  .comparison-model--b { grid-column: 1 / 2; padding-left: 0; border-left: 0; }
  .comparison-swap { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line-soft); }
  .comparison-view { grid-template-columns: 1fr auto; }
  .comparison-view legend { grid-column: 1 / -1; }
  .comparison-view > div { overflow-x: auto; }
  .comparison-view button { white-space: nowrap; }
  .comparison-instrument,
  .comparison-stage { min-height: 0; }
  .chart-pair { grid-template-columns: 1fr; padding: 20px 0 28px; }
  .chart-pair::after { top: 50%; right: 8%; bottom: auto; left: 8%; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
  .chart-single { padding: 10px 0 24px; }
  .comparison-section { margin-top: 92px; padding-top: 70px; }
  .comparison-section__head { gap: 30px; }
  .comparison-section__head h2 { font-size: clamp(43px, 12vw, 58px); }
  .composer-axis-list button { flex-basis: 132px; grid-template-columns: 28px 1fr; }
  .composer-axis-list button > em { display: none; }
  .composer-workspace { padding: 20px 14px 28px; }
  .composer-toolbar { grid-template-columns: 1fr; }
  .composer-presets { width: 100%; }
  .composer-presets button { flex: 1; }
  .composer-search { grid-template-columns: 1fr auto; }
  .composer-search > span { grid-column: 1 / -1; padding-top: 12px; }
  .composer-columns { display: none; }
  .benchmark-row { grid-template-columns: 1fr; gap: 13px; padding: 18px 4px; }
  .benchmark-reading { padding-left: 33px; }
  .benchmark-weight { padding-left: 33px; }
  .difference-list li { grid-template-columns: 28px 1fr auto; gap: 12px; padding: 15px 0; }
  .difference-track { grid-column: 2 / -1; grid-row: 2; }
  .difference-values { grid-column: 3; grid-row: 1; }
  .difference-values .is-a,
  .difference-values .is-b { display: none; }
}

@media (max-width: 430px) {
  .comparison-model select { font-size: 17px; }
  .comparison-view { grid-template-columns: 1fr; }
  .comparison-view > label { padding: 5px 0; }
  .delta-pair { grid-template-columns: 1fr 58px 1fr; }
  .delta-pair article strong { font-size: 24px; }
}

@media (max-width: 1120px) {
  .comparison-readout { grid-template-columns: minmax(170px, .6fr) minmax(320px, 1.2fr) auto; }
  .comparison-readout > p { display: none; }
  .weight-studio__body { grid-template-rows: minmax(420px, 50vh) minmax(420px, 1fr); }
}

@media (max-width: 900px) {
  .comparison-aperture-stage { height: clamp(440px, 57vw, 530px); min-height: 440px; }
  .comparison-readout { grid-template-columns: 1fr 1.4fr; }
  .comparison-readout .delta-inspector__title,
  .comparison-readout .delta-pair { grid-column: auto; }
  .comparison-readout .delta-inspector__action { grid-column: 1 / -1; min-height: 48px; }
  .weight-studio__head h2 { max-width: 680px; }
  .weight-studio__body { grid-template-rows: auto auto; }
  .weight-studio__preview { min-height: 680px; }
  .weight-studio__charts { grid-template-columns: 1fr; }
  .weight-studio__charts::after { top: 50%; right: 8%; bottom: auto; left: 8%; width: auto; height: 1px; }
  .weight-studio .composer-shell { grid-template-columns: 1fr; }
  .weight-studio .composer-axis-list { position: static; min-height: 0; }
}

@media (max-width: 760px) {
  .comparison-stage { overflow: visible; }
  .chart-pair { min-height: 0; }
  .comparison-aperture-stage { height: 480px; min-height: 480px; }
  .comparison-aperture-card figcaption { margin-inline: 20px; }
  .comparison-readout { grid-template-columns: 1fr; padding: 22px 20px; }
  .comparison-readout .delta-inspector__title,
  .comparison-readout .delta-pair,
  .comparison-readout .delta-inspector__action { grid-column: 1; }
  .comparison-readout .delta-inspector__title { margin-top: 4px; }
  .comparison-readout > footer { display: grid; }
  .axis-weight-popover { position: fixed; top: auto !important; right: 12px; bottom: 12px; left: 12px !important; width: auto; max-height: calc(100dvh - 24px); overflow: auto; }
  .weight-studio__head { align-items: start; min-height: 0; padding-block: 13px; }
  .weight-studio__head h2 { font-size: 23px; }
  .weight-studio__head > button { flex: 0 0 auto; }
  .weight-studio__preview { min-height: 620px; }
  .weight-studio .is-compact figcaption { max-width: 65%; }
  .weight-studio .is-compact .comparison-aperture-stage { min-height: 0; }
  .weight-studio__preview > footer { display: grid; }
}

@media (max-width: 430px) {
  .comparison-aperture-stage { height: 390px; min-height: 390px; }
  .comparison-aperture-card figcaption b { font-size: 17px; }
  .axis-weight-popover > footer { grid-template-columns: 1fr; }
  .axis-weight-popover > footer button + button { border-top: 1px solid var(--line); border-left: 0; }
  .weight-studio__head h2 { display: none; }
  .weight-studio__preview { min-height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-selection-layer.is-entering { animation: none; }
}