body { background: #f5f7fa; }
html { scroll-padding-top: 6rem; }
.practice-shell { width: min(1080px, calc(100% - 2rem)); margin-inline: auto; }
.practice-hero { padding: 3.4rem 0 2rem; background: #eef3fa; border-bottom: 1px solid #d4deeb; }
.practice-hero h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); max-width: 22ch; }
.practice-hero .lede { font-size: 1.15rem; max-width: 70ch; }
.practice-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0; }
.practice-meta span { border: 1px solid #c5d3e4; border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; background: white; }
.practice-nav { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid #cbd5e1; }
.practice-nav .practice-shell { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; padding-block: .7rem; }
.practice-nav a { color: #123b77; font-size: .9rem; font-weight: 700; padding: .25rem 0; }
.practice-intro { padding: 2rem 0 .5rem; }
.practice-intro h2, .section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.route { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
.route a { display: block; padding: 1rem; background: white; border: 1px solid #d2dce8; border-radius: 12px; text-decoration: none; }
.route strong { display: block; color: #162033; }
.route span { font-size: .85rem; color: #465970; }
.checklist { columns: 2; column-gap: 2rem; padding-left: 1.3rem; }
.checklist li { break-inside: avoid; margin-bottom: .45rem; }
.section-heading { padding: 2.4rem 0 .5rem; }
.section-heading p { max-width: 75ch; }
.exercise, .self-test { background: #fff; border: 1px solid #d2dce8; border-radius: 16px; padding: clamp(1.2rem,3vw,2.2rem); margin: 1.5rem 0 2rem; box-shadow: 0 4px 20px #142d4c06; }
.exercise > header { border-bottom: 1px solid #dce4ed; padding-bottom: .7rem; margin-bottom: 1.3rem; }
.exercise h3, .self-test h3 { font-size: 1.6rem; margin: .25rem 0 .65rem; }
.exercise h4, .self-test h4 { font-size: 1.05rem; margin: 1.35rem 0 .5rem; line-height: 1.35; }
.exercise-tag { color: #075c73; font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.source-link { font-size: .8rem; color: #465970; margin: .5rem 0; }
.source-link a { color: #244e86; }
.equation { padding: .6rem 1rem; background: #f2f6fb; border-left: 3px solid #3f6aa3; font-size: 1.05rem; margin: 1rem 0; }
.math-line { display: block; margin: .2rem 0; }
mjx-container[display="true"] { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; margin: .6rem 0 !important; padding: .15rem 0; text-align: left !important; }
.equation mjx-container[display="true"] { margin: .1rem 0 !important; }
.steps li > mjx-container[display="true"], .parts mjx-container[display="true"] { padding-left: .2rem; }
.parts { list-style: none; padding-left: 0; counter-reset: part; margin: .8rem 0; }
.parts > li { counter-increment: part; position: relative; padding-left: 2rem; margin: .45rem 0; }
.parts > li::before { content: counter(part, lower-alpha) ")"; position: absolute; left: 0; font-weight: 800; color: #123b77; }
.worked-example { background: #f8fafc; border: 1px solid #dce4ed; padding: 1rem 1.2rem; border-radius: 10px; }
.worked-example p:last-child, .pitfall p:last-child, .exam-variation p:last-child { margin-bottom: 0; }
.try-first { padding: .8rem 1rem; border-left: 3px solid #0e7490; background: #edf8fa; }
details { margin: .9rem 0; border: 1px solid #ccd8e6; border-radius: 10px; }
summary { padding: .85rem 1rem; cursor: pointer; color: #123b77; font-weight: 750; }
summary:hover { background: #f2f6fc; border-radius: 10px; }
summary:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #a15c00; outline-offset: 3px; }
details[open] > summary { border-bottom: 1px solid #d7e1ee; }
.reveal-body { padding: 1rem 1.2rem .4rem; }
.solution { border-color: #9dbab2; }
.solution > summary { color: #155d46; }
.steps { padding-left: 1.3rem; }
.steps li { padding-left: .3rem; margin-bottom: .85rem; }
.steps li > strong { color: #123b77; }
.pitfall { background: #fff6e9; border-left: 3px solid #a15c00; padding: .7rem 1rem; margin: 1rem 0; }
.pitfall h4 { margin-top: .25rem; color: #7c4500; }
.exam-variation { background: #f1f0fb; border-left: 3px solid #6653a3; padding: .8rem 1.2rem; margin-top: 1.2rem; }
.exam-variation h4 { margin: .2rem 0 .7rem; color: #443772; }
.exam-variation li { margin: .3rem 0; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
caption { text-align: left; font-weight: 700; padding-bottom: .5rem; }
th, td { border: 1px solid #ccd7e4; padding: .65rem .8rem; text-align: left; vertical-align: top; }
th { background: #edf3f9; }
figure { margin: 1.4rem 0; padding: .8rem; border: 1px solid #dce4ed; border-radius: 10px; background: #fff; }
figure svg { display: block; width: 100%; height: auto; max-height: 260px; }
figcaption { margin-top: .6rem; font-size: .85rem; color: #465970; }
.print-controls { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.print-controls button { background: white; border: 1px solid #9db1cc; border-radius: 8px; padding: .6rem 1rem; color: #123b77; font-weight: 700; }
.self-test { border-top: 4px solid #155eef; }
.test-item { border-top: 1px solid #dce4ed; margin-top: 1.4rem; padding-top: .5rem; }
.test-item:first-of-type { border-top: 0; }
.print-space { display: none; }
.small { font-size: .87rem; }
.practice-end { padding: 1.5rem 0 3rem; }
[hidden] { display: none !important; }
@media (max-width: 650px) {
  .route { grid-template-columns: 1fr; }
  .checklist { columns: 1; }
  .practice-hero { padding-top: 2rem; }
  .practice-nav .practice-shell { gap: .1rem .9rem; }
  .practice-nav a { font-size: .82rem; }
  .equation { padding: .5rem .6rem; font-size: 1rem; }
  .parts > li { padding-left: 1.7rem; }
  .steps li > mjx-container[display="true"], .parts mjx-container[display="true"] { padding-left: 0; }
  .exercise, .self-test { padding: 1rem .8rem; }
  .reveal-body { padding-inline: .5rem; }
  .steps { padding-left: 1.1rem; }
  .steps li { padding-left: 0; }
  mjx-container[display="true"] { font-size: 86% !important; }
  .eq-wide mjx-container[display="true"] { font-size: 72% !important; }
  th, td { padding: .5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@page { size: A4; margin: 16mm; }
@media print {
  :root { font-size: 10pt; line-height: 1.45; }
  body { background: white; color: #111; }
  .site-header, .practice-nav, .route, .print-controls, .skip-link, .source-link, .practice-end, .print-help { display: none !important; }
  .practice-shell { width: 100%; }
  .practice-hero { background: white; padding: 0 0 1rem; }
  .practice-hero h1 { font-size: 24pt; max-width: none; }
  .practice-hero .lede { font-size: 11pt; }
  .practice-intro { padding-top: .5rem; }
  .practice-meta { margin: .5rem 0; }
  .practice-intro h2, .section-heading h2 { font-size: 18pt; }
  .checklist { columns: 2; }
  .section-heading { padding-top: 1rem; break-after: avoid; }
  .exercise, .self-test { border: 0; padding: 0; margin: 0; border-radius: 0; box-shadow: none; break-before: page; }
  .exercise h3, .self-test h3 { font-size: 17pt; }
  .exercise h4, .self-test h4 { margin-top: .8rem; }
  .exercise > header { margin-bottom: .7rem; padding-bottom: .4rem; }
  .hint, .solution > summary { display: none !important; }
  body:not(.print-answers) .solution { display: none !important; }
  .print-answers .solution { border: 0; }
  .print-answers .reveal-body { padding: 0; }
  h2, h3, h4, summary, caption { break-after: avoid; }
  .worked-example, .equation, figure, .pitfall, .exam-variation, tr { break-inside: avoid; }
  .equation { font-size: 11pt; padding: .3rem .7rem; }
  mjx-container[display="true"] { overflow: visible; }
  .parts > li, .steps li { break-inside: avoid; }
  .print-space { display: block; height: 25mm; border-bottom: 1px solid #9ba8b8; margin-bottom: 1rem; }
  .print-answers .print-space { display: none; }
  figure svg { max-height: 180px; }
  .table-scroll { overflow: visible; }
  thead { display: table-header-group; }
  a { color: inherit; text-decoration: none; }
  .test-item { break-inside: avoid; }
}