:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; color: #20363c; background: #f7fafb; line-height: 1.75; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
a { color: #285fb7; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid #285fb7; outline-offset: 5px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid #d7e2e7; text-decoration: none; color: #294d82; font: 26px Georgia, serif; }
.brand img { width: 36px; height: 36px; }
main { max-width: 780px; margin: 0 auto; padding: 40px 28px 64px; }
nav, .meta { font-size: 14px; color: #50656a; }
header { margin: 32px 0; }
.category { color: #3860bc; font-size: 15px; font-weight: 700; }
h1, h2 { font-family: Georgia, serif; font-weight: 400; line-height: 1.18; overflow-wrap: anywhere; }
h1 { font-size: 44px; margin: 14px 0 22px; }
h2 { font-size: 29px; margin: 36px 0 14px; }
h3 { font-size: 19px; margin: 24px 0 8px; }
p, li { font-size: 17px; }
li { padding-left: 4px; margin: 8px 0; }
.lead { font-size: 20px; }
.scenario { border-left: 4px solid #956b3d; padding: 12px 20px; background: #fff; }
.scenario p { margin: 6px 0; }
.exercise { border-top: 2px solid #40877c; border-bottom: 1px solid #d7e2e7; padding: 12px 0 24px; }
.exercise h2 { margin-top: 16px; }
.next { border-top: 1px solid #d7e2e7; margin-top: 36px; padding-top: 4px; }
.next a { display: inline-block; padding: 8px 0; margin-right: 16px; }
footer { font-size: 14px; color: #50656a; margin-top: 36px; border-top: 1px solid #d7e2e7; padding-top: 20px; }
footer p { font-size: 14px; }
@media (max-width: 480px) { main { padding: 24px 20px 48px; } h1 { font-size: 34px; } h2 { font-size: 27px; } .lead { font-size: 19px; } }
@media print { :root { background: white; color: black; } .brand, nav, .next { display: none; } main { max-width: none; padding: 0; } }