:root { color-scheme:only light; --text:#20211f; --muted:#6c7169; --border:#d8ddd5; --card:#fff; --soft:#f0f2ed; }
html,body { background:var(--bg); color:var(--ink); }
.examples-wrap,.examples-list { width:min(900px,calc(100% - 40px)); margin:auto; }
.examples-hero { padding:48px 0 28px; }
.examples-eyebrow,.example-category { color:var(--muted); font-size:.8rem; letter-spacing:.08em; }
.examples-hero h1 { margin:8px 0 16px; font-size:clamp(32px,6vw,52px); }
.examples-hero p { line-height:1.8; }
.examples-disclaimer,.example-notice,.note { color:var(--muted); font-size:.88rem; }
.examples-hero a { text-decoration:underline; text-underline-offset:3px; }
.examples-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:24px 0; }
.example-choice { width:100%; min-height:44px; padding:12px 16px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--text); text-align:left; font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.example-choice[aria-pressed="true"] { border-color:var(--review); background:var(--review-soft); box-shadow:inset 0 0 0 1px var(--review); }
#examplesReload { padding:9px 18px; border:1px solid var(--border); border-radius:24px; background:#fff; color:var(--text); font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid var(--review); outline-offset:3px; }
#examplesReload:disabled { opacity:.6; cursor:wait; }
.examples-list { padding-bottom:60px; }
.example-case { border:1px solid var(--border); border-radius:18px; background:#fff; overflow-wrap:anywhere; }
.example-case-head,.example-section { padding:26px 30px; }
.example-case-head { border-bottom:1px solid var(--border); }
.example-case-head h2 { font-size:clamp(24px,4vw,32px); margin:8px 0 16px; }
.example-section+.example-section { border-top:1px solid var(--border); }
.example-section > h3 { display:flex; align-items:flex-start; gap:12px; margin:0 0 20px; font-size:22px; line-height:1.5; }
/* Only the step number is fixed-size. Text labels can wrap and grow freely. */
.example-step { display:grid; place-items:center; flex:0 0 28px; height:28px; margin-top:3px; border-radius:8px; background:#252925; color:#fff; font-size:11px; }
.ui-example-label { min-width:0; flex:1; }
.example-source { white-space:pre-wrap; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--soft); line-height:1.85; }
.example-score { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
.example-score strong { font-size:48px; line-height:1.2; }
.example-section h4 { margin:28px 0 12px; font-size:18px; }
.example-section h5 { margin:12px 0; font-size:16px; }
.example-axes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 24px; }
.axishead { display:flex; justify-content:space-between; gap:12px; font-weight:700; }
.bar { height:9px; border-radius:99px; background:var(--border); overflow:hidden; margin:6px 0; }
.bar span { display:block; height:100%; background:#252925; }
.axis p { margin:8px 0 16px; white-space:pre-wrap; }
.example-attack { padding:20px 0; border-top:1px solid var(--border); }
.example-attack p,.example-prose { white-space:pre-wrap; line-height:1.8; }
.pill { display:inline-block; padding:2px 9px; margin-right:6px; border:1px solid var(--border); border-radius:99px; font-size:.78rem; }
.example-changes { padding:18px 22px; margin-bottom:22px; border:1px solid var(--border); border-radius:10px; background:var(--soft); }
.example-changes h4 { margin:0 0 10px; }
.example-changes ul { margin:0; }
.business-document__body { border:1px solid var(--border); border-radius:8px; }
.example-section li { line-height:1.8; white-space:pre-wrap; }
@media(max-width:680px) {
 .examples-wrap,.examples-list { width:calc(100% - 24px); }
 .examples-nav,.example-axes { grid-template-columns:1fr; }
 .example-case-head,.example-section { padding:22px 16px; }
 .example-source { padding:16px; }
 .business-document__body { padding:18px 16px; }
}