:root {
    color-scheme: light;
    --paper: #f7f5ed;
    --surface: #fffdf6;
    --ink: #202d36;
    --secondary-ink: #4c585c;
    --line: #d7d3c7;
    --strong-line: #a6a395;
    --wash: #ede9db;
    --rust: #9f3b28;
    --rust-dark: #7d2a1b;
    --yellow: #f6d65d;
    --mint: #e1eadc;
    --rose: #f6e2db;
    --serif: Georgia, "Times New Roman", serif;
    --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
    --space-page: clamp(20px, 4.2vw, 72px);
    --radius: 8px;
    /* Shared by the lesson players and Monaco theme. */
    --background-color: #f7f5ed;
    --text-color: #202d36;
    --muted-text-color: #4c585c;
    --secondary-color: #ede9db;
    --section-color: #fffdf6;
    --accent-color-light: #9f3b28;
    --danger-600: #9f3b28;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 0; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
h1, h2, h3, h4, strong { overflow-wrap: anywhere; }
h1, h2 { line-height: 1.07; }
h3, h4 { line-height: 1.25; }
p, dd { overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: .19em; }
a:hover { color: var(--rust); }
img, svg, video { max-width: 100%; }
img { vertical-align: middle; }
pre { overflow: auto; }
code { font-family: var(--mono); }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--ink); }

.site-content { min-width: 0; }
.page-main {
    width: min(100%, 1450px);
    margin-inline: auto;
    padding: clamp(32px, 5vw, 78px) var(--space-page) 72px;
    display: grid;
    gap: clamp(26px, 4vw, 56px);
}
.page-narrow { max-width: 1000px; }
.page-header { display: grid; gap: 14px; }
.page-header-row, .section-heading, .panel-flex, .flex-row, .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}
.page-header-row, .panel-flex { justify-content: space-between; }
.page-header-row > :first-child { flex: 1 1 240px; min-width: 0; }
.page-header h1, .panel-title, .display-title {
    font: 400 clamp(2.75rem, 5.4vw, 5.2rem)/.98 var(--serif);
    letter-spacing: -.062em;
}
.page-header .flex-row, .page-header .form-actions { align-self: end; }
.section-heading { border-bottom: 1px solid var(--strong-line); padding-bottom: 12px; }
.section-title { font: 400 clamp(1.6rem, 2.9vw, 2.35rem)/1.1 var(--serif); letter-spacing: -.035em; }
.section-count { font: 600 .88rem/1 var(--mono); color: var(--rust); }
.section-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.back-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    color: var(--rust);
    text-decoration: none;
}
.back-link:hover { text-decoration: underline; color: var(--rust-dark); }
.icon { flex: none; vertical-align: middle; }
.empty-state { padding: 28px 0; }
.text-muted { color: var(--secondary-ink); }
.rich-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.hidden, [hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link:focus {
    position: fixed;
    inset: 12px auto auto 12px;
    z-index: 20;
    padding: 10px 16px;
    background: var(--yellow);
    color: var(--ink);
}
.flash-container {
    display: grid;
    gap: 8px;
    margin: 20px var(--space-page) 0;
}
.flash-message {
    border: 1px solid var(--line);
    border-left: 4px solid var(--rust);
    background: var(--surface);
    padding: 10px 16px;
    overflow-wrap: anywhere;
}