.topic-body { --topic-blue: #165acb; --topic-cyan: #089caf; --topic-risk: #c22737; min-width: 320px; color: var(--ink); background: #fff; }
.topic-header { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 40px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.topic-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 700; text-decoration: none; }
.topic-header nav { display: flex; gap: 30px; }
.topic-header nav a { color: var(--ink); font-size: 12px; text-decoration: none; }
.topic-header nav a:hover, .topic-header nav a:focus-visible { color: var(--teal-dark); outline: none; }
.topic-hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(520px, 1.05fr); gap: clamp(36px, 6vw, 86px); width: min(1420px, calc(100% - 96px)); margin: 0 auto; padding: 72px 0 58px; }
.topic-back { display: inline-block; margin-bottom: 42px; color: var(--muted); font-size: 12px; text-decoration: none; }
.topic-back:hover { color: var(--teal-dark); }
.topic-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(46px, 5.3vw, 76px); line-height: 1.08; letter-spacing: -.045em; }
.topic-deck { margin: 25px 0 0; color: #1b3760; font-size: clamp(18px, 2vw, 27px); line-height: 1.5; }
.topic-scope { display: flex; align-items: center; gap: 16px; margin-top: 25px; color: var(--topic-blue); font-size: 13px; }
.topic-scope i { width: 3px; height: 3px; border-radius: 50%; background: #9aabc0; }
.topic-thesis { margin-top: 35px; padding: 22px 24px; border: 1px solid #9abbea; background: #f8fbff; }
.topic-thesis strong { color: var(--topic-blue); font-size: 14px; }
.topic-thesis p { margin: 9px 0 0; color: #405775; font-size: 14px; line-height: 1.85; }
.topic-hero-visual { align-self: center; margin: 44px 0 0; padding: 22px 24px 16px; border: 1px solid #b9cee6; background: white; box-shadow: 0 18px 48px rgba(44,84,126,.08); }
.topic-hero-visual figcaption { display: flex; justify-content: space-between; gap: 24px; color: var(--ink); font-size: 13px; }
.topic-hero-visual figcaption span { color: var(--muted); font-size: 10px; }
.topic-hero-visual svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.topic-grid path { fill: none; stroke: #e4eaf0; stroke-width: 1; }
.topic-threshold { fill: none; stroke: #8290a2; stroke-width: 1.5; stroke-dasharray: 7 6; }
.topic-threshold-label, .topic-legend text { fill: #65758a; font: 11px var(--sans); }
.topic-series { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.series-a { stroke: var(--topic-cyan); }.series-b { stroke: #2379e9; }.series-worst { stroke: var(--topic-risk); stroke-width: 3; }
.topic-hero-visual > p { margin: 0; color: var(--faint); font-size: 9px; text-align: right; }
.topic-layout { display: grid; grid-template-columns: 230px minmax(0, 1120px); gap: 54px; justify-content: center; width: min(1460px, calc(100% - 72px)); margin: 0 auto; padding: 48px 0 80px; border-top: 1px solid var(--line); }
.topic-toc { position: sticky; top: 94px; align-self: start; display: grid; gap: 4px; padding-right: 28px; border-right: 1px solid var(--line); }
.topic-toc strong { margin-bottom: 12px; font-size: 14px; }
.topic-toc a { padding: 9px 10px; border-left: 2px solid transparent; color: #6d7b8e; font-size: 11px; line-height: 1.45; text-decoration: none; }
.topic-toc a:hover, .topic-toc a.active { border-left-color: var(--topic-blue); color: var(--topic-blue); background: #f7faff; }
.topic-article { min-width: 0; }
.topic-section { scroll-margin-top: 92px; padding: 18px 0 66px; }
.topic-section + .topic-section { border-top: 1px solid var(--line); padding-top: 56px; }
.topic-section > header { display: grid; grid-template-columns: 44px 1fr; gap: 15px; margin-bottom: 28px; }
.topic-section > header > span { color: var(--topic-blue); font: 700 18px var(--mono); }
.topic-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(25px, 3vw, 38px); line-height: 1.25; }
.topic-section > header p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.principle-grid article { min-width: 0; padding: 25px 24px 28px; }
.principle-grid article + article { border-left: 1px solid var(--line); }
.principle-grid b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white; background: var(--topic-blue); font: 700 12px var(--mono); }
.principle-grid article:nth-child(2) b { background: var(--topic-cyan); }.principle-grid article:nth-child(3) b { background: #d68b15; }
.principle-grid h3, .practice-steps h3, .case-notes h3, .pitfall-list h3 { margin: 17px 0 8px; font-size: 15px; }
.principle-grid p, .practice-steps p, .case-notes p, .pitfall-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.tradeoff-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tradeoff-split > div { padding: 30px 30px 24px 0; }
.tradeoff-split > div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.tradeoff-split h3 { margin: 0; color: var(--teal); font-family: var(--serif); font-size: 21px; }
.tradeoff-bad h3 { color: var(--red); }
.tradeoff-split ul { margin: 18px 0 0; padding: 0; list-style: none; }
.tradeoff-split li { position: relative; padding: 12px 0 12px 19px; border-top: 1px solid #edf1f4; color: var(--muted); font-size: 12px; line-height: 1.75; }
.tradeoff-split li::before { position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); content: ''; }
.tradeoff-bad li::before { background: var(--red); }
.tradeoff-split strong { color: var(--ink); }
.topic-warning { display: flex; gap: 14px; margin-top: 22px; padding: 17px 20px; border: 1px solid #e5b46c; color: #8a500e; background: #fff9ee; font-size: 12px; line-height: 1.65; }
.topic-warning strong { flex: 0 0 auto; }
.practice-steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border: 1px solid var(--line); list-style: none; }
.practice-steps li { min-width: 0; padding: 22px 19px 25px; }
.practice-steps li + li { border-left: 1px solid var(--line); }
.practice-steps b { color: var(--topic-blue); font: 700 22px var(--mono); }
.practice-steps h3 { margin-top: 14px; }
.topic-tool-link { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 18px 20px; border: 1px solid #8eb5ec; color: var(--topic-blue); background: #f7faff; text-decoration: none; }
.topic-tool-link span:first-child { display: grid; gap: 5px; }.topic-tool-link small { color: var(--muted); }
.section-lede { margin: -4px 0 24px; color: #415674; font-size: 13px; line-height: 1.8; }
.case-table-wrap { overflow-x: auto; border: 1px solid #b8cae0; }
.case-table th, .case-table td { min-width: 178px; padding: 15px 18px; border-right: 1px solid #cbd8e6; text-align: center; }
.case-table th:first-child { min-width: 165px; color: var(--ink); text-align: left; }
.case-table thead th { color: var(--topic-blue); background: #f8faff; font-size: 13px; }
.case-table thead th:first-child { color: var(--ink); }
.case-table thead small { color: var(--muted); font-size: 9px; font-weight: 400; }
.case-table td:last-child, .case-table th:last-child { border-right: 0; }
.case-table .case-primary td { color: #bd1731; background: #fff7f8; font: 700 24px var(--mono); }
.case-table .case-decision td span { display: inline-block; padding: 5px 8px; font-size: 10px; }
.case-decision .fit { color: #08755d; background: #e9f7f2; }.case-decision .watch { color: #8a620e; background: #fff6df; }.case-decision .stop { color: #a13b3b; background: #fff0f0; }
.case-notes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 24px; }
.case-notes article { padding: 0 25px; }
.case-notes article:first-child { padding-left: 0; }.case-notes article + article { border-left: 1px solid var(--line); }.case-notes h3 { margin-top: 0; }
.topic-data-note { margin-top: 28px; padding: 20px 22px; border-left: 3px solid var(--topic-blue); background: #f6f9fd; }
.topic-data-note strong { color: var(--topic-blue); font-size: 13px; }.topic-data-note p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.decision-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.decision-rules article { padding: 22px; border-top: 4px solid; background: #fafcfd; }
.decision-rules .fit { border-color: #0aa37f; }.decision-rules .watch { border-color: #d99a16; }.decision-rules .stop { border-color: #d65757; }
.decision-rules h3 { margin: 0 0 13px; font-size: 14px; }.decision-rules strong { font: 700 16px var(--mono); }.decision-rules p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.rule-caveat { margin: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.pitfall-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 38px; }
.pitfall-list article { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.pitfall-list b { color: var(--topic-blue); font: 700 12px var(--mono); }.pitfall-list h3 { margin: 0 0 5px; }
.method-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.method-copy p { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.85; }.method-copy strong { color: var(--ink); }
.topic-final { margin-top: 44px; padding: 36px 38px; color: white; background: #102844; }
.topic-final h2 { font-size: 25px; }.topic-final p { max-width: 820px; margin: 14px 0 22px; color: #c8d6e7; font-size: 14px; line-height: 1.9; }.topic-final a { color: #7ed5db; font-size: 12px; font-weight: 700; text-decoration: none; }
.topic-footer { display: flex; justify-content: space-between; gap: 30px; padding: 25px 40px; border-top: 1px solid var(--line); color: var(--muted); background: #f7fafb; font-size: 10px; }.topic-footer p { max-width: 780px; margin: 0; text-align: right; line-height: 1.65; }
@media (max-width: 1100px) {
  .topic-header nav { display: none; }.topic-hero { grid-template-columns: 1fr; width: min(900px, calc(100% - 48px)); padding-top: 48px; }.topic-back { margin-bottom: 28px; }.topic-hero-visual { margin-top: 0; }.topic-layout { grid-template-columns: 1fr; width: min(920px, calc(100% - 48px)); }.topic-toc { position: static; display: flex; flex-wrap: wrap; padding: 0 0 20px; border-right: 0; border-bottom: 1px solid var(--line); }.topic-toc strong { width: 100%; }.practice-steps { grid-template-columns: 1fr 1fr; }.practice-steps li + li { border-left: 0; }.practice-steps li:nth-child(even) { border-left: 1px solid var(--line); }.practice-steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .topic-header { min-height: 58px; padding: 0 18px; }.topic-brand { font-size: 15px; }.topic-hero { width: calc(100% - 36px); padding: 34px 0 36px; }.topic-hero h1 { font-size: clamp(38px, 12vw, 54px); }.topic-deck { font-size: 18px; }.topic-scope { flex-wrap: wrap; gap: 9px; }.topic-thesis { padding: 18px; }.topic-hero-visual { padding: 15px 12px 10px; }.topic-hero-visual figcaption { display: grid; gap: 4px; }.topic-layout { width: calc(100% - 36px); padding-top: 25px; }.topic-toc { flex-wrap: nowrap; overflow-x: auto; }.topic-toc strong { display: none; }.topic-toc a { flex: 0 0 auto; white-space: nowrap; }.topic-section { padding-bottom: 45px; }.topic-section + .topic-section { padding-top: 42px; }.topic-section > header { grid-template-columns: 34px 1fr; }.principle-grid, .tradeoff-split, .practice-steps, .case-notes, .decision-rules, .pitfall-list, .method-copy { grid-template-columns: 1fr; }.principle-grid article + article, .tradeoff-split > div + div, .practice-steps li + li, .practice-steps li:nth-child(even), .case-notes article + article { border-left: 0; border-top: 1px solid var(--line); }.tradeoff-split > div, .tradeoff-split > div + div { padding: 25px 0; }.practice-steps li { padding: 20px; }.case-notes article, .case-notes article:first-child { padding: 20px 0; }.topic-warning { display: grid; }.topic-final { padding: 28px 24px; }.topic-footer { display: grid; padding: 22px 18px; }.topic-footer p { text-align: left; }
}