/* Worked examples inherit Oddly's typography and both color themes. */
body[data-path^="/writing/quality-flywheel/"] .prose { --quality-line:var(--border, #8290a84d); }
body[data-path^="/writing/quality-flywheel/"] .case-record { padding:24px; margin:32px 0; border:1px solid var(--quality-line); border-radius:10px; background:color-mix(in srgb, currentColor 3%, transparent); }
body[data-path^="/writing/quality-flywheel/"] .case-label { font-size:13px; font-weight:600; letter-spacing:.03em; margin:0 0 18px; }
.case-record dl { display:grid; grid-template-columns:145px minmax(0,1fr); gap:14px 22px; font-size:16px; line-height:1.65; }
.case-record dt { font-weight:600; }
.case-record dd { margin:0; }
body[data-path^="/writing/quality-flywheel/"] .case-record p:last-child { margin-bottom:0; }
body[data-path^="/writing/quality-flywheel/"] .table-wrap { overflow-x:auto; margin:30px 0; }
body[data-path^="/writing/quality-flywheel/"] table { width:100%; min-width:480px; border-collapse:collapse; font-size:16px; line-height:1.6; }
body[data-path^="/writing/quality-flywheel/"] th,body[data-path^="/writing/quality-flywheel/"] td { padding:14px 12px; border-bottom:1px solid var(--quality-line); text-align:left; vertical-align:top; }
body[data-path^="/writing/quality-flywheel/"] caption { text-align:left; font-size:14px; padding-bottom:12px; }
.interactive { padding:25px; border:1px solid var(--quality-line); border-radius:10px; margin:34px 0; background:color-mix(in srgb, currentColor 3%, transparent); }
.interactive .figure-kicker { font-size:13px; font-weight:600; }
.interactive p { font-size:16px; }
.interactive label { display:flex; justify-content:space-between; gap:18px; align-items:center; font-size:15px; font-weight:600; }
.interactive input { width:100%; accent-color:var(--accent,#315ecd); margin:20px 0 24px; cursor:pointer; }
.interactive input:focus-visible { outline:2px solid var(--accent,#315ecd); outline-offset:5px; }
.bar-row { display:grid; grid-template-columns:65px minmax(0,1fr) 54px; gap:12px; align-items:center; font-size:14px; margin:14px 0; }
.bar-track { height:16px; background:color-mix(in srgb, currentColor 12%, transparent); }
.bar { height:100%; background:#6687cf; }
.bar.amber { background:#b68a4a; }
.bar-row output { text-align:right; font-variant-numeric:tabular-nums; }
.interactive .lab-result { margin:23px 0 15px; font-weight:600; }
.interactive .small { font-size:13px; line-height:1.6; margin:0; }
@media(max-width:600px) { .case-record dl { grid-template-columns:1fr; gap:4px; } .case-record dd { margin-bottom:14px; } .interactive { padding:20px 15px; } .bar-row { gap:8px; grid-template-columns:58px minmax(0,1fr) 50px; } }
@media print { .interactive input { display:none; } }