.demo-body {
  --bg-canvas: var(--cq-canvas);
  --bg-surface: var(--cq-surface);
  --bg-dark: #091e32;
  --bg-dark-elevated: #102a44;
  --bg-dark-panel: #153554;
  --ink-primary: var(--cq-text);
  --ink-secondary: var(--cq-text-muted);
  --ink-muted: var(--cq-text-muted);
  --border-subtle: var(--cq-border);
  --border-strong: var(--cq-border-control);
  --accent-blue: var(--cq-accent);
  --accent-teal: #0b7a75;
  --accent-amber: var(--cq-warning);
  --accent-amber-bg: color-mix(in srgb, var(--cq-warning) 9%, var(--cq-surface));
  --accent-rust: var(--cq-danger);
  --accent-rust-bg: color-mix(in srgb, var(--cq-danger) 7%, var(--cq-surface));
  --accent-emerald: var(--cq-success);
  --accent-emerald-bg: color-mix(in srgb, var(--cq-success) 8%, var(--cq-surface));
  --font-sans: var(--cq-font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.demo-body {
  background: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  line-height: 1.55;
  margin: 0;
}











.demo-shell {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 max(3vw, 22px) 64px;
}

/* Hero & Andragogy Paradigm Shift Bar */
.demo-hero {
  background: linear-gradient(135deg, #091e32 0%, #103252 60%, #133c5e 100%);
  color: var(--cq-white);
  border-bottom: 1px solid #1e4263;
  padding: 36px max(3vw, 22px) 32px;
}

.demo-hero__inner {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: center;
}

.demo-kicker {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f3b359;
  margin-bottom: 10px;
}

.demo-hero h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  color: var(--cq-white);
}

.demo-hero h1 span {
  color: #8ab8de;
}

.demo-hero__lead {
  font-size: 16px;
  line-height: 1.6;
  color: #c7d9e8;
  margin: 0 0 20px;
  max-width: 65ch;
}

.demo-telemetry-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: .8125rem;
  color: #b4cadc;
  font-variant-numeric: tabular-nums;
}

.demo-telemetry-strip span strong {
  color: var(--cq-white);
  font-weight: 700;
}

/* Before vs After Interactive Toggle Card */
.paradigm-card {
  background: rgba(8, 25, 43, 0.78);
  border: 1px solid #2b547a;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

.paradigm-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.paradigm-card__title {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3b359;
}

.paradigm-switch {
  display: inline-flex;
  background: #061524;
  border: 1px solid #2b5073;
  border-radius: 7px;
  padding: 3px;
  gap: 4px;
}

.paradigm-switch button {
  background: transparent;
  border: 0;
  color: #9eb9d0;
  font-size: .8125rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 5px;
}

.paradigm-switch button[aria-pressed="true"] {
  background: #0866b8;
  color: var(--cq-white);
}

.paradigm-body {
  font-size: 13.5px;
  color: #d8e6f2;
}

.paradigm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.paradigm-point {
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #f3b359;
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
}

.paradigm-point strong {
  display: block;
  color: var(--cq-white);
  font-size: .8125rem;
  margin-bottom: 2px;
}

.paradigm-point small {
  color: #b4cadc;
  font-size: .8125rem;
  line-height: 1.4;
  display: block;
}

/* Workbench Switcher Bar */
.workbench-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px;
  margin: 24px 0 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  box-shadow: 0 6px 18px rgba(9, 30, 50, 0.05);
  position: sticky;
  top: calc(4rem + 8px);
  z-index: 20;
}

.wb-btn {
  background: #f6f9fb;
  border: 1px solid #dde6ee;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
  color: var(--ink-primary);
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.wb-btn[aria-pressed="true"] {
  background: var(--bg-dark);
  color: var(--cq-white);
  border-color: var(--bg-dark);
  box-shadow: 0 4px 12px rgba(9, 30, 50, 0.18);
}

.wb-btn__step {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a5300; /* --accent-amber is too light for 11px text on the pale card */
}

.wb-btn[aria-pressed="true"] .wb-btn__step {
  color: #f3b359;
}

.wb-btn__title {
  font-size: 14.5px;
  font-weight: 750;
  line-height: 1.25;
}

.wb-btn__sub {
  font-size: .8125rem;
  color: var(--ink-secondary);
}

.wb-btn[aria-pressed="true"] .wb-btn__sub {
  color: #b8cde0;
}

/* Two-Zone Simulation Layout */
.wb-stage {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 24px;
  align-items: start;
}

.wb-canvas-card,
.wb-control-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(9, 30, 50, 0.05);
}

.wb-card-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fafcfd;
}

.wb-card-head h2 {
  font-size: 20px;
  margin: 0;
  letter-spacing: -0.02em;
}

.wb-card-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-secondary);
}

.wb-card-body {
  padding: 22px;
}

/* Status Readout Badges (No Pill Slop - crisp industrial status blocks) */
.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--accent-emerald);
  background: var(--accent-emerald-bg);
  color: #0f5132;
  font-size: 13.5px;
  font-weight: 650;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}

.status-banner.is-caution {
  border-left-color: var(--accent-amber);
  background: var(--accent-amber-bg);
  color: #663c00;
}

.status-banner.is-stop {
  border-left-color: var(--accent-rust);
  background: var(--accent-rust-bg);
  color: #7a1c14;
}

/* Telemetry Readout Strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.kpi-cell {
  background: #f6f9fb;
  border: 1px solid #dce6ee;
  border-radius: 8px;
  padding: 11px 13px;
  font-variant-numeric: tabular-nums;
}

.kpi-cell small {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  margin-bottom: 4px;
}

.kpi-cell strong {
  display: block;
  font-size: 21px;
  line-height: 1.15;
  color: var(--ink-primary);
  font-family: var(--font-mono);
}

.kpi-cell span {
  display: block;
  font-size: .8125rem;
  color: var(--ink-secondary);
  margin-top: 3px;
}

/* SVG Stage Containers */
.svg-stage {
  background: #0b2035;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #1f4366;
  margin-bottom: 18px;
}

.svg-stage--light {
  background: #f8fafc;
  border-color: #d5e0e8;
}

.svg-stage svg {
  width: 100%;
  height: auto;
  display: block;
}

/* A phone reads the elevation's labels here, keyed to numbered markers. */
.svg-key {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: .8125rem;
  line-height: 1.45;
  color: #d0e2f2;
}

.svg-key li {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.svg-key b {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffd166;
  color: #0b2035;
  font-size: .8125rem;
}

.svg-key .svg-key__plain {
  color: #9fbcd6;
}

.svg-stage__caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: .8125rem;
  color: #b4cadc;
}

.svg-stage--light .svg-stage__caption {
  border-top-color: #dde6ee;
  color: var(--ink-secondary);
}

/* Controls & Sliders */
.control-group {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e6edf2;
}

.control-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.control-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.control-label output {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent-blue);
  font-weight: 800;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-btn {
  background: #f3f7fa;
  border: 1px solid #c5d5e2;
  border-radius: 6px;
  padding: 7px 11px;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
}


.chip-btn[aria-pressed="true"] {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--cq-white);
}

.range-input {
  width: 100%;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.range-ends {
  display: flex;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--ink-secondary);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Waterfall Bar */
.waterfall-box {
  background: #f8fafc;
  border: 1px solid #dce6ee;
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
}

.waterfall-bar {
  height: 22px;
  background: #e2ebf2;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  margin: 8px 0 10px;
}

.wf-segment {
  height: 100%;
}

.wf-net { background: #0b7a75; }
.wf-attach { background: #d89032; }
.wf-rigging { background: #6b3fa0; }
.wf-rope { background: repeating-linear-gradient(45deg, #7c8fa3 0 5px, #a9b8c7 5px 10px); }
.wf-over { background: #b42318; }

.waterfall-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .8125rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.waterfall-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}

/* Deferral / Hold Callout */
.deferral-callout {
  background: #fff8eb;
  border: 1px solid #e6c27a;
  border-left: 4px solid #c87a0a;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: .8125rem;
  color: #5c3804;
  margin-top: 14px;
}

.deferral-callout strong {
  display: block;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* Source Proof Drawer / Buttons */
.source-proof-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e4ecf2;
}

.proof-btn {
  background: var(--cq-white);
  border: 1px solid #b8cad8;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--ink-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}


/* Workbench 2: Cab & LMI Twin */
.lmi-screen {
  background: #07192b;
  border: 2px solid #2b4f73;
  border-radius: 10px;
  padding: 16px;
  color: #e6f1fa;
  font-family: var(--font-mono);
  margin-bottom: 18px;
}

.lmi-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #1d3c5c;
  font-size: .8125rem;
}

.lmi-moment-bar {
  margin: 12px 0;
}

.lmi-moment-track {
  height: 18px;
  background: #102a44;
  border: 1px solid #2e5378;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.lmi-moment-fill {
  height: 100%;
  background: linear-gradient(90deg, #198754 0%, #198754 85%, #e09f24 90%, #dc3545 100%);
}

.lmi-readout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.lmi-cell {
  background: #0d253d;
  border: 1px solid #23476b;
  border-radius: 6px;
  padding: 10px;
}

.lmi-cell small {
  display: block;
  font-size: .8125rem;
  color: #8eb2d1;
  text-transform: uppercase;
}

.lmi-cell strong {
  display: block;
  font-size: 20px;
  margin-top: 3px;
  color: var(--cq-white);
}

.lmi-cell.is-alert {
  background: #421216;
  border-color: #e05252;
}

.lmi-cell.is-alert strong {
  color: #ff9494;
}

.lmi-msg-window {
  background: #04101c;
  border: 1px solid #2b5073;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: #80e5b6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.lmi-msg-window.is-warning {
  color: #ffd166;
  border-color: #d89032;
}

.lmi-msg-window.is-danger {
  color: #ff7b7b;
  border-color: #e05252;
  background: #2b0b0e;
}

.direction-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.dir-pill {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 700;
  text-align: center;
  background: #102e26;
  border: 1px solid #246b54;
  color: #88f0c8;
}

.dir-pill.is-locked {
  background: #3b1216;
  border-color: #9e2a2b;
  color: #ff9b9b;
}

/* Workbench 3: Stability Permission Table Grid */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.perm-card {
  border: 1px solid #d5e0e8;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.perm-card small {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.perm-card strong {
  display: block;
  font-size: 15px;
  margin-top: 4px;
}

.perm-card.is-allowed {
  background: var(--accent-emerald-bg);
  border-color: #95d5b2;
  color: #0f5132;
}

.perm-card.is-forbidden {
  background: var(--accent-rust-bg);
  border-color: #f1aeb5;
  color: #7a1c14;
}

.perm-card.is-held {
  background: #fff6e0;
  border-color: #f0c674;
  color: #6b4a00;
}

/* Workbench 4: Scenario Simulator */
.scenario-option {
  width: 100%;
  text-align: left;
  background: #f8fafc;
  border: 1px solid #c5d5e2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: block;
}


.scenario-option.is-selected-correct {
  background: var(--accent-emerald-bg);
  border-color: var(--accent-emerald);
  border-left-width: 5px;
}

.scenario-option.is-selected-wrong {
  background: var(--accent-rust-bg);
  border-color: var(--accent-rust);
  border-left-width: 5px;
}

.scenario-option strong {
  display: block;
  font-size: 14.5px;
  margin-bottom: 4px;
  color: var(--ink-primary);
}

.scenario-option span {
  display: block;
  font-size: 13px;
  color: var(--ink-secondary);
}

/* Portal Showcase Banner on index.html */
.demo-spotlight {
  background: linear-gradient(135deg, #082036 0%, #0f3556 100%);
  color: var(--cq-white);
  border-radius: 14px;
  padding: 32px;
  margin: 0 0 48px;
  border: 1px solid #244b6e;
  box-shadow: 0 16px 36px rgba(8, 32, 54, 0.16);
}

.demo-spotlight__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: center;
}

.demo-spotlight h2 {
  color: var(--cq-white);
  font-size: clamp(26px, 3vw, 36px);
  margin: 6px 0 12px;
}

.demo-spotlight p {
  color: #c5d8e8;
  font-size: 15.5px;
  margin: 0 0 20px;
}

.demo-spotlight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.demo-spotlight__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.demo-pillar-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 14px;
  color: #e4eff7;
  text-decoration: none;
}


.demo-pillar-card small {
  display: block;
  color: #f3b359;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.demo-pillar-card strong {
  display: block;
  color: var(--cq-white);
  font-size: 14px;
  margin-bottom: 4px;
}

.demo-pillar-card span {
  display: block;
  font-size: .8125rem;
  color: #b7cde0;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .demo-hero__inner,
  .wb-stage,
  .demo-spotlight__grid {
    grid-template-columns: 1fr;
  }
  .workbench-bar {
    grid-template-columns: 1fr 1fr;
    position: static;
  }
  .kpi-strip,
  .lmi-readout-grid,
  .direction-matrix {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .workbench-bar,
  .paradigm-grid,
  .perm-grid,
  .demo-spotlight__pillars {
    grid-template-columns: 1fr;
  }
  /* Give the drawings the width: less card and stage padding on a phone. */
  .wb-card-body {
    padding: 12px;
  }
  .svg-stage {
    padding: 8px;
  }
}

/* ---------- the site's floor, over the studio's own parts ----------
   Every control an operator can reach is at least --cq-touch (44px) on its
   short side, and no text is under 13px; the 3D explorer's own stylesheet
   (ck1600-3d.js) is written first, so these carry the page's class. */
.demo-unit{display:grid;gap:.125rem;margin:0 0 .75rem;color:var(--board-muted, #b8cde0);font-size:var(--cq-type-sm)}
.demo-unit strong{color:var(--cq-white);font-size:1rem}
.demo-course{margin:1rem 0}
.demo-body :is(.ck3d-btn,.ck3d-sub,.chip-btn,.proof-btn,.paradigm-switch button,.wb-btn){min-height:var(--cq-touch);min-width:var(--cq-touch)}
.demo-body .ck3d-page a{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch)}
.demo-body :is(.ck3d-btn,.ck3d-sub,.chip-btn,.proof-btn){display:inline-flex;align-items:center;justify-content:center;gap:.375rem;font-size:.875rem}
.demo-body :is(input[type=range],input[type=number],input[type=text],select){min-height:var(--cq-touch)}
.demo-body :is(.ck3d-badge,.ck3d-kicker,.ck3d-subhead,.ck3d-detail-kicker){font-size:.8125rem}
.demo-body dt{font-size:.8125rem}
.demo-cite{color:var(--cq-text-muted);font-size:.8125rem}
/* At 200% zoom the studio's opening column keeps to the screen: it shrinks and its words wrap. */
@media (max-width: 22.4375rem) {
  .demo-hero__inner{grid-template-columns:minmax(0,1fr)}
  .demo-hero__inner>*{min-width:0;overflow-wrap:break-word}
  .demo-hero{padding-inline:12px}
  .kpi-strip{grid-template-columns:minmax(0,1fr)!important}
  .paradigm-switch{flex-wrap:wrap}
  .paradigm-card__header{flex-wrap:wrap}
  .demo-body code{overflow-wrap:anywhere}
}

/* The workbench bar holds at the top only where its six workbenches fit in
   one row and the screen keeps most of its height for the workbench: 1280px
   wide or more and 736px tall or more. There it sits under the site header,
   not behind it, and what the keyboard brings into view lands below both.
   Anywhere else - an iPad on its side, where the bar is three rows and over
   half the screen, or a narrower window - it scrolls with the page. */
@media (max-width: 1279px), (max-height: 45.9375rem) {
  .workbench-bar{position:static}
}
@media (min-width: 1280px) and (min-height: 46rem) {
  html:has(.demo-body){scroll-padding-top:17rem}
}

/* The OEM page a proof button opens, drawn as a crane's workspace draws its
   source pages: the title and a 44px Close stay in view while the page
   scrolls under them. The boundary closes the page as on every library page. */
#proofDialog{width:min(62.5rem,96vw);max-width:none;max-height:92vh;max-height:92dvh;padding:0;border:0;border-radius:var(--cq-radius-lg);background:var(--cq-surface);color:var(--cq-text);box-shadow:var(--cq-shadow-lg)}
#proofDialog::backdrop{background:color-mix(in srgb,var(--cq-text) 70%,transparent)}
#proofDialog .dialog-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1rem;border-bottom:1px solid var(--cq-border);background:var(--cq-surface)}
#proofDialog .dialog-bar button{display:inline-grid;flex:none;place-items:center;min-width:var(--cq-touch);min-height:var(--cq-touch);border:1px solid var(--cq-border-control);border-radius:var(--cq-radius-md);background:var(--cq-surface);color:var(--cq-text);cursor:pointer}
#proofDialog .dialog-body{padding:.875rem 1rem}
#proofDialog .dialog-body p{margin:0 0 .5rem;font-size:var(--cq-type-sm)}
#proofDialog .out-link{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--cq-touch);margin-bottom:.5rem;color:var(--cq-accent);font-weight:700}
#proofDialog .dialog-body img{display:block;width:100%;height:auto;border:1px solid var(--cq-border)}
.demo-body .boundary{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--cq-border);color:var(--cq-text-muted);font-size:var(--cq-type-sm);line-height:1.6}

/* Hover only where a pointer can hover, so a tap never leaves a control lit;
   and nothing moves: no chart bar grows into a value, no card lifts. A chosen
   workbench, chip or answer keeps its own colours under the pointer: the light
   hover fill behind their white or tinted words would make them unreadable. */
@media (hover: hover) {
  #proofDialog .dialog-bar button:hover{border-color:var(--cq-accent)}
  #proofDialog .out-link:hover{text-decoration:underline}
  :is(.wb-btn,.chip-btn):not([aria-pressed="true"]):hover,.proof-btn:hover,.scenario-option:not(.is-selected-correct,.is-selected-wrong):hover{border-color:var(--cq-accent);background:color-mix(in srgb,var(--cq-accent) 8%,var(--cq-surface))}
  .proof-btn:hover{color:var(--cq-accent)}
  .demo-pillar-card:hover{background:color-mix(in srgb,var(--cq-white) 12%,transparent)}
}