:root {
  color-scheme: light;
  --page: #f7f5ee;
  --surface: #fffefa;
  --text: #182721;
  --muted: #46554e;
  --line: #718278;
  --accent: #174735;
  --accent-text: #fff;
  --focus: #874b00;
  --soft: #eeeee4;
  --featured: #174735;
  --featured-text: #fffefa;
  --featured-focus: #ffd38a;
  --error: #a01919;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 112.5%;
  line-height: 1.65;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); border-top: 5px solid var(--accent); }
a { color: var(--accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: absolute; top: .5rem; left: .5rem; transform: translateY(-160%); padding: .65rem 1rem; background: var(--surface); border: 2px solid var(--accent); z-index: 10; }
.skip-link:focus { transform: none; }
.site-header, main, .site-footer { max-width: 68rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.site-header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.25rem; padding-block: .65rem; border-bottom: 1px solid var(--line); }
.brand { max-width: 100%; min-width: 0; flex-wrap: wrap; gap: .6rem; font-size: 1.4rem; font-weight: 750; letter-spacing: -.03em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.brand-mark { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.site-header > nav { flex-basis: 100%; }
nav { min-width: 0; max-width: 100%; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
nav li { min-width: 0; max-width: 100%; }
nav a { max-width: 100%; display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .1rem; }
nav a[aria-current] { font-weight: 700; text-decoration-thickness: .15em; text-underline-offset: .4em; }
main { padding-block: clamp(2rem, 5vw, 3.5rem) 4rem; min-height: 65vh; }
main:focus { outline: none; }
h1, h2, h3 { line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2rem, calc(5vw * var(--text-scale, 1)), 3rem); letter-spacing: -.035em; margin: 0 0 2rem; max-width: 25ch; }
h2 { font-size: 1.4rem; margin-block: 2rem 1rem; }
h3 { font-size: 1.12rem; margin-block: 1.5rem .6rem; }
p, li, label, legend, summary { overflow-wrap: anywhere; }
p { max-width: 66ch; }
section { margin-block: 1.5rem; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.5rem; border-top: 1px solid var(--line); padding-block: 1.2rem; }
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer form { margin: 0; }
.breadcrumb { margin-bottom: 1rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.panel { margin: 0; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); }
.panel h2 { margin-top: 0; }
.panel a { display: inline-block; padding-block: .5rem; }
.home-grid .panel { display: flex; flex-direction: column; align-items: flex-start; }
.panel-featured { color: var(--featured-text); background: var(--featured); border-color: var(--featured); }
.panel-featured a { color: var(--featured-text); }
.panel-featured :focus-visible { outline-color: var(--featured-focus); }
.home-grid .panel-featured { grid-column: 1 / -1; padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.panel-featured h2 { font-size: 1rem; font-weight: 600; letter-spacing: .01em; margin-bottom: .75rem; }
.resume-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, calc(3.5vw * var(--text-scale, 1)), 2.2rem); line-height: 1.35; margin: 0; max-width: 35ch; }
.resume-title a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
.resume-title a:hover { text-decoration-thickness: 2px; }
.content-list { padding-left: 1.6rem; max-width: 66ch; }
.content-list li { padding: .6rem .3rem .8rem; border-bottom: 1px solid var(--line); }
.content-list li a { display: inline-block; padding-block: .4rem; font-weight: 600; }
.content-list li p { margin: .2rem 0; color: var(--muted); }
form { max-width: 50rem; margin-block: 1.25rem; }
.form-narrow { max-width: 30rem; }
.field { margin-bottom: 1.4rem; }
label, legend { display: block; font-weight: 650; margin-bottom: .4rem; }
.required-note { color: var(--muted); font-size: .9em; font-weight: 400; }
input, select, textarea, button { font: inherit; }
input, select, textarea { max-width: 100%; width: 100%; padding: .6rem .75rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: .25rem; min-height: 44px; }
textarea { min-height: 11rem; resize: vertical; line-height: 1.6; }
input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; min-height: auto; margin: .65rem .5rem .65rem 0; flex-shrink: 0; accent-color: var(--accent); }
.checkbox-field { display: flex; align-items: flex-start; }
.checkbox-field label { padding-block: .35rem; }
input[readonly] { background: var(--page); }
button, .button { max-width: 100%; min-width: 0; white-space: normal; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: .65rem 1rem; border: 2px solid var(--accent); border-radius: .3rem; background: var(--accent); color: var(--accent-text); font-weight: 650; cursor: pointer; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
button:hover { filter: brightness(.9); }
button.secondary { color: var(--accent); background: var(--surface); }
button.text-button { color: var(--accent); background: transparent; border: 0; padding-inline: 0; font-weight: 400; text-decoration: underline; text-underline-offset: .2em; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-block: 1rem; }
.actions > input { flex: 1 1 15rem; min-width: 0; }
.help-text { overflow-wrap: anywhere; color: var(--muted); font-size: .95rem; margin-top: .4rem; }
.help-text ul { padding-left: 1.4rem; }
.field-invalid input, .field-invalid textarea, .field-invalid select { border: 2px solid var(--error); }
.field-errors, .error-summary { color: var(--error); }
.field-errors ul { margin: .4rem 0; padding-left: 1.4rem; }
.error-summary { border: 2px solid var(--error); padding: .8rem 1rem; margin-block: 1rem; }
.error-summary p:first-child { margin-top: 0; }
.notice { border-left: 4px solid var(--accent); padding: .8rem 1.2rem; margin-block: 1.5rem; background: var(--surface); }
.notice h2 { margin-top: .25rem; }
.notice.error { border-color: var(--error); }
.notice p:first-child { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }
fieldset { min-width: 0; padding: 1rem; border: 1px solid var(--line); }
legend { padding-inline: .35rem; }
details { max-width: 66ch; margin-block: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
summary { cursor: pointer; padding: .6rem .25rem; font-weight: 650; min-height: 44px; }
details > :not(summary) { margin-inline: .25rem; }
.lesson-article { max-width: 66ch; }
.lesson-content { max-width: 66ch; margin-block: 2rem; }
.lesson-content > h2 { margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.lesson-content > h2:first-child { margin-top: 0; }
.lesson-meta { max-width: 66ch; color: var(--muted); }
.lesson-formula { max-width: 66ch; padding: 1.25rem; background: var(--soft); border: 1px solid var(--line); border-radius: .35rem; }
.lesson-formula h2 { margin-top: 0; }
.lesson-formula p:last-child { margin-bottom: 0; }
.lesson-content img, .lesson-content svg { max-width: 100%; height: auto; }
.lesson-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.lesson-content th, .lesson-content td { border: 1px solid var(--line); padding: .55rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.lesson-content caption { text-align: left; font-weight: 650; margin-bottom: .5rem; }
.lesson-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
math { font-size: 1.15em; }
math[display="block"] { max-width: 100%; overflow-x: auto; padding-block: .5rem; }
.worked-example { margin: 1.75rem 0; padding: 1.1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--soft); border-radius: 0 .35rem .35rem 0; }
.worked-example > h2:first-child { font-size: 1.1rem; margin: 0 0 .8rem; }
.worked-example > :last-child { margin-bottom: 0; }
blockquote { margin: 1.5rem 0; padding: 1.1rem 1.25rem; border-left: 4px solid var(--accent); background: var(--soft); border-radius: 0 .35rem .35rem 0; }
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }
code { overflow-wrap: anywhere; }
.correction, .assistant-answer { border-top: 2px solid var(--accent); margin-top: 2rem; padding-top: .3rem; }
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) { color-scheme: dark; --page: #131c17; --surface: #1c2922; --text: #ecf4ed; --muted: #c1cec4; --line: #879c8e; --accent: #a0ddba; --accent-text: #102b1b; --focus: #ffd38a; --error: #ffb1ae; --soft: #25352b; --featured: #a0ddba; --featured-text: #102b1b; --featured-focus: #713900; }
}
:root[data-theme="dark"] { color-scheme: dark; --page: #131c17; --surface: #1c2922; --text: #ecf4ed; --muted: #c1cec4; --line: #879c8e; --accent: #a0ddba; --accent-text: #102b1b; --focus: #ffd38a; --error: #ffb1ae; --soft: #25352b; --featured: #a0ddba; --featured-text: #102b1b; --featured-focus: #713900; }
@media (max-width: 35rem) {
 .home-grid { grid-template-columns: minmax(0, 1fr); }
 .site-header { align-items: flex-start; flex-direction: column; }
 nav ul { gap: .1rem .85rem; }
 .actions { align-items: stretch; }
 .actions > button { flex: 1 1 auto; }
}
@media (forced-colors: active) {
 button, .panel, .notice, input, textarea, select { border: 1px solid CanvasText; }
 :focus-visible, .panel-featured :focus-visible { outline-color: Highlight; }
 .panel-featured { color: CanvasText; background: Canvas; border-color: CanvasText; }
 .panel-featured a { color: LinkText; }
 .brand-mark { color: LinkText; }
 .brand-mark path { fill: Canvas; }
}
@media print {
 .site-header, .site-footer, .skip-link, form { display: none; }
 main { max-width: none; padding: 0; }
 body { background: white; color: black; }
 a { color: black; }
 details { break-inside: avoid; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.field fieldset label { display: flex; align-items: center; font-weight: 400; min-height: 44px; }
[data-save-status]:empty { display: none; }

/* Display controls are available on every page and retain keyboard focus at limits. */
[hidden] { display: none !important; }
:root[data-text-size="125"] { --text-scale: 1.25; font-size: 140.625%; }
:root[data-text-size="150"] { --text-scale: 1.5; font-size: 168.75%; }
:root[data-text-size="175"] { --text-scale: 1.75; font-size: 196.875%; }
:root[data-text-size="200"] { --text-scale: 2.0; font-size: 225%; }
.display-settings { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; min-width: 0; max-width: 100%; padding: .3rem .45rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--surface); }
.display-group { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; min-width: 0; max-width: 100%; }
.display-group > span { font-weight: 650; margin-right: .25rem; }
.display-group button { min-width: 44px; padding: .2rem .45rem; font-size: .9rem; }
.display-group button[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.display-group button[aria-disabled="true"] { cursor: default; color: var(--muted); border-color: var(--line); }
.display-group button[aria-disabled="true"]:hover { filter: none; }
.display-group output { min-width: 3.2em; font-size: .9rem; text-align: center; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
 .display-group button[aria-pressed="true"] { border: 3px double Highlight; }
 .display-group button[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
}

.lesson-audio { margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: .65rem; }
.lesson-audio audio { display: block; width: 100%; max-width: 32rem; margin-block: .5rem; }
[data-audio-settings] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-block: .5rem; }
[data-audio-settings] label { margin: 0; }
[data-audio-settings] select { width: auto; }
.lesson-audio h2 { margin: 0 0 .65rem; font-size: 1.1rem; }
.lesson-audio p:empty { display: none; }

/* Profiles and course practice use ordinary lists, headings and named controls. */
.site-footer p { margin: 0; font-size: .9rem; }
.profile-actions { list-style: none; margin: 1rem 0; padding: 0; }
.profile-actions a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .4rem; }
.course-toc { margin-block: 1.5rem 2rem; max-width: 66ch; }
.course-toc ol, .course-toc ul { display: block; list-style: decimal; padding-left: 1.5rem; }
.course-toc li { margin-block: .35rem; }
.course-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.choices, .choice-list { padding: 0; list-style: none; }
.choices li, .choice-list li { margin-block: .65rem; }
label.choice, .choice-list label { display: flex; align-items: flex-start; gap: .6rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface); font-weight: 400; min-height: 44px; cursor: pointer; }
.choice input, .choice-list input[type="checkbox"] { flex: 0 0 auto; margin: .2rem 0 0; }
.choice > span { min-width: 0; }
.choice:focus-within, .choice-list label:focus-within { border-color: var(--focus); }
.feedback-correct, .feedback-incorrect { padding: .75rem 1rem; border: 2px solid var(--line); border-radius: .35rem; }
.feedback-correct { border-color: var(--accent); }
.feedback-incorrect { border-color: var(--error); }
.training-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block: 1.5rem; }
@media (forced-colors: active) {
 .choice, .choice-list label, .feedback-correct, .feedback-incorrect { border-color: CanvasText; }
}