body {
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background .35s, color .35s;
}

@media (max-width: 800px) {
  .twin-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 84px;
  }
}

/* ══════════════════════════════════════════
   HEADER (matches wzari/contact pattern)
   ══════════════════════════════════════════ */
/* page-header styles moved to components.css */

/* Centered brand + question counter (desktop only; enabled in the ≥1000px block) */
.page-header__center {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.ph-brand {
  font-size: .84rem;
}
.ph-counter {
  margin-top: 3px;
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Counter only makes sense inside a question */
body[data-view="twin"] .ph-counter { visibility: hidden; }

/* ── Hamburger button ── */
.hamburger-btn {
  position: fixed;
  top: 14px; left: 16px;
  width: 40px; height: 40px;
  border-radius: 14px; border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary);
  transition: all .2s; -webkit-tap-highlight-color: transparent;
  z-index: 110;
}
[dir="ltr"] .hamburger-btn { left: auto; right: 16px; }
.hamburger-btn:active {
  box-shadow: var(--shadow-inset); transform: scale(.94);
}
.hamburger-btn svg { transition: transform .25s; }
.hamburger-btn.open svg { transform: rotate(90deg); }

/* ── Menu dropdown ── */
.menu-overlay {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(0,0,0,.15);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

.menu-dropdown {
  position: fixed;
  top: 62px; left: 16px;
  width: 220px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-raised), 0 12px 40px rgba(0,0,0,.12);
  padding: 14px;
  z-index: 110;
  opacity: 0; transform: scale(.92) translateY(-8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; gap: 8px;
}
[dir="ltr"] .menu-dropdown { left: auto; right: 16px; }
.menu-dropdown.open {
  opacity: 1; transform: scale(1) translateY(0);
  pointer-events: auto;
}
.menu-section { display: flex; flex-direction: column; gap: 6px; }
.menu-label {
  font-size: .65rem; font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .03em; text-transform: uppercase;
  padding: 0 4px;
}
.menu-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
}
.menu-divider {
  height: 1px; background: var(--surface);
  box-shadow: var(--shadow-inset);
  border-radius: 1px; margin: 4px 0;
}
.menu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: transparent; border: none;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  color: var(--text-primary); cursor: pointer;
  transition: all .15s; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-link:hover {
  background: var(--surface); box-shadow: var(--shadow-inset);
}
.menu-link:active { transform: scale(.97); }
.menu-link svg { flex-shrink: 0; color: var(--text-muted); }

/* ── Progress bar ── */
.progress-wrap {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding: 0 4px;
}
.progress-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.progress-bar {
  flex: 1; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--accent-gradient);
  transition: width .4s var(--ease-out);
}

/* ══════════════════════════════════════════
   VIEW 1 — DIGITAL TWIN (Exam Overview)
   ══════════════════════════════════════════ */
.view { display: none; }
.view.active { display: block; }

.twin-container {
  max-width: clamp(480px, 55vw, 660px);
  margin: 0 auto;
  padding: 16px 16px 80px;
}

.twin-title {
  font-size: .72rem; font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}
/* Fresher header lockup: bold round title over a quiet subject line */
#examTitle {
  font-size: .8rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
#examMeta {
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
#twinSubtitle { font-size: .64rem; font-weight: 700; color: var(--text-secondary); }

/* Question grid */
.twin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.twin-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 12px 16px;
  cursor: pointer;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  position: relative;
  overflow: hidden;
}
.twin-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}
.twin-card:active { transform: scale(.985); box-shadow: var(--shadow-inset); }

.twin-card.locked {
  opacity: .45;
  cursor: not-allowed;
}
.twin-card.locked:hover {
  box-shadow: var(--shadow-raised-sm);
  transform: none;
}

.twin-card.answered.correct {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px rgba(46, 125, 50, 0.3);
}
.twin-card.answered.incorrect {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px rgba(211, 47, 47, 0.3);
}

/* Bounding box for question numbers */
.twin-card__num-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-0);
  box-shadow: var(--shadow-inset), inset 0 -1px 0 0 rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 850;
  color: var(--text-primary);
  flex-shrink: 0;
  transition: all .2s ease;
}

.twin-card__num-box.correct {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(46, 125, 50, 0.25);
}
[data-theme="dark"] .twin-card__num-box.correct {
  color: #81c784;
  background: rgba(129, 199, 132, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(129, 199, 132, 0.25);
}

.twin-card__num-box.incorrect {
  color: #d32f2f;
  background: rgba(211, 47, 47, 0.08);
  box-shadow: inset 0 0 0 1.5px rgba(211, 47, 47, 0.25);
}
[data-theme="dark"] .twin-card__num-box.incorrect {
  color: #e57373;
  background: rgba(229, 115, 115, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(229, 115, 115, 0.25);
}

.twin-card__status {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.twin-card__status.ready {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(59,181,168,.3);
}
.twin-card__status.locked {
  background: var(--text-muted);
  opacity: .4;
}
.twin-card__status.answered {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(59,181,168,.4);
  position: relative;
}
.twin-card__status.answered::after {
  content: '✓'; position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .5rem; font-weight: 900;
  color: var(--accent-text);
}

.twin-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.twin-card__preview {
  font-size: .75rem;
  font-weight: 550;
  color: var(--text-secondary);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
}
[dir="ltr"] .twin-card__preview {
  text-align: left;
}
.twin-card.locked .twin-card__preview {
  font-style: italic;
  color: var(--text-muted);
}

/* Question-list formulas use the same semantic KaTeX renderer as the full
   question, but stay visually flat and compact inside the overview card. */
.twin-card__preview--rendered .smart-token,
.twin-card__preview--rendered .formula-panel {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0 .14em;
  padding: 0;
  border: 0;
  border-radius: 0;
  vertical-align: middle;
  color: var(--text-primary);
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.twin-card__preview--rendered .smart-token--formula:has(.op-limits),
.twin-card__preview--rendered .smart-token--formula:has(.mfrac),
.twin-card__preview--rendered .smart-token--formula:has(.sqrt),
.twin-card__preview--rendered .smart-token--piecewise,
.twin-card__preview--rendered .smart-token--formula-set {
  padding-block: 0;
}
.twin-card__preview--rendered .katex,
.twin-card__preview--rendered .formula-panel .katex {
  font-size: clamp(.82rem, 3.45vw, .96rem) !important;
  line-height: 1.15;
}
.twin-card__preview--rendered .katex-display {
  display: inline;
  margin: 0;
}
.twin-card__preview--rendered .katex-display > .katex {
  display: inline-block;
}
.twin-card__preview--rendered .fallback-math-run,
.twin-card__preview--rendered [data-formula-render-state="fallback"] {
  color: var(--text-primary);
}
.twin-card__ellipsis {
  white-space: nowrap;
}

/* Locked shake */
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.twin-card.shake { animation: card-shake .4s ease-in-out; }

/* ══════════════════════════════════════════
   VIEW 2 — QUESTION PRACTICE
   ══════════════════════════════════════════ */
.question-container {
  max-width: clamp(480px, 50vw, 600px);
  margin: 0 auto;
  padding: 16px 16px calc(128px + env(safe-area-inset-bottom, 0px));
}

/* Question text */
.q-text {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm), inset 0 1px 0 0 rgba(255,255,255,.35);
  padding: 20px;
  font-size: .85rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 2;
  margin-bottom: 20px;
  text-align: right;
}
[dir="ltr"] .q-text { text-align: left; }

.q-number-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: .72rem; font-weight: 800;
  margin-bottom: 10px;
  box-shadow: var(--shadow-raised-sm);
}

/* Answer options */
.options-grid {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 20px;
}

.option-btn {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm), inset 0 1px 0 0 rgba(255,255,255,.22);
  font-family: inherit; font-size: .8rem; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
  text-align: right;
}
[dir="ltr"] .option-btn { text-align: left; }
.option-btn:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); }
.option-btn:active { box-shadow: var(--shadow-inset); transform: scale(.98); }

.option-btn.selected {
  box-shadow: var(--shadow-raised), 0 0 0 2px var(--accent);
}

.option-btn.correct {
  box-shadow: var(--shadow-raised), 0 0 0 2.5px #3a8a3a;
  background: rgba(58,138,58,.08);
}
.option-btn.incorrect {
  box-shadow: var(--shadow-raised), 0 0 0 2.5px #c44;
  background: rgba(204,68,68,.06);
}
.option-btn.disabled {
  pointer-events: none;
}

.option-letter {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all .2s;
}
.option-btn.selected .option-letter {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-raised-sm);
}
.option-btn.correct .option-letter {
  background: #3a8a3a; color: #fff;
  box-shadow: 0 0 8px rgba(58,138,58,.3);
}
.option-btn.incorrect .option-letter {
  background: #c44; color: #fff;
  box-shadow: 0 0 8px rgba(204,68,68,.3);
}

.option-btn.issue-correct {
  cursor: default;
}
.issue-correct-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(58,138,58,.12);
  color: #287328;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
}
[data-theme="dark"] .issue-correct-label { color: #8bd27f; }

.option-content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.option-text { min-width: 0; }
.option-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}
.option-shell > .option-btn { height: 100%; }
.option-shell.has-zoom > .option-btn { padding-inline-end: 54px; }
.stem-shell { position: relative; min-width: 0; }
.stem-shell.has-zoom > .structured-render { padding-inline-end: 42px; }
.option-graph-asset {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 300px);
  margin: 6px 0 0;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}
[dir="rtl"] .option-graph-asset { margin-right: 0; margin-left: auto; }
[dir="ltr"] .option-graph-asset { margin-left: 0; margin-right: auto; }
.option-graph-asset .math-graph-svg,
.option-graph-asset img {
  width: 100%;
  height: auto;
  max-height: 210px;
  display: block;
  border-radius: var(--radius-sm);
}

/* Submit / Check button */
.submit-row {
  display: flex; gap: 10px;
  margin-bottom: 14px;
}

.check-btn {
  flex: 1;
  padding: 13px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  font-family: inherit; font-size: .82rem; font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.check-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.check-btn:active { transform: scale(.97); }
.check-btn:disabled {
  opacity: 1;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-inset);
  cursor: not-allowed;
  transform: none;
}

/* Result feedback */
.result-banner {
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size: .78rem; font-weight: 700;
  margin-bottom: 20px;
}
.result-banner.show { display: flex; }
.result-banner.correct {
  background: rgba(58,138,58,.1);
  color: #3a8a3a;
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px rgba(58,138,58,.2);
}
[data-theme="dark"] .result-banner.correct { color: #7dca70; background: rgba(58,138,58,.15); }
.result-banner.incorrect {
  background: rgba(204,68,68,.08);
  color: #c44;
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px rgba(204,68,68,.15);
}
[data-theme="dark"] .result-banner.incorrect { color: #f08080; background: rgba(204,68,68,.12); }

/* Backend-published question issues. Both layouts use the same component. */
.question-issue {
  margin-bottom: 16px;
}
.question-issue__notice {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: var(--shadow-raised-sm);
}
.question-issue__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
}
.question-issue__headline {
  margin: 0 0 5px;
  color: var(--text-primary);
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.55;
}
.question-issue__description,
.question-issue__error {
  margin: 0;
  color: var(--text-secondary);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.75;
}
.question-issue__error {
  margin-bottom: 9px;
  color: #b33b3b;
}
.question-issue__actions {
  display: grid;
  gap: 12px;
}
.question-issue__button {
  width: 100%;
}
.question-issue__calculation {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}
.question-issue__block {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 78%, var(--bg));
}
.question-issue__option {
  color: #287328;
  font-size: .68rem;
  font-weight: 800;
}
[data-theme="dark"] .question-issue__option { color: #8bd27f; }
.question-issue__math {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  direction: ltr;
}
.question-issue__math-line {
  display: inline-flex;
  max-width: 100%;
}
.question-issue__conclusion,
.question-issue__final {
  margin: 0;
  color: var(--text-secondary);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.75;
}
.question-issue__final {
  padding-top: 3px;
  color: var(--text-primary);
  font-weight: 800;
}

/* ── Explanation section ── */
.explanation {
  display: none;
  margin-bottom: 24px;
}
.explanation.show { display: block; }

.explanation-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.explanation-title {
  font-size: .78rem; font-weight: 700;
  color: var(--text-primary);
}

.explanation-summary {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 14px 18px;
  font-size: .75rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 12px;
}

/* Steps */
.step-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}

.step-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px 18px;
}
.step-card__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.step-badge {
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800;
  flex-shrink: 0;
}
.step-title {
  font-size: .72rem; font-weight: 700;
  color: var(--text-primary);
}
.step-body {
  font-size: .75rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
  padding-right: 36px;
}
[dir="ltr"] .step-body { padding-right: 0; padding-left: 36px; }

/* Key takeaway / common mistake */
.insight-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.insight-card__label {
  font-size: .62rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.insight-card__text {
  font-size: .72rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ── Explanation section cards (new pipeline-aligned) ── */
.expl-section {
  margin-bottom: 12px;
}
.expl-section__label {
  font-size: .55rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* Empathy card */
/* Blocker focus callout */
.blocker-callout {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
  padding: 10px 14px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Reality check card */
.reality-check-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-sm);
  border-inline-start: 3px solid #6b8e9b;
  padding: 10px 14px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Metaphor anchor cards */
.metaphor-anchor-card {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.metaphor-anchor-card__concept {
  font-size: .68rem; font-weight: 700;
  color: var(--accent);
  direction: ltr;
  text-align: start;
}
.metaphor-anchor-card__metaphor {
  font-size: .75rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.6;
}
.metaphor-anchor-card__why {
  font-size: .68rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.7;
}
.metaphor-anchor-card__math {
  font-size: .65rem; font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.7;
}
.metaphor-anchor-card__limit {
  font-size: .6rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 2px;
}

/* Curiosity layer type tag */
.curiosity-type-tag {
  display: inline-block;
  font-size: .5rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  background: rgba(59,181,168,.08);
  border-radius: 100px;
  padding: 2px 8px;
  margin-bottom: 4px;
  direction: ltr;
}
.curiosity-card__title {
  font-size: .72rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.curiosity-card__body {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 6px;
}

/* Empathy closing note */
.empathy-closing {
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
  padding: 10px 14px;
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.8;
}

.empathy-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 14px 18px;
  font-size: .74rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.9;
  border-inline-start: 3px solid var(--accent);
}

/* Plain English Ask */
.plain-ask-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 16px 18px;
  font-size: .82rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.85;
}

/* Symbol decoding table */
.symbol-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
}
.symbol-table th {
  font-size: .6rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: right;
  padding: 6px 14px;
}
[dir="ltr"] .symbol-table th { text-align: left; }
.symbol-table td {
  background: var(--surface);
  padding: 10px 14px;
  font-size: .72rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.7;
}
.symbol-table td:first-child {
  font-weight: 700;
  color: var(--accent);
  font-size: .74rem;
  box-shadow: var(--shadow-raised-sm);
  white-space: nowrap;
  direction: ltr;
  text-align: start;
  /* RTL default: symbol is first-child, visually on right → round right edges */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.symbol-table td:last-child {
  box-shadow: var(--shadow-raised-sm);
  /* RTL default: meaning is last-child, visually on left → round left edges */
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.symbol-table__meaning-only td,
[dir="ltr"] .symbol-table__meaning-only td {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-secondary);
}
/* LTR flip: symbol on left, meaning on right */
[dir="ltr"] .symbol-table td:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
[dir="ltr"] .symbol-table td:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Enhanced step card */
.step-plain-action {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 6px;
  padding-inline-start: 36px;
}
.step-why {
  font-size: .65rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.7;
  padding-inline-start: 36px;
  margin-top: 6px;
  font-style: italic;
}

/* Answer value card */
.answer-value-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px rgba(59,181,168,.2);
  padding: 14px 18px;
  font-size: .76rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.85;
}
[data-theme="dark"] .answer-value-card {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px rgba(77,207,192,.2);
}

/* Reality bridge card */
.bridge-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px 18px;
  margin-bottom: 6px;
}
.bridge-card__concept {
  font-size: .62rem; font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 4px;
}
.bridge-card__rule {
  font-size: .7rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 6px;
}
.bridge-card__analogy {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
  font-style: italic;
}

/* Curiosity card */
.curiosity-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 14px 18px;
}
.curiosity-card__notice {
  font-size: .72rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: 8px;
}
.curiosity-card__wonder {
  font-size: .7rem; font-weight: 600;
  color: var(--accent);
  line-height: 1.7;
  margin-bottom: 6px;
}
.curiosity-card__why {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 8px;
}
.curiosity-card__try {
  font-size: .68rem; font-weight: 600;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

/* Relevance small text */
.relevance-text {
  font-size: .68rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.8;
  padding: 0 2px;
}

/* Blocker focus callout */
.blocker-focus {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 12px 16px;
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-top: 8px;
  border-inline-start: 3px solid hsl(35, 90%, 55%);
}

/* Metaphor card */
.metaphor-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px 18px;
  margin-bottom: 6px;
}
.metaphor-card__concept {
  font-size: .62rem; font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.metaphor-card__metaphor {
  font-size: .72rem; font-weight: 500;
  color: var(--text-primary);
  line-height: 1.85;
  margin-bottom: 6px;
}
.metaphor-card__why {
  font-size: .65rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.7;
  font-style: italic;
}
.metaphor-card__math {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  color: var(--text-primary);
  text-align: center;
  direction: ltr;
}

/* Term chips — inline clickable badges */
.term-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
  padding-inline-start: 36px;
}
.term-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 11px;
  font-size: .58rem; font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  box-shadow: var(--shadow-raised-sm);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out), color .15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.term-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.term-chip:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: var(--shadow-raised-sm);
}
.term-chip:active { transform: scale(.95); }

.term-highlight,
mark.term-highlight,
.glossary-term-highlight {
  border-radius: 7px;
  padding: 0 .18em;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text-primary);
  box-shadow: inset 0 -0.14em 0 color-mix(in srgb, var(--accent) 36%, transparent);
}

.term-highlight.is-active,
mark.term-highlight.is-active,
.glossary-term-highlight.is-active {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 0 -0.18em 0 color-mix(in srgb, var(--accent) 54%, transparent);
}

/* ══════════════════════════════════════════
   GUIDED EXPLANATION JOURNEY
   One storyline, three acts, one pinned graph
   ══════════════════════════════════════════ */
.journey { margin-top: 18px; container-type: inline-size; }

.journey__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.journey__title {
  font-size: .82rem; font-weight: 800;
  color: var(--text-primary);
}
.journey__showall {
  border: none; background: transparent;
  font-family: inherit; font-size: .62rem; font-weight: 700;
  color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
}
.journey__showall:hover { color: var(--accent); }

/* Pinned guided graph — top offset clears the floating header buttons */
.journey__graph-col {
  position: sticky; top: 64px; z-index: 40;
  margin-bottom: 16px;
}
.journey-graph {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  padding: 8px;
}
.journey-graph__plot svg {
  display: block;
  width: 100%; max-width: 470px; height: auto;
  margin: 0 auto;
  border-radius: 10px;
}
.journey-graph.collapsed .journey-graph__plot { display: none; }
.journey-graph__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 6px 2px;
}
.journey-graph__caption {
  font-size: .62rem; font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 1.5em;
  min-width: 0;
}
.jg-cap { display: none; }
.jg-cap.on { display: block; animation: jStageIn .3s var(--ease-out) both; }
.jg-collapse {
  border: none; background: transparent;
  color: var(--text-muted); cursor: pointer;
  padding: 4px; flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: .62rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.jg-collapse__label { display: none; }
/* Expanded means Hide + up; collapsed means Show + down. */
.jg-collapse svg {
  transform: rotate(180deg);
  transition: transform .25s var(--ease-out);
}
.journey-graph.collapsed .jg-collapse svg { transform: none; }

@media (max-width: 999px) {
  .jg-collapse__label {
    display: inline;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

/* Graph annotation overlay */
.gg-focus { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.gg-focus.gg-on { opacity: 1; }

/* Math graphs are always LTR, even in RTL layouts (fixes "-2" rendering as "2-") */
.math-graph-svg { direction: ltr; }
.gg-halo {
  animation: ggPulse 1.9s ease-in-out infinite;
}
@keyframes ggPulse {
  0%, 100% { opacity: .3; }
  50% { opacity: .85; }
}

/* Stage list + progress rail */
.journey__stages {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  padding-inline-start: 38px;
}
.jstage { position: relative; scroll-margin-top: 320px; }
.jstage::before {
  content: '';
  position: absolute;
  top: 30px; bottom: -18px;
  inset-inline-start: -26.5px;
  width: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background .4s;
}
.jstage:last-child::before { display: none; }
.jstage--revealed::before {
  background: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.jstage__dot {
  position: absolute;
  top: 0; inset-inline-start: -38px;
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-muted);
  font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  font-family: inherit;
  z-index: 1;
  transition: all .25s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.jstage--revealed .jstage__dot {
  background: var(--accent);
  color: var(--accent-text);
}
.jstage--current .jstage__dot,
.jstage--inview.jstage--revealed .jstage__dot {
  box-shadow: var(--shadow-raised-sm), 0 0 0 3.5px color-mix(in srgb, var(--accent) 28%, transparent);
}
.jstage--locked .jstage__dot { cursor: default; opacity: .6; }

.jstage__head {
  min-height: 26px;
  display: flex; align-items: center;
}
.jstage__title {
  font-size: .74rem; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
}
.jstage--locked .jstage__title { color: var(--text-muted); font-weight: 600; }
.jstage__body {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.jstage--locked .jstage__body { display: none; }
.jstage--entering .jstage__body { animation: jStageIn .45s var(--ease-out) both; }
@keyframes jStageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Continue pill */
.jstage__continue { display: none; }
.jstage--current:not(:last-child) .jstage__continue {
  display: flex; justify-content: center;
  margin-top: 4px;
}
.journey-continue-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 30px;
  border: none; border-radius: var(--radius-pill);
  background: var(--accent-gradient, var(--accent));
  color: var(--accent-text);
  font-family: inherit; font-size: .72rem; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--accent-glow, rgba(59,181,168,.35));
  transition: transform .15s var(--ease-out), box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.journey-continue-btn:active { transform: scale(.95); }
.arrow-flip { display: inline-block; }
[dir="rtl"] .arrow-flip { transform: scaleX(-1); }

/* Act 1 — idea card */
.idea-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.idea-card__hook {
  font-size: .72rem; font-weight: 500; font-style: italic;
  color: var(--text-secondary);
  line-height: 1.85;
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 10px;
}
.idea-card__relevance {
  font-size: .66rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.8;
}
.idea-card__ask {
  font-size: .8rem; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.9;
}

/* Symbol decode card */
.decode-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 12px 14px;
}
.decode-card__label {
  font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: hsl(35, 80%, 42%);
  margin-bottom: 6px;
}
[data-theme="dark"] .decode-card__label { color: hsl(35, 85%, 62%); }
.decode-card__blocker {
  font-size: .68rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 10px;
}
.sym-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sym-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: none; border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  cursor: pointer; font-family: inherit;
  transition: all .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.sym-chip__icon {
  width: 20px; height: 20px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800;
}
.sym-chip__label {
  font-size: .74rem; font-weight: 700;
  color: var(--text-primary);
  direction: ltr; unicode-bidi: isolate;
}
.sym-chip.open {
  box-shadow: var(--shadow-inset);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.sym-chip.open .sym-chip__icon { background: var(--accent); color: var(--accent-text); }
.sym-panel { display: none; margin-top: 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.sym-panel.open { display: block; animation: jStageIn .3s var(--ease-out) both; }
.sym-panel__meaning {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
}
.sym-panel__metaphor {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: .66rem; font-weight: 500; font-style: italic;
  color: var(--text-muted);
  line-height: 1.8;
}
.sym-panel__mlabel {
  font-style: normal;
  font-size: .56rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent);
  margin-inline-end: 6px;
}
.sym-meaning-row {
  margin-top: 8px;
  font-size: .7rem; color: var(--text-secondary); line-height: 1.8;
}

/* Act 2 — step cards */
.jstep-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px 16px;
}
.jstep-card__action {
  font-size: .72rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 9px;
}
.jstep-card__math {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
  font-size: .85rem;
  color: var(--text-primary);
  direction: ltr;
  overflow-x: auto;
}
.jstep-card .term-chips { padding-inline-start: 0; margin-top: 10px; }

/* "Why is this allowed?" drawer */
.why-drawer { margin-top: 10px; }
.why-drawer__toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  color: var(--accent);
  font-family: inherit; font-size: .64rem; font-weight: 700;
  cursor: pointer; padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
}
.why-drawer__toggle svg { transition: transform .25s var(--ease-out); flex-shrink: 0; }
.why-drawer.open .why-drawer__toggle svg { transform: rotate(180deg); }
.why-drawer__content { display: none; }
.why-drawer.open .why-drawer__content {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  animation: jStageIn .3s var(--ease-out) both;
}
.why-drawer__text {
  font-size: .68rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
}
.why-bridge {
  border-inline-start: 2.5px solid var(--accent);
  padding-inline-start: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.why-bridge__concept {
  font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent);
}
.why-bridge__rule {
  font-size: .68rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.75;
}
.why-bridge__analogy {
  font-size: .68rem; font-weight: 500; font-style: italic;
  color: var(--text-secondary);
  line-height: 1.85;
}

/* Act 3 — answer */
.janswer-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
  padding: 16px 18px;
  font-size: .78rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.9;
}
.journey-closing {
  font-size: .7rem; font-weight: 500; font-style: italic;
  color: var(--text-muted);
  line-height: 1.85;
  text-align: center;
  padding: 4px 12px;
}
.journey__next { display: flex; margin-top: 8px; }

/* Explore tiles */
.explore { margin-top: 4px; }
.explore__label {
  font-size: .55rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 8px;
  padding: 0 2px;
}
.explore__tiles { display: flex; flex-direction: column; gap: 8px; }
.jtile {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  overflow: hidden;
}
.jtile__head {
  display: flex; width: 100%; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: none; background: transparent;
  cursor: pointer; text-align: start;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.jtile__icon { font-size: .85rem; flex-shrink: 0; }
.jtile__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jtile__tag {
  font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
}
.jtile__title {
  font-size: .7rem; font-weight: 700;
  color: var(--text-primary);
  line-height: 1.5;
}
.jtile__chevron {
  margin-inline-start: auto; flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .25s var(--ease-out);
}
.jtile.open .jtile__chevron { transform: rotate(180deg); }
.jtile__body { display: none; padding: 0 14px 14px; }
.jtile.open .jtile__body { display: block; animation: jStageIn .3s var(--ease-out) both; }
.jtile__body > * + * { margin-top: 10px; }
.jtile__text {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
}
.jtile__notice {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .68rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.8;
}
.jtile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jtile__hint {
  font-size: .62rem; font-weight: 500;
  color: var(--text-muted);
}

/* Wonder question — think, then reveal */
.wonder {
  border-inline-start: 2.5px dashed var(--accent);
  padding-inline-start: 10px;
}
.wonder__q {
  font-size: .7rem; font-weight: 700;
  color: var(--accent);
  line-height: 1.75;
}
.wonder__btn {
  margin-top: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  border: none; border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: inherit; font-size: .62rem; font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  transition: all .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.wonder__btn:active { box-shadow: var(--shadow-inset); transform: scale(.96); }
.wonder__why { display: none; }
.wonder.revealed .wonder__btn { display: none; }
.wonder.revealed .wonder__why {
  display: block;
  margin-top: 8px;
  font-size: .68rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.85;
  animation: jStageIn .35s var(--ease-out) both;
}
.try-card {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.try-card__label {
  display: block;
  font-size: .55rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent);
  margin-bottom: 4px;
}
.try-card__text {
  font-size: .68rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
}

/* Ghost skip button */
.check-btn.check-btn--ghost {
  flex: 0 0 auto;
  margin-inline-end: auto;
  width: auto;
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: .66rem; font-weight: 600;
  padding: 8px 16px;
}
.check-btn.check-btn--ghost:hover { color: var(--text-secondary); border-color: var(--text-muted); }

/* Explanation loading shimmer */
.expl-loading {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  color: var(--text-muted);
  font-size: .7rem; font-weight: 600;
  margin-top: 16px;
}
.expl-loading::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  animation: jSpin .9s linear infinite;
  flex-shrink: 0;
}
@keyframes jSpin { to { transform: rotate(360deg); } }

/* Wide layouts: graph docks beside the stages — only when the journey itself has room */
@container (min-width: 760px) {
  .journey__layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .journey__graph-col { top: 72px; margin-bottom: 0; }
  .jstage { scroll-margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .gg-halo { animation: none; }
  .jstage--entering .jstage__body,
  .jg-cap.on, .sym-panel.open, .jtile.open .jtile__body,
  .wonder.revealed .wonder__why, .why-drawer.open .why-drawer__content { animation: none; }
}

/* ══════════════════════════════════════════
   DESKTOP WORKSPACE (≥1000px, question view)
   Clay dock + guided journey flow.
   Mobile keeps its own layout untouched.
   ══════════════════════════════════════════ */
/* App frame: in the desktop question view the window never scrolls.
   The dock column is fixed; only .dk-flow__scroll (explanation) scrolls.
   body = flex column (header + question view), so no magic header heights. */
body.desk-on {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.desk-on #viewQuestion.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.desk-on .question-container {
  max-width: none;
  /* kill the base `margin: 0 auto` — an auto-margin flex item shrinks to fit
     its content, which made the intro width vary per question */
  margin: 0;
  width: 100%;
  padding: 0 24px;
  flex: 1 1 auto;
  min-height: 0;
}
body.desk-on .q-scroll-bar {
  max-width: 440px;
}

.dk-split {
  display: grid;
  grid-template-columns: minmax(380px, 500px) minmax(0, 1fr);
  /* One explicit full-height row — otherwise the row auto-sizes to content and
     the columns' height:100% resolves to content height (no internal scroll) */
  grid-template-rows: 100%;
  gap: 26px;
  align-items: start;
  height: 100%;
  --dk-height: #2d9e92;
  --dk-slope: #b96a35;
  --dk-border-strong: rgba(0,0,0,.12);
  /* Desktop readability: stronger ink than the mobile clay defaults */
  --text-secondary: #5c5445;
  --text-muted: #7e7562;
}
[data-theme="dark"] .dk-split {
  --dk-height: #4dcfc0;
  --dk-slope: #e09a62;
  --dk-border-strong: rgba(255,255,255,.12);
  --text-secondary: #c9c3b6;
  --text-muted: #a29b8d;
}

/* Intro stage: before answering, the question owns the screen — one fixed,
   generous layout for every question, regardless of content length.
   Doubled selectors (.dk-split.dk-split--intro) outrank the later generic
   .dk-split/.dk-dock typography rules. Scrolls internally if a short viewport
   can't fit it (window stays locked). */
.dk-split--intro {
  display: flex; flex-direction: column;
  overflow-y: auto;
  /* no visible scrollbar — it only ever scrolls a little on short screens */
  scrollbar-width: none;
}
.dk-split--intro::-webkit-scrollbar { display: none; }
.dk-split--intro .dk-dock {
  position: static; height: auto; overflow: visible;
  width: 100%;
  max-width: 900px;
  /* auto block margins center vertically, collapsing safely when it overflows */
  margin: auto;
  padding: 24px 16px 32px;
  gap: 26px;
}
/* Cap graph height so the options stay in view on laptop screens;
   preserveAspectRatio keeps the plot undistorted and centered */
.dk-split--intro .dk-graph svg { max-width: 560px; max-height: 36dvh; }
.dk-split.dk-split--intro .dk-kicker {
  font-size: .74rem;
  text-align: center;
}
.dk-split.dk-split--intro .dk-stem {
  font-size: 1.32rem;
  line-height: 1.85;
  text-align: center;
  margin-top: 8px;
}
/* Fixed 2×2 answer grid: equal columns AND equal row heights — the content
   never resizes the cells, so every question shares the same geometry */
.dk-split.dk-split--intro .options-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
.dk-split.dk-split--intro .option-btn {
  padding: 18px 22px;
  min-height: 78px;
  font-size: 1.1rem;
}
.dk-split.dk-split--intro .option-letter {
  width: 38px; height: 38px;
  border-radius: 12px;
  font-size: .85rem;
}
.dk-split.dk-split--intro .check-btn {
  font-size: 1.05rem;
  padding: 17px;
  max-width: 420px;
  margin-inline: auto;
}
/* Short laptop screens: compact the intro so question + options + check
   all fit without scrolling (dk markup only exists on desktop) */
@media (max-height: 860px) {
  .dk-split--intro .dk-dock { gap: 18px; padding-bottom: 24px; }
  .dk-split--intro .dk-graph svg { max-height: 30dvh; }
  .dk-split.dk-split--intro .dk-stem { font-size: 1.2rem; }
  .dk-split.dk-split--intro .option-btn { min-height: 68px; padding: 14px 20px; font-size: 1.02rem; }
  .dk-split.dk-split--intro .check-btn { padding: 14px; }
}

/* Preserve a readable math size. Long expressions expose a slim scrollbar and
   a visible edge cue instead of silently shrinking into illegibility. */
.smart-token,
.jstep-card__math,
.formula-panel,
.glossary-drawer__field-value.math {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.smart-token::-webkit-scrollbar,
.jstep-card__math::-webkit-scrollbar,
.formula-panel::-webkit-scrollbar,
.glossary-drawer__field-value.math::-webkit-scrollbar { height: 5px; }
.smart-token::-webkit-scrollbar-thumb,
.jstep-card__math::-webkit-scrollbar-thumb,
.formula-panel::-webkit-scrollbar-thumb,
.glossary-drawer__field-value.math::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}
.is-math-overflow {
  border-inline-end: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  overscroll-behavior-inline: contain;
}

.formula-zoom-letter:empty { display: none; }
/* Quarantined-fallback math runs stay LTR inside RTL prose (bidi isolation). */
.fallback-math-run { direction: ltr; unicode-bidi: isolate; }

/* Formulas in intro options render at a proper reading size */
.dk-split.dk-split--intro .option-shell.has-zoom > .option-btn { padding-inline-end: 54px; }
/* !important: must outrank the global `.katex { font-size: 1em !important }` */
.dk-split.dk-split--intro .option-btn .katex { font-size: 1.5em !important; }
.dk-split.dk-split--intro .option-btn .smart-token { padding: 6px 12px; border-radius: 12px; }

/* Separate zoom controls preserve the formula's own MathML semantics. */
.opt-zoom,
.stem-zoom {
  position: absolute;
  top: 8px; inset-inline-end: 8px;
  width: 30px; height: 30px;
  padding: 0;
  border: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-muted);
  font: inherit;
  cursor: zoom-in;
  opacity: .5;
  transition: opacity .2s, color .2s, transform .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.option-shell:hover .opt-zoom,
.stem-shell:hover .stem-zoom,
.opt-zoom:focus-visible,
.stem-zoom:focus-visible { opacity: 1; }
.opt-zoom:hover,
.stem-zoom:hover { color: var(--accent); transform: scale(1.1); }
.opt-zoom:active,
.stem-zoom:active { box-shadow: var(--shadow-inset); transform: scale(.94); }

/* Formula zoom popup */
.formula-zoom-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out);
}
.formula-zoom-overlay.open { opacity: 1; pointer-events: auto; }
.formula-zoom-card {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  max-width: min(960px, calc(100vw - 64px));
  max-height: calc(100dvh - 80px);
  overflow: auto;
  padding: 48px 52px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-raised), 0 24px 80px rgba(0,0,0,.25);
  transform: scale(.92);
  transition: transform .25s var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.formula-zoom-overlay.open .formula-zoom-card { transform: scale(1); }
.formula-zoom-letter {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 800;
  box-shadow: var(--shadow-raised-sm);
}
.formula-zoom-body {
  font-size: 1.4rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 2;
  min-width: 0;
}
.formula-zoom-body .katex { font-size: 2em !important; }
.formula-zoom-body .smart-token {
  background: transparent; box-shadow: none;
  padding: 0; margin: 0;
  overflow: visible;
}
.formula-zoom-body img, .formula-zoom-body svg { max-width: 100%; height: auto; }
.formula-zoom-card.is-graph-zoom {
  width: min(900px, calc(100vw - 64px));
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 48px 36px 32px;
}
.formula-zoom-card.is-graph-zoom .formula-zoom-letter { align-self: flex-start; }
.formula-zoom-body.is-graph-zoom {
  width: 100%;
  overflow: auto;
  direction: ltr;
  line-height: 1;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.formula-zoom-body.is-graph-zoom .option-graph-asset {
  width: min(720px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 12px;
  overflow: visible;
}
.formula-zoom-body.is-graph-zoom .option-graph-asset .math-graph-svg,
.formula-zoom-body.is-graph-zoom .option-graph-asset img {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  touch-action: pan-x pan-y pinch-zoom;
}
.formula-zoom-close {
  position: absolute;
  top: 12px; inset-inline-end: 12px;
  width: 34px; height: 34px;
  border-radius: 12px; border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-secondary);
  font-size: .95rem; font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.formula-zoom-close:hover { color: var(--text-primary); }
.formula-zoom-close:active { box-shadow: var(--shadow-inset); transform: scale(.94); }

/* Flow entrance after the dock glides aside */
.dk-flow--enter { animation: dkFlowIn .6s .24s var(--ease-out) both; }
@keyframes dkFlowIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
[dir="rtl"] .dk-flow--enter { animation-name: dkFlowInRtl; }
@keyframes dkFlowInRtl {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: none; }
}

/* Dock — fills its fixed column and never scrolls (fit logic compacts instead).
   The app frame locks window scroll, so no sticky tricks are needed. */
.dk-dock {
  height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 10px 4px 20px 20px;
}
[dir="rtl"] .dk-dock { padding: 10px 20px 20px 4px; }
.dk-kicker {
  font-size: .58rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.dk-stem {
  font-size: .82rem; font-weight: 600;
  color: var(--text-primary);
  line-height: 1.8;
  margin-top: 6px;
}

.dk-graph {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 10px;
}
.dk-graph figure { margin: 0; }
.dk-graph svg {
  display: block;
  width: 100%; max-width: 470px; height: auto;
  margin-inline: auto;
  border-radius: 10px;
  direction: ltr;
}
.dk-graph__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 6px 2px;
}
.dk-graph__cap {
  font-size: .66rem; font-weight: 600;
  color: var(--text-secondary);
  min-height: 1.4em; min-width: 0;
}
.dk-graph__cap .dk-cap-k {
  color: var(--text-muted);
  font-weight: 800; font-size: .55rem;
  text-transform: uppercase; letter-spacing: .08em;
  margin-inline-end: 8px;
}
.dk-legend { display: flex; gap: 12px; flex-shrink: 0; }
.dk-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: .62rem; font-weight: 700; color: var(--text-secondary); }
.dk-legend__dot { width: 9px; height: 9px; border-radius: 50%; }
.dk-legend__dot--h { background: var(--dk-height); }
.dk-legend__dot--s { background: var(--dk-slope); }
.dk-assets .question-graph-asset { margin: 0; }

.dk-dock .options-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 0;
}
.dk-dock .option-btn { padding: 11px 14px; }
.dk-dock .submit-row { margin-bottom: 0; }

/* Dock dictionary */
.dk-dict {
  flex: 1 1 150px; min-height: 128px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 13px 15px 14px;
  overflow: hidden;
}
.dk-dict__head { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--text-muted); }
.dk-dict__title { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dk-dict__count { font-size: .6rem; font-weight: 700; }
.dk-dict__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dk-dict__chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  padding: 3px 10px;
  font-size: .62rem; font-weight: 600; color: var(--text-muted);
  cursor: pointer; font-family: inherit;
  transition: color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.dk-dict__chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--dk-border-strong); transition: background .2s; }
.dk-dict__chip.rel { color: var(--text-primary); }
.dk-dict__chip.rel::before { background: var(--accent); }
.dk-dict__chip:hover { color: var(--accent); }
.dk-dict__chip.on { box-shadow: var(--shadow-inset); color: var(--accent); }
.dk-dict__chip.on::before { background: var(--accent); }
.dk-dict__featured {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--dk-border-strong);
  cursor: pointer; min-height: 0;
  animation: jStageIn .3s var(--ease-out) both;
}
.dk-dict__featured:hover .dk-dict__term { color: var(--accent); }
.dk-dict__termrow { display: flex; align-items: center; gap: 8px; }
.dk-dict__term { font-size: .74rem; font-weight: 750; color: var(--text-primary); transition: color .15s; }
.dk-dict__go { margin-inline-start: auto; color: var(--text-muted); flex-shrink: 0; display: inline-flex; }
[dir="rtl"] .dk-dict__go svg { transform: scaleX(-1); }
.dk-dict__def {
  margin-top: 3px;
  font-size: .66rem; color: var(--text-secondary); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-height: 980px) { .dk-dict__def { -webkit-line-clamp: 3; } }

/* content-driven fit: compact before ever clipping */
.dk-dock--dense { gap: 11px; }
.dk-dock--dense .dk-graph svg { max-width: 368px; }
.dk-dock--dense .dk-dict { padding: 10px 13px 11px; }
.dk-dock--dense .dk-dict__head { margin-bottom: 7px; }
.dk-dock--dense .dk-dict__chip { padding: 2px 8px; font-size: .58rem; }
.dk-dock--dense .dk-dict__featured { margin-top: 8px; padding-top: 8px; }
.dk-dock--dense .dk-dict__def { -webkit-line-clamp: 2; }
.dk-dict--nofeat .dk-dict__featured { display: none; }

/* Flow column */
.dk-flow {
  min-width: 0;
  min-height: 0;
  display: flex; flex-direction: column;
  height: 100%;
}
/* Only this area scrolls on desktop; top padding matches the dock so the
   result banner sits level with the question panel */
.dk-flow__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 28px 40px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-alt) transparent;
}
[dir="rtl"] .dk-flow__scroll { padding: 10px 8px 40px 28px; }
.dk-flow__inner { max-width: 780px; margin-inline: auto; }

.dk-empty {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-inset);
  padding: 40px 30px;
  text-align: center;
  margin-top: 44px;
}
.dk-empty__icon { color: var(--text-muted); margin-bottom: 10px; }
.dk-empty__title { font-size: .9rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.dk-empty__hint { font-size: .74rem; color: var(--text-secondary); line-height: 1.85; max-width: 420px; margin: 0 auto; }

/* ── Compact verdict pill — lives in the dock, under the options ── */
.dk-verdict {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-size: .72rem; font-weight: 800;
  white-space: nowrap;
  align-self: center;
}
.dk-verdict.correct { color: #2e7d32; background: rgba(46,125,50,.1); box-shadow: inset 0 0 0 1.5px rgba(46,125,50,.22); }
[data-theme="dark"] .dk-verdict.correct { color: #7dca70; background: rgba(58,138,58,.14); box-shadow: inset 0 0 0 1.5px rgba(125,202,112,.25); }
.dk-verdict.incorrect { color: #d32f2f; background: rgba(211,47,47,.08); box-shadow: inset 0 0 0 1.5px rgba(211,47,47,.2); }
[data-theme="dark"] .dk-verdict.incorrect { color: #f08080; background: rgba(204,68,68,.12); box-shadow: inset 0 0 0 1.5px rgba(240,128,128,.22); }
.dk-dock .submit-row { flex-wrap: wrap; align-items: center; }

/* ── Flow header — just the pace toggle, tucked to the end ── */
.dk-flow__head {
  display: flex; justify-content: flex-end;
  margin: 22px 0 6px;
}

/* ── First-time explanation intro ── */
.dk-intro-card {
  max-width: 480px;
  margin: 56px auto 0;
  padding: 30px 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm), inset 0 1px 0 rgba(255,255,255,.22);
  text-align: center;
  display: flex; flex-direction: column; gap: 12px;
}
.dk-intro-card__icon {
  width: 46px; height: 46px;
  margin: 0 auto 2px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  display: grid; place-items: center;
  color: var(--accent);
}
.dk-intro-card__title { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.dk-intro-card__body {
  font-size: .74rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.9;
  max-width: 40ch;
  margin: 0 auto;
}
.dk-intro-card__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.dk-intro-choice {
  border: none; cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 5px;
  align-items: center; text-align: center;
  color: var(--text-primary);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.dk-intro-choice:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised); }
.dk-intro-choice:active { transform: scale(.98); box-shadow: var(--shadow-inset); }
.dk-intro-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dk-intro-choice__name { font-size: .8rem; font-weight: 800; }
.dk-intro-choice__desc { font-size: .62rem; font-weight: 600; color: var(--text-muted); line-height: 1.6; }
.dk-intro-choice--primary {
  background: var(--accent-gradient);
  color: var(--accent-text);
  box-shadow: var(--shadow-raised-sm), 0 4px 16px var(--accent-glow);
}
.dk-intro-choice--primary .dk-intro-choice__desc { color: color-mix(in srgb, var(--accent-text) 78%, transparent); }
.dk-intro-choice--primary:hover { box-shadow: var(--shadow-raised), 0 6px 22px var(--accent-glow); }

/* Stepper — sticks to the top of the scrolling explanation area.
   Scales to any step count: scrolls sideways behind fade masks,
   and past 7 nodes only the current node keeps its label. */
.dk-stepper-wrap {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin: 0 -8px 24px;
  padding: 12px 8px;
}
.dk-stepper {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  padding-inline: 4px;
}
.dk-stepper::-webkit-scrollbar { display: none; }
.dk-sline { flex: 0 0 22px; }
.dk-stepper--dense .dk-snode:not(.cur) .dk-snode__lbl { display: none; }
.dk-snode {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; background: transparent; cursor: pointer; padding: 2px;
  color: var(--text-muted); font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dk-snode__dot {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  font-size: .64rem; font-weight: 800;
  transition: all .2s var(--ease-out);
}
.dk-snode__lbl { font-size: .64rem; font-weight: 700; white-space: nowrap; }
.dk-snode.done .dk-snode__dot { background: var(--accent); color: var(--accent-text); }
.dk-snode.done { color: var(--text-secondary); }
.dk-snode.cur .dk-snode__dot { color: var(--accent); box-shadow: var(--shadow-raised-sm), 0 0 0 3.5px color-mix(in srgb, var(--accent) 28%, transparent); }
.dk-snode.cur { color: var(--text-primary); }
.dk-snode.lock { cursor: default; }
.dk-snode.lock .dk-snode__dot { opacity: .6; }
.dk-sline { flex: 1; height: 2.5px; border-radius: 2px; background: var(--dk-border-strong); min-width: 14px; transition: background .3s; }
.dk-sline.done { background: color-mix(in srgb, var(--accent) 55%, var(--dk-border-strong)); }
.dk-stepper__actions { display: flex; align-items: center; margin-inline-start: 8px; }
.dk-showall {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .66rem; font-weight: 700;
  color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.dk-showall:hover { color: var(--accent); }

/* Acts */
.dk-act { margin-bottom: 32px; scroll-margin-top: 64px; }
.dk-act__kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dk-act__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.dk-act__dot--h { background: var(--dk-height); }
.dk-act__dot--s { background: var(--dk-slope); }
.dk-act__title {
  font-size: 1rem; font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px; line-height: 1.55;
}
.dk-act--locked .dk-act__title, .dk-act--locked .dk-act__kicker { opacity: .45; }
.dk-act--locked .dk-act__body, .dk-act--locked .dk-act__continue { display: none; }
.dk-act__body { display: flex; flex-direction: column; gap: 12px; }
.dk-act--entering .dk-act__body { animation: jStageIn .45s var(--ease-out) both; }
.dk-act__continue { display: none; }
.dk-act.cur:not(.dk-act--last) .dk-act__continue {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
}
.dk-kbd { font-size: .62rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.dk-kbd kbd {
  font-family: inherit; font-size: .58rem; font-weight: 700;
  border-radius: 6px; padding: 1px 6px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

/* Idea act: decode duo (height vs slope, side by side) */
.dk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dk-decode {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--dk-concept, var(--text-muted)) 9%, var(--surface));
  box-shadow: var(--shadow-inset);
  padding: 13px 15px;
}
[data-theme="dark"] .dk-decode {
  background: color-mix(in srgb, var(--dk-concept, var(--text-muted)) 15%, var(--surface));
}
.dk-decode--h { --dk-concept: var(--dk-height); }
.dk-decode--s { --dk-concept: var(--dk-slope); }
.dk-decode__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dk-decode__sym { font-size: .95rem; font-weight: 700; color: var(--dk-concept); direction: ltr; unicode-bidi: isolate; }
.dk-decode__tag {
  margin-inline-start: auto;
  font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dk-concept);
  background: color-mix(in srgb, var(--dk-concept) 11%, transparent);
  border-radius: 6px; padding: 2px 8px;
}
.dk-decode__meaning { font-size: .72rem; color: var(--text-secondary); line-height: 1.85; }
.dk-decode__metaphor {
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--dk-border-strong);
  font-size: .68rem; font-style: italic; color: var(--text-muted); line-height: 1.8;
}
.dk-decode__metaphor b {
  font-style: normal; font-size: .56rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--dk-concept); margin-inline-end: 6px;
}
.dk-tricky {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
  padding: 15px 17px;
}
.dk-tricky__label {
  font-size: .6rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: hsl(35, 75%, 40%);
  margin-bottom: 8px;
}
[data-theme="dark"] .dk-tricky__label { color: hsl(35, 85%, 64%); }
.dk-tricky__blocker { font-size: .74rem; color: var(--text-secondary); line-height: 1.85; margin-bottom: 14px; }

.dk-flow .explore__tiles { gap: 10px; }
.dk-flow .jstep-card, .dk-flow .idea-card { padding: 16px 18px; }
.dk-flow .journey__next { margin-top: 14px; }

/* ── Desktop type scale: same components, larger and easier to read ── */
.dk-split .dk-kicker { font-size: .64rem; }
.dk-split .dk-stem { font-size: .95rem; }
.dk-split .dk-graph__cap { font-size: .74rem; }
.dk-split .dk-graph__cap .dk-cap-k { font-size: .6rem; }
.dk-split .dk-legend__item { font-size: .68rem; }
.dk-split .option-btn { font-size: .95rem; }
.dk-split .result-banner { font-size: .85rem; }
.dk-split .check-btn { font-size: .88rem; }
.dk-split .check-btn.check-btn--ghost { font-size: .74rem; }
.dk-split .dk-snode__dot { width: 28px; height: 28px; font-size: .7rem; }
.dk-split .dk-snode__lbl { font-size: .7rem; }
.dk-split .dk-showall { font-size: .72rem; }
.dk-split .dk-act__title { font-size: 1.18rem; }
.dk-split .idea-card__hook { font-size: .84rem; }
.dk-split .idea-card__relevance { font-size: .76rem; }
.dk-split .idea-card__ask { font-size: .96rem; }
.dk-split .dk-tricky__label { font-size: .64rem; }
.dk-split .dk-tricky__blocker { font-size: .82rem; }
.dk-split .dk-decode__sym { font-size: 1.05rem; }
.dk-split .dk-decode__tag { font-size: .6rem; }
.dk-split .dk-decode__meaning { font-size: .8rem; }
.dk-split .dk-decode__metaphor { font-size: .74rem; }
.dk-split .sym-meaning-row { font-size: .8rem; }
.dk-split .jstep-card__action { font-size: .84rem; }
.dk-split .jstep-card__math { font-size: 1.02rem; }
.dk-split .why-drawer__toggle { font-size: .74rem; }
.dk-split .why-drawer__text { font-size: .8rem; }
.dk-split .why-bridge__concept { font-size: .6rem; }
.dk-split .why-bridge__rule { font-size: .8rem; }
.dk-split .why-bridge__analogy { font-size: .78rem; }
.dk-split .term-chip { font-size: .66rem; padding: 5px 12px; }
.dk-split .janswer-card { font-size: .9rem; }
.dk-split .explore__label { font-size: .6rem; }
.dk-split .jtile__tag { font-size: .6rem; }
.dk-split .jtile__title { font-size: .82rem; }
.dk-split .jtile__text { font-size: .8rem; }
.dk-split .jtile__notice { font-size: .78rem; }
.dk-split .wonder__q { font-size: .8rem; }
.dk-split .wonder__btn { font-size: .7rem; }
.dk-split .wonder.revealed .wonder__why { font-size: .78rem; }
.dk-split .try-card__label { font-size: .6rem; }
.dk-split .try-card__text { font-size: .76rem; }
.dk-split .metaphor-anchor-card__concept { font-size: .72rem; }
.dk-split .metaphor-anchor-card__metaphor { font-size: .82rem; }
.dk-split .metaphor-anchor-card__why { font-size: .74rem; }
.dk-split .metaphor-anchor-card__math { font-size: .74rem; }
.dk-split .metaphor-anchor-card__limit { font-size: .7rem; }
.dk-split .insight-card__text { font-size: .8rem; }
.dk-split .bridge-card__rule { font-size: .8rem; }
.dk-split .bridge-card__analogy { font-size: .78rem; }
.dk-split .journey-closing { font-size: .8rem; }
.dk-split .journey-continue-btn { font-size: .8rem; padding: 12px 32px; }
.dk-split .dk-kbd { font-size: .66rem; }
.dk-split .dk-kbd kbd { font-size: .62rem; }
.dk-split .expl-loading { font-size: .8rem; }
.dk-split .dk-dict__title { font-size: .62rem; }
.dk-split .dk-dict__count { font-size: .64rem; }
.dk-split .dk-dict__chip { font-size: .7rem; padding: 4px 12px; }
.dk-split .dk-dict__term { font-size: .82rem; }
.dk-split .dk-dict__def { font-size: .74rem; }
.dk-split .dk-dock--dense .dk-dict__chip { font-size: .64rem; padding: 3px 9px; }
.dk-flow__inner { max-width: 830px; }

@media (max-height: 700px) {
  .dk-graph svg { max-width: 330px; }
  .dk-dict { flex-basis: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-act--entering .dk-act__body, .dk-dict__featured, .dk-flow--enter { animation: none; }
}

/* ══════════════════════════════════════════
   GUIDED FOCUS MODE (shared + per-layout)
   One stage at a time; finished stages fold
   into receipts. "Read all" = classic feed.
   ══════════════════════════════════════════ */
/* mode toggle pill */
.xp-toggle {
  display: flex; border-radius: 999px;
  box-shadow: var(--shadow-inset);
  padding: 3px; flex-shrink: 0;
}
.xp-toggle__btn {
  border: none; background: transparent; border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit; font-size: .62rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.xp-toggle__btn.on { background: var(--surface); box-shadow: var(--shadow-raised-sm); color: var(--text-primary); }

/* receipts — folded, clickable history */
.xp-receipts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.xp-receipt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: start;
  border: none; border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  padding: 9px 14px;
  font-family: inherit; cursor: pointer;
  opacity: .92;
  animation: jStageIn .35s var(--ease-out) both;
  -webkit-tap-highlight-color: transparent;
}
.xp-receipt:active { box-shadow: var(--shadow-inset); }
.xp-receipt__check {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.xp-receipt__title { font-size: .68rem; font-weight: 700; color: var(--text-secondary); min-width: 0; }
.xp-receipt__math {
  margin-inline-start: auto; flex-shrink: 1; min-width: 0;
  direction: ltr; unicode-bidi: isolate;
  font-size: .72rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 45%;
}

/* back button */
.xp-back-btn {
  border: none; border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  padding: 10px 18px;
  font-family: inherit; font-size: .68rem; font-weight: 700;
  color: var(--text-secondary); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.xp-back-btn:active { box-shadow: var(--shadow-inset); transform: scale(.96); }

/* main idea: labeled sections */
.xp-label {
  font-size: .55rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.xp-label--ask { color: var(--accent); }
.rel-strip {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: 12px 16px;
}
.rel-strip__text { font-size: .7rem; font-weight: 500; color: var(--text-secondary); line-height: 1.8; }
.decode-card__hook, .dk-tricky__hook { margin-bottom: 12px; }

/* ── mobile journey: guided mode ── */
.journey__head { flex-wrap: wrap; gap: 8px; }
.journey__title { flex: 1; min-width: 0; }
.journey--focus .journey__stages { padding-inline-start: 0; }
.journey--focus .jstage { display: none; }
.journey--focus .jstage.jstage--focus-active { display: block; }
.journey--focus .jstage::before, .journey--focus .jstage__dot { display: none; }
.journey--focus .jstage--focus-active .jstage__body { display: flex; }
.journey--focus .jstage--focus-active .jstage__continue {
  display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px;
}
.jstage--enterfocus .jstage__body { animation: jStageIn .45s var(--ease-out) both; }
.journey--focus .jstage__title { font-size: .84rem; }
.journey--focus .jstage__head { min-height: 0; margin-bottom: 2px; }

/* ── desktop: banner row, receipts, focus stage, glow ── */
/* (verdict now renders as .dk-verdict in the dock; flow header is .dk-flow__head) */
.dk-flow__head .xp-toggle__btn { font-size: .66rem; padding: 6px 13px; }
.dk-split .xp-receipts { margin-bottom: 22px; }
.dk-split .xp-receipt { padding: 10px 16px; }
.dk-split .xp-receipt__title { font-size: .76rem; }
.dk-split .xp-receipt__math { font-size: .8rem; }
.dk-split .xp-back-btn { font-size: .74rem; padding: 11px 22px; }
.dk-split .xp-label { font-size: .6rem; }
.dk-split .rel-strip__text { font-size: .78rem; }

.dk-split--focusmode .dk-act { display: none; }
.dk-split--focusmode .dk-act.dk-act--focus { display: block; margin-bottom: 0; }
.dk-split--focusmode .dk-act.dk-act--focus .dk-act__continue {
  display: flex; align-items: center; gap: 14px; margin-top: 24px;
}
.dk-act--enterfocus .dk-act__body { animation: jStageIn .45s var(--ease-out) both; }

/* focus type scale — the active stage speaks up */
.dk-split--focusmode .dk-act--focus .dk-act__title { font-size: 1.55rem; margin-bottom: 18px; letter-spacing: -.01em; }
.dk-split--focusmode .dk-act--focus .dk-act__kicker { margin-bottom: 10px; }
.dk-split--focusmode .dk-act--focus .dk-act__dot { width: 10px; height: 10px; }
.dk-split--focusmode .dk-act--focus .idea-card, .dk-split--focusmode .dk-act--focus .jstep-card,
.dk-split--focusmode .dk-act--focus .dk-tricky, .dk-split--focusmode .dk-act--focus .janswer-card { padding: 22px 26px; }
.dk-split--focusmode .dk-act--focus .idea-card__hook { font-size: .95rem; line-height: 1.9; }
.dk-split--focusmode .dk-act--focus .idea-card__ask { font-size: 1.16rem; line-height: 1.95; }
.dk-split--focusmode .dk-act--focus .rel-strip { padding: 16px 22px; }
.dk-split--focusmode .dk-act--focus .rel-strip__text { font-size: .88rem; }
.dk-split--focusmode .dk-act--focus .xp-label { font-size: .64rem; }
.dk-split--focusmode .dk-act--focus .dk-tricky__label { font-size: .64rem; margin-bottom: 12px; }
.dk-split--focusmode .dk-act--focus .dk-tricky__blocker { font-size: .9rem; line-height: 1.9; }
.dk-split--focusmode .dk-act--focus .dk-decode { padding: 17px 19px; }
.dk-split--focusmode .dk-act--focus .dk-decode__sym { font-size: 1.2rem; }
.dk-split--focusmode .dk-act--focus .dk-decode__meaning { font-size: .88rem; line-height: 1.9; }
.dk-split--focusmode .dk-act--focus .dk-decode__metaphor { font-size: .8rem; }
.dk-split--focusmode .dk-act--focus .jstep-card__action { font-size: .95rem; line-height: 1.9; margin-bottom: 16px; }
.dk-split--focusmode .dk-act--focus .jstep-card__math { padding: 20px 14px; font-size: 1.2rem; }
.dk-split--focusmode .dk-act--focus .why-drawer__toggle { font-size: .8rem; }
.dk-split--focusmode .dk-act--focus .why-drawer__text { font-size: .86rem; line-height: 1.9; }
.dk-split--focusmode .dk-act--focus .why-bridge__rule { font-size: .86rem; }
.dk-split--focusmode .dk-act--focus .why-bridge__analogy { font-size: .84rem; line-height: 1.9; }
.dk-split--focusmode .dk-act--focus .term-chip { font-size: .7rem; padding: 6px 14px; }
.dk-split--focusmode .dk-act--focus .janswer-card { font-size: 1.02rem; line-height: 1.95; }
.dk-split--focusmode .dk-act--focus .jtile__title { font-size: .88rem; }
.dk-split--focusmode .dk-act--focus .jtile__text { font-size: .84rem; line-height: 1.9; }
.dk-split--focusmode .dk-act--focus .jtile__notice { font-size: .82rem; }
.dk-split--focusmode .dk-act--focus .wonder__q { font-size: .86rem; }
.dk-split--focusmode .dk-act--focus .wonder.revealed .wonder__why { font-size: .82rem; }
.dk-split--focusmode .dk-act--focus .try-card__text { font-size: .8rem; }
.dk-split--focusmode .dk-act--focus .metaphor-anchor-card__metaphor { font-size: .88rem; }
.dk-split--focusmode .dk-act--focus .journey-closing { font-size: .86rem; }
.dk-split--focusmode .dk-act--focus .journey-continue-btn { font-size: .86rem; padding: 13px 36px; }

/* Desktop explanation accordion: the mobile reading model at desktop scale.
   Every step title remains visible, but only one body can be open. */
.dk-split--accordion .dk-flow__inner {
  max-width: 830px;
  padding-bottom: 36px;
}
.dk-split--accordion .dk-act {
  position: relative;
  margin: 0;
  padding: 0 0 8px;
  scroll-margin-top: 10px;
}
.dk-split--accordion .dk-act::before {
  content: '';
  position: absolute;
  inset-block: 43px -8px;
  inset-inline-start: 25px;
  width: 1px;
  background: color-mix(in srgb, var(--text-muted) 20%, transparent);
}
.dk-split--accordion .dk-act--last::before { display: none; }
.dk-act__trigger {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  padding: 11px 10px;
  text-align: start;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.dk-act__trigger:hover {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.dk-act__trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 2px;
}
.dk-act__marker {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-muted);
  box-shadow: var(--shadow-raised-sm);
  font-size: .66rem;
  font-weight: 800;
  transition: color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out);
}
.dk-act__marker--h { color: var(--dk-height); }
.dk-act__marker--s { color: var(--dk-slope); }
.dk-act__heading { min-width: 0; display: block; }
.dk-act__trigger .dk-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: .57rem;
}
.dk-act__trigger .dk-act__title {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}
.dk-act__chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: transform .2s var(--ease-out), color .2s var(--ease-out);
}
.dk-split--accordion .dk-act:not(.dk-act--focus) .dk-act__trigger { opacity: .55; }
.dk-split--accordion .dk-act:not(.dk-act--focus) .dk-act__body,
.dk-split--accordion .dk-act:not(.dk-act--focus) .dk-act__continue { display: none; }
.dk-split--accordion .dk-act--focus .dk-act__trigger {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--shadow-inset);
}
.dk-split--accordion .dk-act--focus .dk-act__marker {
  color: var(--accent);
  transform: scale(1.05);
  box-shadow: var(--shadow-raised-sm), 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.dk-split--accordion .dk-act--focus .dk-act__chevron {
  color: var(--accent);
  transform: rotate(180deg);
}
.dk-split--accordion .dk-act__body {
  margin: 8px 10px 0 50px;
  padding: 4px 0 10px;
}
[dir="rtl"] .dk-split--accordion .dk-act__body { margin: 8px 50px 0 10px; }
.dk-split--accordion .dk-act--focus:not(.dk-act--last) .dk-act__continue {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 10px 8px 50px;
}
[dir="rtl"] .dk-split--accordion .dk-act--focus:not(.dk-act--last) .dk-act__continue {
  margin: 14px 50px 8px 10px;
}
.dk-split--accordion .dk-act--enterfocus .dk-act__body {
  animation: jStageIn .35s var(--ease-out) both;
}

/* graph attention cue (desktop) */
.dk-graph { transition: box-shadow .6s ease; }
.dk-graph--hint {
  box-shadow: var(--shadow-raised-sm),
    0 0 0 2.5px color-mix(in srgb, var(--cue, var(--accent)) 45%, transparent),
    0 10px 34px color-mix(in srgb, var(--cue, var(--accent)) 30%, transparent);
}
.dk-graph--cue-h { --cue: var(--dk-height); }
.dk-graph--cue-s { --cue: var(--dk-slope); }
[data-theme="dark"] .dk-graph--hint {
  box-shadow: var(--shadow-raised-sm),
    0 0 0 2.5px color-mix(in srgb, var(--cue, var(--accent)) 60%, transparent),
    0 10px 38px color-mix(in srgb, var(--cue, var(--accent)) 45%, transparent);
}
.dk-graph--breathe {
  animation: dkGraphBreathe 1.55s var(--ease-out) 2;
  transform-origin: center;
  will-change: transform;
}
@keyframes dkGraphBreathe {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.028); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-graph--breathe { animation: none; }
  .dk-graph { transition: none; }
  .xp-receipt, .jstage--enterfocus .jstage__body, .dk-act--enterfocus .dk-act__body { animation: none; }
}

/* Glossary drawer — bottom sheet */
.glossary-drawer-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(0,0,0,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.glossary-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.glossary-drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 251;
  max-height: min(72vh, 620px);
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -14px 42px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.glossary-drawer-overlay.open .glossary-drawer { transform: translateY(0); }

.glossary-drawer__handle {
  display: flex; justify-content: center;
  padding: 12px 0 6px;
  position: sticky; top: 0;
  background: linear-gradient(to bottom, var(--surface-glass, var(--bg)) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1;
}
.glossary-drawer__handle::after {
  content: '';
  width: 42px; height: 5px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}

.glossary-drawer__content {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 8px 20px 32px;
}

.glossary-drawer__term-title {
  font-size: .85rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.glossary-drawer__term-en {
  font-size: .65rem; font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.glossary-drawer__field {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  box-shadow: var(--shadow-inset);
}
.glossary-drawer__field-label {
  font-size: .58rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.glossary-drawer__field-value {
  font-size: .72rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.8;
}
.glossary-drawer__field-value.math {
  direction: ltr;
  font-size: .82rem;
  color: var(--text-primary);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.glossary-drawer__used-steps {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.glossary-drawer__step-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--surface);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: .6rem; font-weight: 600;
  color: var(--accent);
  box-shadow: var(--shadow-raised-sm);
}

/* Glossary */
.glossary-section {
  margin-top: 16px;
}
.glossary-title {
  font-size: .65rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.glossary-list {
  display: flex; flex-direction: column; gap: 6px;
}
.glossary-item {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised-sm);
  padding: 10px 14px;
  width: 100%;
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.glossary-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-raised);
}
.glossary-term {
  font-size: .7rem; font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}
.glossary-def {
  font-size: .65rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.7;
}
.glossary-contexts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.glossary-context-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font-size: .55rem;
  font-weight: 700;
}

/* ── Bottom navigation ── */
.nav-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--bg);
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.nav-bar.hidden { display: none; }

.nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%; border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary);
  transition: all .25s cubic-bezier(.2, 1, .3, 1); -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  pointer-events: auto;
}
.nav-btn:hover:not(:disabled) {
  color: var(--accent);
  box-shadow: var(--shadow-raised-sm), 0 6px 16px rgba(59, 181, 168, 0.25);
  background: var(--surface);
}
.nav-btn:active { box-shadow: var(--shadow-inset); transform: scale(.92); }
.nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.nav-btn svg { transition: transform .15s; }
[dir="ltr"] .nav-btn.nav-prev svg { transform: scaleX(-1); }
[dir="ltr"] .nav-btn.nav-next svg { transform: scaleX(-1); }

.nav-center {
  flex: 1; text-align: center;
}
.nav-counter {
  font-size: .72rem; font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.nav-overview-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: .6rem; font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  border: none; background: none;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
.nav-overview-link:hover { text-decoration: underline; }

/* ── Smart Tokens (math formula chips) ── */
.smart-token {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  margin: 0 4px;
  padding: 3px 8px;
  border-radius: 10px;
  vertical-align: baseline;
  direction: ltr;
  unicode-bidi: isolate-override;
  isolation: isolate;
  text-align: left;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  font-synthesis: none;
  background: rgba(255,255,255,.28);
  box-shadow: inset 1px 1px 2px rgba(70,62,50,.12), inset -1px -1px 2px rgba(255,255,255,.55);
}
[data-theme="dark"] .smart-token {
  background: rgba(255,255,255,.06);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.2), inset -1px -1px 2px rgba(255,255,255,.05);
}
.smart-token--formula {
  color: var(--text-primary);
  background: var(--surface);
}
.smart-token--formula:has(.op-limits),
.smart-token--formula:has(.mfrac),
.smart-token--formula:has(.sqrt),
.smart-token--piecewise,
.smart-token--formula-set {
  padding-top: 8px;
  padding-bottom: 8px;
}
.smart-token--piecewise .katex,
.smart-token--formula-set .katex { font-size: 0.9em; }
.smart-token--number {
  color: var(--text-primary);
  background: var(--surface);
  font-weight: 700;
  font-size: 0.92em;
}
.smart-token .katex { font-size: 0.96em; line-height: 1; direction: ltr; unicode-bidi: isolate-override; }
.smart-token .katex,
.smart-token .katex-html {
  white-space: nowrap;
  max-width: none;
  min-width: max-content;
}

/* ── Formula Panel (display math) ── */
.formula-panel {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-inset);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.formula-panel .katex { color: var(--text-primary); font-size: 1.05rem; }
.formula-panel--inline-source { display: inline-block; margin: 8px 0; }

/* ── Structured math groups ── */
.structured-math-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em;
  max-width: 100%;
  vertical-align: baseline;
  direction: ltr;
  unicode-bidi: isolate;
}
.structured-math-separator {
  color: var(--text-muted);
  margin: 0 0.08em;
}
.structured-render {
  overflow-wrap: normal;
}
.structured-block--text {
  white-space: pre-wrap;
}
.structured-block--text + .smart-token,
.smart-token + .structured-block--text,
.structured-block--text + .structured-block--text {
  margin-left: 0.25em;
}
[dir="rtl"] .structured-block--text + .smart-token,
[dir="rtl"] .smart-token + .structured-block--text,
[dir="rtl"] .structured-block--text + .structured-block--text {
  margin-left: 0;
  margin-right: 0.25em;
}
.structured-figure-ref {
  display: inline-flex;
  align-items: center;
  margin: 0 0.3em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59,181,168,.1);
  color: var(--accent);
  font-size: 0.82em;
  font-weight: 700;
  vertical-align: baseline;
}
.structured-figure-ref--anchor {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.structured-condition-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em 0.55em;
  margin: 8px 0;
  max-width: 100%;
  direction: ltr;
  unicode-bidi: isolate;
}
.structured-condition-grid--rtl {
  direction: rtl;
}
.structured-condition-item {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  min-width: 0;
  max-width: 100%;
}

/* ── Digital Graph ── */
.digital-graph-mount {
  position: relative;
  width: min(100%, 460px);
  display: grid;
  place-items: center;
  margin: 16px auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}
.digital-graph-mount::before,
.graph-asset-frame::before,
.graph-asset::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: var(--radius-md);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
}
.digital-graph-mount .math-graph-svg {
  width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
  border-radius: var(--radius-md);
  background: var(--surface);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.08));
}
.graph-asset,
.graph-asset-frame,
.question-graph-asset {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: 190px;
  margin: 16px auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
}
.graph-asset img,
.graph-asset svg,
.graph-asset-frame img,
.graph-asset-frame svg,
.question-graph-asset img,
.question-graph-asset svg {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.08));
}
.graph-asset.is-loading,
.graph-asset-frame.is-loading,
.question-graph-asset.is-loading {
  color: var(--text-muted);
}
.graph-asset.is-loading::after,
.graph-asset-frame.is-loading::after,
.question-graph-asset.is-loading::after {
  content: '';
  width: 64%;
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface-alt), var(--surface), var(--surface-alt));
  background-size: 220% 100%;
  box-shadow: var(--shadow-inset);
  animation: birkari-skeleton 1.35s ease-in-out infinite;
}

@media (max-width: 640px) {
  .question-container {
    padding: 10px 14px calc(168px + env(safe-area-inset-bottom, 0px));
  }
  .q-text {
    padding: 12px;
    margin-bottom: 8px;
    line-height: 1.7;
  }
  .options-grid {
    gap: 7px;
    margin-bottom: 12px;
  }
  .option-btn {
    padding: 12px 14px;
  }
  .option-shell.has-zoom > .option-btn {
    padding-inline-end: 62px;
  }
  .option-btn .smart-token {
    max-width: 100%;
    margin-inline: 0;
  }
  .option-btn .katex,
  .smart-token .katex,
  .formula-panel .katex,
  .jstep-card__math .katex,
  body .q-text .katex,
  body .structured-render .katex {
    font-size: max(1em, 16px) !important;
  }
  .stem-shell.has-zoom > .structured-render { padding-inline-end: 52px; }
  .opt-zoom,
  .stem-zoom {
    top: 50%;
    width: 44px;
    height: 44px;
    opacity: 1;
    transform: translateY(-50%);
  }
  .opt-zoom:hover,
  .stem-zoom:hover { transform: translateY(-50%) scale(1.06); }
  .opt-zoom:active,
  .stem-zoom:active { transform: translateY(-50%) scale(.96); }
  .formula-zoom-overlay { padding: 16px; }
  .formula-zoom-card {
    width: 100%;
    max-width: calc(100vw - 32px);
    padding: 54px 20px 28px;
    gap: 14px;
  }
  .formula-zoom-letter {
    width: 42px;
    height: 42px;
  }
  .formula-zoom-body {
    width: 100%;
    overflow-x: auto;
    font-size: 1.15rem;
  }
  .formula-zoom-body .katex { font-size: 1.55em !important; }
  .formula-zoom-card.is-graph-zoom {
    width: 100%;
    padding: 52px 14px 20px;
  }
  .formula-zoom-body.is-graph-zoom .option-graph-asset {
    width: 520px;
    max-width: none;
    margin: 0;
    padding: 8px;
  }
  .q-pill {
    width: 44px;
    height: 44px;
  }
  .check-btn {
    min-height: 44px;
    padding: 10px;
  }
  .digital-graph-mount,
  .graph-asset,
  .graph-asset-frame,
  .question-graph-asset {
    width: min(100%, 270px);
    margin: 6px auto;
    padding: 6px;
    min-height: 0;
  }
  .digital-graph-mount .math-graph-svg,
  .question-graph-asset svg,
  .question-graph-asset img {
    max-height: min(190px, 27vh);
  }
}
/* Dark-mode SVG recolor — applies to EVERY MathGraph SVG regardless of mount:
   .digital-graph-mount (main card + options), .dk-graph (desktop stem) and
   .journey-graph__plot (mobile post-answer journey) all carry .math-graph-svg.
   Previously scoped to .digital-graph-mount only, which left the desktop stem
   graph and the journey graph as a glaring white rectangle in dark mode. */
[data-theme="dark"] .math-graph-svg rect:first-child { fill: var(--surface) !important; }
[data-theme="dark"] .math-graph-svg line[stroke="#e5e7eb"] { stroke: rgba(255,255,255,.1); }
[data-theme="dark"] .math-graph-svg line[stroke="#f3f4f6"] { stroke: rgba(255,255,255,.05); }
[data-theme="dark"] .math-graph-svg line[stroke="#1e293b"],
[data-theme="dark"] .math-graph-svg polygon[fill="#1e293b"] { stroke: var(--text-primary); fill: var(--text-primary); }
[data-theme="dark"] .math-graph-svg text[fill="#64748b"] { fill: var(--text-muted); }
[data-theme="dark"] .math-graph-svg text[fill="#1e293b"] { fill: var(--text-primary); }
/* Label outlines match the SVG surface in dark mode. Keeping the light-theme
   white halo here made the duplicated x/y/function glyph layers merge into a
   blurry white shape on small, high-density screens. */
[data-theme="dark"] .math-graph-svg .math-graph-label-outline {
  stroke: var(--surface);
}
[data-theme="dark"] .math-graph-svg path[stroke] { stroke: var(--accent); }
[data-theme="dark"] .math-graph-svg line[stroke="#444444"],
[data-theme="dark"] .math-graph-svg polyline[stroke="#444444"] { stroke: var(--accent); }

/* Questions with no machine-readable spec render a light raster <img>; soften the
   glare in dark mode so it reads against the clay surface instead of blaring white. */
[data-theme="dark"] .graph-asset img,
[data-theme="dark"] .graph-asset-frame img,
[data-theme="dark"] .question-graph-asset img,
[data-theme="dark"] .option-graph-asset img {
  filter: invert(1) hue-rotate(180deg) drop-shadow(0 8px 14px rgba(0,0,0,.28));
}

/* ── Live Supabase question states ── */
.question-container.is-loading,
.question-container[data-state="loading"],
.question-container.is-unavailable,
.question-container[data-state="unavailable"],
.question-container.is-error,
.question-container[data-state="error"] {
  min-height: min(58vh, 560px);
  display: grid;
  align-content: start;
}

.question-loading,
.question-unavailable,
.question-error,
.question-state-card,
.live-state-card {
  width: min(100%, 430px);
  margin: 22px auto;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm), inset 0 1px 0 rgba(255,255,255,.22);
  color: var(--text-secondary);
  text-align: center;
  animation: fadeUp .28s var(--ease-out);
}

.question-loading__icon,
.question-unavailable__icon,
.question-error__icon,
.question-state-card__icon,
.live-state-card__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 13px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  color: var(--accent);
}

.question-loading__title,
.question-unavailable__title,
.question-error__title,
.question-state-card__title,
.live-state-card__title {
  color: var(--text-primary);
  font-size: .88rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.question-loading__body,
.question-unavailable__body,
.question-error__body,
.question-state-card__body,
.live-state-card__body {
  max-width: 330px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.85;
}

.question-loading__skeleton,
.question-skeleton,
.live-skeleton {
  width: min(100%, 430px);
  margin: 18px auto 0;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}

.question-skeleton-line,
.skeleton-line,
.live-skeleton__line {
  display: block;
  height: 12px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface-alt) 0%, var(--surface) 42%, var(--surface-alt) 78%);
  background-size: 220% 100%;
  box-shadow: var(--shadow-inset);
  animation: birkari-skeleton 1.35s ease-in-out infinite;
}
.question-skeleton-line + .question-skeleton-line,
.skeleton-line + .skeleton-line,
.live-skeleton__line + .live-skeleton__line { margin-top: 10px; }
.question-skeleton-line.short,
.skeleton-line.short,
.live-skeleton__line.short { width: 46%; }
.question-skeleton-line.medium,
.skeleton-line.medium,
.live-skeleton__line.medium { width: 72%; }

.retry-btn,
.question-retry-btn,
.supabase-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 16px;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.retry-btn:hover,
.question-retry-btn:hover,
.supabase-retry-btn:hover {
  color: var(--accent-hover);
  box-shadow: var(--shadow-raised), 0 0 16px var(--accent-glow);
  transform: translateY(-1px);
}
.retry-btn:active,
.question-retry-btn:active,
.supabase-retry-btn:active {
  box-shadow: var(--shadow-inset);
  transform: scale(.97);
}

@keyframes birkari-skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Horizontal question scrollbar ── */
/* Question nav row — desktop only. On mobile it dissolves (display: contents)
   so the pills bar keeps its original layout and the bottom bar does the nav. */
.q-nav-row { display: contents; }
.q-nav-btn { display: none; }

.q-scroll-bar {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  max-width: clamp(480px, 50vw, 600px);
  margin-left: auto; margin-right: auto;
}
.q-scroll-bar::-webkit-scrollbar { display: none; }
.q-scroll-bar {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.q-pill {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text-secondary);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  font-size: .7rem; font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  border: none; font-family: inherit;
  line-height: 1;
}
.q-pill:hover { color: var(--text-primary); transform: translateY(-1px); }
.q-pill:active { box-shadow: var(--shadow-inset); transform: scale(.97); }
.q-pill--current {
  color: var(--accent);
  box-shadow: var(--shadow-inset);
  font-weight: 800;
}
.q-pill--correct {
  color: #3a8a3a;
  background: rgba(58,138,58,.08);
}
[data-theme="dark"] .q-pill--correct {
  color: #7dca70;
  background: rgba(58,138,58,.15);
}
.q-pill--incorrect {
  color: #c53030;
  background: rgba(197,48,48,.08);
}
[data-theme="dark"] .q-pill--incorrect {
  color: #fc8181;
  background: rgba(197,48,48,.15);
}
.q-pill--locked {
  opacity: .35;
  cursor: not-allowed;
}
.q-pill--locked:hover { transform: none; }

@media (max-width: 640px) {
  .q-scroll-bar {
    gap: 8px;
    margin-bottom: 6px;
  }
  .q-pill {
    width: 44px;
    height: 44px;
  }
}

/* ══════════════════════════════════════════
   ACCESS CODE MODAL
   ══════════════════════════════════════════ */
.code-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
  padding: 24px;
}
.code-overlay.open { opacity: 1; pointer-events: auto; }

.code-dialog {
  width: 100%; max-width: 420px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
  transform: scale(.92) translateY(16px);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.code-overlay.open .code-dialog {
  transform: scale(1) translateY(0);
}

/* Page container — slides between page 1 and page 2 */
.code-pages {
  display: flex;
  width: 200%;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.code-pages.show-buy { transform: translateX(-50%); }
[dir="rtl"] .code-pages.show-buy { transform: translateX(50%); }
.code-page {
  width: 50%; flex-shrink: 0;
  padding: 28px 24px 24px;
  box-sizing: border-box;
}

/* — Page 1: Enter Key — */
.code-page__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 16px;
}
.code-page__title {
  font-size: .88rem; font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 6px;
}
.code-page__desc {
  font-size: .7rem; font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 20px;
}

.code-input-row {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.code-input {
  flex: 1;
  direction: ltr;
  unicode-bidi: isolate;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  font-family: 'Inter', 'Outfit', monospace;
  font-size: .85rem; font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: box-shadow .2s;
}
.code-input::placeholder {
  color: var(--text-muted); font-weight: 500;
  letter-spacing: .05em; text-transform: none;
}
.code-input:focus {
  box-shadow: var(--shadow-inset), 0 0 0 2px var(--accent);
}
.code-input.error {
  box-shadow: var(--shadow-inset), 0 0 0 2px #c44;
  animation: input-shake .4s ease-in-out;
}
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.code-submit {
  padding: 13px 22px;
  border-radius: var(--radius-md); border: none;
  background: var(--accent); color: var(--accent-text);
  font-family: inherit; font-size: .78rem; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-raised-sm);
  transition: all .2s; -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.code-submit:hover { background: var(--accent-hover); }
.code-submit:active { transform: scale(.96); }

.code-error-msg {
  font-size: .66rem; font-weight: 600;
  color: #c44; text-align: center;
  min-height: 1.1em; margin-bottom: 10px;
}
[data-theme="dark"] .code-error-msg { color: #f08080; }

.code-divider {
  height: 1px; background: var(--surface);
  box-shadow: var(--shadow-inset);
  border-radius: 1px; margin: 14px 0;
}

.code-no-key {
  display: block; width: 100%;
  padding: 11px; border-radius: var(--radius-md);
  border: none; background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  font-family: inherit; font-size: .72rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.code-no-key:hover {
  color: var(--accent); box-shadow: var(--shadow-raised);
}
.code-no-key:active { box-shadow: var(--shadow-inset); transform: scale(.98); }

.code-free-badge {
  font-size: .6rem; font-weight: 600;
  color: var(--text-muted);
  text-align: center; margin-top: 14px;
  line-height: 1.6;
}

/* Unlocked-exam chip under the twin-view subtitle */
.access-chip {
  display: flex; align-items: center; gap: 6px;
  width: fit-content;
  margin: -6px auto 14px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .62rem; font-weight: 700;
  color: var(--correct, #2e9e6b);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}
.access-chip[hidden] { display: none; }

/* — Page 2: Buy Key — */
.code-buy-header {
  /* back button leads (inline-start in both directions), title follows */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.code-back-btn {
  grid-column: 1; grid-row: 1;
  width: 32px; height: 32px;
  border-radius: 10px; border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary);
  font-size: .8rem; transition: all .15s;
  flex-shrink: 0;
}
[dir="rtl"] .code-back-btn svg { transform: scaleX(-1); }
.code-back-btn:hover { color: var(--accent); }
.code-back-btn:active { box-shadow: var(--shadow-inset); transform: scale(.94); }
.code-buy-header__title {
  grid-column: 2; grid-row: 1;
  font-size: .82rem; font-weight: 700;
  color: var(--text-primary);
  text-align: start;
}

.code-scope-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: var(--shadow-inset);
}
.code-scope-note__icon {
  flex-shrink: 0;
  font-size: .82rem;
  line-height: 1.45;
}
.code-scope-note__copy { min-width: 0; }
.code-scope-note__exam {
  color: var(--text-primary);
  font-size: .67rem; font-weight: 750;
  line-height: 1.65;
}
.code-scope-note__duration {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: .61rem; font-weight: 550;
  line-height: 1.65;
}

.code-instruction-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.code-instruction {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm);
}
.code-instruction__num {
  width: 26px; height: 26px;
  border-radius: 9px;
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800;
  flex-shrink: 0;
}
.code-instruction__text {
  font-size: .7rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.75;
  min-width: 0;
  word-break: break-word;
}
.code-instruction__text strong {
  font-weight: 700; color: var(--text-primary);
}
.code-phone-number {
  display: inline-block;
  font-family: 'Inter', monospace;
  font-weight: 700; font-size: .75rem;
  color: var(--accent);
  letter-spacing: .04em;
  direction: ltr;
  unicode-bidi: embed;
}

.code-disclaimer {
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset);
  padding: 10px 14px;
  font-size: .62rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.75;
  margin-top: 12px;
  word-break: break-word;
}
.code-disclaimer strong {
  font-weight: 700; color: var(--text-secondary);
}

/* Unlock animation on twin cards */
@keyframes card-unlock {
  0% { transform: scale(1); opacity: .5; }
  50% { transform: scale(1.03); box-shadow: var(--shadow-raised), 0 0 20px rgba(59,181,168,.3); }
  100% { transform: scale(1); opacity: 1; }
}
.twin-card.unlocking {
  animation: card-unlock .5s ease-out forwards;
}

/* ══════════════════════════════════════════
   PAID-LOCKED — blurred teaser + gold glare
   (gold = locked treasure · teal = available)
   ══════════════════════════════════════════ */
.twin-card.paid-locked { cursor: pointer; }
.twin-card.paid-locked:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}
.twin-card.paid-locked .twin-card__num-box {
  color: var(--premium);
  box-shadow: var(--shadow-inset), inset 0 0 0 1.5px var(--premium-ring);
}
.twin-card.paid-locked .twin-card__preview--teaser {
  filter: blur(4.5px) saturate(.85);
  opacity: .75;
  user-select: none;
  -webkit-user-select: none;
  font-style: normal;
  color: var(--text-secondary);
}

.unlock-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  background: var(--premium-tint);
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1px var(--premium-ring);
  color: var(--premium);
  font-size: .6rem; font-weight: 800;
  letter-spacing: .04em;
  transition: transform .3s var(--ease-bounce), box-shadow .2s;
}
.twin-card.paid-locked:hover .unlock-chip {
  transform: translateY(-1px) scale(1.05);
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1px var(--premium-ring), 0 0 14px var(--premium-tint);
}
.unlock-chip svg { width: 11px; height: 12px; display: block; }
.unlock-chip .shackle { transition: transform .3s var(--ease-bounce); transform-origin: 20% 100%; }
.twin-card.paid-locked:hover .unlock-chip .shackle { transform: translateY(-.9px) rotate(-8deg); }

/* Math-stamp watermark — a quiet embossed glyph per locked row.
   The ambient foil glare lives on the upsell strip only; rows stay calm. */
.twin-card.paid-locked::after {
  content: attr(data-glyph);
  position: absolute;
  top: 50%;
  inset-inline-end: 112px;
  transform: translateY(-52%) rotate(-8deg);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1;
  color: var(--premium);
  opacity: .13;
  pointer-events: none;
}
[dir="rtl"] .twin-card.paid-locked::after { transform: translateY(-52%) rotate(8deg); }

/* Desktop: one polite glint on hover — feedback, not a light show */
.twin-card.paid-locked::before {
  content: '';
  position: absolute;
  inset: -20% auto -20% 0;
  width: 55%;
  transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(100deg,
    transparent 8%,
    var(--sheen-a) 46%,
    var(--sheen-b) 58%,
    transparent 92%);
  pointer-events: none;
}
.twin-card.paid-locked:hover::before { animation: bk-glare-once .8s var(--ease-out) 1; }
[dir="rtl"] .twin-card.paid-locked:hover::before { animation-name: bk-glare-once-rtl; }
@keyframes bk-glare-once {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(340%)  skewX(-18deg); }
}
@keyframes bk-glare-once-rtl {
  from { transform: translateX(340%)  skewX(18deg); }
  to   { transform: translateX(-160%) skewX(18deg); }
}
@keyframes bk-glare {
  0%   { transform: translateX(-160%) skewX(-18deg); }
  16%  { transform: translateX(340%)  skewX(-18deg); }
  100% { transform: translateX(340%)  skewX(-18deg); }
}
@keyframes bk-glare-rtl {
  0%   { transform: translateX(340%)  skewX(18deg); }
  16%  { transform: translateX(-160%) skewX(18deg); }
  100% { transform: translateX(-160%) skewX(18deg); }
}

/* Tap feedback: eager bounce, not a refusal shake */
.twin-card.paid-locked.tapped {
  animation: bk-eager .45s var(--ease-bounce);
  /* the bounce replaces the stagger-children entrance animation, whose
     "both" fill was supplying opacity — without this the row vanishes */
  opacity: 1;
}
@keyframes bk-eager {
  0%   { transform: scale(1); }
  35%  { transform: scale(.97); }
  70%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Upsell divider strip */
.upsell-strip {
  border: 0; cursor: pointer; width: 100%;
  font: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-inset), inset 0 0 0 1px var(--premium-ring);
  color: var(--premium);
  font-size: .64rem; font-weight: 800;
  position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.upsell-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.upsell-strip__price {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.upsell-strip svg { width: 12px; height: 13px; display: block; flex-shrink: 0; }
.upsell-strip::after {
  content: '';
  position: absolute; inset: -20% auto -20% 0; width: 45%;
  transform: translateX(-180%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 10%, var(--sheen-a) 50%, transparent 90%);
  pointer-events: none;
  animation: bk-glare 5.4s var(--ease-out) infinite;
  animation-delay: 1.6s;
}
[dir="rtl"] .upsell-strip::after { animation-name: bk-glare-rtl; }

/* ── Unlock offer sheet ── */
.unlock-sheet-wrap { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.unlock-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 24, 28, .35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.unlock-sheet {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  margin-inline: auto;
  max-width: 430px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.22);
  padding: 14px 18px 18px;
  /* calc keeps the sheet fully off-screen no matter how short it is
     (a bare 115% once left short sheets' top lip peeking at the fold);
     visibility stops the upward shadow painting above the viewport edge */
  transform: translateY(calc(100% + 48px));
  visibility: hidden;
  transition: transform .45s var(--ease-bounce), visibility 0s .45s;
  display: flex; flex-direction: column; gap: 13px;
}
.unlock-sheet-wrap.open { pointer-events: auto; }
.unlock-sheet-wrap.open .unlock-sheet-backdrop { opacity: 1; }
.unlock-sheet-wrap.open .unlock-sheet {
  transform: translateY(0);
  visibility: visible;
  transition: transform .45s var(--ease-bounce), visibility 0s;
}

.unlock-sheet__close {
  position: absolute;
  top: 14px; inset-inline-end: 14px;
  width: 34px; height: 34px;
  border: none; cursor: pointer;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-muted);
  font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
  transition: color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.unlock-sheet__close:hover { color: var(--accent); box-shadow: var(--shadow-raised); }
.unlock-sheet__close:active { box-shadow: var(--shadow-inset); transform: scale(.94); }
.unlock-sheet__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.unlock-sheet__grabber {
  width: 44px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  box-shadow: var(--shadow-inset);
  margin: 0 auto;
}
.unlock-sheet__head { display: flex; flex-direction: column; gap: 3px; text-align: center; }
.unlock-sheet__title { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.unlock-sheet__scope { font-size: .6rem; font-weight: 700; color: var(--text-muted); }

.unlock-meter { display: flex; flex-direction: column; gap: 6px; }
.unlock-meter__bar {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
  display: flex;
}
.unlock-meter__free { width: 6%; background: var(--accent-gradient); border-radius: var(--radius-pill); }
.unlock-meter__locked {
  flex: 1;
  background: repeating-linear-gradient(-55deg,
    var(--premium-tint) 0 6px, transparent 6px 12px);
}
.unlock-meter__caption { font-size: .58rem; font-weight: 700; color: var(--text-muted); text-align: center; }

.unlock-sheet__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.unlock-sheet__perks li {
  display: flex; align-items: center; gap: 9px;
  font-size: .68rem; font-weight: 600; color: var(--text-secondary);
  line-height: 1.6;
}
.unlock-perk-ico {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  display: grid; place-items: center;
  color: var(--accent);
  font-size: .62rem; font-weight: 900;
}

.unlock-price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.unlock-price-row__amount {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.02em;
}
.unlock-price-row__meta { font-size: .6rem; font-weight: 700; color: var(--text-muted); }

.unlock-sheet__cta {
  border: 0; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 800;
  color: var(--accent-text);
  background: var(--accent-gradient);
  border-radius: var(--radius-md);
  min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: var(--shadow-raised-sm), 0 4px 18px var(--accent-glow);
  position: relative; overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.unlock-sheet__cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised), 0 6px 24px var(--accent-glow); }
.unlock-sheet__cta:active { transform: scale(.98); }
.unlock-sheet__cta:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.unlock-sheet__cta::after {
  content: '';
  position: absolute; inset: -30% auto -30% 0; width: 40%;
  transform: translateX(-180%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 10%, rgba(255,255,255,.45) 50%, transparent 90%);
  animation: bk-glare 3.8s var(--ease-out) infinite;
  animation-delay: 1s;
}
[dir="rtl"] .unlock-sheet__cta::after { animation-name: bk-glare-rtl; }

.unlock-sheet__alt {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .64rem; font-weight: 800;
  color: var(--accent);
  padding: 4px;
  align-self: center;
}
.unlock-sheet__alt:hover { color: var(--accent-hover); text-decoration: underline; }
.unlock-sheet__alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.unlock-sheet__trust { font-size: .56rem; font-weight: 600; color: var(--text-muted); text-align: center; line-height: 1.6; margin: 0; }
[dir="rtl"] .unlock-sheet__cta [aria-hidden] { display: inline-block; transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .upsell-strip::after,
  .unlock-sheet__cta::after { animation: none; }
  .twin-card.paid-locked.tapped { animation: none; }
  .twin-card.paid-locked:hover::before { animation: none; }
  .unlock-sheet, .unlock-sheet-backdrop { transition: none; }
}
@media (max-width: 800px), (hover: none) and (pointer: coarse) {
  /* No foil sweeps on phones. The static math-stamp watermark stays —
     it costs nothing and keeps the paid-card identity. */
  .twin-card.paid-locked::before,
  .upsell-strip::after,
  .unlock-sheet__cta::after {
    animation: none;
    display: none;
  }
}

/* ══════════════════════════════════════════
   PAYWALL SURFACES — one presentation system:
   bottom sheets on mobile, large centered
   modals (matching the offer sheet) on desktop
   ══════════════════════════════════════════ */
.code-dialog__grabber {
  width: 44px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  box-shadow: var(--shadow-inset);
  margin: 12px auto 0;
}
.code-page { position: relative; }
.code-back-btn--page {
  position: absolute;
  top: 14px;
  inset-inline-start: 16px;
}

/* — Mobile: the code modal docks to the bottom exactly like the offer sheet — */
@media (max-width: 799px) {
  .code-overlay {
    align-items: flex-end;
    padding: 0 12px 12px;
  }
  .code-dialog {
    max-width: 430px;
    background: var(--surface);
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.22);
    transform: translateY(115%);
    transition: transform .45s var(--ease-bounce);
  }
  .code-overlay.open .code-dialog { transform: translateY(0); }
  .code-dialog::before { display: none; }
}

/* ── Active-code countdown card (menu) ── */
.menu-access {
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  color: var(--accent-text);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-raised-sm), 0 3px 14px var(--accent-glow);
  margin-bottom: 4px;
}
.menu-access[hidden] { display: none; }
.menu-access__label {
  font-size: .58rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: .85;
}
.menu-access__exam { font-size: .72rem; font-weight: 800; line-height: 1.5; }
.menu-access__timer {
  font-size: .66rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .95;
}

/* ── "I already bought a code" — buy page ── */
.code-have-key {
  width: 100%;
  margin-top: 14px;
  min-height: 46px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: .74rem; font-weight: 800;
  color: var(--accent);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.code-have-key:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised), 0 0 14px var(--accent-glow); }
.code-have-key:active { transform: scale(.98); box-shadow: var(--shadow-inset); }
.code-have-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── "How it works" badge — reopens the tour beats from the list ── */
.tour-badge {
  display: flex; align-items: center; gap: 7px;
  width: max-content;
  margin: -6px auto 16px;
  padding: 8px 15px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: .64rem; font-weight: 800;
  color: var(--accent);
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.tour-badge[hidden] { display: none; }
.tour-badge:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised), 0 0 12px var(--accent-glow); }
.tour-badge:active { transform: scale(.97); box-shadow: var(--shadow-inset); }
.tour-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-badge svg { flex-shrink: 0; }

/* ── First-run tour — same presentation system as the paywall surfaces ── */
.tour-wrap { position: fixed; inset: 0; z-index: 210; pointer-events: none; }
.tour-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 24, 28, .35);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.tour-card {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  margin-inline: auto;
  max-width: 430px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.22);
  padding: 14px 20px 18px;
  /* the tour body is empty until opened, so the card is short — a bare
     115% translate left its top lip peeking at the bottom of the screen */
  transform: translateY(calc(100% + 48px));
  visibility: hidden;
  transition: transform .45s var(--ease-bounce), visibility 0s .45s;
}
.tour-wrap.open { pointer-events: auto; }
.tour-wrap.open .tour-backdrop { opacity: 1; }
.tour-wrap.open .tour-card {
  transform: translateY(0);
  visibility: visible;
  transition: transform .45s var(--ease-bounce), visibility 0s;
}
.tour-card__grabber {
  width: 44px; height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  box-shadow: var(--shadow-inset);
  margin: 0 auto 12px;
}
.tour-card__body { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.tour-icon {
  width: 46px; height: 46px;
  margin: 2px auto 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  display: grid; place-items: center;
  color: var(--accent);
}
.tour-title { font-size: .95rem; font-weight: 800; color: var(--text-primary); }
.tour-body-text {
  font-size: .72rem; font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.95;
  max-width: 42ch;
  margin: 0 auto;
}
.tour-mock {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px auto 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}
.tour-mock__pill {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tour-mock__pill--accent { color: var(--accent); box-shadow: var(--shadow-raised-sm), 0 0 0 2.5px color-mix(in srgb, var(--accent) 28%, transparent); }

/* Two-route mock (tour beat 3): the fast exam explanation, then the optional
   long one. The fast card is ringed because it is what opens on its own; the
   long card is quieter because it is an offer, not a step. */
.tour-route {
  display: flex; align-items: stretch; justify-content: center; gap: 10px;
  margin: 4px auto 0;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}
.tour-route__step {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 8px;
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  text-align: center;
}
.tour-route__step--fast {
  color: var(--accent);
  box-shadow: var(--shadow-raised-sm), 0 0 0 2.5px color-mix(in srgb, var(--accent) 28%, transparent);
}
.tour-route__step--deep { color: var(--text-secondary); }
.tour-route__icon { display: inline-flex; }
.tour-route__label { font-size: .72rem; font-weight: 800; line-height: 1.2; }
.tour-route__note {
  font-size: .6rem; font-weight: 650; line-height: 1.3;
  color: var(--text-muted);
}
.tour-route__arrow {
  align-self: center;
  flex: none;
  font-size: .82rem; font-weight: 800;
  color: var(--text-muted);
}
.tour-dots { display: flex; justify-content: center; gap: 7px; margin-top: 2px; }
.tour-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}
.tour-dot.on { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.tour-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 2px; }
.tour-next {
  border: none; cursor: pointer;
  font-family: inherit; font-size: .76rem; font-weight: 800;
  color: var(--accent-text);
  background: var(--accent-gradient);
  border-radius: var(--radius-md);
  min-height: 44px;
  padding: 0 26px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-raised-sm), 0 3px 14px var(--accent-glow);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.tour-next:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised), 0 5px 20px var(--accent-glow); }
.tour-next:active { transform: scale(.97); }
.tour-next:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.tour-skip {
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: .64rem; font-weight: 700;
  color: var(--text-muted);
  padding: 4px;
  align-self: center;
}
.tour-skip:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* — Desktop: everything grows and centers mid-screen — */
@media (min-width: 800px) {
  .unlock-sheet__grabber,
  .code-dialog__grabber { display: none; }
  .tour-card__grabber { display: none; }
  .tour-card {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(520px, calc(100vw - 48px));
    max-width: 520px;
    padding: 30px 34px 26px;
    transform: translate(-50%, -50%) scale(.94) translateY(14px);
    opacity: 0;
    transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), visibility 0s .35s;
  }
  .tour-wrap.open .tour-card {
    transform: translate(-50%, -50%) scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), visibility 0s;
  }
  .tour-card__body { gap: 14px; }
  .tour-title { font-size: 1.2rem; }
  .tour-body-text { font-size: .78rem; }
  .tour-mock__pill { min-width: 38px; height: 38px; font-size: .72rem; }

  .unlock-sheet {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(560px, calc(100vw - 48px));
    max-width: 560px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 30px 36px 32px;
    gap: 17px;
    transform: translate(-50%, -50%) scale(.94) translateY(14px);
    opacity: 0;
    transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), visibility 0s .35s;
  }
  .unlock-sheet-wrap.open .unlock-sheet {
    transform: translate(-50%, -50%) scale(1) translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), visibility 0s;
  }
  .unlock-sheet__title { font-size: 1.3rem; }
  .unlock-sheet__scope { font-size: .7rem; }
  .unlock-meter__bar { height: 12px; }
  .unlock-meter__caption { font-size: .66rem; }
  .unlock-sheet__perks { gap: 10px; }
  .unlock-sheet__perks li { font-size: .78rem; }
  .unlock-perk-ico { width: 26px; height: 26px; font-size: .7rem; }
  .unlock-price-row__amount { font-size: 1.9rem; }
  .unlock-price-row__meta { font-size: .68rem; }
  .unlock-sheet__cta { min-height: 54px; font-size: .9rem; }
  .unlock-sheet__alt { font-size: .72rem; }
  .unlock-sheet__trust { font-size: .62rem; }

  /* Code modal adopts the sheet's surface, lighting and scale */
  .code-dialog {
    max-width: 560px;
    background: var(--surface);
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .code-dialog::before { display: none; }
  .code-page { padding: 34px 36px 32px; }
  .code-page__icon { width: 60px; height: 60px; font-size: 1.5rem; }
  .code-page__title { font-size: 1.3rem; }
  .code-page__desc { font-size: .74rem; }
  .code-input { font-size: .95rem; min-height: 52px; }
  .code-submit { min-height: 52px; font-size: .85rem; }
  .code-no-key { min-height: 50px; font-size: .78rem; }
  .code-free-badge { font-size: .64rem; }
  .code-buy-header__title { font-size: 1.05rem; }
  .code-scope-note__exam { font-size: .74rem; }
  .code-scope-note__duration { font-size: .68rem; }
  .code-instruction__text { font-size: .76rem; }
  .code-phone-number { font-size: 1.05rem; }
  .code-disclaimer { font-size: .66rem; }
}
.twin-card.paid-available {
  cursor: pointer;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.twin-card.paid-available .twin-card__preview {
  color: var(--accent);
  font-weight: 700;
}
.paid-question-state {
  min-height: 42vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.8;
}
.paid-question-state__inner {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 340px;
}
/* Secure-loading state uses the shared .bk-loader widget (components.css) */
.turnstile-slot {
  min-height: 65px;
  margin: 8px auto 2px;
  display: grid;
  place-items: center;
}
.turnstile-slot[hidden] { display: none; }

/* ══════════════════════════════════════════
   PAYWALL FULL-SCREEN VIEW
   ══════════════════════════════════════════ */
.paywall-view {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.paywall-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 20px;
}

.paywall-title {
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.paywall-subtitle {
  font-size: .72rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 340px;
  margin: 0 auto 28px;
}

.paywall-card {
  width: 100%; max-width: 400px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 24px;
  margin-bottom: 20px;
  text-align: start;
}

.paywall-card .code-input-row { margin-bottom: 10px; }
.paywall-card .code-divider { margin: 16px 0; }

.paywall-instructions {
  width: 100%; max-width: 400px;
  display: none;
}
.paywall-instructions.show { display: block; }

.paywall-instructions .code-instruction-list { margin-bottom: 14px; }

.paywall-back-row {
  margin-top: 20px;
}
.paywall-back-btn {
  padding: 10px 28px;
  border-radius: var(--radius-md); border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  font-family: inherit; font-size: .72rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.paywall-back-btn:hover { color: var(--accent); box-shadow: var(--shadow-raised); }
.paywall-back-btn:active { box-shadow: var(--shadow-inset); transform: scale(.97); }

/* ══════════════════════════════════════════
   ACCESS SCREEN (inline in questionContent)
   ══════════════════════════════════════════ */
.access-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 20px;
  text-align: center;
  animation: fadeUp .35s ease-out;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.access-screen__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.access-screen__title {
  font-size: .88rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.access-screen__subtitle {
  font-size: .68rem; font-weight: 500;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 340px;
  margin-bottom: 24px;
}

.access-screen__card {
  width: 100%; max-width: 400px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  padding: 20px;
  text-align: start;
  margin-bottom: 14px;
}
.access-screen__card-title {
  font-size: .78rem; font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 4px;
}
.access-screen__card-desc {
  font-size: .62rem; font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}
.access-screen__card .code-input-row { margin-bottom: 6px; }

.access-screen__no-key {
  display: block;
  background: none; border: none;
  font-family: inherit; font-size: .68rem; font-weight: 600;
  color: var(--accent); cursor: pointer;
  padding: 8px 16px;
  margin-bottom: 10px;
  transition: opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.access-screen__no-key:hover { opacity: .7; }

.access-screen__buy {
  width: 100%; max-width: 400px;
  display: none;
  animation: fadeUp .3s ease-out;
}
.access-screen__buy.show { display: block; }

.access-screen__back {
  margin-top: 16px;
  padding: 10px 28px;
  border-radius: var(--radius-md); border: none;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  font-family: inherit; font-size: .68rem; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: all .15s; -webkit-tap-highlight-color: transparent;
}
.access-screen__back:hover { color: var(--accent); box-shadow: var(--shadow-raised); }
.access-screen__back:active { box-shadow: var(--shadow-inset); transform: scale(.97); }

/* ── KaTeX overrides ── */
.katex { font-size: max(1em, 16px) !important; }
.q-text .katex { font-size: max(1.05em, 16px) !important; }

/* ── Transition ── */
.view-enter {
  animation: viewFadeIn .3s var(--ease-out);
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   DESKTOP OPTION B — Slide Deck Layout (PC Screens)
   ══════════════════════════════════════════ */
@media (min-width: 1000px) {
  /* Restrict header to match the central container's maximum width */
  /* desktop page-header: see components.css */

  /* Hamburger + dropdown: keep base positioning, no desktop override */

  /* ── Desktop: no bottom bar — navigation lives in the top pills row ── */
  .nav-bar { display: none; }

  .q-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    margin: 6px auto 12px;
    padding: 0 12px;
  }
  .q-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: none;
    background: var(--surface);
    box-shadow: var(--shadow-raised-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s var(--ease-out, cubic-bezier(.22,1,.36,1));
    -webkit-tap-highlight-color: transparent;
  }
  .q-nav-btn:hover:not(:disabled) {
    color: var(--accent);
    box-shadow: var(--shadow-raised-sm), 0 0 16px var(--accent-glow, rgba(59,181,168,.25));
    transform: scale(1.05);
  }
  .q-nav-btn:active:not(:disabled) {
    box-shadow: var(--shadow-inset);
    transform: scale(.94);
  }
  .q-nav-btn:disabled { opacity: .25; cursor: not-allowed; }
  [dir="ltr"] .q-nav-btn svg { transform: scaleX(-1); }

  /* Pills bar becomes the compact middle of the nav row */
  .q-scroll-bar,
  body.desk-on .q-scroll-bar {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 440px;
    margin: 0;
  }

  /* Header center: brand + question counter */
  .page-header__center { display: block; }

  /* Desktop: reduce bottom padding since the fixed bar is gone */
  .question-container {
    padding-bottom: 24px;
  }
  .twin-container {
    padding-bottom: 24px;
  }
}

/* ══════════════════════════════════════════
   10X POLISH — KEYFRAME ANIMATIONS
   ══════════════════════════════════════════ */

/* ── Entrance animations ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes springPop {
  0%   { transform: scale(.85); }
  60%  { transform: scale(1.06); }
  80%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* ── Feedback animations ── */
@keyframes correctPulse {
  0%   { box-shadow: 0 0 0 0 var(--glow-correct, rgba(58,138,58,.4)); }
  50%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes incorrectShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}
@keyframes glowBreath {
  0%, 100% { opacity: .6; }
  50%      { opacity: 1; }
}
/* Expanding ring on the current question pill. Animated via transform +
   opacity (compositor-only) rather than an animated box-shadow spread, which
   would repaint every frame for the whole time a question is on screen. */
@keyframes ringPulse {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}
@keyframes confettiBurst {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(.5); }
}

/* ── Utility classes ── */
.anim-fade-up {
  animation: fadeSlideUp var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}
.anim-scale-in {
  animation: scaleIn var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}
.anim-spring-pop {
  animation: springPop var(--duration-slow, 400ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}

/* ── Stagger children ── */
.stagger-children > * {
  opacity: 0;
  animation: fadeSlideUp var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}
.stagger-children > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-children > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-children > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-children > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-children > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-children > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-children > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-children > *:nth-child(8)  { animation-delay: 350ms; }
.stagger-children > *:nth-child(9)  { animation-delay: 400ms; }
.stagger-children > *:nth-child(10) { animation-delay: 450ms; }

/* ── Enhanced existing components ── */

/* Twin cards staggered entrance */
.twin-grid.stagger-children > .twin-card {
  animation-name: fadeSlideUp;
  animation-duration: 350ms;
}

/* Option buttons staggered entrance */
.options-grid.stagger-children > .option-btn,
.options-grid.stagger-children > .option-shell {
  animation-name: fadeSlideUp;
  animation-duration: 280ms;
}

/* Explanation sections cascade */
.explanation.show .expl-section {
  opacity: 0;
  animation: fadeSlideUp 320ms var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}
.explanation.show .expl-section:nth-child(1) { animation-delay: 60ms; }
.explanation.show .expl-section:nth-child(2) { animation-delay: 140ms; }
.explanation.show .expl-section:nth-child(3) { animation-delay: 220ms; }
.explanation.show .expl-section:nth-child(4) { animation-delay: 300ms; }
.explanation.show .expl-section:nth-child(5) { animation-delay: 380ms; }
.explanation.show .expl-section:nth-child(6) { animation-delay: 460ms; }
.explanation.show .expl-section:nth-child(7) { animation-delay: 540ms; }
.explanation.show .expl-section:nth-child(8) { animation-delay: 620ms; }
.explanation.show .expl-section:nth-child(9) { animation-delay: 700ms; }

/* Step cards stagger inside section */
.step-list > .step-card {
  opacity: 0;
  animation: fadeSlideUp 300ms var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}
.step-list > .step-card:nth-child(1) { animation-delay: 100ms; }
.step-list > .step-card:nth-child(2) { animation-delay: 180ms; }
.step-list > .step-card:nth-child(3) { animation-delay: 260ms; }
.step-list > .step-card:nth-child(4) { animation-delay: 340ms; }
.step-list > .step-card:nth-child(5) { animation-delay: 420ms; }

/* Option button enhanced interactions */
.option-btn {
  transition: all .2s var(--ease-out, cubic-bezier(.22,1,.36,1)), box-shadow .3s;
}
.option-btn.selected,
.option-btn.correct,
.option-btn.incorrect {
  opacity: 1;
}

/* Result banner animations */
.result-banner.show {
  animation: fadeSlideUp 350ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1)) both;
}
.result-banner.show.correct::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: correctPulse 800ms ease-out;
  pointer-events: none;
}
.result-banner.show.incorrect {
  animation: fadeSlideUp 350ms var(--ease-out, cubic-bezier(.22,1,.36,1)) both,
             incorrectShake 400ms 200ms ease-out;
}

/* Q-pill current pulsing ring */
.q-pill--current {
  position: relative;
}
.q-pill--current::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 13px;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: ringPulse 2s ease-out infinite;
}

/* ── Gradient dividers between explanation sections ── */
.expl-section + .expl-section::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: 12px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border, rgba(0,0,0,.06)) 20%,
    var(--accent, #3bb5a8) 50%,
    var(--border, rgba(0,0,0,.06)) 80%,
    transparent 100%
  );
  opacity: .35;
}

/* ── Step badge gradient ── */
.step-badge {
  background: var(--accent-gradient, var(--accent));
  box-shadow: 0 2px 8px var(--accent-glow, rgba(59,181,168,.25));
}

/* ── Empathy card breathing accent border ── */
.empathy-card {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-image: var(--accent-gradient, var(--accent)) 1;
  position: relative;
}

/* ── Blocker focus amber pulse ── */
.blocker-focus {
  border-inline-start: 3px solid hsl(35, 90%, 55%);
  position: relative;
}
.blocker-focus::before {
  content: '';
  position: absolute;
  inset-inline-start: -3px;
  top: 0; bottom: 0;
  width: 3px;
  background: hsl(35, 90%, 55%);
  animation: glowBreath 3s ease-in-out infinite;
}

/* ══════════════════════════════════════════
   QUICK WALKTHROUGH
   Post-answer, pre-explanation learning layer.
   Authored content is data; this is the allow-listed presentation shell.
   ══════════════════════════════════════════ */
.quick-walkthrough {
  /* Walkthrough copy is deliberately compact, so its local palette must keep
     normal-size instructional text, controls, and focus rings AA-readable. */
  --text-secondary: #505d67;
  --text-muted: #53606a;
  --accent: #146f68;
  --accent-hover: #12665f;
  --accent-gradient: linear-gradient(135deg, #146f68 0%, #12665f 50%, #0f5f59 100%);
  --accent-glow: rgba(20, 111, 104, .28);
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  color: var(--text-primary);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-alt) transparent;
}

[data-theme="dark"] .quick-walkthrough {
  --text-secondary: #c9c3b8;
  --text-muted: #bdb6aa;
  --accent: #4dcfc0;
  --accent-hover: #5ad9cb;
  --accent-gradient: linear-gradient(135deg, #4dcfc0 0%, #3bb5a8 50%, #2d9e92 100%);
  --accent-glow: rgba(77, 207, 192, .3);
}

.quick-walkthrough:focus {
  outline: none;
}

.qw-shell {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 44px;
}

.quick-walkthrough button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.qw-question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm), inset 0 1px 0 rgba(255,255,255,.28);
}

.qw-question__number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--accent-gradient);
  color: var(--accent-text);
  box-shadow: var(--shadow-raised-sm), 0 4px 14px var(--accent-glow);
  font-size: .96rem;
  font-weight: 900;
}

.qw-question__kicker,
.qw-story__kicker,
.qw-eyebrow {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.qw-question__stem {
  color: var(--text-primary);
  font-size: clamp(.98rem, 1.55vw, 1.13rem);
  font-weight: 680;
  line-height: 1.48;
}

.qw-question-options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 8px;
}

.qw-question-options span {
  padding: 4px 8px;
  border-radius: 9px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-alt) 54%, transparent);
  box-shadow: var(--shadow-inset);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.25;
}

.qw-question--piecewise .smart-token--piecewise,
.qw-question--piecewise .formula-panel--structured {
  margin-block: 7px 2px;
}

.qw-question--piecewise .smart-token--piecewise .katex,
.qw-question--piecewise .formula-panel--structured .katex {
  font-size: 1.04em;
}

.qw-question--directed-integrals .qw-question__stem {
  display: grid;
  gap: 7px;
}

.qw-question--directed-integrals .qw-question-cues {
  grid-template-columns: minmax(0, 1fr);
}

.qw-question--directed-integrals .qw-question-cue {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: var(--shadow-inset);
}

.qw-question-cues {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  gap: 8px;
}

.qw-question-cue {
  min-width: 0;
  padding: 9px 11px;
  border-radius: 12px;
  color: var(--text-secondary);
  background: var(--surface-alt);
  box-shadow: var(--shadow-inset);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.45;
}

.qw-question-cue {
  background:
    linear-gradient(
      180deg,
      transparent 42%,
      color-mix(in srgb, #f2c14e 52%, transparent) 42%,
      color-mix(in srgb, #f2c14e 52%, transparent) 88%,
      transparent 88%
    );
}

.qw-question-cue {
  color: var(--text-primary);
  box-shadow: none;
}

.qw-answer-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  max-width: 240px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.qw-answer-state__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
}

.qw-answer-state.is-correct {
  color: #216b35;
  background: rgba(46,125,50,.13);
  box-shadow: inset 0 0 0 1.5px rgba(46,125,50,.28), 0 5px 14px rgba(46,125,50,.08);
}

.qw-answer-state.is-incorrect {
  color: #a22f2f;
  background: rgba(192,70,60,.12);
  box-shadow: inset 0 0 0 1.5px rgba(192,70,60,.26), 0 5px 14px rgba(192,70,60,.08);
}

.qw-answer-state.is-issue {
  color: color-mix(in srgb, var(--accent) 72%, var(--text-primary));
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 30%, transparent);
}

.qw-answer-state.is-correct .qw-answer-state__icon { background: #2e7d32; }
.qw-answer-state.is-incorrect .qw-answer-state__icon { background: #c0463c; }
.qw-answer-state.is-issue .qw-answer-state__icon { background: var(--accent); }

[data-theme="dark"] .qw-answer-state.is-correct { color: #9adf90; }
[data-theme="dark"] .qw-answer-state.is-incorrect { color: #f39a92; }

.qw-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 25px 8px 14px;
}

.qw-story__kicker {
  color: var(--accent);
}

.qw-story__title {
  max-width: 820px;
  margin: 0;
  scroll-margin-top: 82px;
  color: var(--text-primary);
  font-family: "Outfit", "Noto Sans Arabic", sans-serif;
  font-size: clamp(2rem, 4.15vw, 3rem);
  font-weight: 790;
  line-height: .99;
  letter-spacing: -.052em;
}

[dir="rtl"] .qw-story__title {
  letter-spacing: 0;
  line-height: 1.35;
}

.qw-story__body {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-size: clamp(.93rem, 1.45vw, 1.06rem);
  font-weight: 520;
  line-height: 1.55;
}

.qw-counter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  font-size: .75rem;
  font-weight: 820;
  text-align: center;
}

.qw-clues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.qw-clue {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

.qw-clue__glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: var(--shadow-inset);
  font-size: 1rem;
}

.qw-clue__glyph--corner {
  color: #b96a35;
  background: color-mix(in srgb, #b96a35 10%, var(--surface));
  font-size: 1.25rem;
  font-weight: 850;
}

.qw-clue strong,
.qw-clue small {
  display: block;
}

.qw-clue strong {
  color: var(--text-primary);
  font-size: .7rem;
  font-weight: 820;
  line-height: 1.45;
}

.qw-clue small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 560;
  line-height: 1.55;
}

.qw-evidence {
  min-height: 330px;
}

.qw-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.qw-option {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out),
    border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.qw-option.is-out {
  opacity: .5;
  filter: saturate(.5);
}

.qw-option.is-winner {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: var(--shadow-raised-sm), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(-2px);
}

.qw-option__head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 9px 7px 12px;
  color: var(--text-primary);
  font-size: .72rem;
  font-weight: 830;
}

.qw-verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 120px;
  padding: 4px 7px;
  border-radius: var(--radius-pill);
  font-size: .57rem;
  font-weight: 830;
  line-height: 1.25;
  text-align: center;
}

.qw-verdict--ok {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.qw-verdict--out {
  color: #b33b3b;
  background: rgba(192,70,60,.09);
}

.qw-verdict--win {
  color: #287328;
  background: rgba(46,125,50,.11);
}

[data-theme="dark"] .qw-verdict--out { color: #f08080; }
[data-theme="dark"] .qw-verdict--win { color: #8bd27f; }

.qw-plot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  border-radius: var(--radius-md);
}

.qw-option > .qw-plot {
  width: calc(100% - 14px);
  margin: 0 7px 7px;
}

.qw-plot-bg {
  fill: #fff;
}

[data-theme="dark"] .qw-plot-bg {
  fill: #20272d;
}

.qw-grid-line {
  stroke: #e7eaed;
  stroke-width: 1;
}

[data-theme="dark"] .qw-grid-line {
  stroke: #354047;
}

.qw-axis {
  stroke: #29343d;
  stroke-width: 2;
}

.qw-axis-arrow {
  fill: #29343d;
}

[data-theme="dark"] .qw-axis {
  stroke: #d7dde2;
}

[data-theme="dark"] .qw-axis-arrow {
  fill: #d7dde2;
}

.qw-axis-label {
  fill: #29343d;
  font-family: Georgia, serif;
  font-size: 17px;
  font-style: italic;
}

[data-theme="dark"] .qw-axis-label {
  fill: #d7dde2;
}

.qw-tick {
  stroke: #29343d;
  stroke-width: 1.6;
}

.qw-tick-label {
  fill: #64748b;
  font-family: "Outfit", "Noto Sans Arabic", sans-serif;
  font-size: 14px;
  font-weight: 650;
}

[data-theme="dark"] .qw-tick {
  stroke: #d7dde2;
}

[data-theme="dark"] .qw-tick-label {
  fill: #b7c1c9;
}

.qw-candidate-line {
  stroke: #4f6f45;
  stroke-width: 7;
  stroke-linecap: round;
}

[data-theme="dark"] .qw-candidate-line {
  stroke: #8eb37e;
}

.qw-given-line {
  stroke: #b96a35;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
}

.qw-required-dot {
  fill: #fff;
  stroke: #26313a;
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
}

[data-theme="dark"] .qw-required-dot {
  fill: #20272d;
  stroke: #f1f4f6;
}

.qw-construction-dot {
  fill: #b96a35;
  stroke: #fff;
  stroke-width: 5;
}

.qw-point-label {
  fill: #26313a;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
  stroke-linejoin: round;
}

[data-theme="dark"] .qw-point-label {
  fill: #eef2f4;
  stroke: #20272d;
}

.qw-miss-line {
  stroke: #c0463c;
  stroke-width: 5;
  stroke-dasharray: 8 8;
}

.qw-angle {
  fill: none;
  stroke: #c0463c;
  stroke-width: 5;
  stroke-linecap: round;
}

.qw-angle--right {
  stroke: var(--accent);
  stroke-linejoin: round;
}

.qw-angle-label {
  fill: #b33b3b;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 850;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5px;
}

.qw-angle-label--right {
  fill: var(--accent);
}

[data-theme="dark"] .qw-angle-label {
  stroke: #20272d;
}

.qw-scratch {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -45%) rotate(-8deg);
  color: #c0463c;
  font-family: "Outfit", sans-serif;
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(192,70,60,.15);
  pointer-events: none;
}

.qw-construction,
.qw-result {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: 18px;
  align-items: stretch;
}

.qw-construction__plot,
.qw-construction__copy,
.qw-result__figure,
.qw-result__copy {
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

.qw-construction__plot,
.qw-result__figure {
  display: grid;
  place-items: center;
}

.qw-construction__copy,
.qw-result__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.qw-equation {
  margin: 0;
  color: var(--text-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 750;
}

.qw-calculations {
  display: grid;
  gap: 8px;
}

.qw-calc {
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  color: var(--text-secondary);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.55;
  white-space: nowrap;
}

.qw-note,
.qw-depth {
  margin: 0;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 540;
  line-height: 1.75;
}

.qw-note strong,
.qw-depth strong {
  color: var(--text-primary);
}

.qw-result__headline {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.qw-answer-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--accent-text);
  background: var(--accent-gradient);
  box-shadow: var(--shadow-raised-sm), 0 4px 16px var(--accent-glow);
  font-size: 1.05rem;
  font-weight: 880;
}

.qw-guided--issue .qw-answer-badge {
  width: auto;
  min-width: 64px;
  padding-inline: 10px;
  white-space: nowrap;
}

.qw-result__headline h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Outfit", "Noto Sans Arabic", sans-serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.3;
}

.qw-result__headline p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: .68rem;
  font-weight: 540;
  line-height: 1.65;
}

.qw-recap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.qw-recap__chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  font-size: .6rem;
  font-weight: 720;
}

.qw-recap__chip.is-final {
  color: #287328;
  background: rgba(46,125,50,.09);
  box-shadow: inset 0 0 0 1.5px rgba(46,125,50,.16);
}

[data-theme="dark"] .qw-recap__chip.is-final {
  color: #8bd27f;
}

.qw-recap__arrow {
  color: var(--text-muted);
  font-size: .72rem;
}

.qw-proof {
  display: block;
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 720;
  white-space: nowrap;
}

.qw-result__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qw-btn,
.qw-result__actions .check-btn.qw-btn {
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: .68rem;
  font-weight: 790;
  line-height: 1.35;
  text-align: center;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
    background .18s var(--ease-out);
}

.qw-btn:hover,
.qw-result__actions .check-btn.qw-btn:hover {
  transform: translateY(-1px);
}

.qw-btn:active,
.qw-result__actions .check-btn.qw-btn:active {
  transform: scale(.98);
}

.qw-btn:disabled,
.qw-result__actions .check-btn.qw-btn:disabled {
  cursor: wait;
  opacity: .58;
  transform: none;
  box-shadow: var(--shadow-inset);
}

.qw-action-note {
  margin: 0;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 650;
}

.qw-action-note.is-error {
  color: #b84b57;
}

[data-theme="dark"] .qw-action-note.is-error { color: #f08080; }

.qw-btn:focus-visible,
.qw-back:focus-visible,
.qw-dot:focus-visible,
.qw-replay-step:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.qw-btn--main,
.qw-result__actions .check-btn.qw-btn--main {
  color: var(--accent-text);
  background: var(--accent-gradient);
  box-shadow: var(--shadow-raised-sm), 0 4px 16px var(--accent-glow);
}

.qw-btn--outline {
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* The CKB long-explanation label is intentionally more explicit than the
   payload label. Keep it on one line so the existing button footprint and
   action-row geometry do not change. */
.qw-btn--outline.js-qw-full,
.qwf-cta-outline.js-qw-full {
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}

.qw-btn--ghost {
  grid-column: 1 / -1;
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qw-controls {
  position: relative;
  z-index: 1;
  bottom: auto;
  display: grid;
  grid-template-columns: 44px 44px minmax(120px, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 12px;
  max-width: 900px;
  margin: 28px auto 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.qw-back {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 650;
}

.qw-replay-step {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 750;
}

.qw-replay-step:disabled {
  opacity: .4;
  cursor: default;
  box-shadow: var(--shadow-inset);
}

[dir="rtl"] .qw-back {
  transform: scaleX(-1);
}

.qw-back:disabled {
  opacity: .4;
  cursor: default;
  box-shadow: var(--shadow-inset);
}

.qw-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.qw-dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}

.qw-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  transform: translate(-50%, -50%);
  transition: width .2s var(--ease-out), border-radius .2s var(--ease-out),
    background .2s var(--ease-out);
}

.qw-dot.is-done::before {
  background: color-mix(in srgb, var(--accent) 55%, var(--text-muted));
}

.qw-dot.is-current::before {
  width: 26px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

@keyframes qwDrawLine {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes qwSceneCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qwElementIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qwDotIn {
  0% { opacity: 0; transform: scale(.45); }
  65% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes qwRejectIn {
  from { opacity: 1; transform: scale(1); }
  to { opacity: .5; transform: scale(.98); }
}

@keyframes qwScratchIn {
  from { opacity: 0; transform: translate(-50%, -45%) rotate(-8deg) scale(1.55); }
  to { opacity: 1; transform: translate(-50%, -45%) rotate(-8deg) scale(1); }
}

@keyframes qwConfirmIn {
  from { opacity: .72; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-2px); }
}

/* A forward beat is constructed causally, then held. Back/direct navigation
   receives the already-complete state because `.is-animating` is absent. */
.quick-walkthrough.is-animating[data-qw-scene="core"] .qw-option {
  animation: qwSceneCardIn .42s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="core"] .qw-option:nth-child(2) { animation-delay: .12s; }
.quick-walkthrough.is-animating[data-qw-scene="core"] .qw-option:nth-child(3) { animation-delay: .24s; }
.quick-walkthrough.is-animating[data-qw-scene="core"] .qw-option:nth-child(4) { animation-delay: .36s; }

.quick-walkthrough.is-animating[data-qw-scene="tools"] .qw-clue {
  animation: qwElementIn .38s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="tools"] .qw-clue:nth-child(1) { animation-delay: .22s; }
.quick-walkthrough.is-animating[data-qw-scene="tools"] .qw-clue:nth-child(2) { animation-delay: .72s; }

.quick-walkthrough.is-animating[data-qw-scene="point"] .qw-required-dot {
  animation: qwDotIn .4s var(--ease-spring) both;
}
.quick-walkthrough.is-animating[data-qw-scene="point"] .qw-point-label,
.quick-walkthrough.is-animating[data-qw-scene="point"] .qw-miss-line {
  animation: qwElementIn .28s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="A"] .qw-required-dot,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="A"] .qw-point-label { animation-delay: .18s; }
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="B"] .qw-required-dot,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="B"] .qw-point-label { animation-delay: .52s; }
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="C"] .qw-required-dot,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="C"] .qw-point-label,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="C"] .qw-miss-line { animation-delay: .86s; }
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="D"] .qw-required-dot,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="D"] .qw-point-label { animation-delay: 1.2s; }
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="A"] .qw-verdict,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="B"] .qw-verdict,
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="D"] .qw-verdict {
  animation: qwElementIn .28s 1.58s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="C"].is-out {
  animation: qwRejectIn .34s 1.92s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="C"] .qw-verdict {
  animation: qwElementIn .28s 1.92s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="point"] [data-qw-option="C"] .qw-scratch {
  animation: qwScratchIn .34s 1.92s var(--ease-spring) both;
}
.quick-walkthrough.is-animating[data-qw-scene="point"] .qw-counter {
  animation: qwElementIn .28s 2.18s var(--ease-out) both;
}

.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-construction {
  animation: qwSceneCardIn .36s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-calc {
  animation: qwElementIn .3s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-calc:nth-child(1) { animation-delay: .42s; }
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-calc:nth-child(2) { animation-delay: 1.62s; }
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-calc:nth-child(3) { animation-delay: 2.82s; }
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-construction-dot,
.quick-walkthrough.is-animating[data-qw-scene="line"] [class*="qw-construction-label--"] {
  animation: qwDotIn .42s var(--ease-spring) both;
  transform-box: fill-box;
  transform-origin: center;
}
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-construction-dot--1,
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-construction-label--1 { animation-delay: .98s; }
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-construction-dot--2,
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-construction-label--2 { animation-delay: 2.18s; }
.quick-walkthrough.is-animating[data-qw-scene="line"] .qw-plot--construct .qw-given-line {
  stroke-dashoffset: 1;
  animation: qwDrawLine .78s 3.32s var(--ease-out) both;
}

.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="A"] .qw-given-line {
  stroke-dashoffset: 1;
  animation: qwDrawLine .55s .18s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="B"] .qw-given-line {
  stroke-dashoffset: 1;
  animation: qwDrawLine .55s .68s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="D"] .qw-given-line {
  stroke-dashoffset: 1;
  animation: qwDrawLine .55s 1.18s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="A"] .qw-angle,
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="A"] .qw-angle-label {
  animation: qwElementIn .3s 1.86s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="B"] .qw-angle,
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="B"] .qw-angle-label {
  animation: qwElementIn .3s 2.28s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="D"] .qw-angle,
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="D"] .qw-angle-label {
  animation: qwElementIn .3s 2.7s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="A"] .qw-verdict {
  animation: qwElementIn .25s 2.94s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="D"] .qw-verdict {
  animation: qwElementIn .25s 3.38s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="B"] .qw-verdict {
  animation: qwElementIn .25s 3.82s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="A"].is-out {
  animation: qwRejectIn .34s 3.08s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="D"].is-out {
  animation: qwRejectIn .34s 3.52s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="A"] .qw-scratch {
  animation: qwScratchIn .34s 3.08s var(--ease-spring) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="D"] .qw-scratch {
  animation: qwScratchIn .34s 3.52s var(--ease-spring) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] [data-qw-option="B"].is-winner {
  animation: qwConfirmIn .38s 3.96s var(--ease-out) both;
}
.quick-walkthrough.is-animating[data-qw-scene="corner"] .qw-counter {
  animation: qwElementIn .28s 4.08s var(--ease-out) both;
}

.quick-walkthrough:not(.qw-guided).is-animating[data-qw-scene="answer"] .qw-result {
  animation: qwSceneCardIn .45s var(--ease-out) both;
}

/* Guided Q2+ scene player. All authored values arrive as validated text and
   numeric geometry; these are reusable presentation primitives only. */
.qw-guide-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  /* Natural heights: stretched cards left huge empty panels whenever one
     component held far less evidence than its neighbor (e.g. Q42). */
  align-items: start;
}

.qw-guide-source-layout {
  display: grid;
  gap: 16px;
}

.qw-guide-source-layout.has-source-visual {
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.7fr);
  align-items: start;
}

.qw-guide-source-visual {
  position: sticky;
  top: 14px;
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

.qw-guide-source-visual .question-graph-asset {
  margin: 0;
}

.qw-guide-source-visual .question-graph-asset img,
.qw-guide-source-visual .question-graph-asset svg {
  display: block;
  width: 100%;
  max-height: 390px;
  object-fit: contain;
}

.qw-guide-layout--split,
.qw-guide-layout--grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.qw-guide-layout--single-flow > .qw-guide-component {
  grid-column: 1 / -1;
}

.qw-guide-component {
  grid-column: span 6;
  min-width: 0;
  padding: 17px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

.qw-guide-component:only-child {
  grid-column: 1 / -1;
}

.qw-guide-component--plot {
  grid-column: span 7;
  padding: 14px;
}

.qw-guide-component--optionPlots,
.qw-guide-component--optionGrid {
  grid-column: 1 / -1;
}

.qw-guide-component--optionGrid {
  padding: 14px;
}

.qw-guide-persistent-cast {
  margin-top: 16px;
}

.qw-guide-persistent-cast .qw-guide-component {
  width: 100%;
}

.qw-guide-presentation--persistent-cast {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}

.qw-guide-runtime-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.qw-guide-runtime-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}

.qw-guide-runtime-option__id {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-primary);
  font-size: .7rem;
  font-weight: 850;
}

.qw-guide-runtime-option__text {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.45;
}

.qw-guide-component.qw-guide-presentation--coordinate-compare {
  grid-column: 1 / -1;
}

.qw-guide-coordinate-compare {
  display: grid;
  gap: 14px;
}

.qw-guide-coordinate-compare__points {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.qw-guide-coordinate-point {
  display: grid;
  gap: 5px;
  place-items: center;
  min-width: 0;
  padding: 18px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  text-align: center;
}

.qw-guide-coordinate-point__label {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.qw-guide-coordinate-point code {
  color: var(--text-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(1.55rem, 4vw, 2.55rem);
  font-weight: 800;
}

.qw-guide-coordinate-point small {
  color: var(--text-secondary);
  font-size: .76rem;
  font-weight: 650;
}

.qw-guide-coordinate-compare__arrow {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 900;
}

.qw-guide-coordinate-compare__lanes {
  display: grid;
  gap: 9px;
}

.qw-guide-coordinate-lane {
  display: grid;
  grid-template-columns: minmax(105px, .65fr) minmax(0, 1fr) minmax(130px, .8fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}

.qw-guide-coordinate-lane__label {
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 800;
}

.qw-guide-coordinate-lane code {
  color: var(--text-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: .9rem;
  font-weight: 750;
}

.qw-guide-coordinate-lane strong {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 850;
}

.qw-guide-coordinate-lane small {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.5;
}

.qw-guide-presentation--quantity-bridge .qw-guide-items,
.qw-guide-presentation--transformation .qw-guide-items {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.qw-guide-component.qw-guide-presentation--quantity-bridge,
.qw-guide-component.qw-guide-presentation--transformation,
.qw-guide-component.qw-guide-presentation--sign-meaning {
  grid-column: 1 / -1;
}

.qw-guide-presentation--quantity-bridge .qw-guide-ledger-row,
.qw-guide-presentation--quantity-bridge .qw-guide-stage,
.qw-guide-presentation--transformation .qw-guide-equation-step {
  align-content: start;
  min-height: 112px;
}

.qw-guide-presentation--sign-meaning {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.qw-guide-component--numberLine,
.qw-guide-component--rangeStrips {
  grid-column: span 7;
}

.qw-guide-component--equation,
.qw-guide-component--machine,
.qw-guide-component--proof,
.qw-guide-component--ledger,
.qw-guide-component--chips {
  grid-column: span 5;
}

.qw-guide-component__head {
  margin: 0 0 12px;
}

.qw-guide-component__head h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Outfit", "Noto Sans Arabic", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 780;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.qw-guide-component__head p {
  max-width: 62ch;
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 520;
  line-height: 1.45;
}

.qw-guide-items {
  display: grid;
  gap: 9px;
}

.qw-guide-items--optionGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qw-guide-layout--split .qw-guide-items--optionGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qw-guide-items--machine {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: stretch;
}

/* Pipelines of three or more stages stack vertically at every width: the
   auto-fit row wrapped into a grid whose orphaned side arrows pointed at
   nothing, and narrow columns dropped the causal connectors entirely. */
.qw-guide-items--machine-column {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.qw-guide-items--machine-column .qw-guide-stage + .qw-guide-stage::before,
[dir="rtl"] .qw-guide-items--machine-column .qw-guide-stage + .qw-guide-stage::before {
  content: "↓";
  inset: auto;
  top: -21px;
  left: 50%;
  transform: translateX(-50%);
}

.qw-guide-option,
.qw-guide-stage,
.qw-guide-equation-step,
.qw-guide-proof-step,
.qw-guide-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  min-height: 76px;
  padding: 12px 13px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}

.qw-guide-option {
  min-height: 106px;
}

.qw-guide-layout .qw-guide-option {
  min-height: 94px;
}

.qw-guide-equation-step.is-idless,
.qw-guide-proof-step.is-idless {
  grid-template-columns: minmax(0, 1fr);
}

.qw-guide-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.qw-guide-stage + .qw-guide-stage::before {
  content: "→";
  position: absolute;
  inset-inline-start: -17px;
  top: 50%;
  color: var(--accent);
  font-weight: 900;
  transform: translateY(-50%);
}

[dir="rtl"] .qw-guide-stage + .qw-guide-stage::before {
  content: "←";
}

.qw-guide-item__id {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  font-size: .78rem;
  font-weight: 900;
}

.qw-guide-item__label,
.qw-guide-item__expression,
.qw-guide-item__result,
.qw-guide-item__detail {
  display: block;
}

.qw-guide-item__label {
  margin-bottom: 5px;
  color: var(--text-primary);
  font-size: .8rem;
  font-weight: 780;
  line-height: 1.25;
}

.qw-guide-item__expression {
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-family: "Inter", "Noto Sans Arabic", sans-serif;
  font-size: clamp(.86rem, 1.65vw, 1.12rem);
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
}

.qw-guide-item__result,
.qw-question-cue {
  /* Bidi-neutral math like "2+3−12=−7" or "→ 0" scrambles inside an RTL
     card; plaintext resolves each value from its own first strong character
     so pure formulas order LTR while Kurdish verdict prose stays RTL. */
  unicode-bidi: plaintext;
}

.qw-guide-item__result {
  margin-top: 7px;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 830;
}

.qw-guide-item__detail {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 520;
  line-height: 1.35;
}

.qw-status--out {
  opacity: .55;
  border-color: rgba(192,70,60,.3);
  filter: saturate(.5);
  padding-inline-end: 40px;
}

/* Verdicts read as corner chips, not free-floating glyphs: the old
   vertically-centered stamp collided with card text and option letters on
   narrow cards. Logical inset keeps the chip mirrored in RTL. */
.qw-status--out::after {
  content: "×";
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #c0463c;
  border-radius: 50%;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1;
}

/* Option mini-plots keep their verdict over the plot whitespace instead of
   the header row, where the chip would cover the result text. */
.qw-guide-option-plot.qw-status--out {
  padding-inline-end: 14px;
}

.qw-guide-option-plot.qw-status--out::after {
  top: auto;
  bottom: 12px;
  inset-inline-end: 12px;
}

.qw-status--winner {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: var(--shadow-raised-sm), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* The surviving option gets the mirrored affirmation of the × chip so the
   verdict pair reads at a glance on the option cards. */
.qw-guide-option.qw-status--winner,
.qw-guide-runtime-option.qw-status--winner {
  padding-inline-end: 40px;
}

.qw-guide-option.qw-status--winner::after,
.qw-guide-runtime-option.qw-status--winner::after {
  content: "✓";
  position: absolute;
  top: 9px;
  inset-inline-end: 9px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: var(--accent-text, #fff);
  background: var(--accent);
  border-radius: 50%;
  font-size: .92rem;
  font-weight: 900;
  line-height: 1;
}

.qw-tone--good { color: #287328; }
.qw-tone--bad { color: #b33b3b; }
.qw-tone--warn { color: #a8642f; }
.qw-tone--accent { color: var(--accent); }
.qw-tone--muted { color: var(--text-muted); }
[data-theme="dark"] .qw-tone--good { color: #8bd27f; }
[data-theme="dark"] .qw-tone--bad { color: #f08080; }

.qw-guide-plot-wrap {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qw-guide-plot-wrap figcaption {
  margin: 0;
  padding: 8px 12px 10px;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

.qw-guide-plot {
  display: block;
  width: 100%;
  min-height: 260px;
  max-height: min(46vh, 430px);
  background: #fff;
}

/* Plot geometry, tick numerals, and label anchoring are authored in LTR
 * coordinates; an inherited RTL base scrambles negatives ("−2" → "2−") and
 * mirrors text-anchor against the label-collision model. */
.qw-plot { direction: ltr; }

/* Bidi-isolated math runs inside RTL walkthrough prose (see bidiMathHtml). */
.qw-math-run { direction: ltr; unicode-bidi: isolate; }

/* Display superscripts from caret exponents must not stretch line boxes. */
.quick-walkthrough sup {
  font-size: .68em;
  line-height: 0;
}

.qw-guide-line {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qw-guide-line.qw-tone--accent { stroke: var(--accent); }
.qw-guide-line.qw-tone--good { stroke: #4f6f45; }
.qw-guide-line.qw-tone--bad { stroke: #c0463c; }
.qw-guide-line.qw-tone--warn { stroke: #b96a35; }
.qw-guide-line.qw-tone--muted { stroke: var(--text-muted); }
.qw-guide-line.is-dashed { stroke-dasharray: .08 .05; }

.qw-guide-region {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
  stroke: none;
}

.qw-guide-region.qw-tone--good {
  fill: color-mix(in srgb, #4f9a4f 18%, transparent);
}

.qw-guide-region.qw-tone--bad {
  fill: color-mix(in srgb, #c0463c 14%, transparent);
}

.qw-guide-region.qw-tone--warn {
  fill: color-mix(in srgb, #b96a35 15%, transparent);
}

.qw-guide-curve-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
}

.qw-guide-point {
  fill: var(--surface);
  stroke: var(--text-primary);
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
}

.qw-guide-point.qw-tone--accent { stroke: var(--accent); }
.qw-guide-point.qw-tone--good { stroke: #4f6f45; }
.qw-guide-point.qw-tone--bad { stroke: #c0463c; }
.qw-guide-point.qw-tone--warn { stroke: #b96a35; }
.qw-guide-point.is-open { fill: var(--surface); }
.qw-guide-point:not(.is-open) { fill: currentColor; }

/* Struck-out claim marker drawn over a refuted point. Static stroke only —
   no filter or shadow, so it costs nothing to paint. */
.qw-guide-point-reject {
  fill: none;
  stroke: #c0463c;
  stroke-width: 5;
  stroke-linecap: round;
  paint-order: stroke;
}

/* The strike carries the rejection, so the ring underneath only needs to
   mark the exact location. */
.qw-guide-point.is-rejected {
  stroke-width: 3;
}

[data-theme="dark"] .qw-guide-point-reject { stroke: #f08080; }

/* A region label sits inside its own band, so it needs a heavier halo than
   an ordinary curve label to stay legible over the tint. */
.qw-guide-region-label {
  font-size: 13.5px;
  font-weight: 850;
  stroke-width: 6px;
}

.qw-guide-label {
  fill: currentColor;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 800;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.qw-guide-option-plots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.qw-guide-option-plot {
  position: relative;
  min-width: 0;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

.qw-guide-option-plot > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 0 3px 6px;
  color: var(--text-primary);
  font-size: .74rem;
  font-weight: 820;
}

.qw-guide-option-plot > header span {
  color: var(--accent);
  font-size: .64rem;
  font-weight: 820;
}

.qw-guide-option-plot.qw-status--winner {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.qw-guide-option-plot .qw-guide-plot {
  min-height: 210px;
  max-height: 270px;
}

.qw-guide-numberline {
  position: relative;
  min-height: 116px;
  margin: 10px 18px 2px;
}

.qw-guide-numberline__track {
  position: absolute;
  inset: 50% 0 auto;
  height: 4px;
  border-radius: 99px;
  background: var(--text-muted);
  transform: translateY(-50%);
}

/* Every multi-strip comparison stacks one interval per lane; drawing them on
   the shared track garbles their labels (Q7/Q36/Q39). Convergence scenes are
   the same lane layout plus their target probe. */
.qw-guide-numberline.is-range-strips {
  min-height: calc(var(--qw-strip-count) * 42px + 56px);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    color-mix(in srgb, var(--text-muted) 72%, transparent) 31px 34px,
    transparent 34px 42px
  );
}

.qw-guide-numberline.is-range-strips .qw-guide-numberline__track {
  display: none;
}

.qw-guide-interval {
  position: absolute;
  top: calc(50% - 5px);
  height: 10px;
  border-radius: 99px;
  background: var(--accent);
  transform-origin: left center;
}

.qw-guide-numberline.is-range-strips .qw-guide-interval {
  top: calc(27px + var(--qw-strip-index) * 42px);
}

/* Lane labels get a surface chip so a crossing target probe or the lane
   separator never runs through the text. */
.qw-guide-numberline.is-range-strips .qw-guide-interval > span:not(.qw-guide-interval__bound) {
  left: 0;
  top: -24px;
  padding: 1px 7px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  transform: none;
}

.qw-guide-numberline.is-range-strips .qw-guide-probe {
  top: 10px;
}

.qw-guide-numberline.is-range-strips .qw-guide-probe i {
  height: calc(var(--qw-strip-count) * 42px + 4px);
}

.qw-guide-numberline.is-range-strips .qw-guide-numberline__min,
.qw-guide-numberline.is-range-strips .qw-guide-numberline__max {
  top: auto;
  bottom: 0;
}

.qw-guide-interval.is-left-infinite { transform-origin: right center; }
.qw-guide-interval.is-right-infinite { transform-origin: left center; }

.qw-guide-interval.qw-tone--bad { background: #c0463c; }
.qw-guide-interval.qw-tone--good { background: #4f6f45; }
.qw-guide-interval.qw-tone--warn { background: #b96a35; }

.qw-guide-interval i {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--surface);
  transform: translateY(-50%);
}

.qw-guide-interval i.is-closed { background: currentColor; }
.qw-guide-interval i.is-left { left: -5px; }
.qw-guide-interval i.is-right { right: -5px; }

/* Numeric value printed beside a finite interval endpoint — the open bound
   of (−∞,1) or a sign-change zero is usually the beat's key number. The chip
   background keeps it readable where it crosses the track or lane lines. */
.qw-guide-interval__bound {
  position: absolute;
  top: 50%;
  padding: 1px 5px;
  border-radius: 7px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  direction: ltr;
  transform: translateY(-50%);
}

.qw-guide-interval__bound.is-left {
  right: 100%;
  margin-right: 10px;
}

.qw-guide-interval__bound.is-right {
  left: 100%;
  margin-left: 10px;
}

.qw-guide-infinity {
  position: absolute;
  top: 50%;
  color: currentColor;
  font-family: "Inter", sans-serif;
  font-size: 1.35rem;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-54%);
}

.qw-guide-infinity.is-left { left: -10px; }
.qw-guide-infinity.is-right { right: -10px; }

.qw-guide-interval > span:not(.qw-guide-interval__bound) {
  position: absolute;
  left: 50%;
  top: 18px;
  color: var(--text-primary);
  font-family: "IBM Plex Mono", monospace;
  font-size: .74rem;
  font-weight: 720;
  white-space: nowrap;
  transform: translateX(-50%);
}

.qw-guide-probe {
  position: absolute;
  top: calc(50% - 36px);
  color: var(--text-primary);
  transform: translateX(-50%);
}

.qw-guide-probe i {
  display: block;
  width: 3px;
  height: 54px;
  margin: 0 auto;
  border-radius: 99px;
  background: currentColor;
}

.qw-guide-probe span {
  display: block;
  margin-top: 5px;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

.qw-guide-numberline__min,
.qw-guide-numberline__max {
  position: absolute;
  /* Bottom row on every number line — sharing the probe-label row made raw
     endpoint values collide with tick labels (Q20). */
  top: auto;
  bottom: 0;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
}

.qw-guide-numberline__min { left: 0; }
.qw-guide-numberline__max { right: 0; }

.qw-guide-result {
  display: block;
  margin-top: 16px;
}

.qw-guide-result .qw-result__copy {
  max-width: 900px;
  margin: 0 auto;
}

/* The complete scene structure is mounted in one paint. Only causal marks
   animate: hiding whole cards and SVG frames made synchronous rendering look
   like a slow network load, especially when a mobile scroll observer paused
   an offscreen chart. */
.qw-guided.is-animating .qw-guide-item__result.qw-guide-mark,
.qw-guided.is-animating .qw-guide-option-plot header .qw-guide-mark,
.qw-guided.is-animating .qw-guide-result.qw-guide-mark,
.qw-guided.is-animating .qw-guide-probe,
.qw-guided.is-animating .qw-guide-point,
.qw-guided.is-animating .qw-guide-label {
  opacity: 0;
  animation: qwElementIn .42s
    calc(
      (var(--qw-order, 0) - var(--qw-scroll-order-offset, 0))
      * var(--qw-stagger, .46s)
    ) var(--ease-out) both;
}

.qw-guided.is-animating .qw-guide-interval {
  opacity: 0;
  animation: qwGuideGrowInterval .62s
    calc(
      (var(--qw-order, 0) - var(--qw-scroll-order-offset, 0))
      * var(--qw-stagger, .46s)
    ) var(--ease-out) both;
}

.qw-guided.is-animating .qw-guide-interval.is-range-strip:not(.is-left-infinite):not(.is-right-infinite) {
  transform-origin: center;
  animation-name: qwGuideCloseInterval;
}

.qw-guided.is-animating .qw-guide-point {
  animation-name: qwDotIn;
  animation-timing-function: var(--ease-spring);
}

.qw-guided.is-animating [data-qw-scroll-pending],
.qw-guided.is-animating [data-qw-scroll-pending]::before,
.qw-guided.is-animating [data-qw-scroll-pending]::after,
.qw-guided.is-animating [data-qw-scroll-pending] *,
.qw-guided.is-animating [data-qw-scroll-pending] *::before,
.qw-guided.is-animating [data-qw-scroll-pending] *::after {
  animation-play-state: paused !important;
}

.qw-guided.is-animating .qw-guide-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: qwDrawLine .66s
    calc(
      (var(--qw-order, 0) - var(--qw-scroll-order-offset, 0))
      * var(--qw-stagger, .46s)
    ) var(--ease-out) both;
}

.qw-guided.is-animating .qw-guide-line.is-dashed {
  stroke-dasharray: .08 .05;
}

@keyframes qwGuideGrowInterval {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  22% { opacity: 1; }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes qwGuideCloseInterval {
  0% {
    opacity: 0;
    transform: scaleX(1.55);
  }
  18% { opacity: .32; }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes qwGuideRejectVisual {
  from { opacity: 1; transform: scale(1); }
  to { opacity: .55; transform: scale(.98); }
}

@keyframes qwGuideWinnerVisual {
  from { opacity: .72; transform: translateY(0); }
  to { opacity: 1; transform: translateY(-2px); }
}

@keyframes qwGuideScratch {
  from {
    opacity: 0;
    transform: scale(1.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.qw-guided.is-animating .qw-status--out {
  /* Keep the tested claim visible while its verdict waits. */
  opacity: 1;
  filter: none;
  border-color: var(--border);
  animation: qwGuideRejectVisual .42s
    calc(
      (
        var(--qw-verdict-order, var(--qw-order, 0))
        - var(--qw-scroll-order-offset, 0)
      ) * var(--qw-stagger, .46s)
    )
    var(--ease-out) both;
}

.qw-guided.is-animating .qw-status--out .qw-guide-item__expression,
.qw-guided.is-animating .qw-guide-option-plot.qw-status--out > header strong {
  text-decoration-color: transparent;
}

.qw-guided.is-animating .qw-status--out::after {
  opacity: 0;
  animation: qwGuideScratch .3s
    calc(
      (
        (
          var(--qw-verdict-order, var(--qw-order, 0))
          - var(--qw-scroll-order-offset, 0)
        ) * var(--qw-stagger, .46s)
      ) + .25s
    )
    var(--ease-spring) both;
}

.qw-guided.is-animating .qw-status--winner {
  opacity: 1;
  border-color: var(--border);
  box-shadow: var(--shadow-raised-sm);
  animation: qwGuideWinnerVisual .42s
    calc(
      (
        var(--qw-verdict-order, var(--qw-order, 0))
        - var(--qw-scroll-order-offset, 0)
      ) * var(--qw-stagger, .46s)
    )
    var(--ease-out) both;
}

.qw-guided.is-animating .qw-guide-option.qw-status--winner::after,
.qw-guided.is-animating .qw-guide-runtime-option.qw-status--winner::after {
  opacity: 0;
  animation: qwElementIn .3s
    calc(
      (
        var(--qw-verdict-order, var(--qw-order, 0))
        - var(--qw-scroll-order-offset, 0)
      ) * var(--qw-stagger, .46s)
    )
    var(--ease-spring) both;
}

/* The desktop walkthrough uses more space than the phone layout, so its
   instructional copy must never render smaller than the already-reviewed
   mobile copy. */
@media (min-width: 941px) {
  .qw-question-options span,
  .qw-answer-state,
  .qw-clue strong,
  .qw-clue small,
  .qw-option__head,
  .qw-verdict,
  .qw-calc,
  .qw-note,
  .qw-depth,
  .qw-result__headline p,
  .qw-proof,
  .qw-btn,
  .qw-result__actions .check-btn.qw-btn,
  .qw-action-note,
  .qw-guide-coordinate-point__label,
  .qw-guide-coordinate-point small,
  .qw-guide-coordinate-lane__label,
  .qw-guide-coordinate-lane strong,
  .qw-guide-coordinate-lane small,
  .qw-guide-component__head p,
  .qw-guide-item__label,
  .qw-guide-item__result,
  .qw-guide-item__detail,
  .qw-guide-plot-wrap figcaption,
  .qw-guide-option-plot > header,
  .qw-guide-option-plot > header span,
  .qw-guide-interval > span:not(.qw-guide-interval__bound),
  .qw-guide-probe span,
  .qw-guide-numberline__min,
  .qw-guide-numberline__max {
    font-size: .78rem;
  }

  .qw-recap__chip {
    font-size: .72rem;
  }
}

@media (max-width: 940px) {
  .qw-shell {
    width: min(calc(100% - 24px), 860px);
  }

  .qw-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qw-construction,
  .qw-result {
    grid-template-columns: 1fr;
  }

  .qw-construction__plot,
  .qw-result__figure {
    padding: 10px;
  }

  .qw-guide-option-plots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qw-guide-items--optionGrid,
  .qw-guide-layout--split .qw-guide-items--optionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qw-guide-runtime-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qw-guide-component--plot,
  .qw-guide-component--numberLine,
  .qw-guide-component--rangeStrips,
  .qw-guide-component--equation,
  .qw-guide-component--machine,
  .qw-guide-component--proof,
  .qw-guide-component--ledger,
  .qw-guide-component--chips {
    grid-column: span 6;
  }
}

/* The ordinary question form intentionally stays narrow below the desktop
   workspace breakpoint. A walkthrough is a visual learning canvas, however:
   on tablets it needs the available width for graphs, comparisons, and its
   full navigation controls. Keep the phone layout below 720px unchanged. */
@media (min-width: 721px) and (max-width: 999px) {
  .question-container.is-quick-walkthrough {
    width: 100%;
    max-width: none;
    padding: 10px clamp(24px, 4vw, 44px)
      max(36px, calc(env(safe-area-inset-bottom) + 24px));
  }

  .question-container.is-quick-walkthrough .qw-shell {
    width: min(100%, 1120px);
    padding-top: 8px;
  }

  .question-container.is-quick-walkthrough .qw-question {
    grid-template-columns: auto minmax(0, 1fr) minmax(190px, 240px);
  }

  .question-container.is-quick-walkthrough .qw-evidence {
    min-height: 0;
  }

  .question-container.is-quick-walkthrough .qw-controls {
    width: min(100%, 960px);
    max-width: none;
    grid-template-columns: 44px 44px minmax(150px, 1fr) minmax(220px, auto);
    margin-top: 22px;
  }
}

@media (max-width: 720px) {
  .quick-walkthrough {
    height: auto;
    overflow: visible;
  }

  .qw-shell {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
    padding: 4px 8px max(32px, calc(env(safe-area-inset-bottom) + 18px));
  }

  .qw-question {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    padding: 13px 14px;
  }

  .qw-question__number {
    width: 38px;
    height: 38px;
  }

  .qw-question__stem {
    font-size: .96rem;
    line-height: 1.55;
  }

  .qw-question-options span,
  .qw-answer-state,
  .qw-clue strong,
  .qw-clue small,
  .qw-option__head,
  .qw-verdict,
  .qw-calc,
  .qw-note,
  .qw-depth,
  .qw-result__headline p,
  .qw-recap__chip,
  .qw-proof,
  .qw-btn,
  .qw-result__actions .check-btn.qw-btn,
  .qw-action-note,
  .qw-guide-coordinate-point__label,
  .qw-guide-coordinate-point small,
  .qw-guide-coordinate-lane__label,
  .qw-guide-coordinate-lane strong,
  .qw-guide-coordinate-lane small,
  .qw-guide-component__head p,
  .qw-guide-item__label,
  .qw-guide-item__result,
  .qw-guide-item__detail,
  .qw-guide-plot-wrap figcaption,
  .qw-guide-option-plot > header,
  .qw-guide-option-plot > header span,
  .qw-guide-interval > span:not(.qw-guide-interval__bound),
  .qw-guide-probe span,
  .qw-guide-numberline__min,
  .qw-guide-numberline__max {
    font-size: .78rem;
  }

  .qw-answer-state {
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }

  .qw-question-cues {
    grid-template-columns: 1fr;
  }

  .qw-story {
    display: block;
    padding: 23px 4px 16px;
  }

  .qw-story__title {
    font-size: clamp(2rem, 10.5vw, 2.65rem);
    line-height: .98;
  }

  [dir="rtl"] .qw-story__title {
    font-size: clamp(1.72rem, 9vw, 2.3rem);
  }

  .qw-story__body {
    font-size: .9rem;
    line-height: 1.6;
  }

  .qw-counter {
    margin-top: 12px;
  }

  .qw-clues {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .qw-clue {
    padding: 11px 12px;
  }

  .qw-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .qw-guide-layout,
  .qw-guide-layout--split,
  .qw-guide-layout--grid {
    grid-template-columns: 1fr;
  }

  .qw-guide-source-layout.has-source-visual {
    grid-template-columns: 1fr;
  }

  .qw-guide-source-visual {
    position: static;
  }

  .qw-guide-component,
  .qw-guide-component--plot,
  .qw-guide-component--optionPlots,
  .qw-guide-component--optionGrid,
  .qw-guide-component--numberLine,
  .qw-guide-component--rangeStrips,
  .qw-guide-component--equation,
  .qw-guide-component--machine,
  .qw-guide-component--proof,
  .qw-guide-component--ledger,
  .qw-guide-component--chips {
    grid-column: 1 / -1;
    padding: 13px;
  }

  .qw-guide-component__head h2 {
    font-size: 1rem;
  }

  .qw-guide-item__expression {
    overflow-x: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .qw-guide-option {
    min-height: 112px;
    padding: 10px;
  }

  .qw-guide-option-plots {
    gap: 8px;
  }

  .qw-guide-option-plot {
    padding: 6px;
    border-radius: 17px;
  }

  .qw-guide-items--machine {
    grid-template-columns: 1fr;
  }

  .qw-guide-coordinate-compare__points {
    grid-template-columns: 1fr;
  }

  .qw-guide-coordinate-compare__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  [dir="rtl"] .qw-guide-coordinate-compare__arrow {
    transform: rotate(-90deg);
  }

  .qw-guide-coordinate-lane {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .qw-guide-items--machine {
    gap: 20px;
  }

  .qw-guide-stage + .qw-guide-stage::before {
    content: "↓";
    inset: auto;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
  }

  [dir="rtl"] .qw-guide-stage + .qw-guide-stage::before {
    content: "↓";
  }

  .qw-guide-plot {
    max-height: none;
  }

  .qw-guide-plot .qw-tick-label {
    font-size: 24px;
  }

  .qw-guide-plot .qw-axis-label {
    font-size: 26px;
  }

  .qw-guide-plot .qw-guide-label,
  .qw-guide-plot .qw-guide-curve-label {
    font-size: 27px;
  }

  .qw-guide-option-plot .qw-guide-plot {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 25 / 18;
  }

  /* Four-up comparison graphs become physically small on phones. Keep the
     option cast, but scale coordinate text for the actual rendered card size. */
  .qw-guide-option-plot .qw-tick-label {
    font-size: 28px;
  }

  .qw-guide-option-plot .qw-axis-label {
    font-size: 30px;
  }

  .qw-guide-option-plot .qw-guide-label,
  .qw-guide-option-plot .qw-guide-curve-label {
    font-size: 26px;
  }

  .qw-option {
    padding: 0;
    border-radius: 18px;
  }

  .qw-option__head {
    display: flex;
    min-height: 36px;
    align-items: center;
    padding: 5px 7px 3px 10px;
  }

  .qw-verdict {
    margin-inline-start: auto;
    padding: 3px 7px;
  }

  .qw-option > .qw-plot {
    width: calc(100% - 14px);
    margin: 0 7px 7px;
  }

  .qw-scratch {
    font-size: 3.4rem;
  }

  .qw-evidence {
    min-height: 0;
  }

  .qw-construction__copy,
  .qw-result__copy {
    padding: 14px;
  }

  .qw-result__actions {
    grid-template-columns: 1fr;
  }

  .qw-btn--ghost {
    grid-column: auto;
  }

  .qw-controls {
    position: relative;
    z-index: 1;
    bottom: auto;
    grid-template-columns: 42px 42px minmax(0, 1fr);
    margin-top: 20px;
    padding: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-raised-sm);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .qw-controls > .qw-btn {
    grid-column: auto;
  }

  .qw-dots {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 0;
    margin: -5px 0 -7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .qw-dots::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
  .qw-guide-option-plots {
    grid-template-columns: 1fr;
  }

  .qw-guide-runtime-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-walkthrough.is-animating:not(.qw-guided) *,
  .quick-walkthrough.is-animating:not(.qw-guided) *::before,
  .quick-walkthrough.is-animating:not(.qw-guided) *::after {
    animation: none;
  }

  .quick-walkthrough.qw-guided.is-animating *,
  .quick-walkthrough.qw-guided.is-animating *::before,
  .quick-walkthrough.qw-guided.is-animating *::after {
    animation-duration: .05s !important;
    animation-delay:
      calc(
        (var(--qw-order, 0) - var(--qw-scroll-order-offset, 0)) * .025s
      ) !important;
  }

  .quick-walkthrough.qw-guided.is-animating .qw-status--out::after {
    animation-delay:
      calc(
        (
          var(--qw-verdict-order, var(--qw-order, 0))
          - var(--qw-scroll-order-offset, 0) + 1
        ) * .025s
      ) !important;
  }
}

/* ── Answer value card glow ── */
.answer-value-card {
  position: relative;
  overflow: hidden;
}
.answer-value-card::before {
  content: '\2713';
  position: absolute;
  top: -10px;
  inset-inline-end: -5px;
  font-size: 4rem;
  opacity: .04;
  font-weight: 900;
  color: var(--accent);
  pointer-events: none;
  line-height: 1;
}

/* ── Curiosity card watermark ── */
.curiosity-card {
  position: relative;
  overflow: hidden;
}
.curiosity-card::before {
  content: '\1F4A1';
  position: absolute;
  top: -8px;
  inset-inline-end: -4px;
  font-size: 3.5rem;
  opacity: .06;
  pointer-events: none;
  line-height: 1;
}





/* ── Frosted glass nav bar ── */
.nav-bar {
  background: var(--surface-glass, rgba(229,234,238,.86));
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  border-top: 1px solid var(--glass-border, rgba(255,255,255,.18));
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
}

/* ── Nav button hover glow ── */
.nav-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-raised-sm), 0 0 16px var(--accent-glow, rgba(59,181,168,.25));
}
.nav-btn:hover:not(:disabled) svg {
  transform: scale(1.08);
}
/* nav hover SVG scale handled by base .nav-btn:hover rule */

/* ── Q-number badge gradient ── */
.q-number-badge {
  background: var(--accent-gradient, var(--accent));
  box-shadow: 0 3px 10px var(--accent-glow, rgba(59,181,168,.3));
}

/* ── Check button gradient ── */
.check-btn {
  background: var(--accent-gradient, var(--accent));
  position: relative;
  overflow: hidden;
}
.check-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 50%);
  pointer-events: none;
}
.check-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-raised), 0 4px 20px var(--accent-glow, rgba(59,181,168,.35));
}

/* ── Glossary drawer frosted edge ── */
.glossary-drawer {
  background: var(--surface-glass, var(--bg));
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid var(--glass-border, rgba(255,255,255,.18));
}
.glossary-drawer__term-title {
  background: var(--accent-gradient, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Term chip hover ── */
.term-chip:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-glow, rgba(59,181,168,.25));
  transform: translateY(-1px);
}

/* ── Code dialog gradient header bar ── */
.code-dialog {
  position: relative;
  overflow: hidden;
}
.code-dialog::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-gradient, var(--accent));
  z-index: 1;
}

/* ── View transition wrapper ── */
.question-container {
  transition: opacity var(--duration-normal, 250ms), transform var(--duration-normal, 250ms);
}
.question-container.transitioning-out {
  opacity: 0;
  transform: translateY(8px);
}
.question-container.transitioning-in {
  animation: fadeSlideUp var(--duration-normal, 250ms) var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}

/* ── Symbol table polish ── */
.symbol-table td:first-child {
  background: var(--accent-gradient, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.symbol-table__meaning-only td:first-child {
  background: var(--surface);
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
  font-weight: 500;
}

/* ── Twin card hover glow ── */
.twin-card:hover:not(.locked) {
  box-shadow: var(--shadow-raised), 0 4px 16px var(--accent-glow, rgba(59,181,168,.15));
}

/* ── Correct/Incorrect pill pop ── */
.q-pill--correct {
  animation: springPop 400ms var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}

/* ── Menu dropdown polish ── */
.menu-dropdown {
  background: var(--surface-glass, var(--surface));
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid var(--glass-border, rgba(255,255,255,.18));
}

/* ── Progress bar fill glow ── */
.progress-bar__fill {
  background: var(--accent-gradient, var(--accent));
  box-shadow: 0 0 8px var(--accent-glow, rgba(59,181,168,.3));
}

/* ── Result banner position relative for pseudo ── */
.result-banner { position: relative; overflow: hidden; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════
   MOBILE — one question indicator centered in
   the header band: ‹ [n] › with an expand
   chevron beneath. The chevron unfolds a
   floating grid of every question. The bottom
   bar is gone; its space returns to content.
   ══════════════════════════════════════════ */
@media (max-width: 999px) {
  .q-mini {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .q-mini__arrow {
    width: 28px; height: 28px;
    padding: 0;
    border: none; background: transparent; cursor: pointer;
    color: var(--text-muted);
    display: grid; place-items: center;
    opacity: .7;
    transition: color .2s var(--ease-out), opacity .2s var(--ease-out), transform .2s var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .q-mini__arrow:active { transform: scale(.88); color: var(--accent); }
  .q-mini__arrow:disabled { opacity: .18; cursor: default; }
  [dir="ltr"] .q-mini__arrow svg { transform: scaleX(-1); }
  .q-mini__cur {
    border: none; background: transparent; cursor: pointer;
    padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .q-mini__num {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--surface);
    box-shadow: var(--shadow-raised-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
    font-size: .78rem; font-weight: 800;
  }
  .q-mini__cur:active .q-mini__num { box-shadow: var(--shadow-inset); }
  .q-mini__chev {
    color: var(--text-muted);
    transition: transform .25s var(--ease-out);
  }
  body.qnav-open .q-mini__chev { transform: rotate(180deg); }

  /* Collapsed: the full rail is hidden. Expanded: a floating grid of
     every pill, dropped just below the header band. */
  body[data-view="question"] .q-scroll-bar { display: none; }
  body[data-view="question"].qnav-open .q-scroll-bar {
    display: grid;
    position: fixed;
    top: 68px;
    inset-inline: 12px;
    z-index: 104;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 14px;
    max-width: none;
    max-height: min(62vh, 480px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgba(255,255,255,.22);
    -webkit-mask-image: none;
    mask-image: none;
  }
  body[data-view="question"].qnav-open .q-pill {
    width: 100%;
    height: 40px;
  }

  /* One clean reading surface: no bottom bar, no reserved padding */
  .nav-bar { display: none; }
  .question-container {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 1000px) {
  .q-mini { display: none; }
}

/* ══════════════════════════════════════════
   MOBILE JOURNEY ACCORDION — every stage
   header stays visible as a trail; exactly
   one body is open; "next step" points down.
   ══════════════════════════════════════════ */
.journey--accordion .jstage__title {
  border: none; background: none; padding: 0;
  font: inherit; color: inherit; text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.journey--accordion .jstage__dot { cursor: pointer; }
.journey--accordion .jstage:not(.jstage--open) .jstage__head { opacity: .58; transition: opacity .2s var(--ease-out); }
.journey--accordion .jstage:not(.jstage--open) .jstage__head:active { opacity: 1; }
.journey--accordion .jstage:not(.jstage--open) .jstage__body { display: none; }
.journey--accordion .jstage--open .jstage__dot {
  color: var(--accent);
  box-shadow: var(--shadow-raised-sm), 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.journey--accordion .jstage--open .jstage__continue {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.journey-continue-btn--down {
  min-height: 42px;
  gap: 7px;
  padding: 9px 18px;
  font-size: .68rem;
}

/* ══════════════════════════════════════════
   QUICK-WALKTHROUGH READABILITY PASS — late
   overrides so they win over the responsive
   size tables above regardless of viewport.
   ══════════════════════════════════════════ */

/* The per-option payoff values are the evidence a student compares; they
   were rendering at caption size while decorative plots dominated. */
.qw-guide-option-plot > header span {
  font-size: .84rem;
}

.qw-guide-item__result {
  font-size: .84rem;
  font-weight: 800;
}

.qw-dot::before {
  width: 11px;
  height: 11px;
}

.qw-dot.is-current::before {
  width: 28px;
}

/* On desktop the walkthrough scrolls inside its own panel, which pushed the
   step controls below the fold on evidence-heavy beats. Keeping them stuck
   to the panel bottom means "Continue" is always reachable. Mobile keeps the
   in-flow footer — a permanent bar would eat phone viewport. */
@media (min-width: 941px) {
  .qw-controls {
    position: sticky;
    bottom: 14px;
  }
}

/* The fixed #qMini question nav (visible below 1000px, y≈88-135) floats over
   the walkthrough; without reserved clearance it permanently hides the
   question card's kicker, and focus scrolls tuck headings beneath it. Late in
   the file so it beats every width-specific .qw-shell padding shorthand. */
@media (max-width: 999px) {
  .qw-shell {
    padding-top: 66px;
  }

  .qw-question,
  .qw-story__title {
    scroll-margin-top: 148px;
  }
}

/* ══════════════════════════════════════════
   VISUAL RHETORIC — devices the reviewed
   demos rely on, driven entirely by fields
   the payloads already carry (status/tone).
   No authored content or per-question CSS.
   ══════════════════════════════════════════ */

/* A rejected item's expression is a claim that was tested and failed.
   Striking it makes the rejection legible at a glance instead of relying on
   the reader parsing the verdict text underneath. */
.qw-status--out .qw-guide-item__expression,
.qw-guide-option-plot.qw-status--out > header strong {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, #c0463c 72%, transparent);
}

/* The per-item payoff value reads as a labelled chip in its own tone rather
   than another line of coloured text competing with the label above it. */
.qw-guide-item__result {
  display: inline-block;
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 9px;
  /* Not a full pill: sentence-length verdicts wrap, and 999px turns a
     wrapped chip into a balloon. */
  border-radius: 11px;
  color: currentColor;
  background: color-mix(in srgb, currentColor 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  line-height: 1.5;
}

/* Winner/rejected chips inherit their card's tone; neutral items fall back to
   the accent so an unstyled result still reads as the payoff. */
.qw-guide-option:not([class*="qw-tone--"]) .qw-guide-item__result,
.qw-guide-ledger-row:not([class*="qw-tone--"]) .qw-guide-item__result,
.qw-guide-equation-step:not([class*="qw-tone--"]) .qw-guide-item__result,
.qw-guide-proof-step:not([class*="qw-tone--"]) .qw-guide-item__result,
.qw-guide-stage:not([class*="qw-tone--"]) .qw-guide-item__result {
  color: var(--accent);
}

/* A full-width plot letterboxes badly: the 500×360 viewBox is height-capped,
   so a 1090px-wide figure still draws at ~510px and wastes half its row.
   Pairing the component's own heading with the figure — the arrangement the
   reviewed demos use — spends that space on explanation and lets the drawing
   scale up at the same time. Desktop only; narrow screens keep the stack. */
@media (min-width: 941px) {
  .qw-guide-component--plot:has(> .qw-guide-component__head):only-child,
  .qw-guide-layout--single-flow > .qw-guide-component--plot:has(> .qw-guide-component__head) {
    display: grid;
    grid-template-columns: minmax(230px, .58fr) minmax(0, 1.42fr);
    gap: 20px;
    align-items: center;
  }

  .qw-guide-component--plot:has(> .qw-guide-component__head):only-child
    > .qw-guide-component__head,
  .qw-guide-layout--single-flow
    > .qw-guide-component--plot:has(> .qw-guide-component__head)
    > .qw-guide-component__head {
    margin-bottom: 0;
    align-self: center;
  }

  .qw-guide-component--plot:has(> .qw-guide-component__head):only-child .qw-guide-plot,
  .qw-guide-layout--single-flow
    > .qw-guide-component--plot:has(> .qw-guide-component__head) .qw-guide-plot {
    max-height: min(58vh, 520px);
  }

  /* The heading now carries a column of its own, so it takes the weight of a
     section title rather than a caption above a figure. */
  .qw-guide-component--plot:has(> .qw-guide-component__head):only-child
    > .qw-guide-component__head h2,
  .qw-guide-layout--single-flow
    > .qw-guide-component--plot:has(> .qw-guide-component__head)
    > .qw-guide-component__head h2 {
    font-size: clamp(1.18rem, 1.95vw, 1.5rem);
    line-height: 1.22;
  }

  .qw-guide-component--plot:has(> .qw-guide-component__head):only-child
    > .qw-guide-component__head p,
  .qw-guide-layout--single-flow
    > .qw-guide-component--plot:has(> .qw-guide-component__head)
    > .qw-guide-component__head p {
    margin-top: 9px;
    font-size: .88rem;
    line-height: 1.55;
  }
}

/* ══════════════════════════════════════════
   EVIDENCE PACKING
   The 12-column grid tiled components two per
   row, so a tall card (a stage pipeline) beside
   a short one (a number line) left half the row
   empty — the single biggest source of "it looks
   unfinished". Balanced columns pack by height
   instead. Reading order is column-major, which
   is the authored order, and `columns` follows
   `direction`, so RTL starts on the right.
   ══════════════════════════════════════════ */
@media (min-width: 941px) {
  /* Single-flow scenes (one flowable card, the rest span-all grids) stay on
     the grid: masonry would strand the lone card in one column. */
  .qw-guide-layout:not(.qw-guide-layout--single-flow):has(> .qw-guide-component + .qw-guide-component) {
    display: block;
    columns: 2;
    column-gap: 14px;
  }

  .qw-guide-layout:not(.qw-guide-layout--single-flow):has(> .qw-guide-component + .qw-guide-component)
    > .qw-guide-component {
    /* A card must never be sliced across the column break. */
    break-inside: avoid;
    width: 100%;
    margin-bottom: 14px;
  }

  /* The option cast is the shared reference for the whole beat, so it spans
     both columns rather than being packed into one. */
  .qw-guide-layout:not(.qw-guide-layout--single-flow):has(> .qw-guide-component + .qw-guide-component)
    > .qw-guide-component--optionGrid,
  .qw-guide-layout:not(.qw-guide-layout--single-flow):has(> .qw-guide-component + .qw-guide-component)
    > .qw-guide-component--optionPlots {
    column-span: all;
    margin-bottom: 0;
  }
}

/* Interval labels and probe labels both sat below the track, so on a phone
   they printed over each other (Q13's sign test). Intervals now label from
   above and probes keep the space below, which also matches how the stacked
   range-strip lanes already read. */
.qw-guide-numberline:not(.is-range-strips) .qw-guide-interval
  > span:not(.qw-guide-interval__bound) {
  top: auto;
  bottom: 18px;
}

/* Plain number lines get three reserved bands so nothing can overlap:
   interval labels above the track, the probe and its caption below it, and
   the axis bounds pinned to the bottom row. A long CKB probe caption wraps
   inside a bounded width instead of spilling across the bounds. */
.qw-guide-numberline:not(.is-range-strips) {
  min-height: 158px;
}

.qw-guide-numberline:not(.is-range-strips) .qw-guide-numberline__min,
.qw-guide-numberline:not(.is-range-strips) .qw-guide-numberline__max {
  top: auto;
  bottom: 0;
}

/* The probe box shrink-wraps, so the caption has to be widened on the box
   itself — capping the child alone still wraps it to three lines. */
.qw-guide-numberline:not(.is-range-strips) .qw-guide-probe {
  width: 172px;
}

/* `balance` fights the bidi-isolated math run and splits a caption that fits
   on one line into three, so the caption just wraps normally. */
.qw-guide-numberline:not(.is-range-strips) .qw-guide-probe span {
  white-space: normal;
}

@media (max-width: 720px) {
  /* Enough room for a two-line CKB probe caption to clear the bounds row. */
  .qw-guide-numberline:not(.is-range-strips) {
    min-height: 172px;
  }

  .qw-guide-numberline:not(.is-range-strips) .qw-guide-probe {
    width: 196px;
  }
}

/* A lone vertical pipeline stretched to the full 1120px card, throwing the
   expression and its verdict to opposite edges. Capping the measure keeps a
   stage readable in one glance. */
@media (min-width: 941px) {
  .qw-guide-layout > .qw-guide-component:only-child .qw-guide-items--chips,
  .qw-guide-layout > .qw-guide-component:only-child .qw-guide-items--ledger,
  .qw-guide-layout > .qw-guide-component:only-child .qw-guide-items--equation,
  .qw-guide-layout > .qw-guide-component:only-child .qw-guide-items--proof,
  .qw-guide-layout > .qw-guide-component:only-child .qw-guide-items--machine-column {
    max-width: 780px;
    margin-inline: auto;
  }
}

/* ══════════════════════════════════════════
   EXAM-CLEVER FLOW PASS — the walkthrough
   reads as an elimination game: persistent
   option tracker, numbered moves, a calmer
   mobile rhythm, and framing with identity.
   All data-driven; no authored changes.
   ══════════════════════════════════════════ */

/* — The game state, always in view — */
.qw-story__state {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-end;
  flex: 0 0 auto;
}

.qw-option-tracker {
  display: inline-flex;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
}

.qw-option-token {
  position: relative;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  color: var(--text-primary);
  font-size: .72rem;
  font-weight: 900;
}

.qw-option-token.is-out {
  opacity: .52;
  color: #9a4a42;
  box-shadow: var(--shadow-inset);
}

.qw-option-token.is-out b {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #c0463c;
}

.qw-option-token.is-winner {
  color: var(--accent-text, #fff);
  background: var(--accent-gradient);
  box-shadow: var(--shadow-raised-sm), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.qw-option-token.is-live {
  box-shadow: var(--shadow-raised-sm), 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent);
}

.qw-guided.is-animating .qw-option-token.is-fresh {
  opacity: 0;
  animation: qwElementIn .4s
    calc(
      (var(--qw-order, 0) - var(--qw-scroll-order-offset, 0))
      * var(--qw-stagger, .46s)
    ) var(--ease-out) both;
}

/* — Numbered moves — */
.qw-guide-item__id--step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: .72rem;
  font-family: "IBM Plex Mono", monospace;
}

/* — Framing and evidence identity: tone rail on explicitly-toned cards — */
.qw-guide-ledger-row.qw-tone--good, .qw-guide-ledger-row.qw-tone--bad,
.qw-guide-ledger-row.qw-tone--warn, .qw-guide-ledger-row.qw-tone--accent,
.qw-guide-equation-step.qw-tone--good, .qw-guide-equation-step.qw-tone--bad,
.qw-guide-equation-step.qw-tone--warn, .qw-guide-equation-step.qw-tone--accent,
.qw-guide-proof-step.qw-tone--good, .qw-guide-proof-step.qw-tone--bad,
.qw-guide-proof-step.qw-tone--warn, .qw-guide-proof-step.qw-tone--accent,
.qw-guide-stage.qw-tone--good, .qw-guide-stage.qw-tone--bad,
.qw-guide-stage.qw-tone--warn, .qw-guide-stage.qw-tone--accent {
  border-inline-start: 3px solid color-mix(in srgb, currentColor 46%, transparent);
}

/* — The step label reads as a move chip — */
.qw-story__kicker {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  gap: 6px;
  margin: 0 0 10px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: var(--shadow-inset);
  font-weight: 820;
}

/* — Answer moment carries its weight — */
.qw-guide-result .qw-answer-badge {
  width: 46px;
  height: 46px;
  font-size: 1.12rem;
  box-shadow: var(--shadow-raised-sm), 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.qw-recap {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* — Folded question card on later beats (phone only): the stem clamps to a
   teaser and a tap restores it; the student is mid-walkthrough and the full
   stem is one tap away instead of 500px of every scroll. — */
.qw-question__expand {
  display: none;
  margin-top: 8px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: .74rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  [data-qw-question-folded] .qw-question__stem {
    max-height: 5.4em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  }

  [data-qw-question-folded] .qw-question-cues,
  [data-qw-question-folded] .qw-question-options {
    display: none;
  }

  [data-qw-question-folded] .qw-question__expand {
    display: inline-flex;
  }

  /* — Calmer phone rhythm: the beat opens with a readable title and reaches
     its evidence inside the first screen. — */
  .qw-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px 4px 10px;
  }

  .qw-story__title {
    font-size: 1.52rem;
    line-height: 1.16;
  }

  [dir="rtl"] .qw-story__title {
    line-height: 1.38;
  }

  .qw-story__body {
    margin-top: 7px;
    font-size: .9rem;
  }

  .qw-story__state {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .qw-counter {
    min-width: 0;
  }

  .qw-guide-component {
    padding: 14px;
  }

  .qw-guide-stage {
    min-height: 54px;
    padding: 10px 11px;
  }
}

/* Silent option cards: no authored claim this beat, so they compress to a
   quiet letter chip and let the argued option own the row. */
.qw-guide-items .qw-guide-option.is-silent {
  min-height: 0;
  align-items: center;
  padding: 9px 12px;
  opacity: .62;
  box-shadow: var(--shadow-inset);
}

.qw-guide-items .qw-guide-option.is-silent .qw-guide-item__label {
  margin-bottom: 0;
  color: var(--text-muted);
  font-weight: 660;
}

/* ══════════════════════════════════════════
   FLOW MODE — the scroll is the Next button.
   Scenes are snap sections; a sticky bar
   carries the cast and progress; each scene's
   existing reveal choreography stays paused
   (is-armed) until the scene owns the screen.
   ══════════════════════════════════════════ */

.quick-walkthrough.qw-flow {
  scroll-snap-type: y proximity;
}

@media (max-width: 720px) {
  html:has(.qw-flow) {
    scroll-snap-type: y proximity;
  }
}

.qw-flow-bar {
  position: sticky;
  top: 8px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-raised-sm);
}

/* The fixed #qMini nav floats over the top band below 1000px; the bar
   sticks beneath it. */
@media (min-width: 721px) and (max-width: 999px) {
  .qw-flow-bar { top: 72px; }
}

@media (max-width: 720px) {
  .qw-flow-bar { top: 142px; }
}

.qw-flow-bar__dots {
  display: flex;
  gap: 5px;
  direction: ltr;
  flex: 0 0 auto;
}

.qw-flow-dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  transition: background .3s var(--ease-out), width .3s var(--ease-out);
}

.qw-flow-dot.is-on {
  width: 15px;
  background: var(--accent);
}

.qw-flow-bar__name {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: .74rem;
  font-weight: 820;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qw-flow-bar .qw-option-tracker {
  flex: 0 0 auto;
}

.qw-flow .qw-option-token.is-pop {
  animation: qwFlowTokPop .5s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes qwFlowTokPop {
  45% { transform: scale(1.32); }
}

/* ── scenes ── */

.qw-flow-scene {
  position: relative;
  padding: 22px 0 40px;
  scroll-margin-top: 64px;
}

.qw-flow-scene + .qw-flow-scene {
  border-top: 1px dashed color-mix(in srgb, var(--text-muted) 26%, transparent);
}

@media (min-width: 721px) and (max-width: 999px) {
  .qw-flow-scene { scroll-margin-top: 130px; }
}

@media (max-width: 720px) {
  .qw-flow-scene { scroll-margin-top: 200px; }
}

.qw-flow-scene.is-snap {
  scroll-snap-align: start;
}

.qw-flow-story {
  padding: 4px 4px 12px;
}

.qw-flow .qw-question {
  margin-bottom: 12px;
}

.qw-flow-more {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: var(--text-muted);
  opacity: .7;
}

.qw-flow-more svg {
  animation: qwFlowBob 1.7s ease-in-out infinite;
}

@keyframes qwFlowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Armed scenes hold their choreography at frame zero until the reader
   arrives; activation removes the class and the show runs once. */
.qw-flow-scene.is-armed,
.qw-flow-scene.is-armed *,
.qw-flow-scene.is-armed *::before,
.qw-flow-scene.is-armed *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .qw-flow-more svg { animation: none; }
  .qw-flow .qw-option-token.is-pop { animation: none; }
}

/* Legacy flow sections carry the quick-walkthrough class purely so the
   scene-keyed choreography compounds fire per section; the deck rules below
   (fixed slide height, hidden overflow) intentionally outrank the root
   scroller behaviors that class would bring. */

.qw-flow .qw-clues {
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════
   FLOW DECK — one step per screen, every
   screen. Slides are sticky full-height
   cards; the next slide glides up and covers
   the last like a page being laid on the
   pile, and mandatory snap makes one gesture
   equal one step. Applies on phone and PC.
   ══════════════════════════════════════════ */

.quick-walkthrough.qw-flow {
  scroll-snap-type: y mandatory;
}

/* The deck is always its own scroller, phones included: the page chrome
   (header, question nav) stays put above it and can never be trapped
   behind a snap point. */
@media (max-width: 720px) {
  html:has(.qw-flow) {
    scroll-snap-type: none;
  }

  .quick-walkthrough.qw-flow {
    height: calc(100svh - 148px);
    min-height: 430px;
    overflow-y: auto;
  }
}

.qw-flow .qw-flow-bar {
  top: 6px;
}

@media (min-width: 721px) and (max-width: 999px) {
  .qw-flow .qw-flow-bar { top: 76px; }
}

.qw-flow .qw-flow-scene {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--qw-deck-h, calc(100svh - 96px));
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  border-top: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 36px rgba(100, 116, 130, 0.28);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 0;
}

@media (max-width: 720px) {
  .qw-flow .qw-flow-scene { min-height: 430px; }
}

/* A slide's content scrolls inside the slide when it must; the step never
   stops being one page. */
.qw-flow .qw-flow-scene__inner {
  height: 100%;
  overflow-y: auto;
  padding: 76px 6px 44px;
  scrollbar-width: thin;
}

@media (min-width: 721px) and (max-width: 999px) {
  .qw-flow .qw-flow-scene__inner { padding-top: 132px; }
}

.qw-flow .qw-flow-scene--intro .qw-flow-scene__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qw-flow .qw-flow-scene--intro .qw-question {
  margin-bottom: 0;
}

.qw-flow .qw-flow-more {
  position: sticky;
  bottom: 2px;
  margin-top: 18px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .quick-walkthrough.qw-flow { scroll-snap-type: y proximity; }
}

/* ── Deck composition fixes: a slide is a composed page, not content
   stranded at the top of a tall box. ── */

/* Center a slide's content when it is shorter than the slide; the auto
   margins collapse to zero the moment content overflows, so dense slides
   keep their natural top-aligned scroll. */
.qw-flow .qw-flow-scene__inner {
  display: flex;
  flex-direction: column;
}

.qw-flow .qw-flow-scene__content {
  margin-block: auto;
  width: 100%;
}

/* The page-edge chrome earns its keep only while one slide covers another;
   at rest it must dissolve into the page instead of framing a box. */
.qw-flow .qw-flow-scene {
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 26px rgba(100, 116, 130, 0.16);
}

/* Desktop uses desktop width. */
@media (min-width: 1000px) {
  .qw-flow .qw-shell,
  .question-container.is-quick-walkthrough .qw-shell {
    width: min(1240px, 100% - 40px);
  }

  .qw-flow .qw-flow-scene__content {
    padding-inline: 10px;
  }
}

/* The intro slide is the deck's cover page: the question reads at cover
   scale instead of as a thin strip adrift in an empty slide. */
.qw-flow .qw-flow-scene--intro .qw-question {
  width: min(100%, 900px);
  margin-inline: auto;
}

@media (min-width: 1000px) {
  .qw-flow .qw-flow-scene--intro .qw-question {
    gap: 20px;
    padding: 30px 34px;
    border-radius: 26px;
  }

  .qw-flow .qw-flow-scene--intro .qw-question__number {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.12rem;
  }

  .qw-flow .qw-flow-scene--intro .qw-question__stem {
    font-size: 1.36rem;
    line-height: 1.9;
  }

  .qw-flow .qw-flow-scene--intro .qw-question-options span {
    padding: 6px 11px;
    border-radius: 11px;
    font-size: .84rem;
  }
}

/* ── Mobile flatten: on a phone the deck owns the screen. One page
   surface, one content layer — the container inset, shell inset, boxed
   bar and carded plots stacked between them all go. ── */
@media (max-width: 720px) {
  /* The sticky .page-header already occupies the top 68px; the deck fills
     everything below it, edge to edge. */
  .question-container.is-quick-walkthrough {
    max-width: none;
    padding: 4px 0 0;
  }

  .quick-walkthrough.qw-flow {
    height: calc(100svh - 72px);
    border-radius: 0;
  }

  .qw-flow .qw-shell {
    width: 100%;
    padding: 0;
  }

  .qw-flow .qw-flow-bar {
    top: 0;
    margin: 0;
    padding: 9px 14px;
    border-radius: 0;
    background: var(--bg);
    box-shadow: none;
  }

  .qw-flow .qw-flow-scene {
    border-radius: 14px 14px 0 0;
  }

  .qw-flow .qw-flow-scene__inner {
    padding: 56px 12px calc(36px + env(safe-area-inset-bottom, 0px));
  }

  .qw-flow .qw-flow-more {
    bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  /* The plot is the card: labels become bare captions and the winner
     ring moves onto the figure itself. */
  .qw-flow .qw-option,
  .qw-flow .qw-guide-option-plot {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .qw-flow .qw-option__head {
    min-height: 0;
    padding: 1px 5px 5px;
  }

  .qw-flow .qw-option > .qw-plot {
    width: 100%;
    margin: 0;
  }

  .qw-flow .qw-option.is-winner {
    transform: none;
  }

  .qw-flow .qw-option.is-winner > .qw-plot,
  .qw-flow .qw-guide-option-plot.qw-status--winner .qw-guide-plot {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 52%, transparent);
  }
}

/* ══════════════════════════════════════════
   FAST-ROUTE DECK (Q1) — engine port of the approved
   q001_snap_flow_demo.v0.2 design. Scoped to .qw-flow--fr.
   ══════════════════════════════════════════ */
.qw-flow--fr {
  --qwf-paper: var(--surface);
  --qwf-ink: var(--text-primary);
  --qwf-muted: #53606a;
  --qwf-green: #3bb5a8;
  --qwf-green-dark: #146f68;
  --qwf-green-deep: #1d6b63;
  --qwf-green-soft: rgba(59, 181, 168, 0.14);
  --qwf-amber: #b96a35;
  --qwf-amber-dark: #8f4e27;
  --qwf-amber-soft: rgba(185, 106, 53, 0.12);
  --qwf-red: #a43730;
  --qwf-red-soft: rgba(192, 70, 60, 0.1);
  --qwf-highlight: rgba(244, 205, 98, 0.5);
  --qwf-gradient: linear-gradient(135deg, #146f68 0%, #12665f 50%, #0f5f59 100%);
  --qwf-bar-h: 54px;
  color: var(--qwf-ink);
}

[data-theme="dark"] .qw-flow--fr {
  --qwf-muted: var(--text-muted);
  --qwf-green-dark: #4dcfc0;
  --qwf-green-deep: #78e0d5;
  --qwf-amber-dark: #f0aa72;
  --qwf-red: #f28b83;
  --qwf-highlight: rgba(244, 205, 98, 0.3);
}

/* The deck owns everything under the app header, full width, exact height. */
.question-container.is-quick-walkthrough:has(.qw-flow--fr) {
  width: 100%;
  max-width: none;
  padding: 4px 0 0;
}

.quick-walkthrough.qw-flow--fr {
  height: calc(100svh - var(--qw-deck-top, 140px) - 4px);
  min-height: 460px;
}

/* ——— no walkthrough chrome: the site header is the only bar. Each scene
   carries its own step marker beside the survivors pill, like a page
   number. ——— */
.qwf-scene-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  justify-self: end;
}

[dir="rtl"] .qwf-scene-meta { align-items: flex-start; justify-self: start; }

.qwf-steps { display: flex; gap: 5px; align-items: center; }

.qwf-step {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: #c0c9cf;
}

.qwf-step.is-past { background: color-mix(in srgb, var(--qwf-green-dark) 45%, #c0c9cf); }

.qwf-step.is-here { width: 15px; background: var(--qwf-green-dark); }

/* ——— snap scenes ——— */
.qwf-scene {
  min-height: var(--qw-deck-h, calc(100svh - 140px));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 34px 0 30px;
}

.qwf-inner {
  width: min(1060px, calc(100% - 28px));
  margin: 0 auto;
}

.qwf-more {
  position: absolute;
  bottom: 10px;
  left: 50%;
  right: auto;
  z-index: 3;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--qwf-muted);
  background: transparent;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transform: translateX(-50%);
}

.qwf-more__label { display: none; }
.qwf-more svg { animation: qwf-bob 1.7s ease-in-out infinite; }
.qwf-more:active { transform: translateX(-50%) scale(.98); }
.qwf-more:focus-visible {
  outline: 2px solid var(--qwf-green-dark);
  outline-offset: 2px;
}

@keyframes qwf-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ——— scene navigation (injected by frBind) ———
   Zero-height sticky wrapper inside the scroll root: the ghost pair rides at
   mid-viewport without occupying scene space, so fit budgets stay untouched.
   Desktop-only; phones keep swipe + the (bigger) chevron. Vertical arrows are
   direction-neutral; inset-inline-end mirrors the pair for RTL. */
.qwf-nav {
  position: sticky;
  top: calc(50% - 50px);
  height: 0;
  z-index: 24;
  display: none;
  pointer-events: none;
}

.qwf-nav-btn {
  pointer-events: auto;
  position: absolute;
  inset-inline-end: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: var(--shadow-inset);
  color: var(--qwf-muted);
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.qwf-nav-btn[data-qwf-nav-up] { top: 0; }

.qwf-nav-btn[data-qwf-nav-down] { top: 52px; }

.qwf-nav-btn:hover { color: var(--qwf-green-dark); transform: translateY(-1px); }

.qwf-nav-btn:active { transform: translateY(0); }

.qwf-nav-btn:focus-visible { outline: 2px solid var(--qwf-green-dark); outline-offset: 2px; }

.qwf-nav-btn:disabled {
  opacity: 0.32;
  cursor: default;
  pointer-events: none;
  transform: none;
}

@media (min-width: 1000px) {
  .qwf-nav { display: block; }
}

/* generic entrance (waits for .is-live) */
.qwf-fx { opacity: 0; transform: translateY(14px); }

.is-live .qwf-fx {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 400ms ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* ——— question card ——— */
.qwf-question-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 18px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-question-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--qwf-gradient);
  box-shadow: var(--shadow-raised-sm);
  font-size: 0.92rem;
  font-weight: 900;
}

.qwf-question-kicker {
  margin: 0 0 3px;
  color: var(--qwf-muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.qwf-question-text {
  margin: 0;
  font-size: clamp(0.94rem, 1.9vw, 1.12rem);
  font-weight: 650;
  line-height: 1.6;
}

.qwf-answer-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
}

.qwf-answer-state.is-incorrect { color: var(--qwf-red); background: var(--qwf-red-soft); box-shadow: var(--shadow-inset); }
.qwf-answer-state.is-correct { color: var(--qwf-green-deep); background: var(--qwf-green-soft); box-shadow: var(--shadow-inset); }

.qwf-clue {
  padding: 1px 4px;
  margin: -1px -3px;
  border-radius: 8px;
  background-image: linear-gradient(120deg, var(--qwf-highlight), var(--qwf-highlight));
  background-repeat: no-repeat;
  background-size: 0% 92%;
  background-position: 0 60%;
  transition: background-size 520ms ease;
}

[dir="rtl"] .qwf-clue { background-position: 100% 60%; }

.is-lit .qwf-clue { background-size: 100% 92%; }
.is-lit .qwf-clue:last-of-type { transition-delay: 420ms; }

/* ——— story head ——— */
.qwf-kicker {
  margin: 0 0 7px;
  color: var(--qwf-green-dark);
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.qwf-kicker .qw-math-run {
  letter-spacing: normal;
  text-transform: none;
}

.qwf-title {
  margin: 0;
  font-size: clamp(1.55rem, 4.6vw, 2.6rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.06;
}

[lang="ckb"] .qwf-title { line-height: 1.34; letter-spacing: 0; }

.qwf-sub {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--qwf-muted);
  font-size: clamp(0.9rem, 1.8vw, 1.02rem);
  line-height: 1.5;
}

[lang="ckb"] .qwf-sub { line-height: 1.85; }

.qwf-story-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 18px 2px 14px;
}

.qwf-survivors {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--qwf-green-dark);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-inset);
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

[dir="rtl"] .qwf-story-row { direction: rtl; }

/* ——— clue chips ——— */
.qwf-clue-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 16px;
}

.qwf-clue-chip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-chip-glyph {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-inset);
}

.qwf-clue-chip strong { display: block; font-size: 0.92rem; letter-spacing: -0.01em; }

.qwf-clue-chip > span:last-child > span { color: var(--qwf-muted); font-size: 0.78rem; line-height: 1.5; }

/* ——— option board ——— */
.qwf-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.qwf-card {
  overflow: hidden;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  position: relative;
  transition: opacity 360ms ease, transform 360ms ease;
}

.qwf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 6px 9px 6px 12px;
}

[dir="rtl"] .qwf-card-head { padding: 6px 12px 6px 9px; }

.qwf-card-letter { font-size: 0.9rem; font-weight: 850; white-space: nowrap; }

.qwf-verdict {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 260ms ease, transform 260ms ease;
  white-space: nowrap;
}

.qwf-verdict.is-on { opacity: 1; transform: translateY(0); }
.qwf-verdict.is-ok { color: var(--qwf-green-dark); background: var(--qwf-green-soft); }
.qwf-verdict.is-out { color: var(--qwf-red); background: var(--qwf-red-soft); }
.qwf-verdict.is-win { color: #fff; background: var(--qwf-gradient); }

.qwf-card > .qwf-plot {
  display: block;
  width: calc(100% - 14px);
  height: auto;
  margin: 0 7px 7px;
  border-radius: 12px;
  background: #fff;
}

.qwf-plot { direction: ltr; }

.qwf-card.is-rejected { opacity: 0.42; transform: scale(0.965); }

.qwf-card.is-rejected::after {
  content: "×";
  position: absolute;
  left: 33%;
  top: 57%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 4px solid var(--qwf-red);
  border-radius: 50%;
  color: var(--qwf-red);
  background: rgba(255, 255, 255, 0.93);
  font-size: 2rem;
  font-weight: 500;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: qwf-stamp-in 300ms ease backwards;
}

@keyframes qwf-stamp-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.6); }
}

.qwf-card.is-confirmed {
  box-shadow: var(--shadow-raised-sm), 0 0 0 3px rgba(59, 181, 168, 0.55);
}

.qwf-card--dead {
  display: grid;
  place-items: center;
  min-height: 120px;
  opacity: 0.55;
}

.qwf-card--dead .qwf-card-head { position: absolute; inset-block-start: 0; inset-inline: 0; }
.qwf-card--dead .qwf-verdict { position: static; opacity: 1; transform: none; }

/* ——— svg marks ——— */
.qwf-cand {
  stroke: #4f6f45;
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke 300ms ease;
}

.is-rejected .qwf-cand { stroke: #9aa4ab; }

.qwf-given {
  stroke: var(--qwf-amber);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 850ms ease;
}

.given-on .qwf-given { stroke-dashoffset: 0; }

.qwf-given-static {
  stroke: var(--qwf-amber);
  stroke-width: 7;
  stroke-linecap: round;
}

.qwf-dot-g, .qwf-angle-g, .qwf-miss-g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.qwf-dot-g { transform: scale(0.4); transition: opacity 300ms ease, transform 300ms ease; }
.dot-on .qwf-dot-g { opacity: 1; transform: scale(1); }

.qwf-angle-g { transform: scale(0.65); transition: opacity 300ms ease, transform 300ms ease; }
.angle-on .qwf-angle-g,
.qwf-angle-g.is-static { opacity: 1; transform: scale(1); }

.qwf-miss-g { transition: opacity 300ms ease; }
.is-rejected .qwf-miss-g { opacity: 1; }

.qwf-angle-arc { fill: none; stroke: var(--qwf-red); stroke-width: 5; stroke-linecap: round; }

.qwf-angle-square {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-angle-degree {
  fill: #26313a;
  stroke: #fff;
  stroke-width: 8;
  paint-order: stroke;
  font-family: Inter, sans-serif;
  font-size: 26px;
  font-weight: 900;
  text-anchor: middle;
}

.qwf-point-label {
  fill: #26313a;
  stroke: #fff;
  stroke-width: 6;
  paint-order: stroke;
  font-family: Inter, sans-serif;
  font-size: 19px;
  font-weight: 850;
}

.qwf-cap {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 850;
}

.qwf-cap--given { fill: #8f4e27; }
.qwf-cap--answer { fill: #26877d; }

/* ——— construction ——— */
.qwf-construct {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  overflow: hidden;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised);
}

.qwf-construct-figure { padding: 14px; }

.qwf-construct-figure .qwf-plot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-construct-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px 8px;
}

[dir="rtl"] .qwf-construct-steps { padding: 22px 8px 20px 22px; }

.qwf-construct-eyebrow {
  margin: 0;
  color: var(--qwf-amber-dark);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.qwf-construct-equation {
  margin: 0 0 2px;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 750;
  letter-spacing: -0.01em;
}

[dir="rtl"] .qwf-construct-equation { text-align: end; }

.qwf-calc-row {
  padding: 9px 11px;
  border-radius: 11px;
  color: var(--qwf-amber-dark);
  background: var(--qwf-amber-soft);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.32;
  transition: opacity 280ms ease, transform 280ms ease;
}

.qwf-calc-row.is-active { opacity: 1; transform: translateX(3px); }

[dir="rtl"] .qwf-calc-row { text-align: start; }

.qwf-construct-note { margin: 2px 0 0; color: var(--qwf-muted); font-size: 0.78rem; line-height: 1.6; }
.qwf-construct-note strong { color: var(--qwf-ink); }

.qwf-c-dot {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 300ms ease, transform 300ms ease;
}

.dot-one-on .qwf-c-dot--1, .dot-two-on .qwf-c-dot--2 { opacity: 1; transform: scale(1); }

.qwf-c-given {
  stroke: var(--qwf-amber);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms ease;
}

.line-on .qwf-c-given { stroke-dashoffset: 0; }

.qwf-c-label { opacity: 0; transition: opacity 300ms ease 500ms; }
.line-on .qwf-c-label { opacity: 1; }

/* ——— answer ——— */
.qwf-answer {
  overflow: hidden;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised);
}

.qwf-answer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.95fr);
}

.qwf-answer-figure { padding: 14px; }

.qwf-answer-figure .qwf-plot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-answer-copy {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px 22px 20px 8px;
}

[dir="rtl"] .qwf-answer-copy { padding: 20px 8px 20px 22px; }

.qwf-answer-headline { display: flex; gap: 13px; align-items: center; }

.qwf-answer-badge {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  flex-shrink: 0;
  border-radius: 15px;
  color: #fff;
  background: var(--qwf-gradient);
  box-shadow: var(--shadow-raised-sm), 0 0 0 4px rgba(59, 181, 168, 0.3);
  font-size: 1.3rem;
  font-weight: 900;
}

.qwf-answer-headline h3 {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 750;
  letter-spacing: -0.015em;
}

[lang="ckb"] .qwf-answer-headline h3 { line-height: 1.5; letter-spacing: 0; }

.qwf-answer-headline p { margin: 3px 0 0; color: var(--qwf-muted); font-size: 0.82rem; line-height: 1.6; }

.qwf-recap { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* Keep every directional connector attached to the destination it introduces.
   The chip may still wrap internally on a narrow phone, but the arrow cannot
   become an orphan at the end of the preceding flex line. */
.qwf-recap-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.qwf-recap-chip {
  min-width: 0;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-inset);
  font-size: 0.72rem;
  font-weight: 800;
}

.qwf-recap-chip.is-final { color: #fff; background: var(--qwf-gradient); box-shadow: none; }
.qwf-recap-arrow { color: var(--qwf-green-dark); font-weight: 900; }

.qwf-proof {
  padding: 9px 12px;
  border-radius: 11px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 700;
}

[data-theme="dark"] .qw-flow--fr .qwf-proof {
  color: #78e0d5;
}

[dir="rtl"] .qwf-proof { text-align: start; }

.qwf-depth { margin: 0; color: var(--qwf-muted); font-size: 0.8rem; line-height: 1.6; }
.qwf-depth strong { color: var(--qwf-ink); }

.qwf-action-note { margin: 0; color: var(--qwf-muted); font-size: 0.76rem; }
.qwf-action-note.is-error { color: var(--qwf-red); }

/* One row of equal actions — replay · full explanation · next question.
   Stacked buttons on the conclusion slide only added scrolling. */
.qwf-ctas { display: flex; gap: 9px; margin-top: 2px; }

.qwf-ctas > * { flex: 1 1 0; min-width: 0; }

.qwf-ctas .qw-btn--main,
.qwf-cta-main {
  padding: 13px 10px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: var(--qwf-gradient);
  box-shadow: var(--shadow-raised-sm);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}

.qwf-cta-outline {
  padding: 12px 10px;
  border: 0;
  border-radius: 14px;
  color: var(--qwf-green-deep);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}

.qwf-cta-ghost {
  padding: 12px 8px;
  border: 0;
  border-radius: 14px;
  color: var(--qwf-muted);
  background: none;
  box-shadow: var(--shadow-inset);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  text-align: center;
}

@media (max-width: 640px) {
  .qwf-ctas { gap: 7px; }
  .qwf-ctas .qw-btn--main,
  .qwf-cta-main { font-size: 0.76rem; padding: 12px 5px; }
  .qwf-cta-outline { font-size: 0.76rem; padding: 12px 5px; }
  .qwf-cta-ghost { font-size: 0.74rem; padding: 12px 5px; }

  /* Long labels wrap into tall squares and push the row past a real
     iPhone's fold: drop the decorative arrow at phone width in both
     directions, and trim RTL a step (Kurdish labels run wider). */
  .qwf-ctas .arrow-flip { display: none; }
  [dir="rtl"] .qwf-ctas .qw-btn--main,
  [dir="rtl"] .qwf-cta-main,
  [dir="rtl"] .qwf-cta-outline,
  [dir="rtl"] .qwf-cta-ghost { font-size: 0.72rem; }

  /* The conclusion must fit a real iPhone viewport (Safari chrome included):
     tighter scene padding and a smaller figure buy the room the taller RTL
     text needs. */
  .qwf-scene { padding: 26px 0 22px; }
  .qwf-answer-figure { width: 100%; max-width: 285px; margin-inline: auto; }
  .qwf-answer-copy { gap: 8px; }

  /* Phones have no side navigation. Give the next-scene control an explicit,
     localized label and a full touch target while keeping it out of flow. */
  /* Phones keep the approved quiet affordance: the bare chevron, bigger and
     tappable (44px invisible target) — no pill, no label, no buttons. */
  .qwf-more {
    bottom: 8px;
    min-height: 44px;
    color: var(--qwf-muted);
    background: transparent;
    box-shadow: none;
    opacity: 0.85;
  }
  .qwf-more svg { width: 24px; height: 24px; }
}

/* ——— responsive ——— */
@media (max-width: 940px) {
  .qwf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qwf-construct { grid-template-columns: 1fr; }
  .qwf-construct-steps { padding: 2px 18px 18px; }
  [dir="rtl"] .qwf-construct-steps { padding: 2px 18px 18px; }
  .qwf-answer-grid { grid-template-columns: 1fr; }
  .qwf-answer-copy { padding: 2px 18px 20px; }
  [dir="rtl"] .qwf-answer-copy { padding: 2px 18px 20px; }
}

@media (max-width: 640px) {
  .qwf-scene { padding-top: 26px; }
  .qwf-story-row { grid-template-columns: 1fr; align-items: start; }
  .qwf-scene-meta {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
  [dir="rtl"] .qwf-scene-meta { justify-content: flex-start; }
  .qwf-clue-chips { grid-template-columns: 1fr; gap: 9px; }
  .qwf-card-head { min-height: 34px; }
  .qwf-answer-figure, .qwf-construct-figure { padding: 10px; }
}

/* ——— completion-kind (fh) figures: a given half that must be preserved,
   probe hops through the origin, and a witness pair. Stroke-dashoffset,
   transform and opacity only — never filters or shadows. ——— */
/* Sized so intro card + story + hero fit one desktop slide — a taller
   hero hides its bottom behind the next snap point. */
.qwf-fh-hero { width: min(560px, 100%); margin: 4px auto 0; }

.qwf-fh-hero .qwf-plot { display: block; width: 100%; }

.qwf-fh-curve {
  fill: none;
  stroke: #26313a;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-fh-given {
  fill: none;
  stroke: #b96a35;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms cubic-bezier(.22, .9, .26, 1);
}

.given-on .qwf-fh-given, .qwf-fh-given.is-static {
  stroke-dashoffset: 0;
}

.qwf-fh-given.is-static { stroke-dasharray: none; transition: none; }

.qwf-fh-answer {
  fill: none;
  stroke: #26877d;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-fh-region { opacity: 0; transition: opacity 600ms ease; }

.region-on .qwf-fh-region { opacity: 1; }

.qwf-fh-region rect {
  fill: rgba(217, 138, 40, .09);
  stroke: #d98a28;
  stroke-width: 2;
  stroke-dasharray: 7 7;
}

.qwf-fh-region text {
  fill: #8f4e27;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.qwf-fh-conflict {
  opacity: 0;
  transform: scale(.55);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 300ms ease, transform 420ms cubic-bezier(.34, 1.4, .4, 1);
}

.conflict-on .qwf-fh-conflict { opacity: 1; transform: none; }

.qwf-fh-conflict circle { fill: none; stroke: #c25f5f; stroke-width: 4.5; }

.qwf-fh-conflict .qwf-point-label { fill: #b04f4f; }

.qwf-fh-src, .qwf-fh-orig, .qwf-fh-tgt, .qwf-fh-w, .qwf-fh-endg, .qwf-fh-end {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 320ms ease, transform 380ms ease;
}

.qwf-fh-end.is-static, .src-on .qwf-fh-src, .src-on .qwf-fh-orig,
.tgt-on .qwf-fh-tgt, .w-on .qwf-fh-w, .ends-on .qwf-fh-endg, .ends-on .qwf-fh-end {
  opacity: 1;
  transform: none;
}

.qwf-fh-src circle { fill: #d98a28; stroke: #ffffff; stroke-width: 3.5; }

.qwf-fh-orig circle { fill: #26313a; stroke: #ffffff; stroke-width: 3; }

.qwf-fh-orig text {
  fill: #475259;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
}

.qwf-fh-tgt circle { fill: #ffffff; stroke: #26877d; stroke-width: 4; }

.tgt-hit .qwf-fh-tgt circle { fill: #26877d; stroke-width: 4.5; }

.tgt-miss .qwf-fh-tgt circle { stroke: #c25f5f; stroke-dasharray: 5 5; }

.tgt-miss .qwf-fh-tgt .qwf-point-label { fill: #b04f4f; }

.qwf-fh-hop {
  stroke: #8a949c;
  stroke-width: 3;
  stroke-dasharray: 6 7;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 340ms ease;
}

.hop1-on .qwf-fh-hop--one, .hop2-on .qwf-fh-hop--two { opacity: 1; }

.qwf-fh-witness {
  stroke: #26877d;
  stroke-width: 3;
  stroke-dasharray: 7 8;
  stroke-linecap: round;
}

.qwf-fh-wdot--from { fill: #d98a28; stroke: #ffffff; stroke-width: 3.5; }

.qwf-fh-wdot--to { fill: #26877d; stroke: #ffffff; stroke-width: 3.5; }

.qwf-fh-end { fill: #26313a; stroke: #ffffff; stroke-width: 3; }

/* ——— two-point (tp) equation cards and flat-line figures ——— */
.qwf-card--eq { padding-bottom: 13px; }

.qwf-eq {
  margin: 6px 12px 2px;
  text-align: center;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--qwf-ink, #26313a);
}

.qwf-eq-sub {
  margin: 8px 12px 0;
  padding: 8px 9px;
  border-radius: 11px;
  text-align: center;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 320ms ease, transform 360ms ease;
}

.sub-on .qwf-eq-sub { opacity: 1; transform: none; }

.qwf-eq-sub.is-good { color: var(--qwf-green-deep); background: var(--qwf-green-soft); }

.qwf-eq-sub.is-bad { color: var(--qwf-red); background: var(--qwf-red-soft); }

.qwf-tp-dot {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 320ms ease, transform 380ms ease;
}

.dot1-on .qwf-tp-dot--1, .dot2-on .qwf-tp-dot--2, .qwf-tp-dot.is-static {
  opacity: 1;
  transform: none;
}

.qwf-tp-dot--1 circle { fill: #d98a28; stroke: #ffffff; stroke-width: 3.5; }

.qwf-tp-dot--2 circle { fill: #b96a35; stroke: #ffffff; stroke-width: 3.5; }

.qwf-tp-line {
  fill: none;
  stroke: #26877d;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 800ms cubic-bezier(.22, .9, .26, 1);
}

.line-on .qwf-tp-line, .qwf-tp-lineg.is-static .qwf-tp-line { stroke-dashoffset: 0; }

.qwf-tp-lineg text { opacity: 0; transition: opacity 300ms ease 300ms; }

.line-on .qwf-tp-lineg text, .qwf-tp-lineg.is-static text { opacity: 1; }

/* Equation cards are short, so the centered reject stamp would sit right on
   the equation — park it at the inline end instead, smaller. The Y-only
   translate keeps the logical inset honest in RTL. */
.qwf-card--eq.is-rejected::after {
  left: auto;
  inset-inline-end: 8px;
  top: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.5rem;
  transform: translateY(-50%) rotate(-8deg);
}

/* ——— rate-at-time (rt): quantity bridge, calc strip, rate-line dot ——— */
.qwf-rt-bridge {
  width: min(720px, 100%);
  margin: 6px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qwf-rt-cards {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.qwf-rt-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 340ms ease, transform 400ms ease;
}

.qwf-rt-card.is-on { opacity: 1; transform: none; }

.qwf-rt-card.is-asked { box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px rgba(38, 135, 125, 0.55); }

.qwf-rt-label {
  color: var(--qwf-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qwf-rt-card strong {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.qwf-rt-unit { color: var(--qwf-muted); font-size: 0.78rem; font-weight: 700; }

.qwf-rt-arrow {
  align-self: center;
  flex: 0 0 auto;
  color: var(--qwf-green-dark);
  font-size: 1.5rem;
  font-weight: 900;
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-rt-arrow.is-on { opacity: 1; }

.qwf-rt-trap {
  margin: 0;
  padding: 10px 13px;
  border-radius: 12px;
  color: var(--qwf-red);
  background: var(--qwf-red-soft);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease, transform 380ms ease;
}

.qwf-rt-trap.is-on { opacity: 1; transform: none; }

.qwf-rt-trap > span { font-weight: 900; }

.qwf-rt-strip {
  width: min(640px, 100%);
  margin: 4px auto 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qwf-rt-dot {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 320ms ease, transform 380ms ease;
}

.dot-on .qwf-rt-dot, .qwf-rt-dot.is-static { opacity: 1; transform: none; }

.qwf-rt-dot circle { fill: #26877d; stroke: #ffffff; stroke-width: 3.5; }

@media (max-width: 640px) {
  .qwf-rt-cards { flex-direction: column; gap: 8px; }
  .qwf-rt-arrow { transform: rotate(90deg); }
  [dir="rtl"] .qwf-rt-arrow { transform: rotate(-90deg); }
}

/* ——— domain/intercept (di): one-input test, real-domain gap, two branches.
   Geometry is generated from the protected visual config. Animations stay
   on opacity and stroke-dashoffset so the graph remains light on phones. ——— */
.qwf-di-test {
  width: min(680px, 100%);
  margin: 2px auto 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.qwf-di-test-row {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 13px;
  color: var(--qwf-muted);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.68rem, 1.55vw, 0.86rem);
  font-weight: 700;
  text-align: center;
  opacity: 0.34;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 340ms ease, color 300ms ease;
  overflow-wrap: anywhere;
}

.qwf-di-test-row.is-active {
  color: var(--qwf-ink);
  opacity: 1;
  transform: none;
}

.qwf-di-test-row:last-child.is-active {
  color: var(--qwf-red);
  background: var(--qwf-red-soft);
}

.qwf-di-card .qwf-eq { margin-block: 10px 8px; }

.qwf-di-hero {
  width: min(600px, 100%);
  margin: 2px auto 0;
}

.qwf-di-hero .qwf-plot,
.qw-flow--di .qwf-construct-figure .qwf-plot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-di-region {
  opacity: 0;
  transition: opacity 380ms ease;
}

.qwf-di-region rect { fill: rgba(192, 70, 60, 0.09); }
.region-on .qwf-di-region, .qwf-di-region.is-static { opacity: 1; }

.qwf-di-axis {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-di-axis line {
  stroke: var(--qwf-green-dark);
  stroke-width: 3;
  stroke-dasharray: 7 7;
}

.qwf-di-axis text,
.qwf-di-claim text {
  fill: #26313a;
  stroke: #fff;
  stroke-width: 6;
  paint-order: stroke;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 850;
}

.axis-on .qwf-di-axis, .qwf-di-axis.is-static { opacity: 1; }

.qwf-di-curve {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms cubic-bezier(.22, .9, .26, 1);
}

.curve-on .qwf-di-curve, .qwf-di-curve.is-static { stroke-dashoffset: 0; }

.qwf-di-claim {
  opacity: 0;
  transform: scale(0.75);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 280ms ease, transform 320ms ease;
  transition-delay: calc(var(--i, 0) * 100ms);
}

.qwf-di-claim circle {
  fill: #fff;
  stroke: var(--qwf-red);
  stroke-width: 4;
}

.claims-on .qwf-di-claim, .qwf-di-claim.is-static {
  opacity: 1;
  transform: none;
}

/* ——— domain witness (dw): a closed target interval, one outside probe and
   four computed domain strips. All motion is opacity, transform or
   stroke-dashoffset; labels stay outside the plotted data lanes. ——— */
.qwf-dw-hero {
  width: min(620px, 100%);
  margin: 2px auto 0;
  padding: 10px 14px 7px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dw-figure-label {
  margin: 0;
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
}

.qwf-dw-line {
  display: block;
  width: 100%;
  height: auto;
}

.qwf-dw-axis {
  stroke: #a7b0b6;
  stroke-width: 3;
  stroke-linecap: round;
}

.qwf-dw-tick {
  stroke: #7e8a92;
  stroke-width: 2;
}

.qwf-dw-tick-label {
  fill: #59666e;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 750;
}

.qwf-dw-domain-line {
  stroke: var(--qwf-green-dark);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 720ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-dw-end {
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  opacity: 0;
  transform: scale(.65);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 260ms ease 420ms, transform 320ms ease 420ms;
}

.qwf-dw-end.is-open { fill: #fff; }
.qwf-dw-end.is-closed { fill: var(--qwf-green-dark); }

.domain-on .qwf-dw-domain-line,
.qwf-dw-domain.is-static .qwf-dw-domain-line {
  stroke-dashoffset: 0;
}

.domain-on .qwf-dw-end,
.qwf-dw-domain.is-static .qwf-dw-end {
  opacity: 1;
  transform: none;
}

.qwf-dw-witness {
  opacity: 0;
  transform: translateY(-4px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 300ms ease, transform 360ms ease;
}

.witness-on .qwf-dw-witness,
.qwf-dw-witness.is-static {
  opacity: 1;
  transform: none;
}

.qwf-dw-witness line {
  stroke: var(--qwf-red);
  stroke-width: 3;
  stroke-dasharray: 6 6;
}

.qwf-dw-witness circle {
  fill: #fff;
  stroke: var(--qwf-red);
  stroke-width: 4;
}

.qwf-dw-witness text {
  fill: var(--qwf-red);
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 850;
}

.qwf-dw-board { margin-top: 10px; }

.qwf-dw-test-card .qwf-eq {
  margin-block: 7px 1px;
  font-size: .9rem;
}

.qwf-dw-test-card .qwf-eq-sub {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.qwf-dw-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  width: min(760px, 100%);
  margin: 4px auto 0;
}

.qwf-dw-domain-card {
  min-width: 0;
  overflow: hidden;
  padding: 10px 12px 3px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dw-domain-card header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  color: var(--qwf-muted);
  font-size: .68rem;
  font-weight: 800;
}

.qwf-dw-domain-card header strong {
  min-width: 0;
  padding: 4px 7px;
  border-radius: 999px;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-dw-domain-card header strong.is-out {
  color: var(--qwf-red);
  background: var(--qwf-red-soft);
}

.qwf-dw-domain-card header strong.is-win {
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-dw-domain-card code {
  display: block;
  margin: 7px 0 -3px;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  font-weight: 750;
  text-align: center;
}

.qwf-dw-domain-card .qwf-dw-line { margin-top: -2px; }

.qwf-dw-construct .qwf-construct-figure {
  display: grid;
  align-content: center;
}

.qwf-dw-construct .qwf-dw-line,
.qw-flow--dw .qwf-answer-figure .qwf-dw-line {
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

/* Q20 composes the existing domain-witness renderer and number-line
   primitive into a two-scale trigonometric route. Marker labels occupy a
   reserved band above evenly spaced points, so data and text cannot collide. */
.qwf-dwt-gate {
  width: min(700px, 100%);
  margin: 4px auto 0;
  display: grid;
  gap: 10px;
  padding: 15px 17px;
  border-radius: 19px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dwt-function {
  justify-self: center;
  margin: 0;
  padding: 8px 22px;
  border-radius: 999px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1rem;
  font-weight: 850;
}

.qwf-dwt-gate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.qwf-dwt-gate-grid article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  opacity: .36;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 320ms ease;
}

.qwf-dwt-gate-grid article.is-on { opacity: 1; transform: none; }

.qwf-dwt-gate-grid span {
  min-width: 0;
  color: var(--qwf-muted);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.4;
}

.qwf-dwt-gate-grid code {
  color: var(--qwf-green-deep);
  font-size: .84rem;
  font-weight: 850;
  white-space: nowrap;
}

.qwf-dwt-search {
  width: min(610px, 100%);
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .36;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 320ms ease;
}

.qwf-dwt-search.is-on { opacity: 1; transform: none; }

.qwf-dwt-search code {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-size: .8rem;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.qwf-dwt-search span {
  color: var(--qwf-green-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.qwf-dwt-witness-board { width: min(800px, 100%); }

.qwf-dwt-option .qwf-eq {
  margin-block: 7px 2px;
  font-size: .82rem;
}

.qwf-dwt-option .qwf-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-content: start;
}

.qwf-dwt-option .qwf-card-letter,
.qwf-dwt-option .qwf-verdict {
  min-width: 0;
  font-size: .75rem;
}

.qwf-dwt-option .qwf-verdict {
  justify-self: stretch;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

.qwf-dwt-option .qwf-eq-sub {
  margin-top: 6px;
  font-size: .75rem;
  white-space: nowrap;
}

.qwf-dwt-line-card {
  width: min(670px, 100%);
  margin: 2px auto 0;
  padding: 9px 12px 3px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dwt-line-card header {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 7px;
  direction: ltr;
}

.qwf-dwt-line-card header strong {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 10px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: var(--shadow-inset);
  font-size: .82rem;
}

.qwf-dwt-line-card header code {
  min-width: 0;
  color: var(--qwf-ink);
  font-size: .79rem;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.qwf-dw-marker {
  opacity: 0;
  transform: translateY(-4px);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 260ms ease calc(var(--i, 0) * 100ms),
    transform 320ms ease calc(var(--i, 0) * 100ms);
}

.qwf-dw-marker line {
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 420ms ease calc(var(--i, 0) * 100ms);
}

.qwf-dw-marker circle {
  fill: #fff;
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
}

.qwf-dw-marker text {
  fill: var(--qwf-ink);
  paint-order: stroke;
  stroke: var(--qwf-paper);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 850;
}

.qwf-dw-construct .qwf-dw-marker text,
.qw-flow--dw .qwf-answer-figure .qwf-dw-marker text {
  fill: #26313a;
  stroke: #fff;
}

.markers-on .qwf-dw-marker,
.qwf-dw-markers.is-static .qwf-dw-marker {
  opacity: 1;
  transform: none;
}

.markers-on .qwf-dw-marker line,
.qwf-dw-markers.is-static .qwf-dw-marker line {
  stroke-dashoffset: 0;
}

.qwf-dw-highlight {
  opacity: 0;
  transform: translateY(3px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 280ms ease, transform 340ms ease;
}

.qwf-dw-highlight line {
  stroke: var(--qwf-green);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 650ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-dw-highlight text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 850;
}

.interval-on .qwf-dw-highlight,
.qwf-dw-highlight.is-static {
  opacity: 1;
  transform: none;
}

.interval-on .qwf-dw-highlight line,
.qwf-dw-highlight.is-static line {
  stroke-dashoffset: 0;
}

.qwf-dwt-scale-map {
  width: min(390px, 100%);
  min-width: 0;
  display: grid;
  align-items: center;
  justify-self: center;
  gap: 5px;
  padding: 5px;
}

.qwf-dwt-scale-map .qwf-dwt-line-card {
  width: 100%;
  margin: 0;
  padding: 5px 7px 0;
  box-shadow: var(--shadow-inset);
}

.qwf-dwt-scale-map .qwf-dw-line { margin-top: -3px; }

.qwf-dwt-scale-arrow {
  justify-self: center;
  color: var(--qwf-green-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .75rem;
  font-weight: 900;
  direction: ltr;
}

.qwf-dwt-final-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.qwf-dwt-final-options article {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 11px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  opacity: .42;
  transform: translateY(3px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-dwt-final-options article.is-rejected,
.qwf-dwt-final-options article.is-confirmed {
  opacity: 1;
  transform: none;
}

.qwf-dwt-final-options article.is-rejected {
  box-shadow: var(--shadow-inset), inset 0 0 0 1px rgba(177, 73, 68, .26);
}

.qwf-dwt-final-options article.is-confirmed {
  box-shadow: var(--shadow-inset), inset 0 0 0 2px var(--qwf-green);
}

.qwf-dwt-final-options header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  color: var(--qwf-muted);
  font-size: .75rem;
  font-weight: 800;
}

.qwf-dwt-final-options header strong {
  min-width: 0;
  padding: 3px 5px;
  border-radius: 999px;
  text-align: center;
}

.qwf-dwt-final-options header strong.is-out {
  color: var(--qwf-red);
  background: var(--qwf-red-soft);
}

.qwf-dwt-final-options header strong.is-win {
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-dwt-final-options code {
  display: block;
  margin-top: 5px;
  color: var(--qwf-ink);
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.qwf-dwt-construct .qwf-calc-row,
.qwf-dwt-construct .qwf-construct-note {
  font-size: .75rem;
}

.qw-flow--dwt .qwf-proof {
  font-size: .75rem;
}

.qw-flow--dwt .qwf-answer-figure .qwf-dwt-line-card {
  width: 100%;
  margin: 0;
  padding: 5px 7px 0;
  box-shadow: none;
}

.qw-flow--dwt [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.qw-flow--dwt .qwf-ctas .qw-btn--main {
  background-color: #146f68;
}

.qw-flow--dwt .qwf-dwt-option.is-rejected {
  opacity: 1;
  transform: scale(.985);
}

/* Q21 keeps the established domain-witness renderer and number-line
   primitive. This scoped composition presents two independent IVT
   witnesses and an issue-safe two-answer state without adding a renderer
   kind or a second interval figure. */
.qwf-dwi-badge {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(175, 111, 24, .28);
  border-radius: 999px;
  color: #7a4a0d;
  background: rgba(249, 191, 74, .15);
  box-shadow: var(--shadow-inset);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.25;
}

.qwf-dwi-badge > span {
  display: grid;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #a96814;
  font-size: .76rem;
}

.qwf-answer-state.is-issue {
  color: #7a4a0d;
  background: rgba(249, 191, 74, .14);
}

.qwf-dwi-answer-state {
  width: min(710px, 100%);
  margin: 3px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.qwf-dwi-answer-state article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 15px;
  background: var(--qwf-paper);
  box-shadow:
    var(--shadow-raised-sm),
    inset 0 0 0 2px rgba(32, 151, 137, .28);
  opacity: .36;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 340ms ease;
}

.qwf-dwi-answer-state article.is-on {
  opacity: 1;
  transform: none;
}

.qwf-dwi-check {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--qwf-green-dark);
  box-shadow: var(--shadow-raised-sm);
  font-size: .88rem;
  font-weight: 900;
}

.qwf-dwi-answer-state article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.qwf-dwi-answer-state strong,
.qwf-dwi-answer-state small {
  min-width: 0;
  color: var(--qwf-green-deep);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.3;
}

.qwf-dwi-answer-state code {
  min-width: 0;
  overflow: hidden;
  color: var(--qwf-ink);
  font-size: .77rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qwf-dwi-board {
  width: min(820px, 100%);
  margin: 4px auto 0;
  gap: 9px;
}

.qwf-dwi-option .qwf-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.qwf-dwi-option .qwf-verdict {
  justify-self: stretch;
  overflow-wrap: anywhere;
  font-size: .75rem;
  text-align: center;
  white-space: normal;
}

.qwf-dwi-option .qwf-eq {
  margin: 6px 7px 0;
  font-size: .78rem;
}

.qwf-dwi-option .qwf-eq-sub {
  margin: 6px 6px 0;
  padding: 7px 6px;
  font-size: .75rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.qw-flow--dwivt .qwf-dwi-option.is-rejected {
  opacity: 1;
  transform: scale(.985);
}

.qw-flow--dwivt .qwf-dwi-option.is-rejected::after {
  display: none;
}

.qwf-dwi-witness-card {
  width: min(690px, 100%);
  min-width: 0;
  margin: 3px auto 0;
  padding: 10px 12px 2px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dwi-witness-card > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--qwf-muted);
  font-size: .75rem;
  font-weight: 850;
}

.qwf-dwi-witness-card > header strong {
  min-width: 0;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  text-align: center;
}

.qwf-dwi-witness-card > code {
  display: block;
  margin-top: 5px;
  color: var(--qwf-ink);
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  white-space: nowrap;
}

.qwf-dwi-witness-card .qwf-dw-line {
  margin-top: -2px;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-dwi-witness-card.is-compact {
  margin: 0;
  padding: 7px 8px 1px;
  border-radius: 14px;
  box-shadow: var(--shadow-inset);
}

.qwf-dwi-witness-card.is-compact > header,
.qwf-dwi-witness-card.is-compact > code {
  font-size: .75rem;
}

.qwf-dwi-witness-card.is-compact .qwf-dw-marker text,
.qwf-dwi-witness-card.is-compact .qwf-dw-highlight text {
  font-size: 25px;
}

.qwf-dwi-witness-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-dwi-construct {
  width: min(850px, 100%);
  margin: 2px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 10px;
  padding: 10px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dwi-proof-block {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
}

.qwf-dwi-proof-block .qwf-construct-eyebrow,
.qwf-dwi-proof-block .qwf-construct-equation,
.qwf-dwi-proof-block .qwf-construct-note {
  margin: 0;
}

.qwf-dwi-proof-block .qwf-construct-equation {
  font-size: .85rem;
}

.qwf-dwi-proof-block .qwf-calc-row {
  padding: 7px 9px;
  font-size: .75rem;
}

.qwf-dwi-proof-block .qwf-construct-note {
  color: var(--qwf-muted);
  font-size: .75rem;
  line-height: 1.42;
}

.qwf-dwi-answer-figure {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.qw-flow--dwivt .qwf-answer-figure {
  max-width: 340px;
}

.qw-flow--dwivt .qwf-proof {
  font-size: .75rem;
  white-space: nowrap;
}

.qwf-dwi-witness-card .qwf-dw-marker text {
  fill: #26313a;
  stroke: #fff;
}

.qwf-dwi-witness-card .qwf-dw-highlight text {
  fill: #0c6d65;
}

[data-theme="dark"] .qwf-dwi-badge {
  color: #ffd99a;
  background: rgba(145, 86, 13, .34);
  border-color: rgba(255, 217, 154, .42);
}

.qw-flow--dwivt .qwf-ctas .qw-btn--main {
  background-color: #146f68;
}

.qw-flow--dwivt [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 640px) {
  .qw-flow--di .qwf-scene { padding: 18px 0; }
  .qw-flow--di .qwf-story-row { gap: 8px; padding: 10px 2px; }
  .qw-flow--di .qwf-title { font-size: 1.35rem; }
  .qw-flow--di .qwf-sub { margin-top: 5px; font-size: 0.82rem; line-height: 1.45; }
  .qw-flow--di[lang="ckb"] .qwf-sub { line-height: 1.65; }
  .qwf-di-test { grid-template-columns: 1fr; gap: 7px; margin-bottom: 10px; }
  .qwf-di-test-row { padding: 9px 8px; font-size: 0.72rem; }
  .qwf-di-hero { width: min(340px, 100%); }
  .qw-flow--di .qwf-construct-figure {
    width: min(225px, 100%);
    margin-inline: auto;
    padding: 8px;
  }
  .qw-flow--di .qwf-construct-steps { gap: 7px; padding: 0 14px 14px; }
  .qw-flow--di[dir="rtl"] .qwf-construct-steps { padding: 0 14px 14px; }
  .qw-flow--di .qwf-calc-row { padding: 7px 9px; }
  .qw-flow--di .qwf-construct-note { font-size: 0.72rem; line-height: 1.45; }
  .qw-flow--di .qwf-answer-figure { max-width: 250px; }
  .qw-flow--di .qwf-answer-copy { gap: 6px; }
  .qw-flow--di .qwf-proof { white-space: nowrap; font-size: 0.62rem; }
  .qw-flow--di .qwf-recap-chip { padding: 5px 8px; font-size: 0.65rem; }
  .qw-flow--di .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
  }

  .qw-flow--dw .qwf-scene { padding: 16px 0; }
  /* The compare scene carries the domain grid plus the second clue-chip
     pair; compact chips keep it inside the 700px real-iPhone budget. */
  .qw-flow--dw .qwf-clue-chips { padding-top: 8px; gap: 7px; }
  .qw-flow--dw .qwf-clue-chip { padding: 10px 12px; }
  .qw-flow--dw .qwf-chip-glyph { width: 34px; height: 34px; }
  .qw-flow--dw .qwf-story-row { gap: 7px; padding: 8px 2px; }
  .qw-flow--dw .qwf-title { font-size: 1.28rem; }
  .qw-flow--dw .qwf-sub { margin-top: 4px; font-size: .79rem; line-height: 1.44; }
  .qw-flow--dw[lang="ckb"] .qwf-sub { line-height: 1.62; }
  .qwf-dw-hero { width: min(348px, 100%); padding: 7px 9px 2px; }
  .qwf-dw-figure-label { font-size: .76rem; }
  .qwf-dw-board { gap: 7px; margin-top: 7px; }
  .qwf-dw-test-card { padding-bottom: 8px; }
  .qwf-dw-test-card.is-rejected::after { display: none; }
  .qw-flow--dw .qwf-dw-test-card.is-rejected .qwf-eq { margin-inline-end: 7px; }
  .qwf-dw-test-card .qwf-eq { margin: 5px 7px 0; font-size: .72rem; }
  .qwf-dw-test-card .qwf-eq-sub {
    margin: 5px 6px 0;
    padding: 6px 5px;
    font-size: .6rem;
  }
  .qwf-dw-domain-grid { gap: 7px; }
  .qwf-dw-domain-card { padding: 7px 7px 0; }
  .qwf-dw-domain-card header { gap: 4px; font-size: .59rem; }
  .qwf-dw-domain-card header strong { padding: 3px 5px; }
  .qwf-dw-domain-card code { margin-top: 5px; font-size: .64rem; }
  .qwf-dw-domain-card .qwf-dw-tick-label { font-size: 11px; }
  .qwf-dw-construct .qwf-construct-figure {
    width: min(290px, 100%);
    margin-inline: auto;
    padding: 7px;
  }
  .qwf-dw-construct .qwf-construct-steps { gap: 6px; padding: 0 13px 12px; }
  .qw-flow--dw[dir="rtl"] .qwf-dw-construct .qwf-construct-steps {
    padding: 0 13px 12px;
  }
  .qwf-dw-construct .qwf-calc-row { padding: 6px 8px; }
  .qwf-dw-construct .qwf-construct-note { font-size: .69rem; line-height: 1.42; }
  .qw-flow--dw .qwf-answer-figure { max-width: 285px; }
  .qw-flow--dw .qwf-answer-copy { gap: 6px; }
  .qw-flow--dw .qwf-proof { white-space: nowrap; font-size: .6rem; }
  .qw-flow--dw .qwf-recap-chip { padding: 5px 7px; font-size: .62rem; }
  .qw-flow--dw .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .67rem !important;
    line-height: 1.15 !important;
  }

  .qw-flow--dwt .qwf-scene { padding: 12px 0; }
  .qw-flow--dwt .qwf-story-row { padding: 6px 2px; }
  .qw-flow--dwt .qwf-title { font-size: 1.18rem; }
  .qw-flow--dwt .qwf-sub { font-size: .75rem; line-height: 1.4; }
  .qw-flow--dwt[lang="ckb"] .qwf-sub { line-height: 1.56; }
  .qwf-dwt-gate { gap: 7px; padding: 9px 10px; border-radius: 15px; }
  .qwf-dwt-function { padding: 6px 18px; font-size: .79rem; }
  .qwf-dwt-gate-grid { gap: 6px; }
  .qwf-dwt-gate-grid article {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 7px 8px;
    text-align: center;
  }
  .qwf-dwt-gate-grid span { font-size: .75rem; line-height: 1.32; }
  .qwf-dwt-gate-grid code { font-size: .75rem; }
  .qw-flow--dwt .qwf-clue-chips { gap: 5px; padding-top: 5px; }
  .qw-flow--dwt .qwf-clue-chip { gap: 6px; padding: 7px 8px; }
  .qw-flow--dwt .qwf-chip-glyph { width: 28px; height: 28px; border-radius: 9px; }
  .qw-flow--dwt .qwf-clue-chip strong { font-size: .75rem; }
  .qw-flow--dwt .qwf-clue-chip > span:last-child > span {
    font-size: .75rem;
    line-height: 1.32;
  }
  .qwf-dwt-search { gap: 5px; margin-top: 6px; padding: 7px 8px; }
  .qwf-dwt-search code { padding: 5px 4px; font-size: .75rem; }
  .qwf-dwt-search span { font-size: .85rem; }
  .qwf-dwt-witness-board { gap: 6px; }
  .qwf-dwt-option { padding-bottom: 7px; }
  .qwf-dwt-option.is-rejected::after { display: none; }
  .qwf-dwt-option .qwf-card-head { font-size: .75rem; }
  .qwf-dwt-option .qwf-verdict { padding: 3px 5px; font-size: .75rem; }
  .qwf-dwt-option .qwf-eq { margin: 4px 5px 0; font-size: .75rem; }
  .qwf-dwt-option .qwf-eq-sub {
    margin: 4px 4px 0;
    padding: 5px 3px;
    font-size: .75rem;
  }
  .qwf-dwt-line-card { padding: 6px 7px 0; border-radius: 14px; }
  .qwf-dwt-line-card header { gap: 5px; padding: 0 4px; }
  .qwf-dwt-line-card header strong {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    font-size: .7rem;
  }
  .qwf-dwt-line-card header code { font-size: .75rem; }
  .qwf-dwt-line-card .qwf-dw-marker text { font-size: 20px; }
  .qwf-dwt-construct {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 5px;
  }
  .qwf-dwt-construct .qwf-construct-figure {
    width: 100%;
    padding: 3px;
  }
  .qwf-dwt-scale-map { gap: 2px; padding: 1px; }
  .qwf-dwt-scale-map .qwf-dwt-line-card {
    padding: 3px 4px 0;
    border-radius: 10px;
  }
  .qwf-dwt-scale-map .qwf-dwt-line-card header strong {
    width: 23px;
    height: 23px;
  }
  .qwf-dwt-scale-map .qwf-dwt-line-card header code { font-size: .75rem; }
  .qwf-dwt-scale-map .qwf-dw-marker text { font-size: 46px; }
  .qwf-dwt-scale-map .qwf-dw-axis,
  .qwf-dwt-scale-map .qwf-dw-marker line,
  .qwf-dwt-scale-map .qwf-dw-marker circle {
    vector-effect: non-scaling-stroke;
  }
  .qwf-dwt-scale-arrow { font-size: .75rem; }
  .qwf-dwt-construct .qwf-construct-steps { gap: 4px; padding: 2px 5px; }
  .qw-flow--dwt[dir="rtl"] .qwf-dwt-construct .qwf-construct-steps {
    padding: 2px 5px;
  }
  .qwf-dwt-construct .qwf-construct-eyebrow { font-size: .75rem; line-height: 1.3; }
  .qwf-dwt-construct .qwf-construct-equation { font-size: .75rem; }
  .qwf-dwt-construct .qwf-calc-row { padding: 4px 4px; font-size: .75rem; }
  .qwf-dwt-final-options { gap: 4px; }
  .qwf-dwt-final-options article { padding: 5px 4px; }
  .qwf-dwt-final-options header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    font-size: .75rem;
    text-align: center;
  }
  .qwf-dwt-final-options header strong { padding: 2px 3px; }
  .qwf-dwt-final-options code { margin-top: 3px; font-size: .75rem; }
  .qwf-dwt-construct .qwf-construct-note { font-size: .75rem; line-height: 1.3; }
  .qw-flow--dwt .qwf-answer-figure { max-width: 275px; }
  .qw-flow--dwt .qwf-answer-figure .qwf-dwt-line-card header code {
    font-size: .75rem;
  }
  .qw-flow--dwt .qwf-answer-figure .qwf-dw-marker text {
    font-size: 24px;
  }
  .qw-flow--dwt .qwf-proof {
    padding-inline: 6px;
    font-size: .75rem;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  .qw-flow--dwt .qwf-recap-chip { font-size: .75rem; }
  .qw-flow--dwt .qwf-more { bottom: 16px; }
  .qw-flow--dwt .qwf-ctas {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr);
  }
  .qw-flow--dwt .qwf-ctas > * {
    width: 100%;
    font-size: .75rem !important;
    white-space: nowrap;
  }

  .qw-flow--dwivt .qwf-scene { padding: 9px 0; }
  .qw-flow--dwivt .qwf-story-row { gap: 4px; padding: 5px 2px; }
  .qw-flow--dwivt .qwf-title { font-size: 1.12rem; line-height: 1.17; }
  .qw-flow--dwivt .qwf-sub { margin-top: 3px; font-size: .75rem; line-height: 1.38; }
  .qw-flow--dwivt[lang="ckb"] .qwf-sub { line-height: 1.53; }
  .qw-flow--dwivt .qwf-question-card { gap: 8px; padding: 8px 10px; }
  .qwf-dwi-badge { margin-bottom: 4px; padding: 4px 8px; font-size: .75rem; }
  .qwf-dwi-badge > span { width: 18px; height: 18px; font-size: .68rem; }
  .qwf-dwi-answer-state { gap: 6px; margin-top: 2px; }
  .qwf-dwi-answer-state article { gap: 6px; padding: 7px 8px; border-radius: 12px; }
  .qwf-dwi-check { width: 25px; height: 25px; border-radius: 8px; font-size: .72rem; }
  .qwf-dwi-answer-state strong,
  .qwf-dwi-answer-state small,
  .qwf-dwi-answer-state code { font-size: .75rem; }
  .qw-flow--dwivt .qwf-clue-chips { gap: 5px; padding-top: 5px; }
  .qw-flow--dwivt .qwf-clue-chip { gap: 6px; padding: 7px 8px; }
  .qw-flow--dwivt .qwf-chip-glyph { width: 28px; height: 28px; border-radius: 9px; }
  .qw-flow--dwivt .qwf-clue-chip strong,
  .qw-flow--dwivt .qwf-clue-chip > span:last-child > span {
    font-size: .75rem;
    line-height: 1.3;
  }
  .qwf-dwi-board { gap: 6px; }
  .qwf-dwi-option { padding-bottom: 6px; }
  .qwf-dwi-option .qwf-card-head { gap: 3px; }
  .qwf-dwi-option .qwf-card-letter,
  .qwf-dwi-option .qwf-verdict { font-size: .75rem; }
  .qwf-dwi-option .qwf-verdict { padding: 3px 4px; }
  .qwf-dwi-option .qwf-eq { margin: 4px 4px 0; font-size: .75rem; }
  .qwf-dwi-option .qwf-eq-sub {
    margin: 4px 3px 0;
    padding: 5px 3px;
    font-size: .75rem;
    line-height: 1.25;
  }
  .qwf-dwi-witness-card { padding: 7px 8px 0; border-radius: 14px; }
  .qwf-dwi-witness-card > header,
  .qwf-dwi-witness-card > code { font-size: .75rem; }
  .qwf-dwi-witness-card .qwf-dw-marker text { font-size: 20px; }
  .qwf-dwi-witness-card .qwf-dw-highlight text { font-size: 19px; }
  .qwf-dwi-construct {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 6px;
    border-radius: 14px;
  }
  .qwf-dwi-witness-grid { gap: 5px; }
  .qwf-dwi-witness-card.is-compact { padding: 5px 5px 0; }
  .qwf-dwi-witness-card.is-compact > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    text-align: center;
  }
  .qwf-dwi-witness-card.is-compact > header strong { padding: 2px 3px; }
  .qwf-dwi-witness-card.is-compact > header,
  .qwf-dwi-witness-card.is-compact > code { font-size: .75rem; }
  .qwf-dwi-witness-card.is-compact .qwf-dw-marker text { font-size: 31px; }
  .qwf-dwi-witness-card.is-compact .qwf-dw-highlight text { font-size: 31px; }
  .qwf-dwi-proof-block { gap: 4px; }
  .qwf-dwi-proof-block .qwf-construct-eyebrow { font-size: .75rem; }
  .qwf-dwi-proof-block .qwf-construct-equation { font-size: .75rem; }
  .qwf-dwi-proof-block .qwf-calc-row { padding: 4px 5px; font-size: .75rem; }
  .qwf-dwi-proof-block .qwf-construct-note { font-size: .75rem; line-height: 1.32; }
  .qw-flow--dwivt .qwf-answer-figure {
    max-width: 285px;
    padding: 8px;
  }
  .qw-flow--dwivt .qwf-answer-figure .qwf-dwi-witness-card > code {
    display: none;
  }
  .qwf-dwi-answer-figure { gap: 4px; }
  .qw-flow--dwivt .qwf-answer-copy {
    gap: 5px;
    padding-bottom: 12px;
  }
  .qw-flow--dwivt .qwf-recap-chip { padding: 5px 6px; font-size: .75rem; }
  .qw-flow--dwivt .qwf-proof {
    padding-inline: 4px;
    font-size: .75rem;
    letter-spacing: -.03em;
    white-space: nowrap;
  }
  .qw-flow--dwivt .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .75rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }
  .qw-flow--dwivt .qwf-more { bottom: 13px; }
}

/* On phone-width cards the verdict chip already names the conflicting
   point; the in-plot coordinate label just collides with the reject stamp. */
@media (max-width: 640px) {
  .qwf-fh-conflict .qwf-point-label { display: none; }

  /* Narrow equation cards: keep the centered equation clear of the
     end-parked reject stamp. */
  .qwf-card--eq.is-rejected .qwf-eq { margin-inline-end: 54px; }

  /* A chip longer than the space beside the letter drops to its own row
     instead of bleeding past the card's hidden overflow; short chips keep
     the single row. */
  .qwf-card-head { flex-wrap: wrap; row-gap: 2px; padding-block: 5px; }
  .qwf-card-head .qwf-verdict { margin-inline-start: auto; }
}

/* ——— piecewise range (pr): two branch rules, two witness filters and a
   collision-free interval proof. Geometry comes from visualConfig. Motion
   is limited to opacity, transform and stroke-dashoffset. ——— */
.qwf-pr-branches {
  width: min(690px, 100%);
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qwf-pr-branch {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 340ms ease, transform 400ms ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}

.branch-on .qwf-pr-branch { opacity: 1; transform: none; }

.qwf-pr-branch-tag {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--qwf-green-dark);
  font-size: .76rem;
  font-weight: 900;
}

.qwf-pr-rule {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
}

.qwf-pr-rule code,
.qwf-pr-witness code,
.qwf-pr-option > code {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 750;
}

.qwf-pr-rule code { font-size: .9rem; }

.qwf-pr-rule > span {
  flex: 0 0 auto;
  color: var(--qwf-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .74rem;
  font-weight: 750;
}

.qwf-pr-branch-range { grid-column: 1 / -1; text-align: center; }
.qwf-pr-branch-range > strong { color: var(--qwf-green-deep); font-size: .76rem; }

.qwf-pr-line {
  display: block;
  width: 100%;
  height: auto;
}

.qwf-pr-axis {
  stroke: #a7b0b6;
  stroke-width: 3;
  stroke-linecap: round;
}

.qwf-pr-tick { stroke: #7e8a92; stroke-width: 2; }

.qwf-pr-tick-label {
  fill: #59666e;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 750;
}

.qwf-pr-range-line {
  stroke: var(--qwf-green-dark);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 720ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-pr-end,
.qwf-pr-arrow {
  opacity: 0;
  transform: scale(.7);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 260ms ease 390ms, transform 320ms ease 390ms;
}

.qwf-pr-end {
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
}

.qwf-pr-end.is-open { fill: #fff; }
.qwf-pr-end.is-closed { fill: var(--qwf-green-dark); }

.qwf-pr-arrow {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.interval-on .qwf-pr-range-line,
.qwf-pr-interval.is-static .qwf-pr-range-line {
  stroke-dashoffset: 0;
}

.interval-on .qwf-pr-end,
.interval-on .qwf-pr-arrow,
.qwf-pr-interval.is-static .qwf-pr-end,
.qwf-pr-interval.is-static .qwf-pr-arrow {
  opacity: 1;
  transform: none;
}

.qwf-pr-witness {
  width: min(600px, 100%);
  margin: 3px auto 12px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-pr-witness > * {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 340ms ease;
}

.qwf-pr-witness > :nth-child(2) { transition-delay: 120ms; }
.qwf-pr-witness > :nth-child(3) { transition-delay: 240ms; }
.qwf-pr-witness > :nth-child(4) { transition-delay: 360ms; }
.witness-on.qwf-pr-witness > * { opacity: 1; transform: none; }

.qwf-pr-witness-input {
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--qwf-muted);
  background: var(--qwf-surface);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
}

.qwf-pr-witness-arrow { color: var(--qwf-green-dark); font-weight: 900; }
.qwf-pr-witness code { min-width: 0; text-align: center; font-size: .86rem; }
.qwf-pr-witness > strong { color: var(--qwf-green-deep); font-size: .86rem; }

.qwf-pr-options {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qwf-pr-option {
  min-width: 0;
  overflow: hidden;
  padding: 10px 12px 1px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-pr-option header {
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: var(--qwf-muted);
  font-size: .68rem;
  font-weight: 800;
}

.qwf-pr-option header > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.qwf-pr-option .qwf-verdict { opacity: 0; transform: translateY(-3px); }
.qwf-pr-option .qwf-verdict.is-on { opacity: 1; transform: none; }

.qwf-pr-option > code {
  display: block;
  margin: 5px 0 -5px;
  text-align: center;
  font-size: .8rem;
}

.qwf-pr-option.is-rejected {
  opacity: 1;
  background: color-mix(in srgb, var(--qwf-paper) 92%, var(--qwf-red));
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1px rgba(177, 73, 68, .24);
}
.qwf-pr-option.is-rejected .qwf-pr-line { opacity: .68; }
.qwf-pr-option.is-confirmed { box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green); }

.qwf-pr-construct .qwf-construct-figure {
  display: grid;
  align-content: center;
}

.qwf-pr-range-stack {
  gap: 0;
  padding-block: 8px;
}

.qwf-pr-range-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  padding-inline: 10px;
}

.qwf-pr-range-row > strong {
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .7rem;
  text-align: center;
}

.qwf-pr-range-row[data-pr-range="union"] {
  border-radius: 12px;
  background: var(--qwf-green-soft);
}

.qwf-pr-answer-figure {
  width: 100%;
  padding: 14px 12px 4px;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-inset);
  text-align: center;
}

.qwf-pr-answer-figure > strong {
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .qw-flow--pr .qwf-scene { padding: 15px 0; }
  .qw-flow--pr .qwf-story-row { gap: 6px; padding: 7px 2px; }
  .qw-flow--pr .qwf-title { font-size: 1.25rem; }
  .qw-flow--pr .qwf-sub { margin-top: 3px; font-size: .77rem; line-height: 1.42; }
  .qw-flow--pr[lang="ckb"] .qwf-sub { line-height: 1.58; }
  .qwf-pr-branches { gap: 7px; }
  .qwf-pr-branch {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    padding: 10px 9px;
  }
  .qwf-pr-branch-tag { width: 29px; height: 29px; border-radius: 9px; }
  .qwf-pr-rule { display: grid; gap: 2px; }
  .qwf-pr-rule code { font-size: .72rem; }
  .qwf-pr-rule > span { font-size: .64rem; }
  .qw-flow--pr .qwf-clue-chips { padding-top: 6px; gap: 6px; }
  .qw-flow--pr .qwf-clue-chip { padding: 8px 10px; }
  .qw-flow--pr .qwf-chip-glyph { width: 31px; height: 31px; }
  .qwf-pr-witness {
    gap: 6px;
    margin-bottom: 7px;
    padding: 8px;
  }
  .qwf-pr-witness-input { padding: 5px 6px; font-size: .65rem; }
  .qwf-pr-witness code { font-size: .66rem; }
  .qwf-pr-witness > strong { font-size: .68rem; }
  .qwf-pr-options { gap: 7px; }
  .qwf-pr-option { padding: 7px 7px 0; }
  .qwf-pr-option header { gap: 4px; font-size: .58rem; }
  .qwf-pr-option .qwf-verdict { padding: 3px 5px; font-size: .57rem; }
  .qwf-pr-option > code { margin-top: 4px; font-size: .68rem; }
  .qwf-pr-tick-label { font-size: 11px; }
  .qwf-pr-construct .qwf-construct-figure {
    width: min(300px, 100%);
    margin-inline: auto;
    padding: 4px;
  }
  .qwf-pr-range-row { grid-template-columns: 52px minmax(0, 1fr); padding-inline: 5px; }
  .qwf-pr-range-row > strong { font-size: .62rem; }
  .qwf-pr-construct .qwf-construct-steps { gap: 4px; padding: 0 10px 8px; }
  .qw-flow--pr[dir="rtl"] .qwf-pr-construct .qwf-construct-steps {
    padding: 0 10px 8px;
  }
  .qwf-pr-construct .qwf-construct-equation {
    font-size: .7rem;
    line-height: 1.25;
    white-space: nowrap;
  }
  .qwf-pr-construct .qwf-calc-row { padding: 4px 6px; font-size: .62rem; }
  .qwf-pr-construct .qwf-construct-note { font-size: .63rem; line-height: 1.34; }
  .qw-flow--pr [data-scene-id="combine"] .qwf-clue-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .qw-flow--pr [data-scene-id="combine"] .qwf-clue-chip {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 7px 8px;
    font-size: .62rem;
    line-height: 1.35;
  }
  .qw-flow--pr [data-scene-id="combine"] .qwf-chip-glyph {
    width: 27px;
    height: 27px;
  }
  .qw-flow--pr .qwf-answer-figure { max-width: 280px; }
  .qw-flow--pr .qwf-answer-copy { gap: 5px; }
  .qw-flow--pr .qwf-proof { white-space: nowrap; font-size: .58rem; }
  .qw-flow--pr .qwf-recap-chip { padding: 5px 6px; font-size: .6rem; }
  .qw-flow--pr .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .66rem !important;
    line-height: 1.15 !important;
  }
}

/* ——— composition layers (cp): one input moving through h, g and f.
   All expressions are computed from visualConfig. The compact boxes keep
   the complete operation order visible without horizontal scrolling; motion
   is restricted to transform and opacity. ——— */
.qwf-cp-overview {
  width: min(720px, 100%);
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qwf-cp-overview article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 15px 17px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 340ms ease, transform 400ms ease;
}

.qwf-cp-overview article:nth-child(2) { transition-delay: 130ms; }
.overview-on.qwf-cp-overview article { opacity: 1; transform: none; }

.qwf-cp-overview article > span {
  min-width: 0;
  color: var(--qwf-muted);
  font-size: .7rem;
  font-weight: 800;
}

.qwf-cp-overview strong,
.qwf-cp-overview code {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
  white-space: nowrap;
}

.qwf-cp-overview strong { font-size: 1rem; }
.qwf-cp-overview code {
  grid-column: 1 / -1;
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .78rem;
  text-align: center;
}

.qwf-cp-pipeline {
  width: min(760px, 100%);
  margin: 3px auto 10px;
  padding: 11px 12px 13px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-cp-pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding-inline: 3px;
  color: var(--qwf-muted);
  font-size: .7rem;
  font-weight: 800;
}

.qwf-cp-pipeline-head code {
  min-width: 0;
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: end;
}

.qwf-cp-track {
  display: grid;
  grid-template-columns:
    minmax(0, .72fr) 22px
    minmax(0, 1fr) 22px
    minmax(0, 1fr) 22px
    minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.qwf-cp-step {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  place-items: center;
  align-content: start;
  gap: 4px;
  padding: 9px 7px;
  border-radius: 13px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 360ms ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}

.qwf-cp-step--input {
  grid-template-rows: auto auto auto;
  align-content: center;
}

.qwf-cp-step--abstract {
  grid-template-rows: auto 1fr;
  align-content: center;
}

.qwf-cp-pipeline.is-abstract .qwf-cp-step > code {
  align-self: center;
  font-size: .92rem;
}

.qwf-cp-step-label {
  color: var(--qwf-muted);
  font-size: .61rem;
  font-weight: 850;
  line-height: 1.3;
}

.qwf-cp-operation {
  min-width: 34px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--qwf-green-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}

.qwf-cp-step > strong,
.qwf-cp-step > code,
.qwf-cp-step > small {
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
}

.qwf-cp-step > strong { font-size: 1.05rem; }
.qwf-cp-step > code { font-size: .76rem; font-weight: 850; }
.qwf-cp-step > small {
  align-self: end;
  color: var(--qwf-muted);
  font-size: .6rem;
  font-weight: 700;
}

.qwf-cp-arrow {
  align-self: center;
  color: var(--qwf-green-dark);
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  transform: scale(.72);
  transition: opacity 260ms ease, transform 320ms ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}

.pipeline-on .qwf-cp-step,
.pipeline-on .qwf-cp-arrow {
  opacity: 1;
  transform: none;
}

.qwf-cp-pipeline.is-constant .qwf-cp-step:nth-of-type(3) .qwf-cp-operation {
  color: #fff;
  background: var(--qwf-red);
}

.qwf-cp-pipeline.is-winner {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px rgba(38, 135, 125, .4);
}

.qw-flow--cv .qwf-cp-step.is-pending,
.qw-flow--cv .qwf-cp-arrow.is-pending {
  opacity: .28;
}

.qw-flow--cv .qwf-cp-step.is-current {
  background: color-mix(in srgb, var(--qwf-green-soft) 68%, var(--qwf-surface));
  box-shadow: var(--shadow-inset), inset 0 0 0 2px var(--qwf-green);
}

.qw-flow--cv .qwf-cp-step.is-complete .qwf-cp-operation {
  background: var(--qwf-green-deep);
}

.qw-flow--cv .qwf-cp-value-overview article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.qw-flow--cv .qwf-cp-value-answer code {
  font-size: clamp(.72rem, 1.65vw, .94rem);
}

.qwf-cp-options {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.qwf-cp-option {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 15px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-cp-option header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--qwf-muted);
  font-size: .67rem;
  font-weight: 800;
}

.qwf-cp-option header > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.qwf-cp-option .qwf-verdict {
  min-width: 0;
  opacity: 0;
  transform: translateY(-3px);
}

.qwf-cp-option .qwf-verdict.is-on { opacity: 1; transform: none; }

.qwf-cp-option > code {
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-cp-option.is-rejected {
  background: color-mix(in srgb, var(--qwf-paper) 92%, var(--qwf-red));
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1px rgba(177, 73, 68, .24);
}

.qwf-cp-option.is-confirmed {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green);
}

.qwf-cp-note {
  width: min(660px, 100%);
  margin: 9px auto 0;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--qwf-muted);
  background: var(--qwf-surface);
  font-size: .73rem;
  line-height: 1.5;
  text-align: center;
}

.qwf-cp-note strong { color: var(--qwf-green-deep); }

.qwf-cp-answer-figure {
  width: 100%;
  min-height: 124px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 17px 13px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-inset);
  text-align: center;
}

.qwf-cp-answer-figure code,
.qwf-cp-answer-figure strong {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
  white-space: nowrap;
}

.qwf-cp-answer-figure code { font-size: clamp(.62rem, 1.45vw, .86rem); }
.qwf-cp-answer-figure strong { color: var(--qwf-green-deep); font-size: 1rem; }

@media (max-width: 640px) {
  .qw-flow--cp .qwf-scene { padding: 14px 0; }
  .qw-flow--cp .qwf-story-row { gap: 6px; padding: 7px 2px; }
  .qw-flow--cp .qwf-title { font-size: 1.23rem; }
  .qw-flow--cp .qwf-sub { margin-top: 3px; font-size: .76rem; line-height: 1.42; }
  .qw-flow--cp[lang="ckb"] .qwf-sub { line-height: 1.58; }
  .qwf-cp-overview { gap: 7px; }
  .qwf-cp-overview article { gap: 4px 6px; padding: 10px; }
  .qwf-cp-overview article > span { font-size: .58rem; line-height: 1.35; }
  .qwf-cp-overview strong { font-size: .72rem; }
  .qwf-cp-overview code { padding: 5px 6px; font-size: .62rem; }
  .qwf-cp-pipeline {
    margin-bottom: 7px;
    padding: 8px 7px 9px;
    border-radius: 15px;
  }
  .qwf-cp-pipeline-head { gap: 6px; margin-bottom: 6px; font-size: .58rem; }
  .qwf-cp-pipeline-head code { font-size: .6rem; }
  .qwf-cp-track {
    grid-template-columns:
      minmax(0, .68fr) 11px
      minmax(0, 1fr) 11px
      minmax(0, 1fr) 11px
      minmax(0, 1fr);
    gap: 3px;
  }
  .qwf-cp-step {
    min-height: 88px;
    gap: 3px;
    padding: 7px 3px;
    border-radius: 10px;
  }
  .qwf-cp-step-label { font-size: .62rem; line-height: 1.25; }
  .qwf-cp-operation { min-width: 30px; padding: 4px 5px; font-size: .68rem; }
  .qwf-cp-step > strong { font-size: .88rem; }
  .qwf-cp-step > code { font-size: .68rem; }
  .qwf-cp-step > small { display: none; }
  .qwf-cp-pipeline.is-abstract .qwf-cp-step > code { font-size: .72rem; }
  .qwf-cp-arrow { font-size: .8rem; }
  .qw-flow--cp .qwf-clue-chips { padding-top: 6px; gap: 6px; }
  .qw-flow--cp .qwf-clue-chip { padding: 8px 9px; }
  .qw-flow--cp .qwf-chip-glyph { width: 30px; height: 30px; }
  .qwf-cp-options { gap: 6px; }
  .qwf-cp-option { gap: 5px; padding: 7px 8px; }
  .qwf-cp-option header { gap: 4px; font-size: .56rem; }
  .qwf-cp-option .qwf-verdict { padding: 3px 5px; font-size: .53rem; }
  .qwf-cp-option > code { font-size: .58rem; line-height: 1.25; }
  .qwf-cp-note { margin-top: 6px; padding: 6px 8px; font-size: .61rem; line-height: 1.38; }
  .qw-flow--cp .qwf-answer-figure { max-width: 285px; }
  .qwf-cp-answer-figure { min-height: 94px; gap: 9px; padding: 11px 8px; }
  .qwf-cp-answer-figure code { font-size: .6rem; }
  .qwf-cp-answer-figure strong { font-size: .78rem; }
  .qw-flow--cp .qwf-answer-copy { gap: 5px; }
  .qw-flow--cp .qwf-proof { white-space: nowrap; font-size: .55rem; }
  .qw-flow--cp .qwf-recap-chip { padding: 5px 6px; font-size: .58rem; }
  .qw-flow--cp .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .65rem !important;
    line-height: 1.15 !important;
  }
  .qw-flow--cv .qwf-cp-value-pipeline .qwf-cp-step-label {
    font-size: .66rem;
  }
  .qw-flow--cv [data-scene-id="rule"] .qwf-question-card {
    gap: 8px;
    padding: 8px 10px;
  }
  .qw-flow--cv [data-scene-id="rule"] .qwf-question-number {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }
  .qw-flow--cv [data-scene-id="rule"] .qwf-question-text {
    font-size: .72rem;
    line-height: 1.44;
  }
  .qw-flow--cv .qwf-cp-option header,
  .qw-flow--cv .qwf-cp-option .qwf-verdict,
  .qw-flow--cv .qwf-cp-option > code,
  .qw-flow--cv .qwf-proof {
    font-size: .66rem;
  }
  .qw-flow--cv .qwf-cp-value-answer code {
    font-size: .66rem;
  }
}

/* ——— collinearity steps (cs): reject the horizontal contradiction, follow
   one repeated displacement, then verify every option with two slopes.
   Plot geometry comes entirely from visualConfig. Labels live in a reserved
   caption band, never inside the data region; motion is transform, opacity,
   and stroke-dashoffset only. ——— */
.qwf-cs-intro {
  width: min(650px, 100%);
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.qwf-cs-intro > div {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 13px 15px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  text-align: center;
}

.qwf-cs-intro > div > span {
  color: var(--qwf-muted);
  font-size: .68rem;
  font-weight: 850;
}

.qwf-cs-intro code,
.qwf-cs-intro > p,
.qwf-cs-option code,
.qwf-cs-option small {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
}

.qwf-cs-intro code {
  min-width: 0;
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.qwf-cs-intro > strong {
  color: var(--qwf-green-dark);
  font-size: 1.35rem;
  font-weight: 900;
}

.qwf-cs-intro > p {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0;
  padding: 7px 18px;
  border-radius: 999px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: var(--shadow-inset);
  font-size: .82rem;
}

.qwf-cs-shortcut {
  width: min(810px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 12px;
}

.qwf-cs-figure {
  min-width: 0;
  padding: 9px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-cs-plot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-cs-caption {
  fill: #48565f;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 850;
}

.qwf-cs-line,
.qwf-cs-vector,
.qwf-cs-miss {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 720ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-cs-line {
  stroke: var(--qwf-green-dark);
  stroke-width: 6;
}

.qwf-cs-line--shortcut { stroke: var(--qwf-amber); }

.qwf-cs-line--answer {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}

.line-on .qwf-cs-line,
.qwf-cs-line.is-static,
.move-one .qwf-cs-vector--one,
.move-two .qwf-cs-vector--two,
.miss-on .qwf-cs-miss {
  stroke-dashoffset: 0;
}

.qwf-cs-vector {
  stroke: var(--qwf-green-dark);
  stroke-width: 5;
}

.qwf-cs-vector--two { stroke: color-mix(in srgb, var(--qwf-green-dark) 78%, #26313a); }
.qwf-cs-plot marker path { fill: var(--qwf-green-dark); }

.qwf-cs-miss {
  stroke: var(--qwf-red);
  stroke-width: 4;
  stroke-dasharray: .08 .08;
}

.qwf-cs-point {
  opacity: 0;
  transform: scale(.55);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 280ms ease, transform 340ms cubic-bezier(.24, 1.3, .45, 1);
}

.qwf-cs-point:nth-of-type(2) { transition-delay: 100ms; }
.qwf-cs-point:nth-of-type(3) { transition-delay: 200ms; }

.qwf-cs-point circle {
  fill: var(--qwf-green-dark);
  stroke: #fff;
  stroke-width: 4;
}

.qwf-cs-shortcut .qwf-cs-point circle { fill: var(--qwf-amber); }
.points-on .qwf-cs-point,
.qwf-cs-point.is-static { opacity: 1; transform: none; }

.qwf-cs-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.qwf-cs-option {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 15px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  transition: opacity 300ms ease, transform 340ms ease;
}

.qwf-cs-option header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: var(--qwf-muted);
  font-size: .66rem;
  font-weight: 850;
}

.qwf-cs-option header > span { flex: 0 0 auto; white-space: nowrap; }

.qwf-cs-option .qwf-verdict {
  min-width: 0;
  opacity: 0;
  transform: translateY(-3px);
}

.qwf-cs-option .qwf-verdict.is-on { opacity: 1; transform: none; }

.qwf-cs-option > code {
  min-width: 0;
  font-size: .68rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-cs-option.is-rejected {
  background: color-mix(in srgb, var(--qwf-paper) 92%, var(--qwf-red));
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 1px rgba(177, 73, 68, .24);
}

.qwf-cs-option.is-confirmed {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green);
}

.qwf-cs-construct .qwf-construct-figure {
  display: grid;
  align-content: center;
}

.qwf-cs-slopes {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 10px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
}

.qwf-cs-slopes code {
  min-width: 0;
  font-size: .72rem;
  text-align: center;
}

.qwf-cs-slopes > span {
  color: var(--qwf-muted);
  font-size: .8rem;
  font-weight: 900;
}

.qwf-cs-option > small {
  min-width: 0;
  color: var(--qwf-muted);
  font-size: .54rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-cs-options--audit {
  width: min(760px, 100%);
  margin: 0 auto;
}

.qwf-cs-options--audit .qwf-cs-option {
  opacity: .5;
  transform: translateY(4px);
}

.qwf-cs-options--audit .qwf-cs-option.is-audited {
  opacity: 1;
  transform: none;
}

.qw-flow--cs .qwf-answer-figure {
  display: grid;
  align-content: center;
}

@media (max-width: 940px) {
  .qwf-cs-shortcut {
    grid-template-columns: minmax(220px, .86fr) minmax(0, 1.14fr);
  }
}

@media (max-width: 640px) {
  .qw-flow--cs .qwf-scene { padding: 13px 0; }
  .qw-flow--cs .qwf-story-row { gap: 6px; padding: 6px 2px; }
  .qw-flow--cs .qwf-title { font-size: 1.2rem; }
  .qw-flow--cs .qwf-sub { margin-top: 3px; font-size: .75rem; line-height: 1.4; }
  .qw-flow--cs[lang="ckb"] .qwf-sub { line-height: 1.57; }
  .qw-flow--cs .qwf-question-card { gap: 9px; padding: 10px 12px; }
  .qw-flow--cs .qwf-question-number { width: 32px; height: 32px; border-radius: 10px; }
  .qw-flow--cs .qwf-question-text { font-size: .77rem; line-height: 1.48; }
  .qwf-cs-intro { gap: 6px; }
  .qwf-cs-intro > div { gap: 4px; padding: 9px 6px; border-radius: 12px; }
  .qwf-cs-intro > div > span { font-size: .58rem; }
  .qwf-cs-intro code { font-size: .61rem; }
  .qwf-cs-intro > strong { font-size: 1rem; }
  .qwf-cs-intro > p { padding: 5px 14px; font-size: .66rem; }
  .qw-flow--cs .qwf-clue-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-top: 6px;
  }
  .qw-flow--cs .qwf-clue-chip {
    gap: 7px;
    padding: 7px 8px;
    font-size: .62rem;
    line-height: 1.35;
  }
  .qw-flow--cs .qwf-chip-glyph { width: 27px; height: 27px; border-radius: 9px; }
  .qw-flow--cs .qwf-clue-chip strong { font-size: .68rem; }
  .qw-flow--cs .qwf-clue-chip > span:last-child > span { font-size: .58rem; line-height: 1.35; }
  .qwf-cs-shortcut {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .qwf-cs-figure {
    width: min(245px, 100%);
    margin-inline: auto;
    padding: 5px;
    border-radius: 14px;
  }
  .qwf-cs-options { gap: 6px; }
  .qwf-cs-option { gap: 5px; padding: 7px 8px; border-radius: 12px; }
  .qwf-cs-option header { gap: 4px; font-size: .6rem; }
  .qwf-cs-option .qwf-verdict { padding: 3px 5px; font-size: .58rem; }
  .qwf-cs-option > code { font-size: .62rem; line-height: 1.25; }
  .qwf-cs-construct {
    grid-template-columns: 1fr;
    align-items: center;
  }
  .qwf-cs-construct .qwf-construct-figure {
    width: min(255px, 100%);
    margin-inline: auto;
    padding: 5px;
  }
  .qwf-cs-construct .qwf-cs-plot text { font-size: 19px; }
  .qwf-cs-construct .qwf-construct-steps {
    gap: 5px;
    padding: 6px 8px;
  }
  .qw-flow--cs[dir="rtl"] .qwf-cs-construct .qwf-construct-steps {
    padding: 6px 8px;
  }
  .qwf-cs-construct .qwf-construct-eyebrow { font-size: .6rem; line-height: 1.25; }
  .qwf-cs-construct .qwf-construct-equation {
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
  }
  .qwf-cs-construct .qwf-calc-row { padding: 4px 5px; font-size: .62rem; line-height: 1.25; }
  .qwf-cs-construct .qwf-construct-note { font-size: .61rem; line-height: 1.34; }
  .qwf-cs-options--audit { gap: 6px; }
  .qwf-cs-options--audit .qwf-cs-option { min-height: 92px; }
  .qwf-cs-slopes { gap: 3px; padding: 5px 4px; }
  .qwf-cs-slopes code { font-size: .61rem; }
  .qwf-cs-option > small { display: none; }
  .qw-flow--cs .qwf-answer-figure {
    width: 100%;
    max-width: 235px;
    margin-inline: auto;
    padding: 5px;
  }
  .qw-flow--cs .qwf-answer-copy { gap: 5px; }
  .qw-flow--cs .qwf-proof { white-space: nowrap; font-size: .61rem; }
  .qw-flow--cs .qwf-recap-chip { padding: 5px 6px; font-size: .61rem; }
  .qw-flow--cs .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .64rem !important;
    line-height: 1.15 !important;
  }
}

/* ——— bounded perturbation (bp): compare bounded oscillation with linear
   growth, normalize once, then let a shrinking denominator band make the
   finite limit visible. The band geometry is computed from visualConfig;
   its labels occupy a reserved left gutter and cannot overlap the data. ——— */
.qwf-bp-intro {
  width: min(660px, 100%);
  margin: 4px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  direction: ltr;
}

.qwf-bp-intro > article {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 15px 13px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  text-align: center;
}

.qwf-bp-intro > article > code {
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .8rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.qwf-bp-intro > article > span {
  color: var(--qwf-green-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.qwf-bp-intro > strong {
  align-self: center;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .83rem;
  font-weight: 850;
  text-align: center;
}

.qwf-bp-normalize {
  width: min(800px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 19px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-bp-eyebrow {
  margin: 0;
  color: var(--qwf-amber-dark);
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.qwf-bp-transform {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  direction: ltr;
}

.qwf-bp-transform code {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .74rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-bp-transform > span {
  color: var(--qwf-green-dark);
  font-size: .75rem;
  font-weight: 900;
}

.qwf-bp-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-bp-row {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--qwf-amber-dark);
  background: var(--qwf-amber-soft);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .7rem;
  font-weight: 750;
  opacity: .3;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
  text-align: center;
}

.qwf-bp-normalize.row-one .qwf-bp-row--1,
.qwf-bp-normalize.row-two .qwf-bp-row--2 {
  opacity: 1;
  transform: none;
}

.qwf-bp-note {
  margin: 0;
  color: var(--qwf-muted);
  font-size: .73rem;
  line-height: 1.5;
  opacity: .3;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.qwf-bp-note strong { color: var(--qwf-ink); }
.qwf-bp-note code {
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
}
.qwf-bp-normalize.result-on .qwf-bp-note { opacity: 1; transform: none; }

.qwf-bp-squeeze {
  width: min(900px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
  gap: 10px;
  align-items: center;
}

.qwf-bp-bound-equations {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-bp-bound-equations code {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 11px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .66rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-bp-band-wrap {
  min-width: 0;
  padding: 7px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-bp-band-plot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-bp-center {
  stroke: #aab5bb;
  stroke-width: 2;
  stroke-dasharray: 5 5;
}

.qwf-bp-center-label,
.qwf-bp-band text {
  fill: #48565f;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 850;
}

.qwf-bp-band line {
  stroke: var(--qwf-green-dark);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 500ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-bp-band circle {
  fill: #fff;
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  opacity: 0;
  transform: scale(.45);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-bp-squeeze.band-1 .qwf-bp-band--1 line,
.qwf-bp-squeeze.band-2 .qwf-bp-band--2 line,
.qwf-bp-squeeze.band-3 .qwf-bp-band--3 line {
  stroke-dashoffset: 0;
}

.qwf-bp-squeeze.band-1 .qwf-bp-band--1 circle,
.qwf-bp-squeeze.band-2 .qwf-bp-band--2 circle,
.qwf-bp-squeeze.band-3 .qwf-bp-band--3 circle {
  opacity: 1;
  transform: none;
}

.qwf-bp-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-bp-option {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 82px;
  padding: 9px 11px;
  border-radius: 14px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  transition: opacity 300ms ease, transform 330ms ease;
}

.qwf-bp-option header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--qwf-muted);
  font-size: .62rem;
  font-weight: 850;
}

.qwf-bp-option header > span { flex: 0 0 auto; white-space: nowrap; }
.qwf-bp-option .qwf-verdict { min-width: 0; }

.qwf-bp-option > code {
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .79rem;
  font-weight: 850;
  text-align: center;
}

.qwf-bp-option.is-rejected {
  opacity: .48;
  transform: scale(.97);
}

.qwf-bp-option.is-confirmed {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green);
}

.qwf-bp-compare {
  width: min(790px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 11px;
}

.qwf-bp-limit-chain,
.qwf-bp-answer-chain {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  direction: ltr;
}

.qwf-bp-limit-chain code,
.qwf-bp-answer-chain code {
  min-width: 0;
  padding: 10px 8px;
  border-radius: 11px;
  color: var(--qwf-ink);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  font-weight: 800;
  opacity: .28;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 280ms ease;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-bp-limit-chain > span,
.qwf-bp-answer-chain > span {
  color: var(--qwf-green-dark);
  font-size: .78rem;
  font-weight: 900;
}

.qwf-bp-limit-chain.step-one code:nth-of-type(1),
.qwf-bp-limit-chain.step-two code:nth-of-type(-n+2),
.qwf-bp-limit-chain.step-three code {
  opacity: 1;
  transform: none;
}

.qwf-bp-answer-figure {
  min-height: 160px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 15px;
  border-radius: 14px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  text-align: center;
}

.qwf-bp-answer-figure > code,
.qwf-bp-answer-figure > strong {
  min-width: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
}

.qwf-bp-answer-figure > code {
  color: var(--qwf-muted);
  font-size: .7rem;
  font-weight: 750;
}

.qwf-bp-answer-chain code {
  padding: 7px 5px;
  opacity: 1;
  transform: none;
  font-size: .61rem;
}

.qwf-bp-answer-figure > strong {
  color: var(--qwf-green-deep);
  font-size: .82rem;
  font-weight: 900;
}

@media (max-width: 640px) {
  .qw-flow--bp .qwf-scene { padding: 12px 0; }
  .qw-flow--bp .qwf-story-row { gap: 6px; padding: 6px 2px; }
  .qw-flow--bp .qwf-title { font-size: 1.17rem; }
  .qw-flow--bp .qwf-sub { margin-top: 3px; font-size: .73rem; line-height: 1.38; }
  .qw-flow--bp[lang="ckb"] .qwf-sub { line-height: 1.56; }
  .qw-flow--bp .qwf-question-card { gap: 8px; padding: 9px 11px; }
  .qw-flow--bp .qwf-question-number { width: 31px; height: 31px; border-radius: 10px; }
  .qw-flow--bp .qwf-question-text { font-size: .75rem; line-height: 1.46; }
  .qwf-bp-intro { gap: 5px; }
  .qwf-bp-intro > article { gap: 4px; padding: 8px 6px; border-radius: 12px; }
  .qwf-bp-intro > article > code { font-size: .66rem; line-height: 1.3; }
  .qwf-bp-intro > article > span { font-size: .72rem; }
  .qwf-bp-intro > strong { min-width: 0; padding: 5px 7px; font-size: .66rem; }
  .qw-flow--bp .qwf-clue-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-top: 6px;
  }
  .qw-flow--bp .qwf-clue-chip {
    gap: 6px;
    padding: 7px 8px;
    font-size: .61rem;
    line-height: 1.32;
  }
  .qw-flow--bp .qwf-chip-glyph { width: 27px; height: 27px; border-radius: 9px; }
  .qw-flow--bp .qwf-clue-chip strong { font-size: .66rem; }
  .qw-flow--bp .qwf-clue-chip > span:last-child > span {
    font-size: .62rem;
    line-height: 1.32;
  }
  .qwf-bp-normalize {
    gap: 6px;
    padding: 9px 10px;
    border-radius: 14px;
  }
  .qwf-bp-eyebrow { font-size: .57rem; line-height: 1.3; }
  .qwf-bp-transform { gap: 4px; }
  .qwf-bp-transform code { padding: 6px 4px; font-size: .66rem; line-height: 1.3; }
  .qwf-bp-transform > span { font-size: .55rem; }
  .qwf-bp-rows { gap: 5px; }
  .qwf-bp-row { padding: 6px 5px; font-size: .66rem; line-height: 1.25; }
  .qwf-bp-note { font-size: .64rem; line-height: 1.35; }
  .qwf-bp-squeeze {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .qwf-bp-bound-equations { gap: 5px; }
  .qwf-bp-bound-equations code { padding: 6px 4px; font-size: .66rem; line-height: 1.25; }
  .qwf-bp-band-wrap {
    width: min(285px, 100%);
    margin-inline: auto;
    padding: 4px;
    border-radius: 12px;
  }
  .qwf-bp-band-plot { border-radius: 9px; }
  .qwf-bp-center-label,
  .qwf-bp-band text { font-size: 17px; }
  .qwf-bp-options { gap: 5px; }
  .qwf-bp-option {
    gap: 4px;
    min-height: 62px;
    padding: 6px 7px;
    border-radius: 11px;
  }
  .qwf-bp-option header { gap: 4px; font-size: .58rem; }
  .qwf-bp-option .qwf-verdict { padding: 3px 5px; font-size: .58rem; }
  .qwf-bp-option > code { font-size: .7rem; }
  .qwf-bp-compare { gap: 7px; }
  .qwf-bp-limit-chain,
  .qwf-bp-answer-chain { gap: 3px; }
  .qwf-bp-limit-chain code {
    padding: 7px 3px;
    font-size: .66rem;
    line-height: 1.3;
  }
  .qwf-bp-limit-chain > span,
  .qwf-bp-answer-chain > span { font-size: .57rem; }
  .qw-flow--bp .qwf-answer-figure {
    width: 100%;
    max-width: 270px;
    margin-inline: auto;
    padding: 5px;
  }
  .qwf-bp-answer-figure {
    min-height: 100px;
    gap: 7px;
    padding: 9px;
  }
  .qwf-bp-answer-figure > code { font-size: .66rem; }
  .qwf-bp-answer-chain code { padding: 5px 2px; font-size: .66rem; }
  .qwf-bp-answer-figure > strong { font-size: .72rem; }
  .qw-flow--bp .qwf-answer-copy { gap: 5px; }
  .qw-flow--bp .qwf-proof { white-space: nowrap; font-size: .66rem; }
  .qw-flow--bp .qwf-recap-chip { padding: 5px 6px; font-size: .58rem; }
  .qw-flow--bp .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .63rem !important;
    line-height: 1.15 !important;
  }
}

.qwf-gvs-intro {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.qw-flow--gvs {
  --qwf-muted: #5b6873;
}

.qw-flow--gvs .qwf-kicker {
  letter-spacing: .08em;
  text-transform: none;
}

.qwf-gvs-intro article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "glyph title" "glyph math";
  align-items: center;
  gap: 5px 11px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-gvs-intro article > span {
  grid-area: glyph;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--qwf-green);
  box-shadow: 0 8px 18px rgb(39 173 159 / 22%);
  font-size: 1.1rem;
  font-weight: 900;
}

.qwf-gvs-intro article:last-child > span {
  background: #557b9f;
  box-shadow: 0 8px 18px rgb(85 123 159 / 22%);
}

.qwf-gvs-intro strong {
  grid-area: title;
  min-width: 0;
  color: var(--qwf-muted);
  font-size: .74rem;
  line-height: 1.35;
}

.qwf-gvs-intro code {
  grid-area: math;
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .95rem;
  font-weight: 850;
}

.qwf-gvs-plus {
  align-self: center;
  color: var(--qwf-green-dark);
  font-size: 1.2rem;
  font-weight: 950;
}

.qwf-gvs-graph-card {
  width: min(620px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px;
  align-items: center;
  gap: 13px;
  padding: 10px;
  border-radius: 19px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-gvs-graph-wrap {
  min-width: 0;
  padding: 5px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-inset);
}

.qwf-gvs-plot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 11px;
  background: #fff;
  overflow: visible;
}

/* Power-curve claims (pc): the odd-root curve, its origin point and the
   vertical tangent line. Transform/opacity/dashoffset only. */
.qwf-pc-origin {
  fill: var(--qwf-green-dark);
  stroke: #fff;
  stroke-width: 3;
}

.qwf-pc-vertical {
  stroke: #c25f5f;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 8;
}

.qwf-gvs-curve {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 650ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-gvs-height-mark line {
  stroke: #bd6d35;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 480ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-gvs-slope-mark line {
  stroke: #557b9f;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 480ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-gvs-height-mark circle,
.qwf-gvs-slope-mark circle {
  fill: #fff;
  stroke-width: 5;
  opacity: 0;
  transform: scale(.45);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-gvs-height-mark circle { stroke: #bd6d35; }
.qwf-gvs-slope-mark circle { stroke: #557b9f; }

.qwf-gvs-height-mark text,
.qwf-gvs-slope-mark text {
  fill: #35434c;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 850;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-gvs-graph-card.curve-on .qwf-gvs-curve,
.qwf-gvs-plot--answer .qwf-gvs-curve,
.qwf-gvs-graph-card.height-line-on .qwf-gvs-height-mark line,
.qwf-gvs-graph-card.slope-line-on .qwf-gvs-slope-mark line,
.qwf-gvs-plot--answer .qwf-gvs-height-mark line,
.qwf-gvs-plot--answer .qwf-gvs-slope-mark line {
  stroke-dashoffset: 0;
}

.qwf-gvs-graph-card.height-point-on .qwf-gvs-height-mark circle,
.qwf-gvs-graph-card.height-point-on .qwf-gvs-height-mark text,
.qwf-gvs-graph-card.slope-point-on .qwf-gvs-slope-mark circle,
.qwf-gvs-graph-card.slope-point-on .qwf-gvs-slope-mark text,
.qwf-gvs-plot--answer .qwf-gvs-height-mark circle,
.qwf-gvs-plot--answer .qwf-gvs-height-mark text,
.qwf-gvs-plot--answer .qwf-gvs-slope-mark circle,
.qwf-gvs-plot--answer .qwf-gvs-slope-mark text {
  opacity: 1;
  transform: none;
}

.qwf-gvs-reading {
  min-width: 120px;
  padding: 13px 15px;
  border-radius: 13px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .84rem;
  font-weight: 900;
  text-align: center;
}

.qwf-gvs-compare {
  width: min(800px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: stretch;
  gap: 11px;
}

.qwf-gvs-calc {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-gvs-calc > p:first-child {
  margin: 0;
  color: var(--qwf-muted);
  font-size: .67rem;
  font-weight: 850;
}

.qwf-gvs-calc > code {
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .83rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.qwf-gvs-calc-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.qwf-gvs-calc-rows code,
.qwf-gvs-result {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 11px;
  opacity: .28;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 280ms ease;
}

.qwf-gvs-calc-rows code {
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.qwf-gvs-result {
  margin: 0;
  color: var(--qwf-muted);
  background: var(--qwf-green-soft);
  font-size: .68rem;
  line-height: 1.4;
}

.qwf-gvs-result code {
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  font-weight: 900;
}

.qwf-gvs-calc-rows code.is-on,
.qwf-gvs-result.is-on {
  opacity: 1;
  transform: none;
}

.qwf-gvs-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-gvs-option {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 82px;
  padding: 9px 11px;
  border-radius: 14px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  transition: opacity 300ms ease, transform 330ms ease;
}

.qwf-gvs-option header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  color: var(--qwf-muted);
  font-size: .7rem;
  font-weight: 850;
}

.qwf-gvs-option header > span { flex: 0 0 auto; white-space: nowrap; }
.qwf-gvs-option .qwf-verdict { min-width: 0; }
.qwf-gvs-option .qwf-verdict { font-size: .7rem; }

.qwf-gvs-option > code {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
}

.qwf-gvs-option.is-rejected {
  opacity: .48;
  transform: scale(.97);
}

.qwf-gvs-option.is-confirmed {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green);
}

.qwf-gvs-answer-figure {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.qwf-gvs-answer-readings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.qwf-gvs-answer-readings code {
  min-width: 0;
  padding: 6px 7px;
  border-radius: 9px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .72rem;
  font-weight: 850;
  text-align: center;
}

.qwf-gvs-answer-figure .qwf-gvs-plot {
  max-height: 190px;
}

.qwf-gvs-answer-figure > code {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 640px) {
  .qw-flow--gvs .qwf-scene { padding: 11px 0; }
  .qw-flow--gvs .qwf-story-row { gap: 5px; padding: 5px 2px; }
  .qw-flow--gvs .qwf-title { font-size: 1.13rem; }
  .qw-flow--gvs .qwf-sub { margin-top: 3px; font-size: .72rem; line-height: 1.4; }
  .qw-flow--gvs[lang="ckb"] .qwf-sub { line-height: 1.58; }
  .qw-flow--gvs .qwf-question-card { gap: 8px; padding: 9px 11px; }
  .qw-flow--gvs .qwf-question-number {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }
  .qw-flow--gvs .qwf-question-text { font-size: .74rem; line-height: 1.45; }
  .qwf-gvs-intro { gap: 6px; }
  .qwf-gvs-intro article {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 6px;
    padding: 9px 8px;
    border-radius: 13px;
  }
  .qwf-gvs-intro article > span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: .76rem;
  }
  .qwf-gvs-intro strong { font-size: .6rem; line-height: 1.25; }
  .qwf-gvs-intro code { font-size: .7rem; }
  .qwf-gvs-plus { font-size: .8rem; }
  .qw-flow--gvs .qwf-clue-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-top: 5px;
  }
  .qw-flow--gvs .qwf-clue-chip {
    gap: 6px;
    padding: 7px 8px;
    font-size: .7rem;
    line-height: 1.32;
  }
  .qw-flow--gvs .qwf-chip-glyph {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }
  .qw-flow--gvs .qwf-clue-chip strong { font-size: .72rem; }
  .qw-flow--gvs .qwf-clue-chip > span:last-child > span {
    font-size: .7rem;
    line-height: 1.32;
  }
  .qwf-gvs-graph-card {
    width: min(310px, 100%);
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
  }
  .qwf-gvs-graph-wrap { padding: 2px; border-radius: 10px; }
  .qwf-gvs-plot { border-radius: 8px; }
  .qwf-gvs-height-mark text,
  .qwf-gvs-slope-mark text { font-size: 24px; }
  .qwf-gvs-reading {
    min-width: 0;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: .68rem;
  }
  .qwf-gvs-compare {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .qwf-gvs-calc {
    gap: 5px;
    padding: 8px 9px;
    border-radius: 13px;
  }
  .qwf-gvs-calc > p:first-child { font-size: .57rem; }
  .qwf-gvs-calc > code { font-size: .69rem; }
  .qwf-gvs-calc-rows { gap: 5px; }
  .qwf-gvs-calc-rows code { padding: 5px; font-size: .65rem; }
  .qwf-gvs-result { padding: 5px 7px; font-size: .6rem; }
  .qwf-gvs-result code { font-size: .67rem; }
  .qwf-gvs-options { gap: 5px; }
  .qwf-gvs-option {
    gap: 3px;
    min-height: 57px;
    padding: 5px 7px;
    border-radius: 10px;
  }
  .qwf-gvs-option header { gap: 3px; font-size: .7rem; }
  .qwf-gvs-option .qwf-verdict { padding: 3px 4px; font-size: .7rem; }
  .qwf-gvs-option > code { font-size: .68rem; }
  .qw-flow--gvs .qwf-answer-figure {
    width: 100%;
    max-width: 270px;
    margin-inline: auto;
    padding: 4px;
  }
  .qwf-gvs-answer-figure .qwf-gvs-plot { max-height: 116px; }
  .qwf-gvs-answer-readings { gap: 4px; }
  .qwf-gvs-answer-readings code { padding: 4px; font-size: .7rem; }
  .qwf-gvs-answer-figure > code { padding: 5px; font-size: .66rem; }
  .qw-flow--gvs .qwf-answer-copy { gap: 5px; }
  .qw-flow--gvs .qwf-proof { white-space: nowrap; font-size: .66rem; }
  .qw-flow--gvs .qwf-recap-chip { padding: 5px 6px; font-size: .58rem; }
  .qw-flow--gvs .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .62rem !important;
    line-height: 1.15 !important;
  }
}

/* Limit rewrite — one calm algebra lane from an indeterminate form to the
   exact option. Every moving layer uses only opacity/transform. */
.qw-flow--lr {
  --qwf-muted: #5b6873;
}

.qw-flow--lr .qwf-kicker {
  text-transform: none;
}

.qwf-lr-expression {
  width: min(760px, 100%);
  margin: 0 auto;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  color: var(--qwf-ink);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-lr-expression > code {
  min-width: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(.92rem, 2vw, 1.28rem);
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-lr-limit {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 900;
  line-height: .88;
}

.qwf-lr-limit small {
  margin-top: 3px;
  font-size: .58rem;
  white-space: nowrap;
}

.qwf-lr-diagnostic {
  width: min(520px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .36;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-lr-diagnostic.is-on {
  opacity: 1;
  transform: none;
}

.qwf-lr-diagnostic > div {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  text-align: center;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
}

.qwf-lr-diagnostic span {
  color: var(--qwf-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .68rem;
  font-weight: 750;
}

.qwf-lr-diagnostic strong,
.qwf-lr-diagnostic p {
  margin: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .9rem;
  font-weight: 900;
}

.qwf-lr-diagnostic p {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--qwf-warn-deep);
  background: var(--qwf-warn-soft);
}

.qwf-lr-over { font-size: 1rem !important; }

.qwf-lr-identity,
.qwf-lr-rewrite,
.qwf-lr-reduce,
.qwf-lr-compare {
  width: min(800px, 100%);
  margin: 0 auto;
}

.qwf-lr-identity {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-lr-identity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .72fr);
  align-items: center;
  gap: 10px;
  opacity: .38;
  transform: translateY(4px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-lr-identity.is-on .qwf-lr-identity-row {
  opacity: 1;
  transform: none;
}

.qwf-lr-identity code,
.qwf-lr-near,
.qwf-lr-factor-line,
.qwf-lr-rewrite-result code,
.qwf-lr-denominator > span,
.qwf-lr-match,
.qwf-lr-known code,
.qwf-lr-limit-chain code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 850;
}

.qwf-lr-identity code {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-size: .76rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-lr-near {
  display: grid;
  grid-template-columns: auto minmax(50px, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: var(--qwf-muted);
  font-size: .66rem;
  font-weight: 800;
}

.qwf-lr-near-line {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--qwf-green), transparent);
}

.qwf-lr-rewrite {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  overflow: hidden;
}

.qwf-lr-factor-line {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--qwf-ink);
  font-size: clamp(.72rem, 1.6vw, .95rem);
  font-weight: 900;
  opacity: .3;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-lr-rewrite.factors-on .qwf-lr-factor-line {
  opacity: 1;
  transform: none;
}

.qwf-lr-factor {
  position: relative;
  padding: 5px 7px;
  border-radius: 9px;
  background: var(--qwf-warn-soft);
}

.qwf-lr-factor::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: var(--qwf-warn-deep);
  opacity: 0;
  transform: rotate(-12deg) scaleX(.15);
  transform-origin: center;
  transition: opacity 220ms ease, transform 320ms ease;
}

.qwf-lr-rewrite.cancel-on .qwf-lr-factor::after {
  opacity: 1;
  transform: rotate(-12deg) scaleX(1);
}

.qwf-lr-cancel-stroke { display: none; }

.qwf-lr-rewrite-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  opacity: .22;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-lr-rewrite-result.is-on {
  opacity: 1;
  transform: none;
}

.qwf-lr-rewrite-result code {
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .82rem;
}

.qwf-lr-reduce {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr);
  gap: 10px;
}

.qwf-lr-denominator,
.qwf-lr-match,
.qwf-lr-known {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-lr-denominator {
  display: grid;
  align-content: center;
  gap: 7px;
  opacity: .3;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-lr-denominator > span {
  color: var(--qwf-ink);
  font-size: .8rem;
  font-weight: 900;
  text-align: center;
}

.qwf-lr-denominator small {
  color: var(--qwf-muted);
  font-size: .62rem;
  font-weight: 750;
  text-align: center;
}

.qwf-lr-match {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  opacity: .3;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-lr-match strong {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .78rem;
}

.qwf-lr-match code {
  min-width: 0;
  color: var(--qwf-ink);
  font-size: .76rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-lr-known {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--qwf-green-deep);
  opacity: .2;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-lr-known code { font-size: .78rem; }
.qwf-lr-known span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--qwf-muted);
  background: var(--qwf-surface);
  font-size: .6rem;
  font-weight: 800;
}

.qwf-lr-reduce.denominator-on .qwf-lr-denominator,
.qwf-lr-reduce.factor-on .qwf-lr-match,
.qwf-lr-known.is-on {
  opacity: 1;
  transform: none;
}

.qwf-lr-compare {
  display: grid;
  gap: 10px;
}

.qwf-lr-limit-chain {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-lr-limit-chain code {
  min-width: 0;
  color: var(--qwf-ink);
  font-size: .72rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-lr-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-lr-option {
  min-height: 80px;
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-lr-option .qwf-eq {
  font-size: .84rem;
}

.qwf-lr-option .qwf-verdict {
  font-size: .7rem;
}

.qwf-lr-option .qwf-verdict.is-out {
  color: #8b2d27;
}

[data-theme="dark"] .qwf-lr-option .qwf-verdict.is-out {
  color: #f28b83;
}

.qwf-lr-option.is-rejected {
  opacity: 1;
  transform: scale(.97);
}

.qwf-lr-option.is-rejected::after {
  display: none;
}

.qwf-lr-option.is-confirmed {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green);
}

.qwf-lr-dne {
  direction: auto;
  font-family: inherit;
  letter-spacing: normal;
}

.qwf-lr-answer-figure {
  display: grid;
  gap: 8px;
  width: 100%;
}

.qwf-lr-answer-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 13px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
}

.qwf-lr-answer-step > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .68rem;
  font-weight: 900;
}

.qwf-lr-answer-step code {
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .64rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.qwf-lr-answer-step.is-final {
  background: var(--qwf-green-soft);
}

.qwf-lr-answer-step.is-final code {
  color: var(--qwf-green-deep);
  font-size: .82rem;
  text-align: center;
}

/* Exponential inverse strategy — the shared rewrite lane becomes a compact
   domain → exponent law → inverse-pair → slope sequence. */
.qw-flow--ei .qwf-kicker {
  letter-spacing: .035em;
}

.qwf-ei-domain,
.qwf-ei-law,
.qwf-ei-split,
.qwf-ei-reduce,
.qwf-ei-compare {
  width: min(760px, 100%);
  margin: 0 auto;
}

.qwf-ei-domain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-ei-domain > div {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  opacity: .3;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-ei-domain > div.is-on {
  opacity: 1;
  transform: none;
}

.qwf-ei-domain small {
  color: var(--qwf-muted);
  font-size: .68rem;
  font-weight: 800;
}

.qwf-ei-domain code,
.qwf-ei-domain strong {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 1rem;
  font-weight: 900;
}

.qwf-ei-domain strong {
  color: var(--qwf-green-deep);
}

.qwf-ei-law {
  display: grid;
  gap: 12px;
  padding: 15px 17px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-ei-law-rule {
  justify-self: center;
  padding: 9px 14px;
  border-radius: 12px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .88rem;
  font-weight: 900;
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-ei-law-application {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-ei-law-rule.is-on,
.qwf-ei-law-application.is-on {
  opacity: 1;
  transform: none;
}

.qwf-ei-law-application code {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-ei-split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  padding: 15px 17px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-ei-split .qwf-construct-eyebrow {
  grid-column: 1 / -1;
}

.qwf-ei-split-source,
.qwf-ei-factor-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.qwf-ei-split-source code,
.qwf-ei-factor-row code,
.qwf-ei-split-result {
  min-width: 0;
  padding: 9px 11px;
  border-radius: 12px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-ei-factor-row code,
.qwf-ei-split-result {
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-ei-factor-row code.is-on,
.qwf-ei-split-result.is-on {
  opacity: 1;
  transform: none;
}

.qwf-ei-factor-row code:last-of-type {
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-ei-split-result {
  grid-column: 1 / -1;
  justify-self: center;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-ei-reduce {
  display: grid;
  gap: 10px;
}

.qwf-ei-reduction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qwf-ei-reduction-grid article,
.qwf-ei-linear {
  min-width: 0;
  padding: 13px 14px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-ei-reduction-grid article.is-on,
.qwf-ei-linear.is-on {
  opacity: 1;
  transform: none;
}

.qwf-ei-reduction-grid code,
.qwf-ei-linear strong {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .82rem;
  font-weight: 900;
}

.qwf-ei-reduction-grid article {
  display: grid;
  place-items: center;
}

.qwf-ei-linear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-ei-linear strong {
  color: var(--qwf-green-deep);
}

.qwf-ei-compare {
  display: grid;
  gap: 10px;
}

.qwf-ei-derivative {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-ei-derivative.is-on {
  opacity: 1;
  transform: none;
}

.qwf-ei-derivative code,
.qwf-ei-derivative strong {
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .82rem;
  font-weight: 900;
}

.qwf-ei-derivative strong {
  color: var(--qwf-green-deep);
}

/* Bend-direction lanes (Q36 family): a broken axis whose two signed lanes
   name their own intervals. The axis marks reuse the shared number-line
   classes; only the lanes, the gap and their labels are new. */
.qwf-bd-lanes {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-bd-line {
  display: block;
  width: 100%;
  height: auto;
}

.qwf-bd-lane {
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 620ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-bd-lane.is-down { stroke: var(--qwf-amber-dark); }
.qwf-bd-lane.is-up { stroke: var(--qwf-green-dark); }
.qwf-bd-lane.is-on { stroke-dashoffset: 0; }

.qwf-bd-gap {
  fill: var(--qwf-paper);
  stroke: var(--qwf-red);
  stroke-width: 4;
  opacity: 0;
  transform: scale(.6);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 240ms ease, transform 300ms ease;
}

.qwf-bd-gap.is-on {
  opacity: 1;
  transform: none;
}

.qwf-bd-lane-label,
.qwf-bd-interval {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 260ms ease;
}

.qwf-bd-interval { font-size: 14px; }
.qwf-bd-lane-label.is-on,
.qwf-bd-interval.is-on { opacity: 1; }

.qwf-bd-lane-label.is-down,
.qwf-bd-interval.is-down { fill: var(--qwf-amber-dark); }

.qwf-bd-lane-label.is-up,
.qwf-bd-interval.is-up { fill: var(--qwf-green-deep); }

.qwf-bd-lanes-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 15px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-bd-lanes-result.is-on {
  opacity: 1;
  transform: none;
}

.qwf-bd-lanes-result strong {
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .82rem;
  font-weight: 900;
}

.qw-flow--bd .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Derivative-gate plot (Q37 family): the positive band shows gate 1 and the
   two probe readings show gate 2 on the one source-grounded curve. Only the
   band, the readings and their labels are new; the curve and axes reuse the
   shared plot vocabulary. */
.qwf-dg-curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 760ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-dg-graph-card .qwf-dg-curve { stroke-dashoffset: 0; }

.qwf-dg-band {
  fill: var(--qwf-green-soft);
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-dg-band.is-on { opacity: 1; }

.qwf-dg-plot-label {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-dg-plot-label.is-on { opacity: 1; }

.qwf-dg-reading {
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-dg-reading.is-on { opacity: 1; }

.qwf-dg-reading line {
  stroke: var(--qwf-green-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
}

.qwf-dg-reading circle {
  fill: var(--qwf-green-dark);
  stroke: var(--qwf-paper);
  stroke-width: 3;
}

.qwf-dg-reading text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.qw-flow--dg .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Derivative-graph layers (Q38 family): the plotted parabola is f′ itself, so
   the role label is locked to the plot, the roots bracket the shaded span, and
   the two height markers read off exact derivative values. */
.qwf-dl-curve {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 780ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-dl-graph-card .qwf-dl-curve { stroke-dashoffset: 0; }

.qwf-dl-role {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-dl-role.is-on { opacity: 1; }

.qwf-dl-root {
  fill: #fff;
  stroke: var(--qwf-muted);
  stroke-width: 3;
  opacity: 0;
  transform: scale(.6);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 240ms ease, transform 300ms ease;
}

.qwf-dl-root.is-on {
  opacity: 1;
  transform: none;
}

.qwf-dl-span {
  fill: var(--qwf-amber-soft);
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-dl-span.is-on { opacity: 1; }

.qwf-dl-height {
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-dl-height.is-on { opacity: 1; }

.qwf-dl-height line {
  stroke: var(--qwf-green-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
}

.qwf-dl-height circle {
  fill: var(--qwf-green-dark);
  stroke: var(--qwf-paper);
  stroke-width: 3;
}

.qwf-dl-height text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.qw-flow--dl .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Derivative-probe rail (Q39 family): one 0..2π axis carrying the winning set
   and the two test angles. Axis and ticks reuse the shared number-line
   classes; only the bands, endpoints and probe marks are new. */
.qwf-dp-rail-card {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-dp-band {
  stroke: var(--qwf-green-dark);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 620ms cubic-bezier(.22, .9, .26, 1);
}

.qwf-dp-band.is-on { stroke-dashoffset: 0; }

.qwf-dp-end {
  fill: var(--qwf-paper);
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
}

.qwf-dp-probe {
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-dp-probe.is-on { opacity: 1; }

.qwf-dp-probe line {
  stroke: var(--qwf-amber-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
}

.qwf-dp-probe circle {
  fill: var(--qwf-amber-dark);
  stroke: var(--qwf-paper);
  stroke-width: 3;
}

.qwf-dp-probe text {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.qwf-dp-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qw-flow--dp .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Fixed-product balance (Q40 family): two equal-area rectangles, one lopsided
   and one square, with their side sums. The picture is intuition; the exact
   floor sits in the bound row beneath it. */
.qwf-am-balance {
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border-radius: 17px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-am-plot {
  display: block;
  width: 100%;
  /* Capped so the two rectangles stay a diagram rather than filling a desktop
     slide; uncapped it also pushed this scene past the deck height. */
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-am-shape {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 320ms ease;
}

.qwf-am-shape.is-on {
  opacity: 1;
  transform: none;
}

.qwf-am-shape rect {
  fill: var(--qwf-amber-soft);
  stroke: var(--qwf-amber-dark);
  stroke-width: 3;
}

.qwf-am-shape.is-square rect {
  fill: var(--qwf-green-soft);
  stroke: var(--qwf-green-dark);
}

.qwf-am-side {
  fill: var(--qwf-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.qwf-am-sum {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qwf-am-shape.is-square .qwf-am-sum { fill: var(--qwf-green-deep); }

.qwf-am-area {
  fill: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-am-area.is-on { opacity: 1; }

.qwf-am-bound {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 15px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 300ms ease;
}

.qwf-am-bound.is-on {
  opacity: 1;
  transform: none;
}

.qwf-am-bound strong {
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .82rem;
  font-weight: 900;
}

.qw-flow--am .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Parts change ledger (Q50 family): one value axis carrying the known start,
   the accumulated change stacked on it, and the four offered endings. The
   ladder is capped narrower than the other figures because both of its
   scenes also carry a clue-chip pair and two readings; its label sizes are
   raised to match, so the rendered text stays the size of the rest of the
   series. */
.qwf-pt-ladder {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin-inline: auto;
}

.qwf-pt-start {
  stroke: var(--qwf-green-deep);
  stroke-width: 3;
  stroke-dasharray: 7 5;
}

.qwf-pt-tag {
  fill: #59666e;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 17px;
  font-weight: 900;
}

.qwf-pt-tag.is-accent { fill: var(--qwf-amber-dark); }

.qwf-pt-forbidden,
.qwf-pt-change {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-pt-forbidden.is-on,
.qwf-pt-change.is-on { opacity: 1; }

.qwf-pt-forbidden {
  fill: rgba(176, 61, 61, .13);
  stroke: rgba(176, 61, 61, .42);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.qwf-pt-change {
  fill: var(--qwf-amber-soft, rgba(214, 158, 46, .35));
  stroke: var(--qwf-amber-dark);
  stroke-width: 2;
}

.qwf-pt-rise {
  fill: none;
  stroke: var(--qwf-green-deep);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-pt-rise.is-on { opacity: 1; }

.qwf-pt-mark {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-pt-mark.is-on { opacity: 1; }

.qwf-pt-mark circle {
  fill: var(--qwf-green-dark);
  stroke: var(--qwf-paper);
  stroke-width: 2.5;
}

.qwf-pt-mark path {
  fill: none;
  stroke: #93a0a8;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.qwf-pt-mark text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 17px;
  font-weight: 800;
}

.qwf-pt-mark.is-out circle { fill: #b03d3d; }
.qwf-pt-mark.is-out text { fill: #b03d3d; }
.qwf-pt-mark.is-win circle { fill: var(--qwf-amber-dark); }
.qwf-pt-mark.is-win text { fill: var(--qwf-amber-dark); }

.qw-flow--pt .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Chain power endpoints (Q49 family): the x rail and the u rail it maps onto,
   with the lower endpoint visibly landing left of the u zero. */
.qwf-ce-map-plot {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-ce-tag {
  fill: #59666e;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qwf-ce-tag.is-accent { fill: var(--qwf-green-deep); }

.qwf-ce-zero {
  stroke: #7e8a92;
  stroke-width: 2.5;
  stroke-dasharray: 3 4;
}

.qwf-ce-map {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-ce-map.is-on { opacity: 1; }

.qwf-ce-map circle {
  fill: var(--qwf-green-dark);
  stroke: var(--qwf-paper);
  stroke-width: 2.5;
}

.qwf-ce-map path {
  fill: none;
  stroke: var(--qwf-amber-dark);
  stroke-width: 3;
  stroke-dasharray: 6 5;
}

.qwf-ce-map text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
}

.qw-flow--ce .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Bend sign multiplicity (Q48 family): one axis, the sign of f″ on each lane,
   and markers that distinguish a crossing root from a touching one. */
.qwf-bs-rail {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-bs-sign {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 22px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 260ms ease;
}

.qwf-bs-sign.is-on { opacity: 1; }
.qwf-bs-sign.is-negative { fill: var(--qwf-amber-dark); }

.qwf-bs-root {
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-bs-root.is-on { opacity: 1; }
.qwf-bs-root.is-dim.is-on { opacity: .45; }

.qwf-bs-root circle {
  fill: var(--qwf-paper);
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
}

.qwf-bs-root.is-flip circle {
  fill: var(--qwf-amber-dark);
  stroke: var(--qwf-paper);
  stroke-width: 3;
}

.qwf-bs-root text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
}

.qwf-bs-root.is-flip text { fill: var(--qwf-amber-dark); }

.qw-flow--bs .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Accumulation edge rate (Q47 family): everything already counted is shaded,
   and the one newest strip stands at the moving edge. */
.qwf-ae-plot {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-ae-counted {
  fill: var(--qwf-green-soft);
  stroke: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

.qwf-ae-counted.is-on { opacity: 1; }

.qwf-ae-curve {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-ae-strip {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-ae-strip.is-on { opacity: 1; }

.qwf-ae-strip rect {
  fill: var(--qwf-amber-dark);
  opacity: .55;
}

.qwf-ae-strip text {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qw-flow--ae .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Scaled area stretch (Q46 family): the plain arch and the stretched one on
   one plane, with arrows showing that only the heights changed. */
.qwf-sa-plot {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-sa-area {
  fill: var(--qwf-green-soft);
  stroke: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

.qwf-sa-area.is-on { opacity: 1; }
.qwf-sa-area.is-scaled { fill: var(--qwf-green-soft); opacity: 0; }
.qwf-sa-area.is-scaled.is-on { opacity: .55; }

.qwf-sa-curve {
  fill: none;
  stroke: #7e8a92;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 6;
}

.qwf-sa-curve.is-scaled {
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  stroke-dasharray: none;
}

.qwf-sa-stretch {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-sa-stretch.is-on { opacity: 1; }

.qwf-sa-stretch line {
  stroke: var(--qwf-amber-dark);
  stroke-width: 2.5;
}

.qwf-sa-stretch polygon { fill: var(--qwf-amber-dark); }

.qwf-sa-stretch text {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 900;
}

.qw-flow--sa .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Mean value height (Q45 family): the area under the curve, then the
   equal-area rectangle at the computed mean height laid over the same span. */
.qwf-mv-plot {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-mv-area {
  fill: var(--qwf-green-soft);
  stroke: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

.qwf-mv-area.is-on { opacity: 1; }

.qwf-mv-curve {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-mv-mean {
  opacity: 0;
  transition: opacity 340ms ease;
}

.qwf-mv-mean.is-on { opacity: 1; }

.qwf-mv-mean rect {
  fill: none;
  stroke: var(--qwf-amber-dark);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}

.qwf-mv-mean text {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qw-flow--mv .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Degree drop race (Q44 family): the simplified ratio itself, crossing zero
   once and flattening onto the limit line it never touches again. */
.qwf-dr-plot {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-dr-curve {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 380ms ease;
}

.qwf-dr-curve.is-on { opacity: 1; }

.qwf-dr-limit {
  stroke: #7e8a92;
  stroke-width: 2.5;
  stroke-dasharray: 7 6;
}

.qwf-dr-limit-label {
  fill: #59666e;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
}

.qwf-dr-negative {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-dr-negative.is-on { opacity: 1; }

.qwf-dr-negative rect {
  fill: var(--qwf-amber-dark);
  opacity: .1;
}

.qwf-dr-negative line {
  stroke: var(--qwf-amber-dark);
  stroke-width: 2.5;
  stroke-dasharray: 4 5;
}

.qwf-dr-negative text {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.qwf-dr-tail {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 16px;
  font-weight: 900;
  opacity: 0;
  transition: opacity 300ms ease;
}

.qwf-dr-tail.is-on { opacity: 1; }

.qw-flow--dr .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Directed interval ledger (Q43 family): each given total is an arc over one
   axis with its head on the destination, so a backward given looks backward. */
.qwf-il-rail {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-il-arc {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-il-arc.is-on { opacity: 1; }

.qwf-il-arc path {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.qwf-il-arc polygon { fill: var(--qwf-green-dark); }

.qwf-il-arc text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qwf-il-arc.is-backward path {
  stroke: var(--qwf-amber-dark);
  stroke-dasharray: 7 6;
}

.qwf-il-arc.is-backward polygon { fill: var(--qwf-amber-dark); }
.qwf-il-arc.is-backward text { fill: var(--qwf-amber-dark); }

.qwf-il-arc.is-recovered path { stroke-dasharray: 7 6; }

.qwf-il-arc.is-target path {
  stroke: var(--qwf-amber-dark);
  stroke-width: 4.5;
}

.qwf-il-arc.is-target polygon { fill: var(--qwf-amber-dark); }
.qwf-il-arc.is-target text { fill: var(--qwf-amber-dark); }

.qwf-il-point-halo { fill: var(--qwf-paper); }

.qw-flow--il .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Area bound shift (Q42 family): the region under the curve drawn once, first
   inside the bounding box that rules an option out, then relabelled on the
   u-axis so the substitution visibly leaves the region alone. */
.qwf-ab-plot {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-ab-area {
  fill: var(--qwf-green-soft);
  stroke: none;
  opacity: 0;
  transition: opacity 420ms ease;
}

.qwf-ab-area.is-on { opacity: 1; }

.qwf-ab-curve {
  fill: none;
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-ab-box {
  opacity: 0;
  transition: opacity 320ms ease;
}

.qwf-ab-box.is-on { opacity: 1; }

.qwf-ab-box rect {
  fill: none;
  stroke: var(--qwf-amber-dark);
  stroke-width: 3;
  stroke-dasharray: 8 6;
}

.qwf-ab-box text {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qwf-ab-limit,
.qwf-ab-axis-tag {
  fill: #59666e;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
}

.qwf-ab-limit.is-accent,
.qwf-ab-axis-tag.is-accent { fill: var(--qwf-green-deep); }

.qw-flow--ab .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Antiderivative witness (Q41 family): a two-row domain rail for check 1 and
   a two-curve plane for check 2, where the bold candidate's tangent slope is
   read against the thin integrand's height at the same input. */
.qwf-av-rail-row {
  opacity: 0;
  transition: opacity 300ms ease;
}

.qwf-av-rail-row.is-on { opacity: 1; }

.qwf-av-dot {
  fill: var(--qwf-green-dark);
  stroke: var(--qwf-paper);
  stroke-width: 3;
}

.qwf-av-hole {
  fill: var(--qwf-paper);
  stroke: var(--qwf-amber-dark);
  stroke-width: 4;
}

.qwf-av-rail-label {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 900;
}

.qwf-av-rail-note {
  fill: var(--qwf-amber-dark);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
}

.qwf-av-plot,
.qwf-av-rail {
  display: block;
  width: 100%;
  /* Capped like the Q40 balance figure: uncapped, a 500-unit viewBox fills a
     desktop slide and pushes the reduce scene past the deck height. */
  max-width: 520px;
  height: auto;
  margin-inline: auto;
}

.qwf-av-curve {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-av-curve--integrand {
  stroke: #7e8a92;
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
}

.qwf-av-curve--family {
  stroke: var(--qwf-green-dark);
  stroke-width: 4;
}

.qwf-av-curve.is-swatch { stroke-dasharray: 6 6; }
.qwf-av-curve--family.is-swatch { stroke-dasharray: none; }

.qwf-av-legend text {
  fill: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
}

.qwf-av-probe {
  opacity: 0;
  transition: opacity 300ms ease;
}

.qwf-av-probe.is-on { opacity: 1; }

.qwf-av-link {
  stroke: var(--qwf-amber-dark);
  stroke-width: 2;
  stroke-dasharray: 3 4;
}

.qwf-av-tangent {
  stroke: var(--qwf-amber-dark);
  stroke-width: 4;
  stroke-linecap: round;
}

.qwf-av-mark {
  fill: var(--qwf-amber-dark);
  stroke: var(--qwf-paper);
  stroke-width: 2.5;
}

.qwf-av-mark.is-integrand { fill: #59666e; }

.qwf-av-readings {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.qw-flow--av .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

.qw-flow--sd .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

.qw-flow--ps .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

/* Implicit differentiation reuses the composition deck and the shared
   algebra cards. Its final proof is intentionally one compact equation run. */
.qw-flow--idp .qwf-proof {
  white-space: nowrap;
  overflow-wrap: normal;
  letter-spacing: -.02em;
}

.qw-flow--idp .qwf-cp-note {
  font-size: .75rem;
}

/* Removable-hole strategy — the shared limit lane becomes a compact
   factor/cancel diagram. The motion is limited to transform and opacity. */
.qw-flow--rh .qwf-kicker {
  letter-spacing: .04em;
}

.qwf-rh-identity {
  width: min(780px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .72fr) auto minmax(0, 1.28fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-rh-square,
.qwf-rh-factor-identity {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 58px;
  place-items: center;
  padding: 10px 12px;
  border-radius: 15px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  opacity: .3;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-rh-square.is-on,
.qwf-rh-factor-identity.is-on {
  opacity: 1;
  transform: none;
}

.qwf-rh-square code,
.qwf-rh-factor-identity code,
.qwf-rh-source code,
.qwf-rh-fraction code,
.qwf-rh-cancel-work code,
.qwf-rh-substitute code,
.qwf-rh-substitute strong,
.qwf-rh-answer-near {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 850;
}

.qwf-rh-square code,
.qwf-rh-factor-identity code {
  font-size: .82rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-rh-factor-identity {
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-rh-pair {
  position: absolute;
  inset-inline: 12%;
  bottom: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
  pointer-events: none;
}

.qwf-rh-pair i {
  height: 2px;
  border-radius: 999px;
  background: var(--qwf-green);
  transform: scaleX(.15);
  transition: transform 340ms ease;
}

.qwf-rh-factor-identity.is-on .qwf-rh-pair i {
  transform: scaleX(1);
}

.qwf-rh-flow-arrow,
.qwf-rh-down {
  color: var(--qwf-green-deep);
  font-size: 1rem;
  font-weight: 900;
}

.qwf-rh-factor-panel {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-rh-source {
  min-width: 0;
  padding: 9px 13px;
  border-radius: 12px;
  color: var(--qwf-muted);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  opacity: .25;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-rh-source code {
  font-size: .76rem;
  overflow-wrap: anywhere;
}

.qwf-rh-factor-panel.source-on .qwf-rh-source {
  opacity: 1;
  transform: none;
}

.qwf-rh-down {
  opacity: .2;
  transform: translateY(-3px);
  transition: opacity 240ms ease, transform 280ms ease;
}

.qwf-rh-factor-panel.factor-on .qwf-rh-down {
  opacity: 1;
  transform: none;
}

.qwf-rh-fraction {
  display: grid;
  min-width: min(440px, 100%);
  justify-items: center;
  color: var(--qwf-ink);
  opacity: .25;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-rh-factor-panel.factor-on .qwf-rh-fraction {
  opacity: 1;
  transform: none;
}

.qwf-rh-num {
  display: flex;
  min-width: 54%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px 8px;
  border-bottom: 2px solid var(--qwf-ink);
  text-align: center;
}

.qwf-rh-den {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px 5px;
}

.qwf-rh-fraction code {
  font-size: .78rem;
}

.qwf-rh-fraction .is-match {
  padding: 4px 6px;
  border-radius: 9px;
  background: var(--qwf-warn-soft);
  transition: transform 300ms ease;
}

.qwf-rh-factor-panel.match-on .qwf-rh-fraction .is-match {
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  transform: translateY(-1px);
}

.qwf-rh-cancel {
  width: min(760px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-rh-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--qwf-muted);
  font-size: .7rem;
  font-weight: 800;
  opacity: .25;
  transform: translateY(4px);
  transition: opacity 250ms ease, transform 280ms ease;
}

.qwf-rh-gate strong {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--qwf-warn-deep);
  background: var(--qwf-warn-soft);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

.qwf-rh-cancel.gate-on .qwf-rh-gate {
  opacity: 1;
  transform: none;
}

.qwf-rh-cancel-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .72fr);
  align-items: center;
  gap: 12px;
}

.qwf-rh-cancel-fraction {
  display: grid;
  min-width: 0;
  justify-items: center;
  font-size: .76rem;
}

.qwf-rh-cancel-fraction > span:first-child {
  display: flex;
  min-width: 48%;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  text-align: center;
}

.qwf-rh-bar {
  width: min(260px, 92%);
  height: 2px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--qwf-ink);
}

.qwf-rh-cancel-fraction > span:last-child {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 5px;
}

.qwf-rh-cancel-fraction i {
  position: relative;
  padding: 3px 5px;
  border-radius: 8px;
  background: var(--qwf-warn-soft);
  font-style: normal;
}

.qwf-rh-cancel-fraction .is-cancel {
  position: relative;
}

.qwf-rh-cancel-fraction .is-cancel::after {
  content: "";
  position: absolute;
  inset-inline: 2px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: var(--qwf-warn-deep);
  opacity: 0;
  transform: rotate(-11deg) scaleX(.12);
  transform-origin: center;
  transition: opacity 220ms ease, transform 320ms ease;
}

.qwf-rh-cancel.cancel-on .is-cancel::after {
  opacity: 1;
  transform: rotate(-11deg) scaleX(1);
}

.qwf-rh-survivor {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 13px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .82rem;
  overflow-wrap: anywhere;
  text-align: center;
  opacity: .2;
  transform: translateX(-5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-rh-survivor.is-on {
  opacity: 1;
  transform: none;
}

.qwf-rh-compare {
  width: min(800px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
}

.qwf-rh-substitute {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto
    minmax(0, 1.3fr);
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .3;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-rh-substitute.is-on {
  opacity: 1;
  transform: none;
}

.qwf-rh-substitute code,
.qwf-rh-substitute strong {
  min-width: 0;
  font-size: .68rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-rh-substitute strong {
  padding: 6px 8px;
  border-radius: 10px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-rh-answer-near {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.qwf-rh-answer-near small {
  padding: 4px 6px;
  border-radius: 999px;
  color: var(--qwf-warn-deep);
  background: var(--qwf-warn-soft);
  font-size: .56rem;
  font-weight: 850;
}

.qwf-rh-answer-near code {
  min-width: 0;
}

/* The Q13 recap may wrap on narrow CKB screens. Keep each geometric arrow
   inside the destination chip so the causal link cannot be orphaned. */
.qw-flow--rh .qwf-recap-arrow { display: none; }

.qw-flow--rh .qwf-recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qw-flow--rh .qwf-recap-chip:not(:first-child)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

[dir="rtl"] .qw-flow--rh .qwf-recap-chip:not(:first-child)::before {
  transform: rotate(225deg);
}

/* Identity-witness strategy — a permitted input rejects three candidates,
   then the shared factor/cancel primitive proves the survivor. */
.qw-flow--iw {
  --qwf-warn-deep: var(--qwf-amber-dark);
  --qwf-warn-soft: var(--qwf-amber-soft);
}

.qwf-iw-target,
.qwf-iw-rule,
.qwf-iw-witness-board,
.qwf-iw-compare {
  width: min(800px, 100%);
  margin-inline: auto;
}

.qwf-iw-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-iw-target > div {
  display: grid;
  min-width: 0;
  gap: 6px;
  place-items: center;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  opacity: .28;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-iw-target > div.is-on {
  opacity: 1;
  transform: none;
}

.qwf-iw-target small {
  color: var(--qwf-muted);
  font-size: .65rem;
  font-weight: 800;
}

.qwf-iw-target code,
.qwf-iw-target-calc code,
.qwf-iw-target-calc strong,
.qwf-iw-logic code,
.qwf-iw-witness-head,
.qwf-iw-witness-card code,
.qwf-iw-evidence code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 850;
}

.qwf-iw-target code {
  min-width: 0;
  color: var(--qwf-ink);
  font-size: .86rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-iw-rule {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 10px;
}

.qwf-iw-target-calc,
.qwf-iw-logic {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .26;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-iw-target-calc.is-on,
.qwf-iw-logic.is-on {
  opacity: 1;
  transform: none;
}

.qwf-iw-target-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: center;
}

.qwf-iw-target-calc code,
.qwf-iw-target-calc strong {
  min-width: 0;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.qwf-iw-target-calc strong {
  padding: 8px;
  border-radius: 11px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-iw-logic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-iw-logic code {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-size: .7rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-iw-witness-board {
  display: grid;
  gap: 9px;
}

.qwf-iw-witness-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 15px;
  color: var(--qwf-ink);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  font-size: .72rem;
}

.qwf-iw-witness-head strong {
  padding: 5px 9px;
  border-radius: 9px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-iw-witness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-iw-witness-card {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .24;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-iw-witness-card.is-out,
.qwf-iw-witness-card.is-pending {
  opacity: 1;
  transform: none;
}

.qwf-iw-witness-card.is-out {
  box-shadow: var(--shadow-raised-sm), inset 3px 0 0 var(--qwf-warn-deep);
}

.qwf-iw-witness-card.is-pending {
  box-shadow: var(--shadow-raised-sm), inset 3px 0 0 var(--qwf-green);
}

.qwf-iw-witness-card header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--qwf-muted);
  font-size: .68rem;
  font-weight: 850;
}

.qwf-iw-witness-card header code {
  flex: 0 0 auto;
  color: var(--qwf-ink);
  font-size: .7rem;
}

.qwf-iw-option-expression {
  min-width: 0;
  color: var(--qwf-ink);
  font-size: .72rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-iw-factor-identity {
  justify-self: center;
  opacity: .24;
}

.qwf-iw-factor-identity.is-on {
  opacity: 1;
  transform: none;
}

.qwf-iw-evidence {
  display: grid;
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-iw-evidence code {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 10px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  font-size: .64rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-iw-option .qwf-eq {
  font-size: .7rem;
}

/* Removable-discontinuity filter — this is a composition over the existing
   limit-rewrite cards, factor/cancel lane, and collision-safe guided plot. */
.qw-flow--df {
  --qwf-warn-deep: var(--qwf-amber-dark);
  --qwf-warn-soft: var(--qwf-amber-soft);
}

.qwf-df-target,
.qwf-df-rule,
.qwf-df-jump,
.qwf-df-spike,
.qwf-df-hole {
  width: min(800px, 100%);
  margin-inline: auto;
}

.qwf-df-rule,
.qwf-df-jump,
.qwf-df-spike,
.qwf-df-hole {
  display: grid;
  gap: 10px;
}

.qwf-df-rule {
  padding: 12px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-df-rule-condition,
.qwf-df-spike-claim {
  min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--qwf-ink);
  background: var(--qwf-surface);
  box-shadow: var(--shadow-inset);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .76rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
  opacity: .22;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-df-rule-condition.is-on,
.qwf-df-spike-claim.is-on {
  opacity: 1;
  transform: none;
}

.qwf-df-rule-option {
  min-height: 68px;
  opacity: .2;
  transform: translateY(5px);
}

.qwf-df-rule-option.is-on {
  opacity: 1;
  transform: none;
}

.qwf-df-relation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 14px;
  color: var(--qwf-warn-deep);
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-df-relation code {
  min-width: 0;
  font-size: .72rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-df-relation > span {
  font-size: 1.05rem;
  font-weight: 900;
}

.qwf-df-plot-card {
  min-width: 0;
  margin: 0;
  padding: 7px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  overflow: hidden;
}

.qwf-df-plot-card .qw-guide-plot-wrap {
  border-radius: 13px;
  box-shadow: none;
}

.qwf-df-plot-card .qw-guide-plot {
  width: 100%;
  height: clamp(190px, 30vh, 250px);
  min-height: 0;
  max-height: none;
}

.qw-flow--df .qw-guide-line,
.qw-flow--df .qw-guide-label,
.qw-flow--df .qw-guide-point {
  opacity: .18;
  transition: opacity 260ms ease, transform 300ms ease,
    stroke-dashoffset 620ms ease;
}

.qw-flow--df .qw-guide-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.qw-flow--df .qw-guide-point {
  transform: scale(.7);
}

.qw-flow--df .qw-guide-line.is-on,
.qw-flow--df .qw-guide-label.is-on,
.qw-flow--df .qw-guide-point.is-on {
  opacity: 1;
  transform: none;
  stroke-dashoffset: 0;
}

.qwf-df-spike-claim {
  color: var(--qwf-warn-deep);
}

.qwf-df-hole-top {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 10px;
}

.qwf-df-hole-top > * {
  min-width: 0;
}

.qwf-df-hole-top .qwf-rh-cancel {
  height: 100%;
}

.qwf-df-hole-plot .qw-guide-plot {
  height: clamp(180px, 28vh, 235px);
}

.qwf-df-verdict-options {
  gap: 7px;
}

.qwf-df-verdict-option {
  min-height: 62px;
}

.qwf-df-answer-figure code {
  overflow-wrap: anywhere;
}

.qw-flow--df .qwf-df-target small,
.qw-flow--df .qwf-df-target code,
.qw-flow--df .qwf-df-rule-condition,
.qw-flow--df .qwf-df-rule-option .qwf-card-head,
.qw-flow--df .qwf-df-rule-option .qwf-card-letter,
.qw-flow--df .qwf-df-rule-option .qwf-card-letter strong,
.qw-flow--df .qwf-df-rule-option .qwf-eq,
.qw-flow--df .qwf-df-relation code,
.qw-flow--df .qwf-df-spike-claim,
.qw-flow--df .qwf-rh-source code,
.qw-flow--df .qwf-rh-cancel-work code,
.qw-flow--df .qwf-rh-gate,
.qw-flow--df .qwf-rh-survivor,
.qw-flow--df .qwf-lr-answer-step code,
.qw-flow--df .qwf-df-verdict-option .qwf-card-head,
.qw-flow--df .qwf-df-verdict-option .qwf-card-letter,
.qw-flow--df .qwf-df-verdict-option .qwf-card-letter strong,
.qw-flow--df .qwf-df-verdict-option .qwf-eq,
.qw-flow--df .qwf-verdict,
.qw-flow--df .qwf-recap-chip,
.qw-flow--df .qwf-proof,
.qw-flow--df .qwf-clue-chip strong,
.qw-flow--df .qw-guide-label,
.qw-flow--df .qwf-ctas > * {
  font-size: .75rem;
}

/* Preserve a measurable solid fallback beneath gradient affordances so text
   contrast remains auditable in both themes. */
.qw-flow--df .qwf-verdict.is-win,
.qw-flow--df .qwf-recap-chip.is-final,
.qw-flow--df .qwf-ctas .qw-btn--main {
  background-color: #0c746b;
}

/* Desktop already has previous/next scene controls at the deck edges. The
   bottom cue is a phone affordance and otherwise competes with CKB content. */
@media (min-width: 1000px) {
  .qw-flow--df .qwf-more {
    display: none;
  }
}

/* Common-denominator strategy — one compact algebra lane makes the nested
   fraction readable without turning the walkthrough into a worksheet. */
.qw-flow--cf {
  --qwf-warn-deep: var(--qwf-amber-dark);
  --qwf-warn-soft: var(--qwf-amber-soft);
}

.qwf-cf-common,
.qwf-cf-factor-panel,
.qwf-cf-cancel,
.qwf-cf-compare {
  width: min(800px, 100%);
  margin-inline: auto;
}

.qwf-cf-common {
  display: grid;
  grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-cf-top-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: .25;
  transform: translateX(-6px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-cf-common.pair-on .qwf-cf-top-pair {
  opacity: 1;
  transform: none;
}

.qwf-cf-top-pair code,
.qwf-cf-fraction code {
  font-size: .78rem;
  font-weight: 850;
}

.qwf-cf-flow-arrow {
  color: var(--qwf-green-deep);
  font-size: 1rem;
  font-weight: 900;
}

.qwf-cf-fraction {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 2px auto;
  gap: 6px;
  text-align: center;
  opacity: .2;
  transform: translateX(-7px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-cf-common.fraction-on .qwf-cf-fraction {
  opacity: 1;
  transform: none;
}

.qwf-cf-num,
.qwf-cf-den {
  min-width: 0;
  padding: 4px 8px;
  overflow-wrap: anywhere;
}

.qwf-cf-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: var(--qwf-ink);
}

.qwf-cf-factor-panel {
  display: grid;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-cf-factor-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .7fr) auto
    minmax(0, .9fr);
  align-items: center;
  gap: 8px;
}

.qwf-cf-factor-chain code {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--qwf-well);
  font-size: .76rem;
  text-align: center;
  opacity: .18;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-cf-factor-chain code.is-on {
  opacity: 1;
  transform: none;
}

.qwf-cf-factor-chain .is-match {
  display: inline-block;
  margin-inline: 2px;
  padding: 2px 4px;
  border-radius: 7px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  box-shadow: inset 0 -2px 0 var(--qwf-green);
}

.qwf-cf-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--qwf-green-deep);
  text-align: center;
  opacity: .18;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-cf-factor-panel.match-on .qwf-cf-match-row {
  opacity: 1;
  transform: none;
}

.qwf-cf-match-row span {
  padding: 7px 9px;
  border-radius: 11px;
  background: var(--qwf-green-soft);
}

.qwf-cf-cancel {
  display: grid;
  gap: 11px;
  padding: 15px 18px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-cf-gate {
  color: var(--qwf-warn-deep);
  font-size: .74rem;
  font-weight: 850;
  opacity: .2;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 280ms ease;
}

.qwf-cf-cancel.gate-on .qwf-cf-gate {
  opacity: 1;
  transform: none;
}

.qwf-cf-cancel-work {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .7fr);
  align-items: center;
  gap: 12px;
}

.qwf-cf-cancel-fraction {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 2px auto;
  gap: 6px;
  text-align: center;
}

.qwf-cf-cancel-fraction .qwf-cf-num,
.qwf-cf-cancel-fraction .qwf-cf-den {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.qwf-cf-cancel-fraction code {
  position: relative;
  font-size: .72rem;
}

.qwf-cf-cancel-fraction .is-cancel {
  display: inline-block;
}

.qwf-cf-cancel-fraction .is-cancel::after {
  content: "";
  position: absolute;
  inset-inline: -4px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: var(--qwf-warn-deep);
  z-index: 1;
  opacity: 0;
  transform: rotate(-10deg) scaleX(.12);
  transform-origin: center;
  transition: opacity 220ms ease, transform 320ms ease;
}

.qwf-cf-cancel.cancel-on .is-cancel::after {
  opacity: 1;
  transform: rotate(-10deg) scaleX(1);
}

.qwf-cf-survivor {
  min-width: 0;
  padding: 11px 13px;
  border-radius: 13px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .8rem;
  font-weight: 850;
  text-align: center;
  opacity: .2;
  transform: translateX(-5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-cf-survivor.is-on {
  opacity: 1;
  transform: none;
}

.qwf-cf-compare {
  display: grid;
  gap: 10px;
}

.qwf-cf-substitute {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(0, .75fr);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
  opacity: .25;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-cf-substitute.is-on {
  opacity: 1;
  transform: none;
}

.qwf-cf-substitute code,
.qwf-cf-substitute strong {
  min-width: 0;
  font-size: .7rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-cf-substitute strong {
  padding: 7px 9px;
  border-radius: 10px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
}

.qwf-cf-answer-near {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.qwf-cf-answer-near small {
  padding: 4px 6px;
  border-radius: 999px;
  color: var(--qwf-warn-deep);
  background: var(--qwf-warn-soft);
  font-size: .64rem;
  font-weight: 850;
}

.qw-flow--cf .qwf-answer-copy {
  min-width: 0;
}

.qw-flow--cf .qwf-recap-arrow { display: none; }

.qw-flow--cf .qwf-recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qw-flow--cf .qwf-recap-chip:not(:first-child)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

[dir="rtl"] .qw-flow--cf .qwf-recap-chip:not(:first-child)::before {
  transform: rotate(225deg);
}

/* Absolute-square strategy — the algebra and the distance picture share one
   lane. Number-line labels live in fixed top/bottom lanes so data cannot
   collide with them. Motion is transform, opacity, or dash offset only. */
.qw-flow--as {
  --qwf-warn-deep: var(--qwf-amber-dark);
  --qwf-warn-soft: var(--qwf-amber-soft);
}

.qwf-as-square-panel,
.qwf-as-distance-panel,
.qwf-as-cancel,
.qwf-as-compare {
  width: min(800px, 100%);
  margin-inline: auto;
}

.qwf-as-square-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, .8fr);
  align-items: center;
  gap: 12px;
  padding: 16px 18px 22px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-as-square-panel code,
.qwf-as-distance-identity code {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--qwf-well);
  font-size: .8rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
  opacity: .2;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-as-square-panel code.is-on,
.qwf-as-distance-identity code.is-on {
  opacity: 1;
  transform: none;
}

.qwf-as-flow-arrow {
  color: var(--qwf-green-deep);
  font-size: 1rem;
  font-weight: 900;
}

.qwf-as-factor-pair {
  position: absolute;
  inset-inline-end: 7%;
  bottom: 7px;
  width: 30%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14%;
  opacity: .2;
  transition: opacity 240ms ease;
}

.qwf-as-factor-pair i {
  height: 3px;
  border-radius: 999px;
  background: var(--qwf-green);
  transform: scaleX(.12);
  transition: transform 320ms ease;
}

.qwf-as-square-panel.pair-on .qwf-as-factor-pair {
  opacity: 1;
}

.qwf-as-square-panel.pair-on .qwf-as-factor-pair i {
  transform: scaleX(1);
}

.qwf-as-distance-panel {
  display: grid;
  gap: 6px;
  padding: 13px 16px 9px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-as-distance-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.qwf-as-line {
  display: block;
  width: 100%;
  max-height: 150px;
  overflow: visible;
}

.qwf-as-axis,
.qwf-as-tick {
  stroke: var(--qwf-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.qwf-as-tick { stroke-width: 1.5; }

.qwf-as-tick-label {
  fill: var(--qwf-muted);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 750;
}

.qwf-as-center {
  fill: var(--qwf-paper);
  stroke: var(--qwf-green-deep);
  stroke-width: 4;
}

.qwf-as-side-point circle {
  fill: var(--qwf-warn-deep);
  stroke: var(--qwf-paper);
  stroke-width: 3;
}

.qwf-as-side-points,
.qwf-as-distance-labels,
.qwf-as-approach-labels {
  opacity: 0;
  transition: opacity 260ms ease;
}

.qwf-as-distance-labels text,
.qwf-as-approach-labels text {
  fill: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 850;
}

.qwf-as-distance-paths {
  fill: none;
  stroke: var(--qwf-green);
  stroke-width: 4;
  stroke-linecap: round;
}

.qwf-as-distance-paths path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 420ms ease;
}

.qwf-as-line.labels-on .qwf-as-distance-labels,
.qwf-as-line.labels-on .qwf-as-approach-labels,
.qwf-as-line.points-on .qwf-as-side-points {
  opacity: 1;
}

.qwf-as-line.paths-on .qwf-as-distance-paths path {
  stroke-dashoffset: 0;
}

.qwf-as-side-point {
  transform: translateX(0);
  transform-origin: center;
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1);
}

.qwf-as-line.move-on .qwf-as-side-point {
  transform: translateX(var(--as-move));
}

.qwf-as-cancel {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-as-gate {
  color: var(--qwf-warn-deep);
  font-size: .74rem;
  font-weight: 850;
  opacity: .2;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 280ms ease;
}

.qwf-as-cancel.gate-on .qwf-as-gate {
  opacity: 1;
  transform: none;
}

.qwf-as-cancel-work {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .7fr);
  align-items: center;
  gap: 12px;
}

.qwf-as-cancel-fraction {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 2px auto;
  gap: 6px;
  text-align: center;
}

.qwf-as-num {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.qwf-as-num code,
.qwf-as-den code {
  position: relative;
  display: inline-block;
  min-width: 0;
  padding: 4px 5px;
  font-size: .76rem;
  overflow-wrap: anywhere;
}

.qwf-as-bar {
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: var(--qwf-ink);
}

.qwf-as-cancel-fraction .is-cancel::after {
  content: "";
  position: absolute;
  inset-inline: -3px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: var(--qwf-warn-deep);
  opacity: 0;
  transform: rotate(-10deg) scaleX(.12);
  transform-origin: center;
  transition: opacity 220ms ease, transform 320ms ease;
}

.qwf-as-cancel.cancel-on .is-cancel::after {
  opacity: 1;
  transform: rotate(-10deg) scaleX(1);
}

.qwf-as-survivor {
  min-width: 0;
  padding: 11px 13px;
  border-radius: 13px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  opacity: .2;
  transform: translateX(-5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-as-survivor.is-on {
  opacity: 1;
  transform: none;
}

.qwf-as-compare {
  display: grid;
  gap: 7px;
}

.qwf-as-compare .qwf-as-line {
  padding: 2px 8px 0;
  border-radius: 16px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-as-limit-result {
  justify-self: center;
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--qwf-green-deep);
  background: var(--qwf-green-soft);
  font-size: .75rem;
  font-weight: 850;
  opacity: .2;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 280ms ease;
}

.qwf-as-limit-result.is-on {
  opacity: 1;
  transform: none;
}

.qwf-as-answer-near {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.qwf-as-answer-near small {
  padding: 4px 6px;
  border-radius: 999px;
  color: var(--qwf-warn-deep);
  background: var(--qwf-warn-soft);
  font-size: .62rem;
  font-weight: 850;
}

.qw-flow--as .qwf-recap-arrow { display: none; }

.qw-flow--as .qwf-recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qw-flow--as .qwf-recap-chip:not(:first-child)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

[dir="rtl"] .qw-flow--as .qwf-recap-chip:not(:first-child)::before {
  transform: rotate(225deg);
}

/* Piecewise limits — one graph carries the distinction between the path near
   x and the separate filled value at x. The plot contains no authored data
   labels, so branches, points, and explanatory copy cannot collide. */
.qw-flow--pl {
  --qwf-pl-blue: #356f9d;
  --qwf-pl-blue-soft: rgb(53 111 157 / 12%);
}

.qwf-pl-graph-card,
.qwf-pl-merge {
  width: min(800px, 100%);
  margin-inline: auto;
  border-radius: 18px;
  background: var(--qwf-paper);
  box-shadow: var(--shadow-raised-sm);
}

.qwf-pl-graph-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(184px, .42fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.qwf-pl-plot {
  display: block;
  width: 100%;
  max-height: 278px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-inset);
  overflow: visible;
}

.qwf-pl-branch {
  fill: none;
  stroke: #334b56;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qwf-pl-point {
  vector-effect: non-scaling-stroke;
}

.qwf-pl-point.is-open {
  fill: #fff;
  stroke: var(--qwf-green-deep);
  stroke-width: 4;
}

.qwf-pl-point.is-closed {
  fill: var(--qwf-amber-dark);
  stroke: #fff;
  stroke-width: 3;
}

.qwf-pl-reading-link {
  stroke: var(--qwf-amber-dark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 6;
  opacity: 0;
  transition: opacity 280ms ease;
}

.qwf-pl-reading-link.is-on,
.qwf-pl-reading-link.is-static {
  opacity: 1;
}

.qwf-pl-trace {
  fill: none;
  stroke: var(--qwf-green);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 640ms cubic-bezier(.22, .9, .26, 1),
    opacity 180ms ease;
}

.qwf-pl-trace-right {
  stroke: var(--qwf-pl-blue);
}

.qwf-pl-marker-left {
  fill: var(--qwf-green);
}

.qwf-pl-marker-right {
  fill: var(--qwf-pl-blue);
}

.qwf-pl-trace.is-on,
.qwf-pl-trace.is-static {
  stroke-dashoffset: 0;
  opacity: 1;
}

.qwf-pl-legend,
.qwf-pl-readings {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.qwf-pl-legend > div,
.qwf-pl-reading {
  min-width: 0;
  border-radius: 12px;
  background: rgb(59 181 168 / 10%);
  box-shadow: var(--shadow-inset);
}

.qwf-pl-legend > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark title" "mark math";
  align-items: center;
  gap: 2px 8px;
  padding: 10px 11px;
}

.qwf-pl-legend i {
  grid-area: mark;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--qwf-green-deep);
  background: #fff;
}

.qwf-pl-legend i.is-closed {
  border-color: #fff;
  background: var(--qwf-amber-dark);
  box-shadow: 0 0 0 1px var(--qwf-amber-dark);
}

.qwf-pl-legend span {
  grid-area: title;
  min-width: 0;
  color: var(--qwf-muted);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.35;
}

.qwf-pl-legend code {
  grid-area: math;
  min-width: 0;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .7rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.qwf-pl-readings {
  grid-template-columns: 1fr;
}

.qwf-pl-reading {
  padding: 11px 9px;
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  opacity: .2;
  transform: translateY(5px);
  transition: opacity 260ms ease, transform 300ms ease;
}

.qwf-pl-reading-right {
  color: var(--qwf-pl-blue);
  background: var(--qwf-pl-blue-soft);
}

.qwf-pl-reading.is-on {
  opacity: 1;
  transform: none;
}

.qwf-pl-merge {
  display: grid;
  grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
  grid-template-areas: "eyebrow rows" "result result";
  align-items: center;
  gap: 8px 12px;
  padding: 11px 14px;
}

.qwf-pl-merge .qwf-construct-eyebrow {
  grid-area: eyebrow;
  margin: 0;
}

.qwf-pl-merge-rows {
  grid-area: rows;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.qwf-pl-merge-row,
.qwf-pl-merge-result {
  min-width: 0;
  border-radius: 10px;
  box-shadow: var(--shadow-inset);
}

.qwf-pl-merge-row {
  padding: 7px 8px;
  color: var(--qwf-ink);
  background: rgb(59 181 168 / 10%);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .7rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
  opacity: .2;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 280ms ease;
}

.qwf-pl-merge-row-right {
  color: var(--qwf-pl-blue);
  background: var(--qwf-pl-blue-soft);
}

.qwf-pl-merge-result {
  grid-area: result;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--qwf-muted);
  background: var(--qwf-green-soft);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.35;
  opacity: .2;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 280ms ease;
}

.qwf-pl-merge-result code {
  min-width: 0;
  color: var(--qwf-green-deep);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .75rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.qwf-pl-merge-row.is-on,
.qwf-pl-merge-result.is-on {
  opacity: 1;
  transform: none;
}

.qwf-pl-options {
  width: min(800px, 100%);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qwf-pl-option {
  min-width: 0;
  min-height: 80px;
  padding-bottom: 8px;
}

.qwf-pl-option .qwf-card-head {
  gap: 5px;
  min-height: 35px;
  padding-block: 5px;
}

.qwf-pl-option .qwf-card-letter {
  font-size: .7rem;
}

.qwf-pl-option .qwf-verdict {
  min-width: 0;
  padding: 3px 5px;
  font-size: .61rem;
}

.qwf-pl-option-claim {
  display: block;
  min-width: 0;
  padding: 5px 7px;
  color: var(--qwf-ink);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: .72rem;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-align: center;
}

.qwf-pl-option.is-rejected {
  opacity: .46;
  transform: scale(.97);
}

.qwf-pl-option.is-rejected::after {
  display: none;
}

.qwf-pl-option.is-confirmed {
  box-shadow: var(--shadow-raised-sm), inset 0 0 0 2px var(--qwf-green);
}

.qwf-pl-answer-figure {
  gap: 6px;
}

.qw-flow--pl .qwf-recap-arrow {
  display: none;
}

.qw-flow--pl .qwf-recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qw-flow--pl .qwf-recap-chip:not(:first-child)::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

[dir="rtl"] .qw-flow--pl .qwf-recap-chip:not(:first-child)::before {
  transform: rotate(225deg);
}

[data-theme="dark"] .qw-flow--pl {
  --qwf-pl-blue: #8bc3ed;
  --qwf-pl-blue-soft: rgb(139 195 237 / 13%);
}

@media (max-width: 640px) {
  .qw-flow--lr .qwf-scene { padding: 10px 0; }
  .qw-flow--lr .qwf-story-row { gap: 4px; padding: 4px 2px; }
  .qw-flow--lr .qwf-title { font-size: 1.08rem; }
  .qw-flow--lr .qwf-sub { margin-top: 3px; font-size: .72rem; line-height: 1.42; }
  .qw-flow--lr[lang="ckb"] .qwf-sub { line-height: 1.58; }
  .qw-flow--lr .qwf-question-card { gap: 8px; padding: 9px 11px; }
  .qw-flow--lr .qwf-question-number {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }
  .qw-flow--lr .qwf-question-text { font-size: .73rem; line-height: 1.44; }
  .qwf-lr-expression { gap: 8px; padding: 10px 11px; border-radius: 15px; }
  .qwf-lr-expression > code { font-size: .72rem; }
  .qwf-lr-limit { font-size: .72rem; }
  .qwf-lr-limit small { font-size: .5rem; }
  .qwf-lr-diagnostic {
    gap: 5px;
    padding: 7px 8px;
    border-radius: 13px;
  }
  .qwf-lr-diagnostic > div { gap: 2px; padding: 5px; border-radius: 9px; }
  .qwf-lr-diagnostic span { font-size: .6rem; }
  .qwf-lr-diagnostic strong,
  .qwf-lr-diagnostic p { font-size: .72rem; }
  .qwf-lr-diagnostic p { padding: 5px 7px; }
  .qw-flow--lr .qwf-clue-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-top: 4px;
  }
  .qw-flow--lr .qwf-clue-chip {
    gap: 6px;
    padding: 7px 8px;
    font-size: .7rem;
    line-height: 1.32;
  }
  .qw-flow--lr .qwf-chip-glyph {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }
  .qw-flow--lr .qwf-clue-chip strong,
  .qw-flow--lr .qwf-clue-chip > span:last-child > span {
    font-size: .7rem;
    line-height: 1.32;
  }
  .qwf-lr-identity { gap: 6px; padding: 8px 9px; border-radius: 13px; }
  .qwf-lr-identity-row { gap: 5px; }
  .qwf-lr-identity code { padding: 6px; border-radius: 9px; font-size: .62rem; }
  .qwf-lr-near { gap: 5px; font-size: .58rem; }
  .qwf-lr-rewrite { gap: 7px; padding: 9px 10px; border-radius: 14px; }
  .qwf-lr-factor-line { gap: 3px; font-size: .62rem; }
  .qwf-lr-factor { padding: 4px; border-radius: 7px; }
  .qwf-lr-rewrite-result { gap: 6px; }
  .qwf-lr-rewrite-result code { padding: 6px 8px; font-size: .68rem; }
  .qwf-lr-reduce { gap: 6px; }
  .qwf-lr-denominator,
  .qwf-lr-match,
  .qwf-lr-known { padding: 8px; border-radius: 12px; }
  .qwf-lr-denominator > span { font-size: .68rem; }
  .qwf-lr-denominator small { font-size: .62rem; }
  .qwf-lr-match { gap: 5px; }
  .qwf-lr-match strong { width: 38px; height: 38px; font-size: .66rem; }
  .qwf-lr-match code,
  .qwf-lr-known code { font-size: .65rem; }
  .qwf-lr-known { gap: 6px; }
  .qwf-lr-limit-chain { gap: 6px; padding: 7px 8px; border-radius: 12px; }
  .qwf-lr-limit-chain code { font-size: .6rem; }
  .qwf-lr-options { gap: 5px; }
  .qwf-lr-option { min-height: 58px; padding: 6px 7px; border-radius: 10px; }
  .qwf-lr-option .qwf-card-head { gap: 4px; font-size: .7rem; }
  .qwf-lr-option .qwf-verdict { padding: 3px 4px; font-size: .7rem; }
  .qwf-lr-option .qwf-eq { font-size: .7rem; }
  .qw-flow--lr .qwf-answer-figure {
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    padding: 4px;
  }
  .qwf-lr-answer-figure { gap: 5px; }
  .qwf-lr-answer-step {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 6px;
    border-radius: 9px;
  }
  .qwf-lr-answer-step > span { width: 26px; height: 26px; font-size: .6rem; }
  .qwf-lr-answer-step code { font-size: .58rem; }
  .qwf-lr-answer-step.is-final code { font-size: .72rem; }
  .qw-flow--ei .qwf-title,
  .qw-flow--td .qwf-title { font-size: 1.02rem; }
  .qw-flow--td .qwf-question-kicker,
  .qw-flow--td .qwf-kicker,
  .qw-flow--td .qwf-answer-state,
  .qw-flow--ei .qwf-sub,
  .qw-flow--td .qwf-sub,
  .qw-flow--ei .qwf-question-text,
  .qw-flow--td .qwf-question-text,
  .qw-flow--ei .qwf-construct-eyebrow,
  .qw-flow--td .qwf-construct-eyebrow,
  .qw-flow--ei .qwf-lr-option .qwf-card-head,
  .qw-flow--td .qwf-lr-option .qwf-card-head,
  .qw-flow--ei .qwf-lr-answer-step > span,
  .qw-flow--td .qwf-lr-answer-step > span,
  .qw-flow--lr.qw-flow--ei .qwf-recap-chip,
  .qw-flow--lr.qw-flow--td .qwf-recap-chip {
    font-size: .75rem;
  }
  .qwf-ei-domain {
    gap: 6px;
    padding: 8px;
    border-radius: 13px;
  }
  .qwf-ei-domain > div {
    gap: 3px;
    padding: 7px;
    border-radius: 10px;
  }
  .qwf-ei-domain small { font-size: .75rem; }
  .qwf-ei-domain code,
  .qwf-ei-domain strong { font-size: .75rem; }
  .qwf-ei-law {
    gap: 7px;
    padding: 8px 9px;
    border-radius: 13px;
  }
  .qwf-ei-law-rule { padding: 6px 8px; font-size: .75rem; }
  .qwf-ei-law-application { gap: 5px; }
  .qwf-ei-law-application code { padding: 6px; font-size: .75rem; }
  .qwf-ei-split {
    gap: 6px;
    padding: 8px 9px;
    border-radius: 13px;
  }
  .qwf-ei-split-source,
  .qwf-ei-factor-row { gap: 4px; }
  .qwf-ei-split-source code,
  .qwf-ei-factor-row code,
  .qwf-ei-split-result { padding: 6px 7px; font-size: .75rem; }
  .qwf-ei-reduce { gap: 6px; }
  .qwf-ei-reduction-grid { gap: 6px; }
  .qwf-ei-reduction-grid article,
  .qwf-ei-linear { padding: 8px; border-radius: 12px; }
  .qwf-ei-reduction-grid code,
  .qwf-ei-linear strong { font-size: .75rem; }
  .qwf-ei-compare { gap: 6px; }
  .qwf-ei-derivative { gap: 6px; padding: 8px; border-radius: 12px; }
  .qwf-ei-derivative code,
  .qwf-ei-derivative strong { font-size: .75rem; }
  .qw-flow--ei .qwf-lr-option .qwf-eq,
  .qw-flow--td .qwf-lr-option .qwf-eq,
  .qw-flow--ei .qwf-lr-option .qwf-verdict,
  .qw-flow--td .qwf-lr-option .qwf-verdict,
  .qw-flow--ei .qwf-proof,
  .qw-flow--td .qwf-proof { font-size: .75rem; }
  .qw-flow--ei .qwf-lr-answer-step code,
  .qw-flow--td .qwf-lr-answer-step code { font-size: .75rem; }
  .qw-flow--ei .qwf-lr-answer-step.is-final code,
  .qw-flow--td .qwf-lr-answer-step.is-final code { font-size: .75rem; }
  .qw-flow--lr.qw-flow--ei .qwf-ctas {
    display: grid;
    grid-template-columns:
      minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr);
    gap: 5px;
  }
  .qw-flow--lr.qw-flow--td .qwf-ctas {
    display: grid;
    grid-template-columns:
      minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr);
    gap: 5px;
  }
  .qw-flow--lr.qw-flow--ei .qwf-ctas > * {
    width: 100%;
    font-size: .75rem !important;
    white-space: nowrap;
  }
  .qw-flow--lr.qw-flow--td .qwf-ctas > * {
    width: 100%;
    font-size: .75rem !important;
    white-space: nowrap;
  }
  .qw-flow--rh .qwf-title { font-size: 1.02rem; }
  .qw-flow--rh .qwf-sub { font-size: .69rem; }
  .qwf-rh-identity {
    grid-template-columns: minmax(0, .65fr) auto minmax(0, 1.35fr);
    gap: 5px;
    padding: 8px;
    border-radius: 13px;
  }
  .qwf-rh-square,
  .qwf-rh-factor-identity {
    min-height: 42px;
    padding: 6px;
    border-radius: 10px;
  }
  .qwf-rh-square code,
  .qwf-rh-factor-identity code { font-size: .58rem; }
  .qwf-rh-flow-arrow,
  .qwf-rh-down { font-size: .72rem; }
  .qwf-rh-factor-panel,
  .qwf-rh-cancel {
    gap: 5px;
    padding: 8px 9px;
    border-radius: 13px;
  }
  .qwf-rh-source { padding: 6px 8px; border-radius: 9px; }
  .qwf-rh-source code,
  .qwf-rh-fraction code { font-size: .61rem; }
  .qwf-rh-num { padding: 4px 6px 5px; }
  .qwf-rh-den { gap: 3px; padding: 5px 5px 3px; }
  .qwf-rh-fraction .is-match { padding: 3px 4px; border-radius: 7px; }
  .qwf-rh-gate { gap: 5px; font-size: .62rem; }
  .qwf-rh-gate strong { padding: 4px 6px; }
  .qwf-rh-cancel-work { gap: 5px; }
  .qwf-rh-cancel-fraction { font-size: .58rem; }
  .qwf-rh-cancel-fraction > span:first-child { padding: 4px 5px; }
  .qwf-rh-cancel-fraction > span:last-child { gap: 3px; padding: 5px 3px; }
  .qwf-rh-survivor { padding: 7px; border-radius: 9px; font-size: .62rem; }
  .qwf-rh-substitute {
    gap: 3px;
    padding: 7px;
    border-radius: 11px;
  }
  .qwf-rh-substitute code,
  .qwf-rh-substitute strong { font-size: .62rem; }
  .qwf-rh-substitute strong { padding: 4px; border-radius: 7px; }
  .qwf-rh-answer-near { gap: 4px; }
  .qwf-rh-answer-near small { padding: 3px 4px; font-size: .5rem; }
  .qw-flow--lr .qwf-answer-copy { gap: 5px; }
  .qw-flow--lr .qwf-proof { white-space: nowrap; font-size: .58rem; }
  .qw-flow--lr.qw-flow--ei .qwf-proof,
  .qw-flow--lr.qw-flow--td .qwf-proof { font-size: .75rem; }
  .qw-flow--lr.qw-flow--ei .qwf-clue-chip strong,
  .qw-flow--lr.qw-flow--ei .qwf-clue-chip > span:last-child > span,
  .qw-flow--lr.qw-flow--td .qwf-clue-chip strong,
  .qw-flow--lr.qw-flow--td .qwf-clue-chip > span:last-child > span {
    font-size: .75rem;
  }
  .qw-flow--lr .qwf-recap-chip { padding: 5px 6px; font-size: .58rem; }
  .qw-flow--lr .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .62rem !important;
    line-height: 1.15 !important;
  }
  .qw-flow--rh .qwf-rh-square code,
  .qw-flow--rh .qwf-rh-factor-identity code,
  .qw-flow--rh .qwf-rh-source code,
  .qw-flow--rh .qwf-rh-fraction code,
  .qw-flow--rh .qwf-rh-cancel-work code,
  .qw-flow--rh .qwf-rh-substitute code,
  .qw-flow--rh .qwf-rh-substitute strong,
  .qw-flow--rh .qwf-lr-answer-step code,
  .qw-flow--rh .qwf-proof,
  .qw-flow--rh .qwf-recap-chip,
  .qw-flow--rh .qwf-rh-answer-near small,
  .qw-flow--rh .qwf-rh-gate,
  .qw-flow--rh .qwf-rh-survivor {
    font-size: .68rem;
  }
  .qw-flow--rh .qwf-lr-answer-step.is-final code { font-size: .72rem; }
  .qw-flow--rh .qwf-ctas > * { font-size: .7rem !important; }
  .qw-flow--iw .qwf-title { font-size: 1rem; }
  .qw-flow--iw .qwf-sub { font-size: .68rem; }
  .qwf-iw-target {
    gap: 5px;
    padding: 8px;
    border-radius: 13px;
  }
  .qwf-iw-target > div {
    gap: 3px;
    padding: 7px 6px;
    border-radius: 9px;
  }
  .qwf-iw-target small,
  .qwf-iw-target code { font-size: .75rem; }
  .qwf-iw-rule {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .qwf-iw-target-calc,
  .qwf-iw-logic {
    gap: 5px;
    padding: 8px;
    border-radius: 12px;
  }
  .qwf-iw-target-calc code,
  .qwf-iw-target-calc strong { font-size: .75rem; }
  .qwf-iw-target-calc strong { padding: 5px; border-radius: 8px; }
  .qwf-iw-logic code { padding: 6px 4px; font-size: .75rem; }
  .qwf-iw-witness-board { gap: 6px; }
  .qwf-iw-witness-head { padding: 6px 8px; font-size: .75rem; }
  .qwf-iw-witness-grid { gap: 5px; }
  .qwf-iw-witness-card {
    gap: 5px;
    padding: 7px 8px;
    border-radius: 11px;
  }
  .qwf-iw-witness-card header { gap: 4px; font-size: .75rem; }
  .qwf-iw-witness-card header code,
  .qwf-iw-option-expression { font-size: .75rem; }
  .qwf-iw-evidence { gap: 4px; padding: 7px; border-radius: 11px; }
  .qwf-iw-evidence code { padding: 5px; font-size: .75rem; }
  .qwf-iw-option .qwf-eq { font-size: .75rem; }
  .qw-flow--iw .qwf-clue-chip strong { font-size: .75rem; }
  .qw-flow--iw .qwf-verdict { font-size: .75rem; }
  .qw-flow--iw .qwf-rh-source code,
  .qw-flow--iw .qwf-rh-fraction code,
  .qw-flow--iw .qwf-rh-cancel-work code,
  .qw-flow--iw .qwf-rh-gate,
  .qw-flow--iw .qwf-rh-survivor,
  .qw-flow--iw .qwf-lr-answer-step code,
  .qw-flow--iw .qwf-recap-chip {
    font-size: .75rem;
  }
  .qw-flow--iw .qwf-proof {
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: .75rem;
    line-height: 1.3;
    letter-spacing: -.03em;
  }
  .qw-flow--df .qwf-title { font-size: 1rem; }
  .qw-flow--df .qwf-sub { font-size: .75rem; line-height: 1.5; }
  .qw-flow--df .qwf-scene:not([data-scene-id="answer"]) {
    padding-bottom: 64px;
  }
  .qw-flow--df .qwf-more {
    bottom: 10px;
  }
  .qwf-df-target {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .qwf-df-target > span { display: none; }
  .qwf-df-target small,
  .qwf-df-target code,
  .qwf-df-rule-condition,
  .qwf-df-spike-claim,
  .qwf-df-relation code,
  .qwf-df-rule-option .qwf-card-head,
  .qwf-df-rule-option .qwf-eq,
  .qwf-df-verdict-option .qwf-card-head,
  .qwf-df-verdict-option .qwf-eq,
  .qw-flow--df .qwf-verdict,
  .qw-flow--df .qwf-rh-source code,
  .qw-flow--df .qwf-rh-cancel-work code,
  .qw-flow--df .qwf-rh-gate,
  .qw-flow--df .qwf-rh-survivor,
  .qw-flow--df .qwf-lr-answer-step code,
  .qw-flow--df .qwf-proof,
  .qw-flow--df .qwf-recap-chip {
    font-size: .75rem;
  }
  .qwf-df-rule-option .qwf-card-letter,
  .qwf-df-rule-option .qwf-card-letter strong,
  .qw-flow--df .qwf-clue-chip strong {
    font-size: .75rem;
  }
  .qwf-df-rule {
    gap: 6px;
    padding: 8px;
    border-radius: 13px;
  }
  .qwf-df-rule-condition,
  .qwf-df-spike-claim {
    padding: 7px 8px;
    border-radius: 9px;
  }
  .qwf-df-rule-option,
  .qwf-df-verdict-option {
    min-height: 52px;
  }
  .qwf-df-relation {
    gap: 4px;
    padding: 7px 8px;
    border-radius: 11px;
  }
  .qwf-df-relation > span { font-size: .9rem; }
  .qwf-df-plot-card {
    padding: 4px;
    border-radius: 13px;
  }
  .qwf-df-plot-card .qw-guide-plot {
    height: 170px;
  }
  .qwf-df-hole-top {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: start;
    gap: 5px;
  }
  .qwf-df-hole-top .qwf-rh-cancel {
    height: auto;
  }
  .qwf-df-hole-plot .qw-guide-plot {
    height: 150px;
  }
  .qwf-df-verdict-options { gap: 5px; }
  .qw-flow--df .qw-guide-label {
    font-size: 12px;
  }
  .qw-flow--df .qwf-proof {
    white-space: nowrap;
    overflow-wrap: normal;
    line-height: 1.3;
    letter-spacing: -.03em;
  }
  .qw-flow--df .qwf-ctas > * {
    min-height: 48px !important;
    height: 48px !important;
    font-size: .75rem !important;
  }
  .qw-flow--cf .qwf-title { font-size: 1.02rem; }
  .qw-flow--cf .qwf-sub { font-size: .69rem; }
  .qwf-cf-common,
  .qwf-cf-factor-panel,
  .qwf-cf-cancel {
    gap: 6px;
    padding: 9px 10px;
    border-radius: 13px;
  }
  .qwf-cf-common {
    grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.1fr);
  }
  .qwf-cf-top-pair { gap: 4px; }
  .qwf-cf-top-pair code,
  .qwf-cf-fraction code,
  .qwf-cf-factor-chain code,
  .qwf-cf-match-row code,
  .qwf-cf-cancel-fraction code,
  .qwf-cf-survivor,
  .qwf-cf-substitute code,
  .qwf-cf-substitute strong,
  .qw-flow--cf .qwf-lr-answer-step code,
  .qw-flow--cf .qwf-proof,
  .qw-flow--cf .qwf-recap-chip,
  .qwf-cf-answer-near small,
  .qwf-cf-gate {
    font-size: .68rem;
  }
  .qwf-cf-factor-chain {
    gap: 4px;
  }
  .qwf-cf-factor-chain code {
    padding: 7px 5px;
    border-radius: 9px;
  }
  .qwf-cf-match-row {
    gap: 5px;
  }
  .qwf-cf-match-row span {
    padding: 5px 6px;
    border-radius: 9px;
  }
  .qwf-cf-cancel-work {
    gap: 6px;
  }
  .qwf-cf-cancel-fraction {
    gap: 4px;
  }
  .qwf-cf-survivor {
    padding: 7px;
    border-radius: 9px;
  }
  .qwf-cf-substitute {
    gap: 4px;
    padding: 7px;
    border-radius: 11px;
  }
  .qwf-cf-substitute strong {
    padding: 5px;
    border-radius: 8px;
  }
  .qwf-cf-answer-near {
    gap: 4px;
  }
  .qwf-cf-answer-near small {
    padding: 3px 4px;
  }
  .qw-flow--cf .qwf-answer-copy {
    padding: 2px 8px 20px;
  }
  .qw-flow--cf .qwf-lr-answer-step.is-final code { font-size: .72rem; }
  .qw-flow--cf .qwf-ctas > * { font-size: .7rem !important; }
  .qw-flow--as .qwf-title { font-size: 1.02rem; }
  .qw-flow--as .qwf-sub { font-size: .69rem; }
  .qwf-as-square-panel,
  .qwf-as-distance-panel,
  .qwf-as-cancel {
    gap: 5px;
    padding: 8px 9px;
    border-radius: 13px;
  }
  .qwf-as-square-panel {
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, .8fr);
    padding-bottom: 15px;
  }
  .qwf-as-square-panel code,
  .qwf-as-distance-identity code {
    padding: 7px 5px;
    border-radius: 9px;
    font-size: .68rem;
  }
  .qwf-as-flow-arrow { font-size: .72rem; }
  .qwf-as-distance-identity { gap: 4px; }
  .qwf-as-line { max-height: 104px; }
  .qwf-as-distance-labels text,
  .qwf-as-approach-labels text { font-size: 13px; }
  .qwf-as-tick-label { font-size: 13px; }
  .qwf-as-cancel-work { gap: 5px; }
  .qwf-as-cancel-fraction { gap: 4px; }
  .qwf-as-num { gap: 2px; }
  .qwf-as-num code,
  .qwf-as-den code,
  .qwf-as-survivor,
  .qwf-as-limit-result,
  .qw-flow--as .qwf-lr-answer-step code,
  .qw-flow--as .qwf-proof,
  .qw-flow--as .qwf-recap-chip,
  .qwf-as-answer-near small,
  .qwf-as-gate {
    font-size: .68rem;
  }
  .qwf-as-survivor {
    padding: 7px;
    border-radius: 9px;
  }
  .qwf-as-compare {
    gap: 4px;
  }
  .qwf-as-compare .qwf-as-line {
    padding: 0 4px;
    border-radius: 12px;
  }
  .qwf-as-limit-result {
    padding: 4px 8px;
  }
  .qwf-as-answer-near { gap: 4px; }
  .qwf-as-answer-near small { padding: 3px 4px; }
  .qw-flow--as .qwf-lr-answer-step.is-final code { font-size: .72rem; }
  .qw-flow--as .qwf-ctas > * { font-size: .7rem !important; }
  .qw-flow--pl .qwf-scene { padding: 10px 0; }
  .qw-flow--pl .qwf-story-row { gap: 4px; padding: 4px 2px; }
  .qw-flow--pl .qwf-title { font-size: 1.02rem; }
  .qw-flow--pl .qwf-sub {
    margin-top: 3px;
    font-size: .69rem;
    line-height: 1.42;
  }
  .qw-flow--pl[lang="ckb"] .qwf-sub { line-height: 1.58; }
  .qw-flow--pl .qwf-question-card { gap: 8px; padding: 8px 10px; }
  .qw-flow--pl .qwf-question-number {
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }
  .qw-flow--pl .qwf-question-text { font-size: .7rem; line-height: 1.42; }
  .qwf-pl-graph-card {
    width: min(318px, 100%);
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 5px;
    border-radius: 14px;
  }
  .qwf-pl-plot {
    max-height: 198px;
    border-radius: 9px;
  }
  .qwf-pl-branch { stroke-width: 4.5; }
  .qwf-pl-trace { stroke-width: 7; }
  .qwf-pl-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .qwf-pl-legend > div {
    gap: 1px 5px;
    padding: 6px 7px;
    border-radius: 9px;
  }
  .qwf-pl-legend i {
    width: 11px;
    height: 11px;
    border-width: 2px;
  }
  .qwf-pl-legend span { font-size: .66rem; }
  .qwf-pl-legend code { font-size: .66rem; }
  .qwf-pl-readings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .qwf-pl-reading {
    padding: 6px 5px;
    border-radius: 9px;
    font-size: .66rem;
  }
  .qwf-pl-readings .qwf-pl-reading:only-child {
    grid-column: 1 / -1;
  }
  .qwf-pl-merge {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "rows" "result";
    gap: 5px;
    padding: 7px 8px;
    border-radius: 12px;
  }
  .qwf-pl-merge .qwf-construct-eyebrow { font-size: .66rem; }
  .qwf-pl-merge-rows { gap: 5px; }
  .qwf-pl-merge-row {
    padding: 5px 4px;
    border-radius: 8px;
    font-size: .66rem;
  }
  .qwf-pl-merge-result {
    gap: 5px;
    padding: 5px 6px;
    border-radius: 8px;
    font-size: .66rem;
  }
  .qwf-pl-merge-result code { font-size: .68rem; }
  .qwf-pl-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .qwf-pl-option {
    min-height: 54px;
    padding-bottom: 4px;
    border-radius: 10px;
  }
  .qwf-pl-option .qwf-card-head {
    min-height: 27px;
    padding: 3px 5px;
  }
  .qwf-pl-option .qwf-card-letter { font-size: .66rem; }
  .qwf-pl-option .qwf-verdict { padding: 2px 4px; font-size: .66rem; }
  .qwf-pl-option-claim { padding: 3px 4px; font-size: .68rem; }
  .qw-flow--pl .qwf-answer-figure {
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    padding: 4px;
  }
  .qw-flow--pl .qwf-lr-answer-step code,
  .qw-flow--pl .qwf-proof,
  .qw-flow--pl .qwf-recap-chip { font-size: .66rem; }
  .qw-flow--pl .qwf-proof { line-height: 1.25; white-space: nowrap; }
  .qw-flow--pl .qwf-lr-answer-step.is-final code { font-size: .7rem; }
  .qw-flow--pl .qwf-ctas > * {
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
  }

  /* Tangency reuses the piecewise merge board and the inverse-pair answer
     lane. Keep their shared primitives at the series 12px floor and contain
     the three-column conclusion inside the rounded answer surface. */
  .qw-flow--td .qwf-pl-merge .qwf-construct-eyebrow,
  .qw-flow--td .qwf-pl-merge-row,
  .qw-flow--td .qwf-pl-merge-result,
  .qw-flow--td .qwf-pl-merge-result code {
    font-size: .75rem;
  }
  .qw-flow--td .qwf-answer-copy,
  .qw-flow--td .qwf-proof,
  .qw-flow--td .qwf-ctas {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .qw-flow--td .qwf-proof {
    padding-inline: 7px;
    letter-spacing: -.02em;
  }
  .qw-flow--td .qwf-ctas > * {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  /* Q24 composes the established symmetry, witness, merge, and rewrite
     primitives. Stack the shared algebra rows on narrow screens so every
     formula remains an atomic, readable LTR run at the series 12px floor. */
  .qw-flow--sd .qwf-title { font-size: 1.02rem; }
  .qw-flow--sd .qwf-question-kicker,
  .qw-flow--sd .qwf-kicker,
  .qw-flow--sd .qwf-answer-state,
  .qw-flow--sd .qwf-sub,
  .qw-flow--sd .qwf-question-text,
  .qw-flow--sd .qwf-construct-eyebrow,
  .qw-flow--sd .qwf-lr-option .qwf-card-head,
  .qw-flow--sd .qwf-lr-option .qwf-eq,
  .qw-flow--sd .qwf-lr-option .qwf-verdict,
  .qw-flow--sd .qwf-lr-answer-step > span,
  .qw-flow--sd .qwf-lr-answer-step code,
  .qw-flow--sd .qwf-recap-chip,
  .qw-flow--sd .qwf-proof,
  .qw-flow--sd .qwf-clue-chip strong,
  .qw-flow--sd .qwf-clue-chip > span:last-child > span,
  .qw-flow--sd .qwf-iw-witness-card header,
  .qw-flow--sd .qwf-iw-witness-card code,
  .qw-flow--sd .qwf-pl-merge .qwf-construct-eyebrow,
  .qw-flow--sd .qwf-pl-merge-row,
  .qw-flow--sd .qwf-pl-merge-result,
  .qw-flow--sd .qwf-pl-merge-result code {
    font-size: .75rem;
  }
  .qw-flow--sd .qwf-answer-grid,
  .qw-flow--sd .qwf-answer-figure,
  .qw-flow--sd .qwf-lr-answer-figure,
  .qw-flow--sd .qwf-answer-copy,
  .qw-flow--sd .qwf-proof,
  .qw-flow--sd .qwf-ctas {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .qw-flow--sd .qwf-answer-figure {
    padding-inline: 6px;
  }
  .qw-flow--sd .qwf-lr-answer-step {
    min-width: 0;
    overflow: hidden;
  }
  .qw-flow--sd .qwf-lr-answer-step code {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .qw-flow--sd .qwf-pl-merge-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .qw-flow--sd .qwf-pl-merge-row,
  .qw-flow--sd .qwf-pl-merge-result code,
  .qw-flow--sd .qwf-lr-option .qwf-eq {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .qw-flow--sd .qwf-lr-option .qwf-eq {
    margin-inline: 4px;
    letter-spacing: -.02em;
  }
  .qw-flow--sd .qwf-ei-derivative {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    text-align: center;
  }
  .qw-flow--sd .qwf-ei-derivative code,
  .qw-flow--sd .qwf-ei-derivative strong {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .qw-flow--sd .qwf-ei-derivative > span {
    transform: rotate(90deg);
  }
  .qw-flow--sd .qwf-answer-copy {
    padding-inline: 8px;
  }
  .qw-flow--sd .qwf-answer-headline h3 {
    font-size: 1rem;
  }
  .qw-flow--sd .qwf-recap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 5px;
  }
  .qw-flow--sd .qwf-recap-arrow {
    display: none;
  }
  .qw-flow--sd .qwf-recap-chip {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .qw-flow--sd .qwf-proof {
    padding-inline: 7px;
    white-space: nowrap;
    overflow-wrap: normal;
    letter-spacing: -.035em;
    line-height: 1.3;
  }
  .qw-flow--lr.qw-flow--sd .qwf-ctas {
    display: grid;
    grid-template-columns:
      minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .95fr);
    gap: 5px;
  }
  .qw-flow--lr.qw-flow--sd .qwf-ctas > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: .75rem !important;
    white-space: nowrap;
  }

  /* Product symmetry uses the same compact algebra, parity and answer
     primitives as Q24. Keep each formula atomic while the two product-rule
     contributions stack into one readable mobile ledger. */
  .qw-flow--ps .qwf-title { font-size: 1.02rem; }
  .qw-flow--ps .qwf-question-kicker,
  .qw-flow--ps .qwf-kicker,
  .qw-flow--ps .qwf-answer-state,
  .qw-flow--ps .qwf-sub,
  .qw-flow--ps .qwf-question-text,
  .qw-flow--ps .qwf-construct-eyebrow,
  .qw-flow--ps .qwf-lr-option .qwf-card-head,
  .qw-flow--ps .qwf-lr-option .qwf-eq,
  .qw-flow--ps .qwf-lr-option .qwf-verdict,
  .qw-flow--ps .qwf-lr-answer-step > span,
  .qw-flow--ps .qwf-lr-answer-step code,
  .qw-flow--ps .qwf-recap-chip,
  .qw-flow--ps .qwf-proof,
  .qw-flow--ps .qwf-clue-chip strong,
  .qw-flow--ps .qwf-clue-chip > span:last-child > span,
  .qw-flow--ps .qwf-pl-merge .qwf-construct-eyebrow,
  .qw-flow--ps .qwf-pl-merge-row,
  .qw-flow--ps .qwf-pl-merge-result,
  .qw-flow--ps .qwf-pl-merge-result code {
    font-size: .75rem;
  }
  .qw-flow--ps .qwf-answer-grid,
  .qw-flow--ps .qwf-answer-figure,
  .qw-flow--ps .qwf-lr-answer-figure,
  .qw-flow--ps .qwf-answer-copy,
  .qw-flow--ps .qwf-proof,
  .qw-flow--ps .qwf-ctas {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .qw-flow--ps .qwf-answer-figure {
    padding-inline: 6px;
  }
  .qw-flow--ps .qwf-lr-answer-step {
    min-width: 0;
    overflow: hidden;
  }
  .qw-flow--ps .qwf-lr-answer-step code,
  .qw-flow--ps .qwf-pl-merge-row,
  .qw-flow--ps .qwf-pl-merge-result code,
  .qw-flow--ps .qwf-lr-option .qwf-eq,
  .qw-flow--ps [data-ps-decode] code,
  .qw-flow--ps [data-sd-parity] code,
  .qw-flow--ps [data-ps-mirror] code,
  .qw-flow--ps .qwf-ei-derivative code,
  .qw-flow--ps .qwf-ei-derivative strong {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .qw-flow--ps .qwf-pl-merge-rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .qw-flow--ps .qwf-lr-option .qwf-eq {
    margin-inline: 4px;
    letter-spacing: -.02em;
  }
  .qw-flow--ps .qwf-lr-option .qwf-card-head {
    min-width: 0;
    align-items: flex-start;
  }
  .qw-flow--ps .qwf-lr-option .qwf-verdict {
    min-width: 0;
    max-width: 100%;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .qw-flow--ps .qwf-ei-derivative {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    text-align: center;
  }
  .qw-flow--ps .qwf-ei-derivative > span {
    transform: rotate(90deg);
  }
  .qw-flow--ps .qwf-answer-copy {
    padding-inline: 8px;
  }
  .qw-flow--ps .qwf-answer-headline h3 {
    font-size: 1rem;
  }
  .qw-flow--ps .qwf-recap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 5px;
  }
  .qw-flow--ps .qwf-recap-arrow {
    display: none;
  }
  .qw-flow--ps .qwf-recap-chip {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .qw-flow--ps .qwf-proof {
    padding-inline: 7px;
    white-space: nowrap;
    overflow-wrap: normal;
    letter-spacing: -.035em;
    line-height: 1.3;
  }
  .qw-flow--lr.qw-flow--ps .qwf-ctas {
    display: grid;
    grid-template-columns:
      minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .95fr);
    gap: 5px;
  }
  .qw-flow--lr.qw-flow--ps .qwf-ctas > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: .75rem !important;
    white-space: nowrap;
  }

  /* Q26 composes existing algebra panels; these are containment adjustments,
     not a parallel primitive. Keep every formula legible and atomic on the
     narrow Safari viewport while allowing the long distractor label to wrap
     inside, never outside, its own card. */
  .qw-flow--idp .qwf-title { font-size: 1.02rem; }
  .qw-flow--idp .qwf-question-kicker,
  .qw-flow--idp .qwf-kicker,
  .qw-flow--idp .qwf-answer-state,
  .qw-flow--idp .qwf-sub,
  .qw-flow--idp .qwf-question-text,
  .qw-flow--idp .qwf-lr-option .qwf-card-head,
  .qw-flow--idp .qwf-lr-option .qwf-eq,
  .qw-flow--idp .qwf-lr-option .qwf-verdict,
  .qw-flow--idp .qwf-lr-answer-step > span,
  .qw-flow--idp .qwf-lr-answer-step code,
  .qw-flow--idp .qwf-recap-chip,
  .qw-flow--idp .qwf-proof,
  .qw-flow--idp .qwf-cp-note,
  .qw-flow--idp .qwf-clue-chip strong,
  .qw-flow--idp .qwf-clue-chip > span:last-child > span,
  .qw-flow--idp .qwf-ei-reduce code,
  .qw-flow--idp .qwf-ei-reduce strong,
  .qw-flow--idp .qwf-ei-derivative code,
  .qw-flow--idp .qwf-ei-derivative strong {
    font-size: .75rem;
  }
  .qw-flow--idp .qwf-ei-reduce code,
  .qw-flow--idp .qwf-ei-reduce strong,
  .qw-flow--idp .qwf-ei-derivative code,
  .qw-flow--idp .qwf-ei-derivative strong,
  .qw-flow--idp .qwf-lr-option .qwf-eq,
  .qw-flow--idp .qwf-lr-answer-step code {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .qw-flow--idp .qwf-lr-option {
    min-width: 0;
  }
  .qw-flow--idp .qwf-lr-option .qwf-card-head {
    min-width: 0;
    align-items: flex-start;
  }
  .qw-flow--idp .qwf-lr-option .qwf-verdict {
    min-width: 0;
    max-width: 100%;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .qw-flow--idp .qwf-answer-grid,
  .qw-flow--idp .qwf-answer-figure,
  .qw-flow--idp .qwf-lr-answer-figure,
  .qw-flow--idp .qwf-answer-copy,
  .qw-flow--idp .qwf-proof,
  .qw-flow--idp .qwf-ctas {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .qw-flow--idp .qwf-answer-figure {
    padding-inline: 6px;
  }
  .qw-flow--idp .qwf-lr-answer-step {
    min-width: 0;
    overflow: hidden;
  }
  .qw-flow--idp .qwf-answer-copy {
    padding-inline: 8px;
  }
  .qw-flow--idp .qwf-answer-headline h3 {
    font-size: 1rem;
  }
  .qw-flow--idp .qwf-proof {
    padding-inline: 7px;
    white-space: nowrap;
    overflow-wrap: normal;
    letter-spacing: -.025em;
    line-height: 1.3;
  }
  .qw-flow--lr.qw-flow--idp .qwf-ctas {
    display: grid;
    grid-template-columns:
      minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, .95fr);
    gap: 5px;
  }
  .qw-flow--lr.qw-flow--idp .qwf-ctas > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px !important;
    font-size: .75rem !important;
    line-height: 1.15 !important;
    white-space: nowrap;
  }
}

/* reduced motion: everything settled, gentle snapping */
@media (prefers-reduced-motion: reduce) {
  .quick-walkthrough.qw-flow--fr { scroll-snap-type: y proximity; }
  .qwf-fx, .qwf-verdict, .qwf-dot-g, .qwf-angle-g, .qwf-c-dot, .qwf-c-label,
  .qwf-fh-region, .qwf-fh-conflict, .qwf-fh-src, .qwf-fh-orig, .qwf-fh-tgt,
  .qwf-fh-w, .qwf-fh-endg, .qwf-fh-end, .qwf-fh-hop,
  .qwf-eq-sub, .qwf-tp-dot, .qwf-tp-lineg text,
  .qwf-rt-card, .qwf-rt-arrow, .qwf-rt-trap, .qwf-rt-dot,
  .qwf-di-test-row, .qwf-di-region, .qwf-di-axis, .qwf-di-claim,
  .qwf-dw-end, .qwf-dw-witness, .qwf-dw-marker, .qwf-dw-highlight,
  .qwf-dwt-gate-grid article, .qwf-dwt-search,
  .qwf-dwt-final-options article,
  .qwf-dwi-answer-state article,
  .qwf-pr-branch, .qwf-pr-witness > *, .qwf-pr-end, .qwf-pr-arrow,
  .qwf-pr-option .qwf-verdict,
  .qwf-cp-overview article, .qwf-cp-step, .qwf-cp-arrow,
  .qwf-cp-option .qwf-verdict,
  .qwf-cs-point, .qwf-cs-option, .qwf-cs-option .qwf-verdict,
  .qwf-bp-row, .qwf-bp-note, .qwf-bp-band circle,
  .qwf-bp-option, .qwf-bp-option .qwf-verdict,
  .qwf-rh-square, .qwf-rh-factor-identity, .qwf-rh-pair i,
  .qwf-rh-source, .qwf-rh-down, .qwf-rh-fraction,
  .qwf-rh-gate, .qwf-rh-survivor, .qwf-rh-substitute,
  .qwf-rh-cancel-fraction .is-cancel::after,
  .qwf-cf-top-pair, .qwf-cf-fraction, .qwf-cf-factor-chain code,
  .qwf-cf-match-row,
  .qwf-cf-gate, .qwf-cf-survivor, .qwf-cf-substitute,
  .qwf-cf-cancel-fraction .is-cancel::after,
  .qwf-as-square-panel code, .qwf-as-factor-pair,
  .qwf-as-factor-pair i, .qwf-as-distance-identity code,
  .qwf-as-distance-labels, .qwf-as-approach-labels,
  .qwf-as-side-points, .qwf-as-gate, .qwf-as-survivor,
  .qwf-as-limit-result, .qwf-as-cancel-fraction .is-cancel::after,
  .qwf-bp-limit-chain code, .qwf-bp-answer-chain code,
  .qwf-gvs-height-mark circle, .qwf-gvs-height-mark text,
  .qwf-gvs-slope-mark circle, .qwf-gvs-slope-mark text,
  .qwf-gvs-calc-rows code, .qwf-gvs-result,
  .qwf-gvs-option, .qwf-gvs-option .qwf-verdict,
  .qwf-lr-diagnostic, .qwf-lr-identity-row, .qwf-lr-factor-line,
  .qwf-lr-rewrite-result, .qwf-lr-denominator, .qwf-lr-match,
  .qwf-lr-known, .qwf-lr-option, .qwf-lr-option .qwf-verdict,
  .qwf-ei-domain > div, .qwf-ei-law-rule, .qwf-ei-law-application,
  .qwf-ei-factor-row code, .qwf-ei-split-result,
  .qwf-ei-reduction-grid article, .qwf-ei-linear, .qwf-ei-derivative,
  .qwf-iw-target > div, .qwf-iw-target-calc, .qwf-iw-logic,
  .qwf-iw-witness-card,
  .qwf-df-rule-condition, .qwf-df-rule-option, .qwf-df-relation,
  .qwf-df-spike-claim, .qw-flow--df .qw-guide-line,
  .qw-flow--df .qw-guide-label, .qw-flow--df .qw-guide-point,
  .qwf-pl-reading-link, .qwf-pl-reading,
  .qwf-pl-merge-row, .qwf-pl-merge-result,
  .qwf-pl-option, .qwf-pl-option .qwf-verdict,
  .qwf-bd-gap, .qwf-bd-lane-label, .qwf-bd-interval,
  .qwf-bd-lanes-result, .qwf-bd-option, .qwf-bd-option .qwf-verdict,
  .qwf-dg-band, .qwf-dg-plot-label, .qwf-dg-reading,
  .qwf-dg-option, .qwf-dg-option .qwf-verdict,
  .qwf-dl-role, .qwf-dl-root, .qwf-dl-span, .qwf-dl-height,
  .qwf-dl-option, .qwf-dl-option .qwf-verdict,
  .qwf-dp-probe, .qwf-dp-option, .qwf-dp-option .qwf-verdict,
  .qwf-am-shape, .qwf-am-area, .qwf-am-bound,
  .qwf-am-option, .qwf-am-option .qwf-verdict,
  .qwf-av-rail-row, .qwf-av-probe,
  .qwf-av-option, .qwf-av-option .qwf-verdict,
  .qwf-ab-area, .qwf-ab-box,
  .qwf-ab-option, .qwf-ab-option .qwf-verdict,
  .qwf-il-arc,
  .qwf-il-option, .qwf-il-option .qwf-verdict,
  .qwf-dr-curve, .qwf-dr-negative, .qwf-dr-tail,
  .qwf-dr-option, .qwf-dr-option .qwf-verdict,
  .qwf-mv-area, .qwf-mv-mean,
  .qwf-mv-option, .qwf-mv-option .qwf-verdict,
  .qwf-sa-area, .qwf-sa-stretch,
  .qwf-sa-option, .qwf-sa-option .qwf-verdict,
  .qwf-ae-counted, .qwf-ae-strip,
  .qwf-ae-option, .qwf-ae-option .qwf-verdict,
  .qwf-bs-sign, .qwf-bs-root,
  .qwf-bs-option, .qwf-bs-option .qwf-verdict,
  .qwf-ce-map,
  .qwf-ce-option, .qwf-ce-option .qwf-verdict,
  .qwf-pt-forbidden, .qwf-pt-change, .qwf-pt-rise, .qwf-pt-mark,
  .qwf-pt-option, .qwf-pt-option .qwf-verdict {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .qw-flow--df .qw-guide-line {
    stroke-dashoffset: 0 !important;
  }
  .qwf-given, .qwf-c-given, .qwf-fh-given, .qwf-tp-line, .qwf-di-curve,
  .qwf-dw-domain-line, .qwf-dw-marker line, .qwf-dw-highlight line,
  .qwf-pr-range-line,
  .qwf-cs-line, .qwf-cs-vector, .qwf-cs-miss,
  .qwf-bp-band line, .qwf-gvs-curve,
  .qwf-gvs-height-mark line, .qwf-gvs-slope-mark line,
  .qwf-pl-trace,
  .qwf-bd-lane,
  .qwf-dg-curve,
  .qwf-dl-curve,
  .qwf-dp-band {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .qwf-calc-row { opacity: 1 !important; }
  .qwf-clue { background-size: 100% 92% !important; }
  .qwf-more svg, .qwf-card.is-rejected::after { animation: none !important; }
  .qwf-nav-btn { transition: none !important; }
  .qwf-pc-vertical, .qwf-pc-origin { opacity: 1 !important; transition: none !important; }
  /* Reduced motion removes transitions, not information. Q17's exact-value
     chain must retain its pending/current/completed distinction. */
  .qw-flow--cv .qwf-cp-step.is-pending,
  .qw-flow--cv .qwf-cp-arrow.is-pending {
    opacity: .28 !important;
  }
  /* A cancellation slash communicates algebra, not motion. Preserve its
     settled diagonal geometry while disabling its transition. */
  .qw-flow--cf .qwf-cf-cancel-fraction .is-cancel::after {
    transform: rotate(-10deg) scaleX(1) !important;
  }
  .qwf-as-distance-paths path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  [data-as-distance] .qwf-as-side-point {
    transform: none !important;
  }
  [data-as-shrink] .qwf-as-side-point {
    transform: translateX(var(--as-move)) !important;
  }
  .qw-flow--as .qwf-as-cancel-fraction .is-cancel::after {
    transform: rotate(-10deg) scaleX(1) !important;
  }
}

/* Direction is information, not motion. On the mobile rate board the cards
   stack vertically, so reduced-motion mode must retain the settled downward
   connector while still disabling its transition above. */
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .qwf-rt-arrow { transform: rotate(90deg) !important; }
  [dir="rtl"] .qwf-rt-arrow { transform: rotate(-90deg) !important; }
}

/* Mobile reading mode: while an explanation is open (quick walkthrough or
   long explanation) the chrome disappears entirely. One small handle —
   question number + a down arrow — floats at the top edge; tapping it
   brings the full header back for three seconds. */
.read-handle { display: none; }

@media (max-width: 999px) {
  body.explanation-reading:not(.explanation-header-expanded) .page-header,
  body.explanation-reading:not(.explanation-header-expanded) .hamburger-btn,
  body.explanation-reading:not(.explanation-header-expanded) .q-mini {
    display: none;
  }

  body.explanation-reading:not(.explanation-header-expanded) .read-handle {
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    inset-inline-end: 10px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border: 0;
    border-radius: 12px;
    color: var(--text-muted);
    background: var(--bg);
    box-shadow: var(--shadow-raised-sm);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    cursor: pointer;
    animation: read-handle-in 260ms var(--ease-out, ease) backwards;
  }

  .read-handle svg { opacity: 0.7; }
  .read-handle__num { color: var(--text-primary); }

  @keyframes read-handle-in {
    from { opacity: 0; transform: translateY(-6px); }
  }

  /* Content reclaims the whole header band. */
  body.explanation-reading .question-container.is-quick-walkthrough {
    padding-top: 0;
  }

  body.explanation-reading .question-container.is-quick-walkthrough .qw-shell {
    padding-top: 0;
  }

  /* Guided decks size from a fixed header offset; with the header gone the
     deck owns the viewport. (The fast-route deck measures its own offset.) */
  body.explanation-reading:not(.explanation-header-expanded) .quick-walkthrough.qw-flow:not(.qw-flow--fr) {
    height: calc(100svh - 10px);
  }

  body.explanation-reading .qw-question,
  body.explanation-reading .qw-story__title {
    scroll-margin-top: 12px;
  }
}

@media (max-width: 640px) {
  /* Fit the explicit CKB label inside the existing equal-width action cell.
     Only the glyph metrics change; the button and row geometry stay fixed. */
  [dir="rtl"] .qwf-cta-outline.js-qw-full {
    font-size: .68rem !important;
    letter-spacing: -.01em;
  }
}

/* ══════════════════════════════════════════
   CKB TYPOGRAPHY SAFEGUARDS
   Arabic-script copy must not inherit Latin display treatments. These are
   intentionally explicit UI-copy selectors: formulae, codes, brand marks,
   option letters, and graph/SVG labels keep their existing metrics.
   ══════════════════════════════════════════ */
html[lang="ckb"] :is(
  #examTitle,
  .menu-label,
  .unlock-chip,
  .unlock-sheet__title,
  .insight-card__label,
  .expl-section__label,
  .curiosity-type-tag,
  .symbol-table th,
  .bridge-card__concept,
  .metaphor-card__concept,
  .decode-card__label,
  .sym-panel__mlabel,
  .why-bridge__concept,
  .explore__label,
  .jtile__tag,
  .try-card__label,
  .dk-kicker,
  .dk-graph__cap .dk-cap-k,
  .dk-dict__title,
  .dk-decode__tag,
  .dk-decode__metaphor b,
  .dk-tricky__label,
  .dk-act__title,
  .xp-label,
  .glossary-drawer__field-label,
  .glossary-title,
  .menu-access__label,
  .question-issue__headline,
  .tour-title
) {
  font-family: "Noto Sans Arabic", "Outfit", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

html[lang="ckb"] .quick-walkthrough :is(
  .qw-question__kicker,
  .qw-story__kicker,
  .qw-eyebrow,
  .qw-clue strong,
  .qw-clue small,
  .qw-verdict,
  .qw-btn--outline.js-qw-full,
  .qw-guide-coordinate-point__label,
  .qwf-question-kicker,
  .qwf-kicker,
  .qwf-clue-chip strong,
  .qwf-clue-chip > span:last-child > span,
  .qwf-verdict,
  .qwf-cta-outline.js-qw-full,
  .qwf-construct-eyebrow,
  .qwf-bp-eyebrow,
  .qwf-rt-label,
  .qwf-cp-step-label,
  .qwf-cp-pipeline-head > span,
  .qwf-cp-option header > span,
  [data-cp-value-answer-label]
) {
  font-family: "Noto Sans Arabic", "Outfit", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

/* Renderer contract for payload values that combine Kurdish prose and math.
   Pure-math rows do not receive these classes and therefore remain LTR/mono. */
html[lang="ckb"] .quick-walkthrough .is-localized-mixed,
html[lang="ckb"] .quick-walkthrough .qw-bidi-text {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
  font-family: "Noto Sans Arabic", "Outfit", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

html[lang="ckb"] .quick-walkthrough :is(
  .is-localized-mixed,
  .qw-bidi-text
) .qw-math-run {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  letter-spacing: normal;
  text-transform: none;
}

/* Only SVG text explicitly marked as localized copy gets the Arabic stack.
   Axes, ticks, equations, variables, and coordinate labels stay untouched. */
html[lang="ckb"] .quick-walkthrough svg text[lang="ckb"] {
  font-family: "Noto Sans Arabic", "Outfit", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}

html[lang="ckb"] :is(.qw-proof, .qwf-proof).is-localized-mixed {
  display: block;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="ckb"] .localized-price__unit {
  font-family: "Noto Sans Arabic", "Outfit", sans-serif;
  letter-spacing: normal;
  text-transform: none;
}