:root {
  color-scheme: dark;
  --compare-line: #314451;
  --compare-line-strong: #496777;
  --compare-surface: #111d29;
  --compare-text: #edf3f8;
  --compare-muted: #adbec9;
  --compare-accent: #55d6be;
  --compare-accent-2: #6fb6ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090f16;
  color: var(--compare-text);
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(85, 214, 190, 0.09), transparent 32rem),
    radial-gradient(circle at 88% 8%, rgba(111, 182, 255, 0.07), transparent 36rem),
    #090f16;
}

button, select, input { font: inherit; }

button, select {
  border: 1px solid var(--compare-line-strong);
  border-radius: 8px;
  color: var(--compare-text);
  background: linear-gradient(180deg, #1d2b39, #14202c);
}

button {
  min-height: 42px;
  cursor: pointer;
  font-weight: 720;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

button:not(:disabled):hover {
  border-color: var(--compare-accent);
  background: linear-gradient(180deg, #263d48, #19313b);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.19);
  transform: translateY(-1px);
}

button:not(:disabled):active { transform: translateY(0); }

button:disabled, select:disabled { cursor: not-allowed; opacity: 0.55; }

:focus-visible { outline: 3px solid var(--compare-accent-2); outline-offset: 3px; }

.compare-shell { max-width: 1800px; margin: 0 auto; padding: clamp(12px, 2.2vw, 30px); }

.compare-header {
  padding: 16px 20px;
  border: 1px solid rgba(85, 214, 190, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    #0d1721;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.compare-header-row,
.compare-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.compare-header-row { justify-content: space-between; }

.compare-brand img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 13px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 12px 28px rgba(0, 0, 0, 0.34);
}

.compare-header .eyebrow { margin: 0 0 4px; }

.back-link,
.compare-beta-off a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid rgba(85, 214, 190, 0.48);
  border-radius: 8px;
  color: #d9fff6;
  background: linear-gradient(180deg, #1d3440, #122530);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.back-link:hover,
.compare-beta-off a:hover {
  border-color: var(--compare-accent);
  background: linear-gradient(180deg, #275048, #163a38);
  box-shadow: 0 8px 20px rgba(85, 214, 190, 0.1);
  transform: translateY(-1px);
}

.back-link:active,
.compare-beta-off a:active { transform: translateY(0); }

.eyebrow {
  margin: 22px 0 5px;
  color: var(--compare-accent);
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.3rem); line-height: 1.17; }

.compare-header-description {
  max-width: 76ch;
  margin: 12px 0 0 68px;
  color: var(--compare-muted);
  line-height: 1.5;
}

.compare-beta-off {
  margin-top: 20px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--compare-line);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(85, 214, 190, 0.1), transparent 55%), var(--compare-surface);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.compare-beta-off h2 { margin: 0 0 8px; font-size: 1.2rem; }

.compare-beta-off p { margin: 0; color: var(--compare-muted); line-height: 1.65; }

.compare-beta-off a { margin-top: 16px; }

.compare-controls {
  display: grid;
  gap: 14px;
  margin: 20px 0 12px;
  padding: clamp(14px, 1.7vw, 22px);
  border: 1px solid var(--compare-line);
  border-radius: 14px;
  background: linear-gradient(130deg, rgba(111, 182, 255, 0.06), transparent 40%), var(--compare-surface);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
}

.compare-controls-heading,
.shared-controls-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
}

.compare-controls-heading h2,
.shared-controls-heading h2 {
  margin: 0;
  color: var(--compare-text);
  font-size: 0.98rem;
  line-height: 1.25;
}

.compare-controls-heading p,
.shared-controls-heading p {
  margin: 0;
  color: var(--compare-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.shared-controls-heading {
  margin-top: 2px;
  padding-top: 15px;
  border-top: 1px solid var(--compare-line);
}

.condition-pickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.condition-a {
  --side-accent: #55d6be;
  --side-border: rgba(85, 214, 190, 0.42);
  --side-tint: rgba(85, 214, 190, 0.12);
}

.condition-b {
  --side-accent: #6fb6ff;
  --side-border: rgba(111, 182, 255, 0.46);
  --side-tint: rgba(111, 182, 255, 0.13);
}

.condition-pickers label {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--side-border);
  border-radius: 10px;
  color: #d9e8ed;
  background: linear-gradient(180deg, var(--side-tint), rgba(5, 13, 20, 0.28));
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0.015em;
}

.condition-pickers select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; font-weight: 560; }

.condition-pickers select:not(:disabled):hover { border-color: var(--compare-accent); }

.selection-help {
  margin: -3px 1px 0;
  color: var(--compare-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.shared-controls {
  display: grid;
  grid-template-columns: minmax(235px, 1.05fr) minmax(230px, 1fr) minmax(285px, 1.2fr) minmax(180px, 0.72fr);
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border: 1px solid var(--compare-line);
  border-radius: 10px;
  background: rgba(5, 13, 20, 0.28);
}

.view-control, .conduction-control, .rate-control, .playback-controls {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-right: 1px solid var(--compare-line);
  border-radius: 0;
  background: transparent;
}

.playback-controls { border-right: 0; }

.view-control legend { padding: 0 5px; }

.view-control legend, .conduction-control .control-label, .rate-control > label, .playback-controls .control-label {
  margin-bottom: 8px;
  color: #d9e8ed;
  font-size: 0.8rem;
  font-weight: 760;
}

.rate-control > label { display: block; }

.segmented-control { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

.segmented-control button { border-radius: 0; }

.segmented-control button + button { margin-left: -1px; }

.segmented-control button:first-child { border-radius: 8px 0 0 8px; }

.segmented-control button:last-child { border-radius: 0 8px 8px 0; }

.segmented-control button, .conduction-control button { min-height: 42px; padding: 6px 9px; }

.conduction-control .control-label, .playback-controls .control-label { display: block; }

.conduction-control-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }

.conduction-control p, .rate-control p { margin: 9px 0 0; color: var(--compare-muted); font-size: 0.76rem; line-height: 1.4; }

.segmented-control button[aria-pressed="true"],
.conduction-control button[aria-pressed="true"],
.slow-motion-button[aria-pressed="true"] {
  border-color: #8df2d9;
  color: #06251e;
  background: linear-gradient(180deg, #9beedb, #55d6be);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 5px 14px rgba(85, 214, 190, 0.13);
}

.segmented-control button[aria-pressed="true"]:not(:disabled):hover,
.conduction-control button[aria-pressed="true"]:not(:disabled):hover,
.slow-motion-button[aria-pressed="true"]:not(:disabled):hover {
  background: linear-gradient(180deg, #aff8e6, #6ee5cd);
}

.rate-control-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 10px; min-height: 42px; }

.rate-control input { width: 100%; accent-color: var(--compare-accent); }

.rate-control output { color: #e9fff8; text-align: right; font-variant-numeric: tabular-nums; font-weight: 760; }

.playback-controls { display: grid; grid-template-columns: 1fr; align-content: start; gap: 6px; }

.playback-button { width: 100%; min-height: 42px; padding: 7px 10px; white-space: nowrap; }

#comparePlayPause:not(:disabled) {
  border-color: rgba(85, 214, 190, 0.68);
  background: linear-gradient(180deg, #227e6a, #125545);
}

#comparePlayPause:not(:disabled):hover { background: linear-gradient(180deg, #2b9a7e, #176b56); }

.compare-status {
  min-height: 1.3rem;
  margin: 12px 3px 14px;
  color: #c4e9dd;
  font-size: 0.85rem;
  line-height: 1.45;
}

.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }

.compare-pane {
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--compare-line);
  border-top: 3px solid var(--side-accent);
  border-radius: 14px;
  background: var(--compare-surface);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.17);
}

.pane-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 96px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--compare-line);
  background: linear-gradient(90deg, var(--side-tint), transparent 72%), #13222d;
}

.pane-letter {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid var(--side-accent);
  border-radius: 9px;
  color: #06251e;
  background: var(--side-accent);
  font-size: 0.86rem;
  font-weight: 850;
}

.pane-identity h2 { margin: 0; font-size: clamp(1rem, 2.6cqi, 1.2rem); line-height: 1.25; }

.visual-frame { height: 1120px; overflow: hidden; border-bottom: 1px solid var(--compare-line); background: #071015; }

.visual-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.pane-heading {
  padding: 14px 17px;
  border-bottom: 1px solid var(--compare-line);
  background: #13222d;
}

.pane-heading p { margin: 0; color: #c4d4dc; font-size: 0.84rem; line-height: 1.48; }

.pane-facts { display: grid; gap: 0; padding: 5px 17px 12px; }

.pane-facts p {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #c9dbe3;
  font-size: 0.82rem;
  line-height: 1.5;
}

.pane-facts p:not([id]) {
  display: grid;
  grid-template-columns: minmax(130px, 33%) minmax(0, 1fr);
  gap: 10px;
}

.pane-facts p:last-child { border-bottom: 0; }

.pane-facts strong { color: #e8f6f2; }

.pane-facts .motion-unavailable { color: #ffd6a3; }

.teaching-note {
  margin: 18px 0 0;
  padding: 13px 15px;
  border-left: 3px solid var(--compare-accent-2);
  border-radius: 0 8px 8px 0;
  color: var(--compare-muted);
  background: rgba(111, 182, 255, 0.06);
  font-size: 0.82rem;
  line-height: 1.5;
}

@container (max-width: 702px) {
  .visual-frame { height: 1320px; }
}

@container (max-width: 362px) {
  .visual-frame { height: 1400px; }
}

@media (max-width: 1260px) {
  .shared-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shared-controls > :nth-child(2n) { border-right: 0; }
  .shared-controls > :nth-child(-n + 2) { border-bottom: 1px solid var(--compare-line); }
}

@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
  .pane-identity { height: auto; min-height: 64px; }
}

@media (max-width: 620px) {
  .condition-pickers, .shared-controls { grid-template-columns: 1fr; }
  .shared-controls > * { border-right: 0; border-bottom: 1px solid var(--compare-line); }
  .shared-controls > :last-child { border-bottom: 0; }
  .compare-header { padding: 14px; }
  .compare-header-row, .compare-controls-heading, .shared-controls-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .compare-brand img { width: 46px; height: 46px; }
  .compare-header-description { margin-left: 0; }
  .compare-controls { gap: 11px; }
  .pane-identity, .pane-heading { padding-right: 14px; padding-left: 14px; }
  .pane-facts { padding-right: 14px; padding-left: 14px; }
  .pane-facts p:not([id]) { grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  button, .back-link, .compare-beta-off a { transition: none; }
}