:root {
    --font-body: 'Mukta', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-editorial: var(--font-body);
    --db-font: var(--font-body);
    --db-heading: "Tiro Devanagari Marathi", "Mukta", serif;
    --font-mono: 'JetBrains Mono', "Cascadia Code", Consolas, monospace;
    --db-mono: var(--font-mono);
    --db-bg: #eef3f9;
    --db-surface: #ffffff;
    --db-surface-soft: #f6f9fd;
    --db-text: #17243a;
    --db-muted: #64748b;
    --db-border: #dbe4f0;
    --db-accent: #2467d6;
    --db-accent-soft: #e8f0ff;
    --db-code: #071426;
    --db-code-text: #e6efff;
    --db-shadow: 0 14px 36px rgba(30, 55, 90, .11);
    --db-reading-scale: 1;
    --topbar: 46px;
    --sidebar: 248px;
    --radius: 14px;
}

/* One page-level theme state: legacy's own data-theme attribute + its
   :root/:root[data-theme="X"] blocks (course tutorial.css, already loaded
   when a legacy stylesheet exists -- see $legacyTutorialStylesheet). The
   database page used to have its OWN separate theme picker
   (data-db-theme + a <select>) driving only these --db-* tokens, which is
   exactly why changing "theme" here never touched the sidebar/navbar/
   content: those are styled by legacy's --bg/--surface/... tokens, which
   that picker never set. That picker and body[data-db-theme=...] are gone
   (see the shared theme-toggle markup + assets/js/database-chapter-
   theme-sync.js); --db-* now simply mirrors whatever legacy theme is
   active, for the handful of db-only elements below with no legacy
   equivalent (admin preview bar, Claude-prompt panel, practice-lab tool
   cards, reading-dock chrome itself). The value after the comma in each
   var() is this file's original fixed-light-theme default, used only when
   no legacy stylesheet is loaded at all. */
body.db-chapter-page {
    --font-mono: 'JetBrains Mono', "Cascadia Code", Consolas, monospace;
    --db-mono: var(--font-mono);
    --db-bg: var(--bg, #eef3f9);
    --db-surface: var(--surface, #ffffff);
    --db-surface-soft: var(--surface-2, #f6f9fd);
    --db-text: var(--text, #17243a);
    --db-muted: var(--muted, #64748b);
    --db-border: var(--border, #dbe4f0);
    --db-accent: var(--brand, #2467d6);
    --db-accent-soft: color-mix(in srgb, var(--brand, #2467d6) 14%, var(--surface, #e8f0ff));
    --db-code: var(--code-bg, #071426);
    --db-code-text: var(--code-text, #e6efff);
}

code, pre, kbd {
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Chrome (navbar, sidebar, hero, pagination, buttons, cards, typography)
   is deliberately left to the course's own legacy tutorial.css, which this
   page also loads (see $legacyTutorialStylesheet in database-chapter.php).
   Every chrome element carries both a db- class and its legacy equivalent
   (e.g. class="db-course-header topbar"); legacy's :root/:root[data-theme]
   system supplies --bg/--surface/--text/--brand/... for every legacy-
   classed element, same as a legacy page, and also drives color-scheme
   (dark themes set it on :root, which is <html> here too) with no extra
   rule needed. The --db-* custom properties above alias those same legacy
   tokens for every db-only element still styled in this file (admin
   preview bar, Claude-prompt panel, practice-lab tool cards, reading-dock
   chrome) -- none of which has a legacy equivalent to fall back to, but
   all of which should still track the one active theme. Table styling
   further below is untouched and stays scoped to .db-lesson-content/
   .db-short-notes-content specifically, so it keeps winning over legacy's
   own (differently styled) table rules regardless of anything else in
   this file. */
body.db-chapter-page { min-width: 0; overflow-x: hidden; }
body.db-chapter-page #main-content { display: block; }
button, select, textarea { font: inherit; }
.db-skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-150%); color: #fff; background: #111827; border-radius: 8px; }
.db-skip-link:focus { transform: none; }
.db-preview-bar { position: sticky; z-index: 90; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 7px clamp(12px, 3vw, 28px); color: #fff; background: #392a73; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.db-preview-bar > div:first-child { display: flex; flex-direction: column; line-height: 1.15; }
.db-preview-bar span { font-size: 12px; opacity: .84; }
.db-preview-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.db-preview-actions form { margin: 0; }
.db-preview-message { position: fixed; z-index: 120; top: 58px; left: 50%; display: flex; align-items: flex-start; gap: 8px; width: max-content; max-width: min(720px, calc(100vw - 24px)); max-height: min(45vh, 420px); overflow-y: auto; padding: 9px 6px 9px 14px; transform: translateX(-50%); border-radius: 10px; box-shadow: var(--db-shadow); text-align: left; }
.db-preview-message[hidden] { display: none; }
.db-preview-message__text { margin: 0; flex: 1 1 auto; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
.db-preview-message__close { position: sticky; top: 0; flex: none; display: grid; width: 44px; height: 44px; margin: -6px 0; place-items: center; border: 0; border-radius: 8px; background: transparent; color: inherit; font: 700 22px/1 var(--font-body, system-ui, sans-serif); cursor: pointer; }
.db-preview-message__close:hover { background: rgba(0, 0, 0, .08); }
.db-preview-message__close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.db-preview-message.is-success { color: #115c39; background: #ddf8e9; }
.db-preview-message.is-error { color: #882d35; background: #ffe4e7; }
.db-preview-detail { padding: 12px clamp(12px, 3vw, 28px); border-bottom: 1px solid #d9cdf5; background: #f3effc; color: #2c2255; }
.db-preview-detail--warning { border-bottom-color: #f3d9a8; background: #fbf1dc; color: #5c4212; }
.db-preview-detail h2 { margin: 0 0 4px; font-size: 15px; }
.db-preview-detail-row { margin: 2px 0; font-size: 13px; line-height: 1.5; }
.db-preview-detail-row code { padding: 0 .3em; border-radius: 4px; background: rgba(0,0,0,.08); font-family: var(--db-mono); }
.db-preview-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.db-preview-detail-actions form { margin: 0; }
.db-preview-entitlement-choice { display: grid; gap: 5px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid #cfc0ef; border-radius: 8px; }
.db-preview-entitlement-choice legend { padding: 0 4px; font-size: 12px; font-weight: 800; }
.db-preview-entitlement-choice label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
/* ==========================================================================
   UNIVERSAL TOPBAR & NAVIGATION
   Self-sufficient declaration so database chapters never rely on legacy
   course tutorial.css grid templates or button styles.
   ========================================================================== */
.db-course-header.topbar {
    position: sticky;
    z-index: 100;
    top: 0;
    height: var(--topbar, 46px);
    display: grid !important;
    grid-template-columns: auto auto minmax(160px, 320px) minmax(0, 1fr) !important;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border, var(--db-border));
    background: color-mix(in srgb, var(--surface, var(--db-surface)) 94%, transparent);
    backdrop-filter: blur(14px);
}
.db-brand.brand {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 850;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--text, var(--db-text));
}
/* The CodeLangs AI logo (partials/brand-logo.php). app.css is not loaded on
   chapter pages, so its rules are repeated here. Course themes can be dark,
   so the navy wordmark always sits on a white plate. */
.db-brand .brand-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 3px 7px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.db-brand .brand-logo picture { display: block; }
.db-brand .brand-logo__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 28px;
}
.db-brand.brand:focus-visible {
    outline: 2px solid var(--brand, var(--db-accent));
    outline-offset: 3px;
    border-radius: 10px;
}
.db-jump-control.jump-control {
    position: relative;
    min-width: 0;
    display: flex;
}
.db-header-actions.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
    min-width: 0;
    flex-wrap: nowrap;
}
.topbar-button,
.db-icon-button {
    height: 30px;
    padding: 0 9px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 6px;
    background: var(--surface-2, var(--db-surface-soft));
    color: var(--text, var(--db-text));
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.topbar-button svg,
.db-icon-button svg {
    width: 14px;
    height: 14px;
    flex: none;
}
.topbar-button:hover,
.topbar-button:focus-visible,
.db-icon-button:hover,
.db-icon-button:focus-visible {
    border-color: var(--brand, var(--db-accent));
    color: var(--brand, var(--db-accent));
    text-decoration: none;
}
.short-notes-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 6px;
    background: var(--surface-2, var(--db-surface-soft));
    color: var(--text, var(--db-text));
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.short-notes-toggle svg {
    width: 14px;
    height: 14px;
    flex: none;
}
.short-notes-toggle:hover,
.short-notes-toggle:focus-visible {
    border-color: var(--brand, var(--db-accent));
    color: var(--brand, var(--db-accent));
}
.practice-lab-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    border-color: var(--primary-border, var(--border, var(--db-border)));
    background: linear-gradient(145deg, var(--primary-start, var(--brand, var(--db-accent))), var(--primary-end, var(--brand-strong, var(--db-accent))));
    color: var(--primary-text, #1c1400);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-strong, var(--db-accent)) 55%, transparent), 0 5px 14px var(--primary-shadow, rgba(0,0,0,.2)), inset 0 1px rgba(255, 255, 255, .24);
    animation: practice-lab-nav-pulse 2.6s ease-out infinite;
}
.practice-lab-nav-button svg {
    width: 14px;
    height: 14px;
    flex: none;
}
.practice-lab-nav-button:hover,
.practice-lab-nav-button:focus-visible {
    filter: brightness(1.07) saturate(1.06);
    box-shadow: 0 0 0 0 transparent, 0 7px 20px var(--primary-shadow, rgba(0,0,0,.25)), inset 0 1px rgba(255, 255, 255, .3);
    transform: translateY(-1px);
    animation-play-state: paused;
}
@keyframes practice-lab-nav-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-strong, var(--db-accent)) 55%, transparent), 0 5px 14px var(--primary-shadow, rgba(0,0,0,.2)), inset 0 1px rgba(255, 255, 255, .24); }
    70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-strong, var(--db-accent)) 0%, transparent), 0 5px 14px var(--primary-shadow, rgba(0,0,0,.2)), inset 0 1px rgba(255, 255, 255, .24); }
    100% { box-shadow: 0 0 0 0 transparent, 0 5px 14px var(--primary-shadow, rgba(0,0,0,.2)), inset 0 1px rgba(255, 255, 255, .24); }
}
@media (prefers-reduced-motion: reduce) {
    .practice-lab-nav-button { animation: none; }
}
.dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}
.dashboard-link:hover,
.dashboard-link:focus-visible {
    border-color: var(--brand, var(--db-accent));
    color: var(--brand-strong, var(--db-accent));
    text-decoration: none;
}
.dashboard-link svg {
    width: 14px;
    height: 14px;
    flex: none;
}
@media (max-width: 900px) {
    .db-course-header.topbar {
        grid-template-columns: auto auto minmax(140px, 1fr) auto !important;
    }
}
@media (max-width: 780px) {
    .practice-lab-nav-button span,
    .dashboard-link span,
    .short-notes-toggle span {
        display: none;
    }
    .practice-lab-nav-button,
    .dashboard-link,
    .short-notes-toggle {
        padding-inline: 0;
        width: 30px;
        justify-content: center;
    }
}
@media (max-width: 700px) {
    .short-notes-toggle {
        display: inline-flex;
        width: auto;
        padding-inline: 8px;
    }
    .short-notes-toggle span {
        display: inline;
    }
}
@media (max-width: 640px) {
    .db-course-header.topbar {
        grid-template-columns: auto auto auto auto !important;
    }
}
.db-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 5px 10px; color: var(--db-accent); font-weight: 700; font-size: 12px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--db-accent) 30%, var(--db-border)); border-radius: 8px; background: var(--db-surface); cursor: pointer; text-decoration: none; }
.db-button:hover { background: var(--db-accent-soft); }
.db-button--muted { color: var(--db-text); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); }
.db-reading-value { min-width: 40px; color: var(--db-muted); font: 700 11px/1 var(--db-mono); text-align: center; }
.db-jump-label { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--db-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.db-jump-label select { width: 100%; max-width: 240px; height: 34px; padding: 0 8px; color: var(--db-text); border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-surface-soft); }
.db-jump-control { display: flex; justify-self: stretch; }
.db-jump-control select { flex: 1 1 auto; max-width: none; }
.db-reading-progress { position: absolute; right: 0; bottom: -1px; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); z-index: 5; pointer-events: none; transition: width .12s cubic-bezier(.2, .8, .2, 1); }


.db-bundle-context { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 8px 11px; color: var(--db-text); font-size: 12px; border: 1px solid var(--db-border); border-radius: 9px; background: var(--db-accent-soft); }
.db-bundle-context a { flex: 0 0 auto; font-weight: 700; }
.db-lesson-main .breadcrumb li:not(:last-child)::after { color: color-mix(in srgb, var(--db-muted) 58%, transparent); content: '/'; }
/* Typography, headings, paragraphs, lists, callouts, blockquotes, and
   reading-zoom scaling are governed by the course's own legacy tutorial.css.
   .content-section keeps its boundary properties. */
.db-content-section { position: relative; min-width: 0; padding: clamp(15px, 2vw, 24px); border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--db-surface); content-visibility: auto; contain-intrinsic-size: auto 720px; }
.db-lesson-content > :first-child, .db-short-notes-content > :first-child { margin-top: 0; }
/* Heading LEVEL is shifted by one compared to legacy content: a database
   chapter reserves h1 for the chapter title (shown in the hero card, and
   stripped from the body when duplicated), so its major lesson sections
   are h2, subsections h3, nested detail h4 -- one level deeper than
   legacy's own hand-authored markup, where major sections start at h1.
   Legacy's shared ".lesson-content h1/h2/h3" rule (loaded via the
   course's own tutorial.css) already provides size/weight/border for
   each level; these overrides just re-point that same visual treatment
   at the level-shifted equivalent instead of duplicating legacy's full
   typography (color/line-height/letter-spacing still inherit from it). */
body.db-chapter-page .db-lesson-content h2 {
    margin: 23px 0 14px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--db-border);
    font-size: clamp(21px, 2.2vw, 29px);
    font-weight: 700;
}
/* A subtopic (h3) must read as a heading at a glance, not as a slightly
   larger line of body text: brand-tinted colour, a heavier weight, an
   accent bar on its left and more space above it. Nested detail (h4) gets
   a smaller accent dot so the three levels stay distinct in every theme. */
body.db-chapter-page .db-lesson-content h3 {
    position: relative;
    margin: 34px 0 10px;
    padding: 1px 0 1px 15px;
    color: color-mix(in srgb, var(--db-accent) 62%, var(--db-text));
    font-size: clamp(20px, 1.75vw, 23px);
    font-weight: 700;
    line-height: 1.3;
}
body.db-chapter-page .db-lesson-content h3::before {
    position: absolute;
    top: .18em;
    bottom: .18em;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: var(--db-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--db-accent) 35%, transparent);
    content: '';
}
body.db-chapter-page .db-lesson-content h4 {
    position: relative;
    margin: 24px 0 8px;
    padding-left: 16px;
    color: color-mix(in srgb, var(--db-accent) 38%, var(--db-text));
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}
body.db-chapter-page .db-lesson-content h4::before {
    position: absolute;
    top: .52em;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--db-accent);
    content: '';
}
/* A subtopic directly under its section heading needs no extra gap. */
body.db-chapter-page .db-lesson-content h2 + h3,
body.db-chapter-page .db-lesson-content h3 + h4 { margin-top: 14px; }
@media (max-width: 700px) {
    body.db-chapter-page .db-lesson-content h2 { margin-top: 18px; font-size: 21px; }
    body.db-chapter-page .db-lesson-content h3 { margin-top: 26px; padding-left: 13px; font-size: 18px; }
    body.db-chapter-page .db-lesson-content h4 { margin-top: 18px; font-size: 16px; }
}
/* Imported tables deliberately keep the newer database-renderer treatment.
   The containing selector prevents the course's legacy table rules from
   leaking in while keeping horizontal scrolling local to the table. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .table-scroll { width: 100%; min-width: 0; max-width: 100%; margin: 1em 0; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--db-border); border-radius: 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .table-scroll table { width: 100%; min-width: 520px; border-spacing: 0; border-collapse: collapse; table-layout: auto; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .table-scroll th,
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .table-scroll td { padding: .62em .75em; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; border: 1px solid var(--db-border); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .table-scroll th { color: var(--db-accent); font-weight: 750; background: var(--db-surface-soft); }
/* Universal Content Engine block boundary. Registered components and safe
   fallbacks own their overflow so a future diagram/equation/chart can never
   widen the lesson, notes drawer, or page shell. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .uce-component {
    display: grid;
    gap: 5px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 1em 0;
    padding: 12px 14px;
    overflow-x: auto;
    overflow-wrap: anywhere;
    border: 1px solid var(--db-border);
    border-radius: 10px;
    color: var(--db-text);
    background: var(--db-surface-soft);
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .uce-component > * { min-width: 0; max-width: 100%; margin: 0; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .uce-component--diagnostic { border-color: #d6a341; background: color-mix(in srgb, #f7deb0 32%, var(--db-surface-soft)); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .uce-component--diagnostic code { overflow-wrap: anywhere; }
/* Q&A / Hint / Solution disclosures rendered from canonical Markdown
   (ChapterContentRenderer::decorateQuestionAnswers/decorateDisclosures).
   Mirrors tutorials/*\/assets/css/tutorial.css's .interview-qa/.qa-answer
   byte-for-byte (same class names, same layout) so a database chapter and
   a legacy chapter look identical; kept here too so these still render
   correctly even on a course with no legacy stylesheet at all. Collapsed
   state (no reserved space) is native <details> behavior, not CSS. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa { max-width: 940px; margin: 10px 0; border: 1px solid var(--db-border); border-radius: 10px; background: var(--db-surface); overflow: hidden; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa + .interview-qa { margin-top: 8px; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa summary { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 40px 12px 14px; background: var(--db-surface-soft); color: var(--db-text); font-size: 15px; font-weight: 700; line-height: 1.45; list-style: none; cursor: pointer; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa summary::-webkit-details-marker { display: none; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa summary::before { content: 'Q'; flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: transparent; border: 1.5px solid var(--db-accent); color: var(--db-accent); font-size: 11px; font-weight: 800; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa.qa-type-hint summary::before { content: 'H'; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa.qa-type-solution summary::before { content: 'S'; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa summary::after { content: '+'; position: absolute; top: 12px; right: 14px; color: var(--db-accent); font-size: 18px; font-weight: 800; line-height: 1; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa[open] summary::after { content: '\2212'; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa summary:hover { background: color-mix(in srgb, var(--db-accent) 8%, var(--db-surface-soft)); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa summary:focus-visible { outline: 2px solid var(--db-accent); outline-offset: -2px; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa[open] summary { border-bottom: 1px solid var(--db-border); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa .qa-question-text { flex: 1 1 auto; min-width: 0; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .interview-qa .qa-toggle-hint { flex: 0 0 auto; margin-left: auto; padding-right: 20px; color: var(--db-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .qa-answer { padding: 12px 14px; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .qa-answer > p { margin: 0 0 8px; color: var(--db-text); font-size: 14.5px; line-height: 1.65; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .qa-answer > :last-child { margin-bottom: 0; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .qa-answer > p:first-of-type { padding-left: 10px; border-left: 3px solid color-mix(in srgb, #16a34a 70%, var(--db-text) 30%); }
/* .inline-code / .code-block (+ figcaption/.code-language/.code-actions/
   .icon-button/pre/code) and .mermaid-diagram's own figcaption/label/
   icon-button are bare, un-prefixed classes -- no db- dual class exists
   for them at all (see database-chapter.php) -- so legacy's own
   theme-aware --code-bg/--code-text rules, and the already-shared
   assets/css/tutorial-mermaid.css (loaded by both legacy and this page),
   apply directly once this file stops redeclaring them with a fixed
   db- palette. That also makes every one of the 11 legacy themes' code
   colors available here, and lets the syntax-highlighter script below
   colorize tokens using legacy's own .tok-* palette (also theme-aware).
   .db-practice's own fullscreen rule stays -- it has no legacy or shared
   equivalent. */
.db-practice:is(:fullscreen, .fullscreen-active) { position: fixed; z-index: 300; inset: 0; width: 100vw; max-width: none; height: 100dvh; margin: 0; padding: 12px; overflow: auto; color: var(--db-text); background: var(--db-bg); }

.db-practice { position: relative; margin: 14px 0; padding: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--db-accent) 40%, var(--db-border)); border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--db-accent) 5%, var(--db-surface)), var(--db-surface)); box-shadow: var(--db-shadow); }
.db-practice > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border: 0; }
.db-practice > header > div { min-width: 0; }
.db-practice > header .section-fullscreen { flex: 0 0 auto; }
.db-practice h2 { margin: 1px 0 0; font-size: 19px; letter-spacing: -.025em; }
.db-practice > header p { max-width: 62ch; margin: 4px 0 0; color: var(--db-muted); font-size: 13px; line-height: 1.45; }
.db-tool-tabs { display: flex; gap: 4px; margin: 11px 0; padding: 0; overflow-x: auto; border-bottom: 1px solid var(--db-border); scrollbar-width: thin; }
.db-tool-tabs button { flex: 0 0 auto; min-height: 0; margin-bottom: -1px; padding: 6px 10px; color: var(--db-muted); font-weight: 800; font-size: 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer; }
.db-tool-tabs button[aria-selected="true"] { color: var(--db-text); border-color: var(--db-accent); background: transparent; }
.db-tool-stage { min-height: 210px; padding: 0; }
.db-tool-card { max-width: 780px; margin: auto; }
.db-tool-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--db-muted); font: 700 11px/1.3 var(--db-mono); }
.db-tool-card h3 { margin: 13px 0 7px; font-size: 18px; }
.db-tool-context { padding: 10px; overflow-x: auto; color: var(--db-text); font: 12px/1.5 var(--db-mono); border: 1px solid var(--db-border); border-radius: 9px; background: var(--db-surface-soft); white-space: pre-wrap; }
.db-tool-options { display: grid; gap: 6px; margin: 10px 0; }
.db-tool-option { display: flex; gap: 8px; padding: 9px 10px; border: 1px solid var(--db-border); border-radius: 8px; cursor: pointer; }
.db-tool-option:has(input:checked) { border-color: var(--db-accent); background: var(--db-accent-soft); }
.db-tool-input { width: 100%; min-height: 90px; padding: 9px; color: var(--db-text); border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-surface-soft); resize: vertical; }
.db-tool-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.db-tool-controls .db-button--muted { color: var(--db-text); border-color: var(--db-border); background: var(--db-surface-soft); }
.db-tool-feedback { margin-top: 10px; padding: 10px 12px; border-left: 4px solid var(--db-accent); border-radius: 7px; background: var(--db-accent-soft); }
.db-tool-feedback.is-wrong { border-left-color: #c24150; background: color-mix(in srgb, #ffe4e8 75%, var(--db-surface)); }
.db-tool-feedback > :first-child { margin-top: 0; }
.db-tool-feedback > :last-child { margin-bottom: 0; }

/* MCQ Option States & Accessible Badges */
.practice-tool .quiz-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color .18s ease, background-color .18s ease;
}
.quiz-option .option-badge {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.quiz-option.is-correct-choice {
    border-color: #52e5a3 !important;
    background: color-mix(in srgb, #52e5a3 14%, var(--surface-2, var(--db-surface))) !important;
    box-shadow: inset 3px 0 #52e5a3, 0 0 14px color-mix(in srgb, #52e5a3 15%, transparent) !important;
}
.quiz-option.is-correct-choice .option-badge.is-correct {
    background: color-mix(in srgb, #52e5a3 22%, transparent);
    color: #38dc94;
    border: 1px solid color-mix(in srgb, #52e5a3 40%, transparent);
}
.quiz-option.is-wrong-choice {
    border-color: #ff6b7e !important;
    background: color-mix(in srgb, #ff6b7e 14%, var(--surface-2, var(--db-surface))) !important;
    box-shadow: inset 3px 0 #ff6b7e, 0 0 14px color-mix(in srgb, #ff6b7e 15%, transparent) !important;
}
.quiz-option.is-wrong-choice .option-badge.is-wrong {
    background: color-mix(in srgb, #ff6b7e 22%, transparent);
    color: #ff6b7e;
    border: 1px solid color-mix(in srgb, #ff6b7e 40%, transparent);
}

/* Premium Result Section for Interactive Tools */
.tool-result-card {
    margin-top: 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, var(--brand));
    background: color-mix(in srgb, var(--surface) 96%, var(--brand));
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    overflow: hidden;
    font-family: var(--font-body);
}
.tool-result-card.is-correct {
    border-color: color-mix(in srgb, #52e5a3 55%, var(--border));
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, #52e5a3 12%, transparent), transparent 45%), color-mix(in srgb, var(--surface) 97%, #52e5a3);
}
.tool-result-card.is-wrong, .tool-result-card.is-incorrect {
    border-color: color-mix(in srgb, #ff6b7e 55%, var(--border));
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, #ff6b7e 12%, transparent), transparent 45%), color-mix(in srgb, var(--surface) 97%, #ff6b7e);
}
.tool-result-card.is-solution {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%), color-mix(in srgb, var(--surface) 97%, var(--brand));
}
.tool-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: rgba(0, 0, 0, .08);
}
.tool-result-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}
.tool-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}
.tool-result-card.is-correct .tool-result-badge { color: #38dc94; }
.tool-result-card.is-wrong .tool-result-badge, .tool-result-card.is-incorrect .tool-result-badge { color: #ff6b7e; }
.tool-result-card.is-solution .tool-result-badge { color: var(--accent); }
.tool-result-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tool-result-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    font-size: 13px;
    line-height: 1.5;
}
.tool-result-label {
    font-weight: 700;
    color: var(--text);
    min-width: 120px;
    flex-shrink: 0;
}
.tool-result-value {
    color: var(--text);
    flex: 1 1 200px;
}
.tool-result-explanation {
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    background: rgba(0, 0, 0, .14);
}
.tool-result-explanation strong {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent);
    margin-bottom: 4px;
}
.tool-result-explanation p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}
.tool-result-card .code-block {
    margin: 6px 0;
}

/* =========================================================
   INTERACTIVE TOOL — COURSE-AGNOSTIC STYLE FALLBACKS
   The classes below are also defined in each course's own
   tutorial.css (which IS loaded for SQL Marathi and every
   other course's database-driven chapter). These rules
   provide identical defaults so the practice tools render
   correctly even when no course-specific stylesheet is
   loaded (e.g. a future course that hasn't linked one).
   Values deliberately match the tutorial.css originals.
   Scoped to .practice-tool so they never override the
   course's own rules when tutorial.css is loaded.
   ========================================================= */

/* Status bar (item counter + tool name) */
.practice-tool .tool-status {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted, var(--db-muted));
    font: 750 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Progress bar underneath the status bar */
.practice-tool .progress-track {
    height: 4px;
    margin: 6px 0 12px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--surface-3, color-mix(in srgb, var(--db-border) 60%, var(--db-surface)));
}
.practice-tool .progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand, var(--db-accent)), var(--accent, var(--db-accent)));
    transition: width .25s ease;
}

/* Question / prompt heading */
.practice-tool .quiz-question {
    margin: 10px 0 8px;
    font-size: 15px;
    line-height: 1.4;
}

/* Options list */
.practice-tool .quiz-options {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}

/* Option key badge (A. B. C.) */
.practice-tool .option-key {
    color: var(--brand, var(--db-accent));
    font: 800 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    flex-shrink: 0;
}

/* Textarea for open-ended tools */
.practice-tool .tool-textarea {
    display: block;
    width: 100%;
    min-height: 90px;
    padding: 9px 11px;
    color: var(--text, var(--db-text));
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 8px;
    background: var(--surface-2, var(--db-surface-soft));
    resize: vertical;
}
.practice-tool .tool-textarea:disabled {
    opacity: .72;
    cursor: not-allowed;
}

/* Action controls row */
.practice-tool .tool-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

/* Statistics grid (5 cells) */
.practice-tool .quiz-result {
    display: grid;
    grid-template-columns: repeat(5, minmax(60px, 1fr));
    gap: 7px;
    margin-top: 12px;
}
.practice-tool .quiz-result > div {
    padding: 9px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 7px;
    background: var(--surface-2, var(--db-surface-soft));
    text-align: center;
}
.practice-tool .quiz-result strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
}
.practice-tool .quiz-result span {
    color: var(--muted, var(--db-muted));
    font-size: 9px;
    text-transform: uppercase;
}

/* Score / interpretation line */
.practice-tool .result-note {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--muted, var(--db-muted));
}
.practice-tool .result-note strong {
    color: var(--text, var(--db-text));
}

/* Debug challenge helpers */
.practice-tool .debug-code-label {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 8px;
    font: 750 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 5px;
    background: color-mix(in srgb, #ff6b7e 14%, var(--surface-2, var(--db-surface-soft)));
    color: #c24150;
}
.practice-tool .debug-hint {
    margin: 8px 0;
    padding: 7px 10px;
    font-size: 13px;
    border-left: 3px solid var(--warn, #f59e0b);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--warn, #f59e0b) 10%, var(--surface-2, var(--db-surface-soft)));
}

/* Scenario context (table name / columns) */
.practice-tool .scenario-context {
    margin: 6px 0 10px;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--muted, var(--db-muted));
}

/* Scenario Analysis: the situation text above the question (prose, not code) */
.practice-tool .scenario-context.is-narrative {
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text, var(--db-text));
    border-left: 3px solid var(--accent, var(--db-accent));
    border-radius: 0 8px 8px 0;
    background: var(--surface-2, var(--db-surface-soft));
}

/* Mobile: wrap quiz-result to 2-col grid */
@media (max-width: 700px) {
    .practice-tool .quiz-result {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    .practice-tool .quiz-result > div { padding: 7px 5px; }
    .practice-tool .quiz-result strong { font-size: 17px; }
    .practice-tool .tool-controls .button {
        flex: 1 1 calc(50% - 6px);
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
        font-weight: 700;
        justify-content: center;
        text-align: center;
    }
}

/* =========================================================
   SEMANTIC CALLOUTS (English Definition / मराठी अर्थ / महत्त्वाचे /
   Key Idea / Remember / Common Mistake / Interview Point) — detected
   server-side in ChapterContentRenderer::resolveSemanticCallout() from a
   leading bold label inside a blockquote, per the ChatGPT content-
   generation contract. Reuses the exact accent-bar/tinted-background
   recipe already established by legacy tutorial.css's .callout/
   .definition-callout (same padding/radius/color-mix background), and the
   same marker-dot + text-label composition already used for the code-block
   language caption above. Self-sufficient via the --db-* token aliases so
   it renders identically with or without a legacy stylesheet loaded, and
   scoped to .db-lesson-content/.db-short-notes-content only (same
   containment as the .table-scroll exception) so it never touches legacy
   pages' own blockquote styling.
   ========================================================= */
body.db-chapter-page {
    --db-warn: var(--warn, #f59e0b);
    --db-danger: var(--danger, #dc2626);
    --db-brand-strong: var(--brand-strong, var(--db-accent));
    /* Same green already used app-wide for a positive/success state (see
       .badge-pill--success in app.css, #10b981) -- reused here for the
       Tip callout rather than inventing an unrelated color. */
    --db-success: var(--success, #10b981);
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) blockquote.callout,
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) div.callout {
    position: relative;
    max-width: 940px;
    margin: 12px 0;
    padding: 11px 14px;
    border-left: 3px solid var(--db-accent);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--db-accent) 8%, var(--db-surface-soft));
    color: var(--db-text);
    font-weight: 500;
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) blockquote.callout:not([data-callout]) {
    padding-left: 40px;
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) blockquote.callout:not([data-callout])::before {
    position: absolute;
    top: 6px;
    left: 12px;
    color: var(--db-accent);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    content: "\201C";
}
/* A labeled semantic callout (data-callout present -- Definition, Key
   Idea, Remember, Common Mistake, Interview Point, etc.) is a distinct
   component, not a quotation, and must never carry the decorative
   quote-mark glyph. The course's own legacy tutorial.css declares a
   tag-agnostic ".callout::before { content: '“' }" rule (it predates
   labeled callouts existing at all), which still matches these elements
   since they keep the base "callout" class for shared recipe styling.
   This explicitly cancels it -- higher specificity than the legacy rule
   regardless of stylesheet load order. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout]::before {
    content: none;
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout strong { color: var(--db-accent); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout > :first-child,
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout-body > :first-child { margin-top: 0; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout > :last-child,
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout-body > :last-child { margin-bottom: 0; }

/* Labeled callout header: fixed-size chrome (does not scale with A-/A+
   reading zoom), matching .definition-callout-label / .code-language. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--callout-accent, var(--db-accent));
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--callout-accent, var(--db-accent));
}
/* Body text is plain content flow (inherits the lesson's normal, reading-
   zoom-scaled font-size) — never given its own font-size here. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout-body { color: var(--db-text); }

body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout] {
    border-left-color: var(--callout-accent, var(--db-accent));
    background: color-mix(in srgb, var(--callout-accent, var(--db-accent)) 8%, var(--db-surface-soft));
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="definition"] { --callout-accent: var(--db-accent); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="marathi_meaning"] { --callout-accent: var(--accent, var(--db-accent)); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="important"] { --callout-accent: var(--db-warn); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="key_idea"] { --callout-accent: var(--db-brand-strong); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="remember"] { --callout-accent: color-mix(in srgb, var(--accent, var(--db-accent)) 60%, var(--db-accent) 40%); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="common_mistake"] { --callout-accent: var(--db-danger); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="interview_point"] { --callout-accent: color-mix(in srgb, var(--db-warn) 55%, var(--db-accent) 45%); }
/* GitHub-Flavored-Markdown alert types (see CALLOUT_BRACKET_MARKERS in
   ChapterContentRenderer) -- "note" reuses the same accent as the existing
   English-Definition/informational callout; "tip" is the app's existing
   positive/success green; "warning"/"caution" share the danger red since
   this design system has no separate token for two distinct severities of
   risk callout. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="note"] { --callout-accent: var(--db-accent); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="tip"] { --callout-accent: var(--db-success); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="warning"] { --callout-accent: var(--db-danger); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="caution"] { --callout-accent: var(--db-danger); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="concept"] { --callout-accent: var(--db-brand-strong); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="formula"] { --callout-accent: color-mix(in srgb, var(--db-accent) 72%, #7c3aed 28%); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="shortcut"] { --callout-accent: var(--db-success); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="mistake"],
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="exam_trap"] { --callout-accent: var(--db-danger); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="example"] { --callout-accent: var(--db-accent); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="practice"] { --callout-accent: var(--db-success); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="interview"] { --callout-accent: color-mix(in srgb, var(--db-warn) 55%, var(--db-accent) 45%); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="real_world"] { --callout-accent: color-mix(in srgb, var(--accent, var(--db-accent)) 65%, var(--db-success) 35%); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="summary"] { --callout-accent: var(--muted, var(--db-muted)); }

/* Textbook (mathematics) blocks — numbered by ChapterContentRenderer::
   numberTextbookBlocks() ("Theorem 2 (Pythagoras)", "Example 3"). Theorem-
   like statements are framed boxes; a proof is understated and ends with the
   tombstone; a solution visually continues the example before it. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) :is([data-callout="theorem"], [data-callout="lemma"], [data-callout="corollary"], [data-callout="proposition"], [data-callout="axiom"]) {
    --callout-accent: color-mix(in srgb, var(--db-accent) 60%, #7c3aed 40%);
    border: 1px solid color-mix(in srgb, var(--callout-accent) 45%, var(--db-border));
    border-left: 4px solid var(--callout-accent);
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="lemma"],
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="corollary"] { --callout-accent: color-mix(in srgb, var(--db-accent) 75%, #7c3aed 25%); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="axiom"] { --callout-accent: var(--db-brand-strong); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="proof"] {
    --callout-accent: var(--muted, var(--db-muted));
    background: transparent;
    border-left-style: dashed;
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="proof"] .callout-body::after {
    content: "∎";
    display: block;
    margin-top: 4px;
    text-align: right;
    color: var(--db-text);
    font-size: 1.1em;
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="worked_example"] {
    --callout-accent: var(--db-accent);
    border: 1px solid color-mix(in srgb, var(--callout-accent) 40%, var(--db-border));
    border-left: 4px solid var(--callout-accent);
}
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="solution"] { --callout-accent: var(--db-success); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) :is([data-callout="worked_example"], [data-callout="exercise"]) + [data-callout="solution"] { margin-top: -4px; }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="exercise"] { --callout-accent: var(--db-warn); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) [data-callout="remark"] { --callout-accent: var(--muted, var(--db-muted)); }
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .uce-visual figcaption .uce-figure-number { font-weight: 800; }

@media (max-width: 700px) {
    body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .callout-label {
        font-size: 10px;
    }
}

/* =========================================================
   FLASHCARD, FILL BLANK, MATCHING & ORDERING — extend the
   same course-agnostic style fallbacks above with the same
   tokens (--surface-2/--border/--brand/--accent/--muted),
   scoped to .practice-tool so they never leak into legacy
   pages or override a course's own tutorial.css rules.
   ========================================================= */

/* Flashcard — real 3D flip using the standard absolute-positioned
   flip-card pattern (not CSS-grid stacking, which is more prone to
   compositing/paint-timing glitches in this exact perspective+3D-transform
   combination across engines). .flashcard-inner establishes the box
   height; JS sets an explicit inline height on it sized to fit the taller
   of the two faces' real content (measured after mount), so an answer
   longer than the 180px floor no longer needs to scroll to be read. Both
   faces are always present, absolutely filling it, front/back
   distinguished purely by rotateY + backface-visibility so the browser
   can animate cleanly between them instead of the JS swapping text
   content on every render. The scrollable region (.flashcard-face-content,
   a safety net for the rare item still taller than the capped height) is
   deliberately a separate element from the face itself, isolating the
   scroll/paint context from the transform context.

   IMPORTANT — a course's own legacy tutorial.css (loaded on every
   database-chapter page alongside this stylesheet, see
   database-chapter.php) defines its OWN unscoped .flashcard/.flashcard-face/
   .flashcard-front/.flashcard-back rules for its separate, older
   per-chapter flip-card tool. Every rule below is scoped under
   .practice-tool specifically so it already out-specificities legacy's
   bare class selectors for any property BOTH declare — but that only
   protects properties actually declared here. Leaving a property
   (display, padding, transform, ...) undeclared on one of these classes
   lets legacy's same-named, unscoped rule apply unopposed. This already
   bit once: legacy's 3-class `.flashcard.is-flipped .flashcard-front {
   transform: rotateY(180deg) }` had no scoped counterpart to beat, so it
   landed on this system's front face too (it carries the same
   .flashcard-front class) and compounded with .flashcard-inner's own
   180deg flip back to a net 0deg — undoing the backface-visibility hide
   and showing both faces overlapping at once instead of a clean flip.
   Any new property added to the legacy classes above needs an explicit,
   equally-scoped counterpart here, not just an equivalent visual result. */
.practice-tool .flashcard {
    margin: 10px 0;
    perspective: 1600px;
    cursor: pointer;
}
.practice-tool .flashcard:focus-visible {
    outline: 2px solid var(--accent, var(--db-accent));
    outline-offset: 3px;
    border-radius: 12px;
}
.practice-tool .flashcard-inner {
    position: relative;
    min-height: 180px;
    width: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
.practice-tool .flashcard.is-flipped .flashcard-inner {
    transform: rotateY(180deg);
}
.practice-tool .flashcard-face {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 12px;
    background: var(--surface-2, var(--db-surface-soft));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Explicit, unconditional counterpart to legacy's is-flipped .flashcard-front
   rule described above -- out-specificities it (5 class selectors) so this
   wins regardless of stylesheet load order. */
.practice-tool .flashcard.is-flipped .flashcard-face.flashcard-front {
    transform: none;
}
.practice-tool .flashcard-face-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 22px 20px;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text, var(--db-text));
}
.practice-tool .flashcard-face-content > * { max-width: 46ch; }
.practice-tool .flashcard-face.flashcard-back {
    transform: rotateY(180deg);
    border-color: color-mix(in srgb, var(--accent, var(--db-accent)) 45%, var(--border, var(--db-border)));
    background: color-mix(in srgb, var(--accent, var(--db-accent)) 8%, var(--surface-2, var(--db-surface-soft)));
}
@media (prefers-reduced-motion: reduce) {
    .practice-tool .flashcard-inner { transition: none; }
}
/* Reduced-motion / no-JS-transform fallback safety net: if 3D transforms
   are unsupported the back face would otherwise sit invisibly behind the
   front face forever, so hide the face that isn't the active one. */
@supports not (backface-visibility: hidden) {
    .practice-tool .flashcard-inner { position: static; min-height: 0; }
    .practice-tool .flashcard-face { position: static; inset: auto; }
    .practice-tool .flashcard-face.flashcard-back { display: none; }
    .practice-tool .flashcard.is-flipped .flashcard-face.flashcard-front { display: none; }
    .practice-tool .flashcard.is-flipped .flashcard-face.flashcard-back { display: flex; }
}

/* Interview Preparation self-assessment */
.practice-tool .self-assessment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.practice-tool .self-assessment .button.is-active {
    border-color: var(--accent, var(--db-accent));
    color: var(--accent, var(--db-accent));
    background: color-mix(in srgb, var(--accent, var(--db-accent)) 14%, var(--surface-2, var(--db-surface-soft)));
}
.practice-tool .callout-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
}

/* Matching */
.practice-tool .matching-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
}
.practice-tool .matching-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 8px;
    background: var(--surface-2, var(--db-surface-soft));
    flex-wrap: wrap;
    transition: border-color .18s ease, background-color .18s ease;
}
.practice-tool .matching-row.is-correct-choice {
    border-color: #52e5a3;
    background: color-mix(in srgb, #52e5a3 14%, var(--surface-2, var(--db-surface-soft)));
}
.practice-tool .matching-row.is-wrong-choice {
    border-color: #ff6b7e;
    background: color-mix(in srgb, #ff6b7e 14%, var(--surface-2, var(--db-surface-soft)));
}
.practice-tool .matching-left {
    flex: 1 1 40%;
    font-size: 13px;
    font-weight: 600;
}
.practice-tool .matching-select {
    flex: 1 1 45%;
    min-width: 140px;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
    color: var(--text, var(--db-text));
    border: 1px solid var(--border, var(--db-border));
    border-radius: 7px;
    background: var(--surface, var(--db-surface));
}
.practice-tool .matching-select:disabled { opacity: .72; }

/* Ordering */
.practice-tool .ordering-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
    padding: 0;
    list-style: none;
}
.practice-tool .ordering-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 8px;
    background: var(--surface-2, var(--db-surface-soft));
    font-size: 13px;
    transition: border-color .18s ease, background-color .18s ease;
}
.practice-tool .ordering-item.is-correct-choice {
    border-color: #52e5a3;
    background: color-mix(in srgb, #52e5a3 14%, var(--surface-2, var(--db-surface-soft)));
}
.practice-tool .ordering-item.is-wrong-choice {
    border-color: #ff6b7e;
    background: color-mix(in srgb, #ff6b7e 14%, var(--surface-2, var(--db-surface-soft)));
}
.practice-tool .ordering-controls {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.practice-tool .ordering-controls .icon-button {
    padding: 4px 9px;
    line-height: 1;
}

/* =========================================================
   TRY IT YOURSELF — shared editor shell (assets/js/try-it-
   yourself/ui-kit.js + python-runtime.js / sandbox-runtime.js /
   sql-runtime.js), one design for every course and runtime: a
   task brief, then an IDE-style window (toolbar with run status,
   transparent-textarea-over-highlight-overlay editor, status bar,
   output/result panes). Uses only --db-* tokens and the shared .tok-*
   syntax colors (styled above). Scoped to .practice-tool so it only
   ever appears inside a try_it_yourself activity card.
   ========================================================= */
.practice-tool.tiy-inline-activity {
    max-width: 940px;
    margin: 16px 0;
    padding: 14px clamp(12px, 3vw, 18px);
    border: 1px solid var(--db-border);
    border-radius: var(--radius, 12px);
    background: var(--db-surface);
    box-shadow: var(--db-shadow);
}
.practice-tool.tiy-inline-activity .quiz-question { margin-top: 0; }

/* Card: task brief above one IDE-style window (toolbar, editor, status
   bar, output/result panes). The window is always dark (--db-code) in
   both themes, matching the lesson code blocks. */
.practice-tool .tiy-card {
    --tiy-accent: var(--db-accent);
    --tiy-line: color-mix(in srgb, var(--db-code-text) 11%, var(--db-code));
    --tiy-chrome: color-mix(in srgb, var(--db-code-text) 5%, var(--db-code));
    --tiy-dim: color-mix(in srgb, var(--db-code-text) 58%, var(--db-code));
    --tiy-ok: var(--db-success, #10b981);
    --tiy-bad: var(--db-danger, #dc2626);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    margin-top: 8px;
}

.practice-tool .tiy-task {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--tiy-accent) 28%, var(--db-border));
    border-left: 3px solid var(--tiy-accent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--tiy-accent) 7%, var(--db-surface));
}
.practice-tool .tiy-task-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tiy-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.practice-tool .tiy-task-label .tiy-icon { width: 15px; height: 15px; }
.practice-tool .tiy-instructions { margin: 0; color: var(--db-text); font-size: 15px; line-height: 1.6; }

.practice-tool .tiy-window {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--tiy-line);
    border-radius: 14px;
    background: var(--db-code);
    box-shadow: 0 18px 40px -18px rgba(3, 10, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.practice-tool .tiy-window:focus-within {
    border-color: color-mix(in srgb, var(--tiy-accent) 60%, var(--tiy-line));
    box-shadow: 0 18px 40px -18px rgba(3, 10, 24, .55), 0 0 0 3px color-mix(in srgb, var(--tiy-accent) 22%, transparent);
}

/* Toolbar */
.practice-tool .tiy-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tiy-line);
    background: var(--tiy-chrome);
}
.practice-tool .tiy-file { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.practice-tool .tiy-lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    color: var(--db-code-text);
    font: 800 10.5px/1.5 var(--db-mono);
    letter-spacing: .06em;
    border: 1px solid var(--tiy-line);
    border-radius: 99px;
    background: color-mix(in srgb, var(--db-code-text) 7%, var(--db-code));
}
.practice-tool .tiy-lang-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tiy-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--tiy-accent) 70%, transparent);
}
.practice-tool .tiy-file-name { color: var(--tiy-dim); font: 600 12.5px/1.4 var(--db-mono); }
.practice-tool .tiy-file-flag {
    padding: 2px 7px;
    color: var(--tiy-dim);
    font-size: 10.5px;
    font-weight: 700;
    border: 1px dashed var(--tiy-line);
    border-radius: 99px;
}
.practice-tool .tiy-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    color: var(--tiy-dim);
    font: 700 11px/1.6 var(--db-mono);
    border-radius: 99px;
    background: color-mix(in srgb, var(--db-code-text) 7%, var(--db-code));
}
.practice-tool .tiy-status[hidden] { display: none; }
.practice-tool .tiy-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.practice-tool .tiy-status.is-running { color: #ffd166; }
.practice-tool .tiy-status.is-running::before { animation: tiy-pulse 1s ease-in-out infinite; }
.practice-tool .tiy-status.is-done { color: color-mix(in srgb, var(--tiy-ok) 80%, #fff); background: color-mix(in srgb, var(--tiy-ok) 14%, var(--db-code)); }
.practice-tool .tiy-status.is-error { color: color-mix(in srgb, var(--tiy-bad) 60%, #fff); background: color-mix(in srgb, var(--tiy-bad) 16%, var(--db-code)); }
@keyframes tiy-pulse { 50% { opacity: .3; } }

.practice-tool .tiy-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.practice-tool .tiy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    color: var(--db-code-text);
    font: 700 13px/1 var(--db-font, inherit);
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.practice-tool .tiy-btn:focus-visible { outline: 2px solid var(--tiy-accent); outline-offset: 2px; }
.practice-tool .tiy-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.practice-tool .tiy-btn--ghost { color: var(--tiy-dim); }
.practice-tool .tiy-btn--ghost:hover { color: var(--db-code-text); border-color: var(--tiy-line); background: color-mix(in srgb, var(--db-code-text) 8%, var(--db-code)); }
.practice-tool .tiy-btn--ghost.is-done { color: color-mix(in srgb, var(--tiy-ok) 80%, #fff); }
.practice-tool .tiy-btn--primary {
    min-width: 96px;
    padding: 0 18px;
    /* Deep emerald so the white label keeps >= 4.5:1 contrast. */
    color: #fff;
    background: linear-gradient(180deg, #0a8f63, #06734f);
    border-color: #05603f;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tiy-ok) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.practice-tool .tiy-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--tiy-ok) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.practice-tool .tiy-btn--primary:active { transform: translateY(0); }
.practice-tool .tiy-btn--primary:disabled { cursor: progress; opacity: .85; transform: none; }
.practice-tool .tiy-btn--primary.is-running .tiy-icon { animation: tiy-pulse 1s ease-in-out infinite; }
.practice-tool .tiy-btn--danger { color: color-mix(in srgb, var(--tiy-bad) 55%, #fff); border-color: color-mix(in srgb, var(--tiy-bad) 45%, var(--tiy-line)); background: color-mix(in srgb, var(--tiy-bad) 12%, var(--db-code)); }
.practice-tool .tiy-btn--danger:hover { background: color-mix(in srgb, var(--tiy-bad) 22%, var(--db-code)); }
.practice-tool .tiy-btn[hidden] { display: none; }

/* Editor: transparent textarea over the highlighted <pre>, same metrics. */
.practice-tool .tiy-editor-wrap {
    --tiy-editor-font-size: 14px;
    --tiy-editor-line-height: 23px;
    --tiy-gutter-width: 46px;
    --tiy-pad-y: 14px;
    --tiy-rows: 8;
    position: relative;
    display: flex;
    min-height: calc(var(--tiy-rows) * var(--tiy-editor-line-height) + 2 * var(--tiy-pad-y));
    background: var(--db-code);
    box-sizing: border-box;
}
.practice-tool .tiy-gutter {
    flex: 0 0 var(--tiy-gutter-width);
    box-sizing: border-box;
    margin: 0;
    padding: var(--tiy-pad-y) 12px var(--tiy-pad-y) 0;
    border-right: 1px solid var(--tiy-line);
    background: color-mix(in srgb, var(--db-code-text) 3%, var(--db-code));
    color: color-mix(in srgb, var(--db-code-text) 38%, var(--db-code));
    font: 500 var(--tiy-editor-font-size)/var(--tiy-editor-line-height) var(--db-mono);
    text-align: right;
    white-space: pre;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
}
.practice-tool .tiy-highlight-overlay {
    position: absolute;
    inset: 0;
    left: var(--tiy-gutter-width);
    margin: 0;
    padding: var(--tiy-pad-y) 16px;
    border: 0;
    background: transparent;
    color: var(--db-code-text);
    font: var(--tiy-editor-font-size)/var(--tiy-editor-line-height) var(--db-mono);
    font-variant-ligatures: none;
    tab-size: 4;
    white-space: pre;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.practice-tool .tiy-highlight-overlay code { display: block; font: inherit; white-space: inherit; text-shadow: none; }
.practice-tool .tiy-editor {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: calc(var(--tiy-rows) * var(--tiy-editor-line-height) + 2 * var(--tiy-pad-y));
    max-height: 70vh;
    margin: 0;
    padding: var(--tiy-pad-y) 16px;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: transparent;
    caret-color: #ffd166;
    font: var(--tiy-editor-font-size)/var(--tiy-editor-line-height) var(--db-mono);
    font-variant-ligatures: none;
    white-space: pre;
    overflow: auto;
    resize: vertical;
    tab-size: 4;
    box-sizing: border-box;
    z-index: 2;
}
.practice-tool .tiy-editor::selection { background: rgba(79, 141, 255, .38); color: transparent; }
.practice-tool .tiy-editor[readonly] { cursor: default; }

.practice-tool .tiy-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 14px;
    border-top: 1px solid var(--tiy-line);
    background: var(--tiy-chrome);
    color: var(--tiy-dim);
    font: 600 11.5px/1.5 var(--db-mono);
}
.practice-tool .tiy-hint kbd {
    padding: 1px 6px;
    color: var(--db-code-text);
    font: inherit;
    border: 1px solid var(--tiy-line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--db-code-text) 6%, var(--db-code));
}

/* Panes below the editor: program input, output console, SQL results,
   HTML preview. */
.practice-tool .tiy-panes:empty,
.practice-tool .tiy-pane[hidden] { display: none; }
.practice-tool .tiy-pane {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--tiy-line);
    background: color-mix(in srgb, #000 22%, var(--db-code));
}
.practice-tool .tiy-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.practice-tool .tiy-pane-label { color: var(--tiy-dim); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.practice-tool .tiy-clear {
    min-height: 30px;
    padding: 0 10px;
    color: var(--tiy-dim);
    font: 700 12px/1 var(--db-font, inherit);
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}
.practice-tool .tiy-clear:hover { color: var(--db-code-text); border-color: var(--tiy-line); }
.practice-tool .tiy-clear:focus-visible { outline: 2px solid var(--tiy-accent); outline-offset: 2px; }
.practice-tool .tiy-input {
    min-height: 56px;
    max-height: 140px;
    padding: 9px 12px;
    color: var(--db-code-text);
    font: 13.5px/1.55 var(--db-mono);
    border: 1px solid var(--tiy-line);
    border-radius: 9px;
    background: var(--db-code);
    resize: vertical;
}
.practice-tool .tiy-input::placeholder { color: color-mix(in srgb, var(--db-code-text) 40%, var(--db-code)); }
.practice-tool .tiy-input:focus-visible { outline: 2px solid var(--tiy-accent); outline-offset: 1px; }
.practice-tool .tiy-output {
    min-height: 64px;
    max-height: 340px;
    margin: 0;
    padding: 0;
    overflow: auto;
    border: 0;
    background: transparent;
    color: var(--db-code-text);
    font: 13.5px/1.6 var(--db-mono);
    white-space: pre-wrap;
    word-break: break-word;
}
.practice-tool .tiy-output:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--db-code-text) 42%, var(--db-code)); font-style: italic; }
.practice-tool .tiy-output:focus-visible { outline: 2px solid var(--tiy-accent); outline-offset: 4px; border-radius: 4px; }
.practice-tool .tiy-error-output {
    min-height: 0;
    padding: 10px 12px;
    color: color-mix(in srgb, var(--tiy-bad) 45%, #fff);
    border: 1px solid color-mix(in srgb, var(--tiy-bad) 45%, var(--tiy-line));
    border-left: 3px solid var(--tiy-bad);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tiy-bad) 12%, var(--db-code));
}
.practice-tool .tiy-error-output[hidden] { display: none; }
.practice-tool .tiy-sql-empty { margin: 0; color: color-mix(in srgb, var(--db-code-text) 50%, var(--db-code)); font-size: 13px; font-style: italic; }
.practice-tool .tiy-sql-results .table-scroll { overflow-x: auto; border: 1px solid var(--tiy-line); border-radius: 9px; }
.practice-tool .tiy-sql-results table { width: 100%; border-collapse: collapse; color: var(--db-code-text); font: 13px/1.5 var(--db-mono); }
.practice-tool .tiy-sql-results th { padding: 8px 12px; text-align: left; color: var(--tiy-dim); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; background: var(--tiy-chrome); border-bottom: 1px solid var(--tiy-line); }
.practice-tool .tiy-sql-results td { padding: 7px 12px; border-bottom: 1px solid var(--tiy-line); }
.practice-tool .tiy-sql-results tr:last-child td { border-bottom: 0; }
.practice-tool .tiy-sql-results hr { margin: 10px 0; border: 0; border-top: 1px solid var(--tiy-line); }
.practice-tool .tiy-preview-frame { width: 100%; min-height: 240px; border: 1px solid var(--tiy-line); border-radius: 9px; background: #fff; }
.practice-tool .tiy-preview-error { margin: 0; padding: 8px 12px; font-size: 12.5px; color: color-mix(in srgb, var(--tiy-bad) 45%, #fff); border-left: 3px solid var(--tiy-bad); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--tiy-bad) 12%, var(--db-code)); }

/* Fullscreen: the editor and panes share the viewport (same Chrome
   top-layer `display` reset workaround as the legacy playground card). */
.practice-tool .tiy-card:is(:fullscreen, .tiy-fullscreen-active) {
    display: flex !important;
    flex-direction: column !important;
    position: fixed;
    z-index: 600;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: clamp(10px, 2vw, 20px);
    overflow: auto;
    background: var(--db-surface) !important;
}
.practice-tool .tiy-card:is(:fullscreen, .tiy-fullscreen-active) .tiy-window { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.practice-tool .tiy-card:is(:fullscreen, .tiy-fullscreen-active) .tiy-editor-wrap { flex: 1 1 55%; min-height: 0; }
.practice-tool .tiy-card:is(:fullscreen, .tiy-fullscreen-active) .tiy-editor { min-height: 0; max-height: none; resize: none; }
.practice-tool .tiy-card:is(:fullscreen, .tiy-fullscreen-active) .tiy-panes { flex: 0 1 40%; min-height: 0; overflow: auto; }

@media (max-width: 700px) {
    .practice-tool .tiy-editor-wrap { --tiy-editor-font-size: 13px; --tiy-editor-line-height: 21px; --tiy-gutter-width: 38px; --tiy-pad-y: 12px; }
    .practice-tool .tiy-gutter { padding-right: 9px; }
    .practice-tool .tiy-highlight-overlay, .practice-tool .tiy-editor { padding-left: 12px; padding-right: 12px; }
    .practice-tool .tiy-toolbar { padding: 8px 10px; }
    .practice-tool .tiy-toolbar-actions { width: 100%; }
    .practice-tool .tiy-btn { min-height: 44px; }
    .practice-tool .tiy-btn--ghost { position: relative; flex: 0 0 44px; padding: 0; }
    .practice-tool .tiy-btn--ghost .tiy-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .practice-tool .tiy-btn--primary, .practice-tool .tiy-btn--danger { flex: 1 1 auto; }
    .practice-tool .tiy-hint { display: none; }
    .practice-tool .tiy-instructions { font-size: 14.5px; }
}
@media (hover: none) {
    .practice-tool .tiy-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .practice-tool .tiy-status.is-running::before,
    .practice-tool .tiy-btn--primary.is-running .tiy-icon { animation: none; }
    .practice-tool .tiy-btn, .practice-tool .tiy-window { transition: none; }
    .practice-tool .tiy-btn--primary:hover { transform: none; }
}

/* Self-sufficient fallback for the deterministically-matched Try It
   Yourself toolbar action (reuses the legacy course pages' own
   ".icon-button.try-it-yourself" class/markup) so it still gets the same
   distinct, branded look on a course with no legacy tutorial.css loaded
   at all -- matching every other course-agnostic fallback in this file. */
.code-block .code-actions .try-it-yourself {
    border-color: color-mix(in srgb, var(--accent, var(--db-accent)) 55%, var(--border, var(--db-border)));
    background: color-mix(in srgb, var(--accent, var(--db-accent)) 20%, var(--surface-2, var(--db-surface-soft)));
    color: var(--text, var(--db-text));
}
.code-block .code-actions .try-it-yourself:hover {
    border-color: var(--accent, var(--db-accent));
    background: color-mix(in srgb, var(--accent, var(--db-accent)) 32%, var(--surface-2, var(--db-surface-soft)));
}
/* Same narrow-screen label collapse as the legacy course pages' own
   ".code-actions .try-it-yourself" mobile rule, so a third toolbar action
   never crowds Copy/Full screen off a small phone width. */
@media (max-width: 480px) {
    .code-actions .try-it-yourself { font-size: 0; }
    .code-actions .try-it-yourself::after { content: 'Run'; font-size: 9px; }
}

/* =========================================================
   CELEBRATION ENGINE — CSS required by the WAAPI-based
   celebrate() function embedded in database-chapter.js.
   Matches tutorial.css exactly (lines 891-906) so the
   same celebration renders correctly on all courses.
   Position/size/color are baked into WAAPI keyframes;
   only static shape & hidden-by-default state live here.
   tutorial.css already defines these for SQL Marathi;
   these declarations are compatible (not conflicting).
   ========================================================= */
.celebration-layer { position: fixed; z-index: 2000; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.celebration-particle { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.celebration-particle.round { border-radius: 50%; }
.celebration-particle.ribbon { border-radius: 2px; }
.celebration-particle.star { clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 69% 56%, 79% 94%, 50% 72%, 21% 94%, 31% 56%, 2% 35%, 39% 34%); }
.celebration-glow { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: white; box-shadow: 0 0 30px 12px rgba(105, 224, 193, .9), 0 0 90px 34px rgba(128, 169, 255, .55); opacity: 0; }
.celebration-glow.glow-cannon { width: 18px; height: 60px; border-radius: 50%; }
.celebration-glow.glow-spiral { width: 48px; height: 48px; background: transparent; border: 5px solid rgba(255, 255, 255, .9); }
.celebration-sweep { position: absolute; top: -18vh; left: -30vw; width: 160vw; height: 42vh; background: linear-gradient(112deg, transparent 20%, rgba(105, 224, 193, .22), rgba(128, 169, 255, .38), rgba(217, 156, 255, .22), transparent 80%); filter: blur(16px); transform: rotate(-8deg); animation: celebration-sweep 5.8s ease-in-out forwards; }

@keyframes celebration-sweep {
    0% { opacity: 0; transform: translate3d(-18vw, -10vh, 0) rotate(-8deg); }
    24% { opacity: 1; }
    74% { opacity: .75; }
    100% { opacity: 0; transform: translate3d(18vw, 32vh, 0) rotate(4deg); }
}

/* Full-Screen Code Viewer Modal */
.code-fullscreen-modal {
    position: fixed;
    z-index: 600;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 32px);
    background: rgba(2, 8, 18, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: code-modal-fade-in .18s ease-out;
}
.code-fullscreen-modal[hidden] {
    display: none !important;
}
@keyframes code-modal-fade-in {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: none; }
}
.code-fullscreen-card {
    display: flex;
    flex-direction: column;
    width: min(100%, 1100px);
    max-height: min(94vh, 900px);
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.code-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 95%, var(--brand));
    flex-shrink: 0;
}
.code-fullscreen-header .code-language {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 800 10px/1 var(--font-mono);
    letter-spacing: .1em;
    color: #a8bad2;
}
.code-fullscreen-header .code-language i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57ddb9;
    box-shadow: 0 0 10px rgba(87, 221, 185, .65);
}
.code-fullscreen-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.code-fullscreen-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px 24px;
    background: var(--code-bg);
}
.code-fullscreen-body pre {
    margin: 0;
    white-space: pre;
    tab-size: 4;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--code-text);
}
.code-fullscreen-body code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--code-text);
    text-shadow: 0 0 12px rgba(217, 231, 255, .08);
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* Code block typography, toolbar separation & horizontal scrolling */
.code-block pre {
    max-height: 560px;
    margin: 0;
    overflow: auto;
    overflow-x: auto;
    padding: 13px 15px 15px;
    tab-size: 4;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--code-text);
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
}
.code-block code {
    color: var(--code-text);
    font-size: 12.5px;
    line-height: 1.65;
    font-family: var(--font-mono);
    text-shadow: 0 0 12px rgba(217, 231, 255, .08);
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* Line numbers (added by applyCodeLineNumbers() in database-chapter.js) sit
   in their own gutter column, never inside <code>, so copying or selecting
   the code never picks them up. The gutter matches the code's font and line
   height line for line and stays pinned while the code scrolls sideways. */
/* The gutter itself carries the left padding: a sticky element pins to the
   padding edge, so padding on the <pre> would leave a strip where scrolled
   code shows to the left of the numbers. */
pre.has-line-numbers {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 14px;
    padding-left: 0 !important;
}
pre.has-line-numbers > code { display: block; min-width: 0; }
.code-line-numbers {
    position: sticky;
    left: 0;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0 10px 0 14px;
    border-right: 1px solid color-mix(in srgb, var(--code-text, #e6efff) 16%, transparent);
    background: var(--code-bg, var(--db-code, #071426));
    color: color-mix(in srgb, var(--code-text, #e6efff) 42%, transparent);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: pre;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}
.code-fullscreen-body .code-line-numbers { padding-left: 0; }
@media print {
    .code-line-numbers { position: static; }
}

/* Database-rendered inline code stays distinct without bold body text. */
.inline-code,
:is(.db-lesson-content, .db-short-notes-content) :is(.inline-code, p code, li code, td code, dd code) {
    padding: .12em .35em;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--brand);
    font-size: .88em;
    font-weight: 400;
    line-height: 1.3;
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* Paired double quotes are an authoring convention for special prose, not
   code syntax. Use color alone so emphasis never becomes a pill or changes
   the surrounding line height. */
body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) mark.quoted-text-highlight {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--brand, var(--db-accent));
    font-weight: inherit;
    box-shadow: none;
}

/* Interactive tool code typography: exact legacy parity */
.tool-code > div {
    font: 800 9px/1 var(--font-mono);
    letter-spacing: .09em;
}
.tool-code code,
.db-tool-stage code,
.tool-result-card code,
.tool-result-value code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--code-text);
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}
.quiz-options code {
    font: 700 12.5px/1.4 var(--font-mono, monospace);
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}

/* Syntax highlighting token typography fallback */
.tok-comment { color: #7892aa; font-style: italic; }
.tok-string { color: #a8e6a3; }
.tok-keyword { color: #d99cff; font-weight: 700; }
.tok-number { color: #ffbf7a; }
.tok-builtin { color: #67d9ff; }
.tok-operator { color: #ff8fa3; }
.tok-not-equal { color: #ffe083; font-weight: 850; font-size: 1.08em; text-shadow: 0 0 12px rgba(255, 224, 131, .28); }

.code-block figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    min-height: 33px;
    padding: 5px 10px;
}
.code-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.code-language {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* .db-chapter-pagination and the Short Notes header/title-lockup/kicker/
   controls chrome are not redeclared here -- legacy's .chapter-pagination
   and .short-notes-header (+ its title-lockup/kicker/actions children)
   fully cover them via the dual/bare legacy classes already in the markup
   (database-chapter.php), including the .short-notes-scrim backdrop. The
   outer .db-short-notes panel shell below keeps its own position/transform/
   transition rules because database-chapter.js's open/close timing
   (a delayed `hidden = true` after the CSS transition) is written against
   them specifically, unlike legacy's short-notes JS which hides instantly
   and has no such timing to preserve. */
:is(.short-notes-scrim, .db-notes-backdrop) {
    position: fixed;
    z-index: 350;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 11%, transparent), transparent 34%),
        rgba(1, 6, 13, .62);
    -webkit-backdrop-filter: blur(11px) saturate(125%);
    backdrop-filter: blur(11px) saturate(125%);
    cursor: default;
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity;
}
:is(.short-notes-scrim, .db-notes-backdrop).is-open {
    opacity: 1;
    pointer-events: auto;
}
:is(.short-notes-scrim, .db-notes-backdrop).is-closing {
    opacity: 0;
    pointer-events: none;
}
.db-short-notes {
    position: fixed;
    z-index: 360;
    isolation: isolate;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    width: min(660px, calc(100vw - 32px));
    max-width: 100%;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    padding: 0;
    color: var(--text, var(--db-text));
    font-family: var(--font-body);
    border-left: 1px solid color-mix(in srgb, var(--brand, var(--db-accent)) 28%, var(--border, var(--db-border)));
    background: var(--surface, var(--db-surface));
    box-shadow: -18px 0 48px rgba(0,0,0,.32);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.16, 1, .3, 1), opacity .22s ease;
}
.db-short-notes.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.db-short-notes.is-closing {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
/* Isolated Text-Zoom Font Scaling System for Teacher Short Notes */
:is(.short-notes-panel, .db-short-notes) {
    --notes-font-scale: 1;
}
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="80"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="80"] { --notes-font-scale: 0.8; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="90"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="90"] { --notes-font-scale: 0.9; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="100"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="100"] { --notes-font-scale: 1.0; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="110"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="110"] { --notes-font-scale: 1.1; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="120"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="120"] { --notes-font-scale: 1.2; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="130"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="130"] { --notes-font-scale: 1.3; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="140"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="140"] { --notes-font-scale: 1.4; }
:is(.short-notes-panel, .db-short-notes)[data-notes-zoom="150"],
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)[data-notes-zoom="150"] { --notes-font-scale: 1.5; }

/* Fixed-size toolbar chrome - never affected by text zoom */
:is(.short-notes-panel, .db-short-notes) .short-notes-header strong,
:is(.short-notes-panel, .db-short-notes) #short-notes-title,
:is(.short-notes-panel, .db-short-notes) .short-notes-title-copy strong {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
:is(.short-notes-panel, .db-short-notes) .short-notes-header,
:is(.short-notes-panel, .db-short-notes) .short-notes-header-actions,
:is(.short-notes-panel, .db-short-notes) .short-notes-zoom,
:is(.short-notes-panel, .db-short-notes) #short-notes-close,
:is(.short-notes-panel, .db-short-notes) #short-notes-fullscreen-toggle,
:is(.short-notes-panel, .db-short-notes) #short-notes-download {
    font-size: 13px;
}

:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    padding: 12px 16px 24px;
    scrollbar-color: color-mix(in srgb, var(--brand, var(--db-accent)) 40%, var(--scroll-thumb, #2f4d78)) transparent;
    scrollbar-gutter: stable;
    font-family: var(--font-body);
    font-size: calc(17px * var(--notes-font-scale, 1));
    font-weight: 400;
    line-height: 1.6;
}
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)::-webkit-scrollbar { width: 6px; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)::-webkit-scrollbar-track { background: transparent; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content)::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--brand, var(--db-accent)) 35%, var(--scroll-thumb, #2f4d78)); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-notes-sections { display: grid; width: 100%; min-width: 0; gap: 10px; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card { --notes-accent: var(--brand, var(--db-accent)); position: relative; width: 100%; min-width: 0; overflow: hidden; padding: 10px 14px 11px; border: 1px solid color-mix(in srgb, var(--notes-accent) 26%, var(--border, var(--db-border))); border-left: 3.5px solid var(--notes-accent); border-radius: 9px; background: linear-gradient(155deg, color-mix(in srgb, var(--notes-accent) 6%, var(--surface-2, var(--db-surface-soft))), var(--surface-2, var(--db-surface-soft))); box-shadow: 0 3px 12px color-mix(in srgb, var(--notes-accent) 8%, rgba(0,0,0,.07)), inset 0 1px rgba(255,255,255,.04); transition: border-color .2s ease, box-shadow .2s ease; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:hover { border-color: color-mix(in srgb, var(--notes-accent) 45%, var(--border, var(--db-border))); box-shadow: 0 5px 16px color-mix(in srgb, var(--notes-accent) 14%, rgba(0,0,0,.1)); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--intro { --notes-accent: var(--brand, var(--db-accent)); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--c1, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:nth-child(6n + 1) { --notes-accent: #ffd43b; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--c2, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:nth-child(6n + 2) { --notes-accent: #3b82f6; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--c3, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:nth-child(6n + 3) { --notes-accent: #8b5cf6; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--c4, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:nth-child(6n + 4) { --notes-accent: #10b981; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--c5, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:nth-child(6n + 5) { --notes-accent: #f59e0b; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card--c6, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card:nth-child(6n + 6) { --notes-accent: #ec4899; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .short-note-card > :last-child { margin-bottom: 0; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) :is(p, li, h1, h2, h3, h4) { max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) :is(.code-block, .table-scroll) { width: 100%; max-width: 100%; min-width: 0; }

/* Scoped Teacher Short Notes Headings */
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h1 {
    margin: 0 0 calc(12px * var(--notes-font-scale, 1));
    padding: 0;
    border: 0;
    color: var(--text, var(--db-text));
    font-family: var(--font-body);
    font-size: calc(25px * var(--notes-font-scale, 1));
    font-weight: 750;
    line-height: 1.28;
    letter-spacing: -0.02em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 700px) {
    :is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h1 {
        font-size: calc(22px * var(--notes-font-scale, 1));
    }
}

:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    margin: 0 0 calc(10px * var(--notes-font-scale, 1));
    padding: 0 0 calc(6px * var(--notes-font-scale, 1));
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 22%, var(--border, var(--db-border)));
    border-radius: 0;
    background: transparent;
    color: var(--notes-accent, var(--brand, var(--db-accent)));
    box-shadow: none;
    font-family: var(--font-body);
    font-size: calc(22px * var(--notes-font-scale, 1));
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h2::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--notes-accent, var(--brand, var(--db-accent)));
    box-shadow: 0 0 8px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 80%, transparent);
    transform: rotate(45deg);
}
@media (max-width: 700px) {
    :is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h2 {
        font-size: calc(20px * var(--notes-font-scale, 1));
    }
}

:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h3 {
    margin: calc(10px * var(--notes-font-scale, 1)) 0 calc(6px * var(--notes-font-scale, 1));
    color: var(--text, var(--db-text));
    font-family: var(--font-body);
    font-size: calc(19px * var(--notes-font-scale, 1));
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -0.01em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h4 {
    margin: calc(8px * var(--notes-font-scale, 1)) 0 calc(5px * var(--notes-font-scale, 1));
    color: var(--text, var(--db-text));
    font-family: var(--font-body);
    font-size: calc(16.5px * var(--notes-font-scale, 1));
    font-weight: 650;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) :is(h1, h2, h3, h4):first-child {
    margin-top: 0;
}

/* Scoped Paragraphs & Inline Text */
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) p {
    margin: 0 0 calc(8px * var(--notes-font-scale, 1));
    color: var(--text, var(--db-text));
    font-family: var(--font-body);
    font-size: calc(17px * var(--notes-font-scale, 1));
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) h2 + p {
    color: var(--text, var(--db-text));
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) strong {
    display: inline;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 750;
    color: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 90%, var(--text, var(--db-text)));
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 25%, transparent);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 10%, transparent);
}

/* Scoped Lists */
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) :is(ul, ol) {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--notes-font-scale, 1));
    margin: calc(6px * var(--notes-font-scale, 1)) 0 calc(10px * var(--notes-font-scale, 1));
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) ul li {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 1px 0 1px calc(20px * var(--notes-font-scale, 1));
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: calc(17px * var(--notes-font-scale, 1));
    line-height: 1.55;
    color: var(--text, var(--db-text));
    word-wrap: break-word;
    overflow-wrap: break-word;
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) ul li::before {
    content: '◆';
    position: absolute;
    left: 3px;
    top: calc(2px * var(--notes-font-scale, 1));
    color: var(--notes-accent, var(--brand, var(--db-accent)));
    font-size: calc(9px * var(--notes-font-scale, 1));
    line-height: 1.8;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 50%, transparent));
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) ol {
    counter-reset: fancy-item;
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) ol li {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 1px 0 1px calc(24px * var(--notes-font-scale, 1));
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: calc(17px * var(--notes-font-scale, 1));
    line-height: 1.55;
    color: var(--text, var(--db-text));
    counter-increment: fancy-item;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) ol li::before {
    content: counter(fancy-item);
    position: absolute;
    left: 0;
    top: calc(3px * var(--notes-font-scale, 1));
    display: grid;
    width: calc(17px * var(--notes-font-scale, 1));
    height: calc(17px * var(--notes-font-scale, 1));
    place-items: center;
    border-radius: 4px;
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 18%, var(--surface-3, var(--db-surface-soft)));
    color: var(--notes-accent, var(--brand, var(--db-accent)));
    font-size: calc(10px * var(--notes-font-scale, 1));
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 30%, transparent);
}

/* Scoped Code Typography */
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) :is(.inline-code, code:not(pre code)) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: var(--font-mono, monospace);
    font-size: calc(14.5px * var(--notes-font-scale, 1));
    font-weight: 400;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 12%, var(--surface-3, var(--db-surface-soft)));
    color: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 85%, var(--text, var(--db-text)));
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 25%, transparent);
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) pre code,
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) .code-block pre code {
    font-size: calc(14px * var(--notes-font-scale, 1));
    line-height: 1.65;
    font-family: var(--font-mono, monospace);
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) .code-block .code-language {
    font-size: calc(11px * var(--notes-font-scale, 1));
}

/* Scoped Blockquotes */
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) blockquote {
    margin: calc(8px * var(--notes-font-scale, 1)) 0 calc(10px * var(--notes-font-scale, 1));
    padding: calc(8px * var(--notes-font-scale, 1)) calc(14px * var(--notes-font-scale, 1));
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 25%, var(--border, var(--db-border)));
    border-left: 3.5px solid var(--notes-accent, var(--brand, var(--db-accent)));
    border-radius: 7px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 8%, var(--surface-3, var(--db-surface-soft))), color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 3%, var(--surface-2, var(--db-surface-soft))));
    color: var(--text, var(--db-text));
    font-family: var(--font-body);
    font-size: calc(16.5px * var(--notes-font-scale, 1));
    line-height: 1.55;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 8%, transparent);
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) blockquote p {
    font-size: calc(16.5px * var(--notes-font-scale, 1));
}
:is(.teacher-notes-content, .db-short-notes-content, .short-notes-body) blockquote p:last-child {
    margin-bottom: 0;
}
:is(.short-notes-body, .db-short-notes-content) figure.code-block {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid #243955;
    border-radius: 9px;
    background: var(--code-bg, #030812);
    box-shadow: 0 13px 32px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .03);
}
:is(.short-notes-body, .db-short-notes-content) .code-block figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: 4px;
    min-height: 33px;
    padding: 5px 7px 5px 11px;
    border-bottom: 1px solid #21344d;
    background: #0a1627;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .code-language {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a8bad2;
    font: 800 10px/1 var(--font-mono);
    letter-spacing: .1em;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .code-language i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57ddb9;
    box-shadow: 0 0 10px rgba(87, 221, 185, .65);
}
:is(.short-notes-body, .db-short-notes-content) .code-block .code-actions {
    display: flex;
    gap: 4px;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .icon-button {
    min-width: 42px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid #29415f;
    border-radius: 5px;
    background: #102038;
    color: #aec0d8;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .icon-button:hover {
    border-color: #4d6f9a;
    color: #fff;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .fullscreen-toggle {
    display: inline-flex !important;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .copy-code.is-copied {
    border-color: #a6ffe8;
    background: linear-gradient(135deg, #8ff3d8, #54d8f1);
    color: #03151b;
    box-shadow: 0 0 0 3px rgba(103, 217, 255, .2), 0 0 22px rgba(105, 224, 193, .48);
    transform: translateY(-1px);
}
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .code-block pre {
    max-height: 560px;
    margin: 0;
    overflow: auto;
    overflow-x: auto;
    padding: 13px 15px 15px;
    tab-size: 4;
    font-family: var(--font-mono);
    font-size: calc(14px * var(--notes-font-scale, 1));
    line-height: 1.65;
    color: var(--code-text);
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
}
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .code-block code {
    color: var(--code-text);
    font-size: calc(14px * var(--notes-font-scale, 1));
    line-height: 1.65;
    font-family: var(--font-mono);
    white-space: pre;
    word-break: normal;
    word-wrap: normal;
    text-shadow: 0 0 12px rgba(217, 231, 255, .08);
    font-variant-ligatures: none;
    -webkit-font-feature-settings: "liga" 0, "calt" 0;
    font-feature-settings: "liga" 0, "calt" 0;
}
.short-notes-fullscreen-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent)) 25%, var(--border, var(--db-border)));
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface-2, var(--db-surface-soft)) 80%, transparent);
    color: var(--text, var(--db-text));
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.short-notes-fullscreen-toggle:hover {
    border-color: var(--brand, var(--db-accent));
    background: var(--surface-3, var(--db-surface));
    color: var(--brand, var(--db-accent));
}
.short-notes-fullscreen-toggle svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.short-notes-fullscreen-toggle .icon-exit-fullscreen {
    display: none;
}
.short-notes-panel.is-fullscreen .short-notes-fullscreen-toggle .icon-enter-fullscreen,
.db-short-notes.is-fullscreen .short-notes-fullscreen-toggle .icon-enter-fullscreen {
    display: none;
}
.short-notes-panel.is-fullscreen .short-notes-fullscreen-toggle .icon-exit-fullscreen,
.db-short-notes.is-fullscreen .short-notes-fullscreen-toggle .icon-exit-fullscreen {
    display: inline-block;
}
.short-notes-panel.is-fullscreen,
.db-short-notes.is-fullscreen {
    position: fixed !important;
    z-index: 550 !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform .24s cubic-bezier(.16, 1, .3, 1), opacity .22s ease !important;
    box-shadow: none !important;
    background: var(--surface, var(--db-surface)) !important;
    color: var(--text, var(--db-text)) !important;
}
.short-notes-panel.is-fullscreen.is-entering-fullscreen,
.db-short-notes.is-fullscreen.is-entering-fullscreen {
    transform: scale(0.985) !important;
    opacity: 0 !important;
}
.short-notes-panel.is-fullscreen.is-exiting-fullscreen,
.db-short-notes.is-fullscreen.is-exiting-fullscreen {
    transform: scale(0.985) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.short-notes-panel.is-fullscreen .short-notes-handle,
.db-short-notes.is-fullscreen .short-notes-handle {
    display: none !important;
}
.short-notes-panel.is-fullscreen .short-notes-header,
.db-short-notes.is-fullscreen .short-notes-header {
    flex-shrink: 0 !important;
    padding-inline: clamp(16px, 4vw, 40px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.short-notes-panel.is-fullscreen :is(.short-notes-body, .db-short-notes-content),
.db-short-notes.is-fullscreen :is(.short-notes-body, .db-short-notes-content) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px clamp(16px, 4vw, 40px) 60px !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.short-notes-panel.is-fullscreen .short-notes-sections,
.db-short-notes.is-fullscreen .short-notes-sections {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .table-scroll { margin: 6px 0 8px; overflow-x: auto; border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 24%, var(--border, var(--db-border))); border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) table { width: 100%; min-width: 0; table-layout: auto; font-size: calc(15px * var(--notes-font-scale, 1)); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) th { background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 14%, var(--surface-3, var(--db-surface-soft))); color: var(--notes-accent, var(--brand, var(--db-accent))); font-weight: 750; padding: 5px 8px; font-size: calc(15px * var(--notes-font-scale, 1)); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) td { padding: 5px 8px; border-top: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 12%, var(--border-soft, rgba(255,212,59,.14))); font-size: calc(15px * var(--notes-font-scale, 1)); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) :is(th, td) { overflow-wrap: anywhere; word-break: break-word; }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) hr { border: 0; height: 1px; margin: 10px 0; background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent))) 20%, var(--border, var(--db-border))); }
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .heading-anchor, :is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) .bookmark-toggle { display: none; }

/* Enforce isolated text zoom: never allow container zoom or transform scaling */
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content, .teacher-notes-content) {
    zoom: 1 !important;
}
:is(.short-notes-body, .db-short-notes-content, .teacher-notes-content) {
    transform: none !important;
}

.chapter-end-sentinel { width: 100%; height: 1px; pointer-events: none; visibility: hidden; }

.db-claude-prompt { position: relative; z-index: 80; max-width: 1100px; margin: 14px auto 36px; padding: 16px; color: var(--db-text); border: 1px solid #b797e9; border-radius: 14px; background: var(--db-surface); box-shadow: var(--db-shadow); }
.db-claude-prompt h2 { margin: 0; }
.db-claude-prompt p { margin: 3px 0 10px; color: var(--db-muted); }
.db-claude-prompt textarea { width: 100%; min-height: 300px; padding: 12px; color: var(--db-text); font: 12px/1.5 var(--db-mono); border: 1px solid var(--db-border); border-radius: 9px; background: var(--db-surface-soft); }

@media (max-width: 900px) {
    .db-lesson-main { padding-inline: 13px; }
    .db-chapter-hero { grid-template-columns: 1fr; align-items: flex-start; }
    .db-chapter-hero dl { width: max-content; }
}

@media (max-width: 700px) {
    :root:not([data-preview-course-guide]) { --topbar: 84px; }
    html, body.db-chapter-page { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    .db-page-shell, .db-lesson-main, .db-lesson-content { min-width: 0; max-width: 100%; }
    .db-preview-bar { position: relative; align-items: flex-start; flex-direction: column; }
    .db-preview-actions { width: 100%; overflow-x: auto; }
    .db-course-header, .db-preview-bar + .db-course-header { top: 0; }
    html:not([data-preview-course-guide]) .db-course-header.topbar { grid-template-columns: auto auto minmax(0,1fr) !important; grid-template-rows: 40px 40px; gap: 0 6px; padding-inline: 8px; }
    html:not([data-preview-course-guide]) .db-course-header .db-drawer-toggle { grid-column: 1 !important; grid-row: 1 !important; }
    html:not([data-preview-course-guide]) .db-course-header .db-brand { grid-column: 2 !important; grid-row: 1 !important; }
    html:not([data-preview-course-guide]) .db-course-header .db-jump-control { grid-column: 3 !important; grid-row: 1 !important; justify-self: end; width: 34px; }
    html:not([data-preview-course-guide]) .db-header-actions { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: flex-end; gap: 4px; }
    .db-brand .brand-logo__img { height: 24px; }
    .db-brand .brand-logo { padding: 2px 6px; }
    .db-jump-label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .db-jump-label select { width: 34px; height: 34px; padding: 0; font-size: 0; }
    .db-course-header .db-icon-button { height: 30px; padding-inline: 8px; font-size: 11px; font-weight: 700; }
    .db-course-header .practice-lab-nav-button { width: 30px; padding-inline: 0; }
    .db-course-header .practice-lab-nav-button span, .db-course-header .dashboard-link span { display: none; }
    .db-course-header .short-notes-toggle { width: auto; padding-inline: 8px; }
    .db-lesson-main { padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 84px); }
    .db-lesson-main .breadcrumb { margin-bottom: 10px; font-size: 11.5px; }
    .db-lesson-main .breadcrumb a, .db-lesson-main .breadcrumb span { min-height: 26px; padding: 2px; }
    .db-chapter-hero { gap: 12px; padding: 14px 12px; overflow: hidden; }
    .db-chapter-hero h1 { font-size: clamp(22px, 6vw, 28px); }
    .db-chapter-hero dl { width: 100%; min-width: 0; }
    .db-chapter-hero dl div { min-width: 0; padding: 6px 4px; }
    .db-lesson-content { gap: 8px; }
    .db-content-section { max-width: 100%; padding: 14px 12px; overflow-x: hidden; overflow-x: clip; }
    .db-lesson-content h1 { padding-right: 0; font-size: 1.4em; }
    .db-lesson-content p, .db-lesson-content li { line-height: 1.62; }
    .code-block pre { padding: 12px; font-size: .78em; }
    .db-practice { margin-block: 10px; padding: 10px 10px 12px; }
    .db-practice > header { flex-direction: column; align-items: stretch; gap: 8px; }
    .db-practice > header .section-fullscreen { align-self: flex-end; }
    .db-tool-tabs { margin-inline: -10px; padding-inline: 10px; }
    .db-chapter-pagination { flex-direction: column; gap: 8px; margin-top: 18px; }
    .db-chapter-pagination a { width: 100%; min-height: 44px; align-items: center; justify-content: center; text-align: center; }
    .db-reading-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding: 4px 6px; gap: 3px; }
    .db-reading-dock .reading-dock-button { width: 34px; height: 34px; }
}

/* Back to Top Circular Reading Progress Indicator */
.back-to-top {
    position: relative;
    width: 36px;
    height: 36px;
    margin-left: 2px;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(var(--brand, var(--db-accent, #2467d6)) calc(var(--scroll-percent, 0) * 1%), color-mix(in srgb, var(--border, var(--db-border, #dbe4f0)) 65%, transparent) 0);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: transform .15s ease;
}
.back-to-top:hover {
    transform: translateY(-1px);
}
.back-to-top::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--surface, var(--db-surface, #ffffff));
    transition: background-color .15s ease;
}
.back-to-top:hover::before {
    background: var(--surface-2, var(--db-surface-soft, #f6f9fd));
}
.back-to-top span {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
    color: var(--text, var(--db-text, #17243a));
    pointer-events: none;
}
@media (max-width: 900px) {
    .back-to-top { width: 34px; height: 34px; }
}
/* ==========================================================================
   TEACHER SHORT NOTES COMPONENT (UNIVERSAL)
   Self-contained drawer, backdrop, fullscreen modal, zoom system & typography
   ========================================================================== */
:is(.short-notes-scrim, .db-notes-backdrop) {
    position: fixed;
    z-index: 350;
    inset: 0;
    border: 0;
    background: rgba(1, 6, 13, .66);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    cursor: default;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}
:is(.short-notes-scrim, .db-notes-backdrop).is-open {
    opacity: 1;
    pointer-events: auto;
}
:is(.short-notes-scrim, .db-notes-backdrop).is-closing {
    opacity: 0;
    pointer-events: none;
}

:is(.short-notes-panel, .db-short-notes) {
    --notes-drawer-duration: 420ms;
    --notes-drawer-ease: cubic-bezier(.22, 1, .36, 1);
    position: fixed;
    z-index: 360;
    isolation: isolate;
    inset: 12px 12px 12px auto;
    display: flex;
    flex-direction: column;
    width: min(680px, calc(100vw - 48px));
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 34%, var(--border, var(--db-border, #29456f)));
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 0, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 13%, transparent), transparent 30%),
        linear-gradient(165deg, color-mix(in srgb, var(--surface-2, var(--db-surface-soft, #112544)) 46%, var(--surface, var(--db-surface, #0c1a2e))), var(--surface, var(--db-surface, #0c1a2e)) 42%);
    box-shadow: -28px 20px 90px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .035), inset 0 1px rgba(255, 255, 255, .06);
    font-family: var(--font-body, system-ui, sans-serif);
    transform: translate3d(104%, 0, 0) scale(.985);
    transform-origin: right center;
    opacity: 0;
    pointer-events: none;
    transition:
        transform var(--notes-drawer-duration) var(--notes-drawer-ease),
        opacity .28s ease,
        box-shadow var(--notes-drawer-duration) var(--notes-drawer-ease);
    will-change: transform, opacity;
    contain: paint;
}
:is(.short-notes-panel, .db-short-notes)::before {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 18px auto 18px 0;
    width: 2px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, transparent, var(--brand, var(--db-accent, #ffd43b)) 22%, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 42%, #ffffff) 68%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 48%, transparent);
    pointer-events: none;
}
:is(.short-notes-panel, .db-short-notes).is-open {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
:is(.short-notes-panel, .db-short-notes).is-closing {
    transform: translate3d(104%, 0, 0) scale(.985);
    opacity: 0;
    pointer-events: none;
}
.short-notes-handle {
    display: none;
}

/* Header toolbar inside notes */
.short-notes-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 28%, var(--border, var(--db-border, #29456f)));
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 12%, var(--surface-2, var(--db-surface-soft, #112544))), color-mix(in srgb, var(--surface-2, var(--db-surface-soft, #112544)) 88%, transparent));
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
    flex: 0 0 auto;
    min-height: 70px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: transform .38s var(--notes-drawer-ease), opacity .24s ease;
}
:is(.short-notes-panel, .db-short-notes).is-open .short-notes-header {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 70ms;
}
:is(.short-notes-panel, .db-short-notes).is-closing .short-notes-header {
    opacity: 0;
    transform: translate3d(14px, 0, 0);
    transition-delay: 0ms;
}
.short-notes-title-lockup {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}
.short-notes-title-icon {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 52%, transparent);
    border-radius: 12px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 30%, var(--surface-3, #17325a)), color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 7%, var(--surface-2, var(--db-surface-soft, #112544))));
    color: var(--brand, var(--db-accent, #ffd43b));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 22%, transparent), inset 0 1px rgba(255, 255, 255, .15);
    transform: rotate(-8deg) scale(.86);
    transition: transform .46s var(--notes-drawer-ease), box-shadow .24s ease;
}
:is(.short-notes-panel, .db-short-notes).is-open .short-notes-title-icon {
    transform: rotate(0) scale(1);
    transition-delay: 130ms;
}
.short-notes-title-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.short-notes-title-copy {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
    min-width: 0;
}
.short-notes-header strong,
#short-notes-title,
.short-notes-title-copy strong {
    order: 1;
    color: var(--text, var(--db-text, #eef3fb));
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.2;
}
.short-notes-kicker {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 22%, transparent), color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 45%, transparent);
    color: var(--brand, var(--db-accent, #ffd43b));
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: 0 1px 6px color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 18%, transparent);
    margin: 0;
}
.short-notes-kicker::before {
    content: '★';
    font-size: 8px;
}
.short-notes-header small {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow: hidden;
    color: var(--muted, var(--db-muted, #91a6c4));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.short-notes-header-actions,
.db-notes-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}

/* Fullscreen toggle (and Download PDF, which shares its look) inside notes toolbar */
.short-notes-download,
.short-notes-fullscreen-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 25%, var(--border, var(--db-border, #29456f)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2, var(--db-surface-soft, #112544)) 80%, transparent);
    color: var(--text, var(--db-text, #eef3fb));
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.short-notes-download:hover:not(:disabled),
.short-notes-download:focus-visible,
.short-notes-fullscreen-toggle:hover,
.short-notes-fullscreen-toggle:focus-visible {
    border-color: var(--brand, var(--db-accent, #ffd43b));
    background: var(--surface-3, #17325a);
    color: var(--brand, var(--db-accent, #ffd43b));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 14%, transparent);
    transform: translateY(-1px);
}
.short-notes-download svg,
.short-notes-fullscreen-toggle svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
.short-notes-download:disabled {
    cursor: progress;
    opacity: .75;
}
.short-notes-download.is-busy svg {
    animation: notes-pdf-pulse 1s ease-in-out infinite;
}
@keyframes notes-pdf-pulse {
    50% { transform: translateY(2px); opacity: .55; }
}
/* Announced to screen readers only (app.css's .sr-only is not loaded here). */
.short-notes-download-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.short-notes-fullscreen-toggle .icon-exit-fullscreen {
    display: none;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen .short-notes-fullscreen-toggle .icon-enter-fullscreen {
    display: none;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen .short-notes-fullscreen-toggle .icon-exit-fullscreen {
    display: inline-block;
}

/* Fullscreen mode for Teacher Notes */
:is(.short-notes-panel, .db-short-notes).is-fullscreen {
    position: fixed !important;
    z-index: 550 !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--surface, var(--db-surface, #0c1a2e)) !important;
    color: var(--text, var(--db-text, #eef3fb)) !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: transform .28s var(--notes-drawer-ease), opacity .22s ease !important;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen.is-entering-fullscreen {
    transform: scale(0.985) !important;
    opacity: 0 !important;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen.is-exiting-fullscreen {
    transform: scale(0.985) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen .short-notes-handle {
    display: none !important;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen .short-notes-header {
    flex-shrink: 0 !important;
    padding-inline: clamp(16px, 4vw, 40px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen :is(.short-notes-body, .db-short-notes-content) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px clamp(16px, 4vw, 40px) 60px !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
:is(.short-notes-panel, .db-short-notes).is-fullscreen .short-notes-sections {
    max-width: 1100px;
    margin: 0 auto;
}

/* Zoom controls inside notes toolbar */
.short-notes-zoom.zoom-control {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 3px;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 25%, var(--border, var(--db-border, #29456f)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2, var(--db-surface-soft, #112544)) 80%, transparent);
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}
.short-notes-zoom.zoom-control button {
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text, var(--db-text, #eef3fb));
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.short-notes-zoom.zoom-control button:hover:not(:disabled) {
    background: var(--surface-3, #17325a);
    color: var(--brand, var(--db-accent, #ffd43b));
    transform: scale(1.06);
}
.short-notes-zoom.zoom-control button:disabled {
    opacity: .35;
    cursor: default;
}
.short-notes-zoom.zoom-control :is(span, output) {
    min-width: 32px;
    padding: 0 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text, var(--db-text, #eef3fb));
    text-align: center;
    font-family: var(--font-mono, monospace);
}
#short-notes-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 25%, var(--border, var(--db-border, #29456f)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2, var(--db-surface-soft, #112544)) 80%, transparent);
    color: var(--muted, var(--db-muted, #91a6c4));
    font-size: 13px;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, .05);
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#short-notes-close:hover,
#short-notes-close:focus-visible {
    border-color: var(--brand, var(--db-accent, #ffd43b));
    background: var(--surface-3, #17325a);
    color: var(--text, var(--db-text, #eef3fb));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 14%, transparent);
    transform: rotate(4deg) scale(1.04);
}

/* ==========================================================================
   ISOLATED TEXT-ZOOM FONT SCALING SYSTEM FOR TEACHER SHORT NOTES
   Only affects the Teacher Notes drawer content without touching the page.
   ========================================================================== */
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content) {
    zoom: 1 !important;
    --notes-font-scale: 1;
}
:is(.short-notes-body, .db-short-notes-content) {
    transform: none !important;
}
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="80"] { --notes-font-scale: 0.8; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="90"] { --notes-font-scale: 0.9; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="100"] { --notes-font-scale: 1.0; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="110"] { --notes-font-scale: 1.1; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="120"] { --notes-font-scale: 1.2; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="130"] { --notes-font-scale: 1.3; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="140"] { --notes-font-scale: 1.4; }
:is(.short-notes-panel, .db-short-notes, .short-notes-body, .db-short-notes-content)[data-notes-zoom="150"] { --notes-font-scale: 1.5; }

/* ==========================================================================
   TEACHER SHORT NOTES TYPOGRAPHY & CARD HIERARCHY
   Balanced, professional hierarchy at 100% zoom:
   - Title: 16px–18px
   - H1: 24px–26px desktop / 21px–23px mobile
   - H2: 21px–23px desktop / 19px–21px mobile
   - H3: 18px–20px
   - Normal text: 16px–18px
   ========================================================================== */
:is(.short-notes-body, .db-short-notes-content) {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    padding: 18px 20px 30px;
    scrollbar-color: color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 40%, var(--scroll-thumb, #2f4d78)) transparent;
    scrollbar-gutter: stable;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(17px * var(--notes-font-scale, 1));
    font-weight: 400;
    line-height: 1.6;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 2.5%, transparent), transparent 190px);
    opacity: 0;
    transition: opacity .3s ease;
}
:is(.short-notes-panel, .db-short-notes).is-open :is(.short-notes-body, .db-short-notes-content) {
    opacity: 1;
    transition-delay: 105ms;
}
:is(.short-notes-panel, .db-short-notes).is-closing :is(.short-notes-body, .db-short-notes-content) {
    opacity: 0;
    transition-delay: 0ms;
}
:is(.short-notes-body, .db-short-notes-content)::-webkit-scrollbar { width: 6px; }
:is(.short-notes-body, .db-short-notes-content)::-webkit-scrollbar-track { background: transparent; }
:is(.short-notes-body, .db-short-notes-content)::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 35%, var(--scroll-thumb, #2f4d78)); }

.short-notes-sections {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 12px;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: transform .44s var(--notes-drawer-ease), opacity .3s ease;
}
:is(.short-notes-panel, .db-short-notes).is-open .short-notes-sections {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 145ms;
}
:is(.short-notes-panel, .db-short-notes).is-closing .short-notes-sections {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition-delay: 0ms;
}
.short-note-card {
    --notes-accent: var(--brand, var(--db-accent, #ffd43b));
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 14px 16px 15px;
    border: 1px solid color-mix(in srgb, var(--notes-accent) 26%, var(--border, var(--db-border, #29456f)));
    border-left: 3.5px solid var(--notes-accent);
    border-radius: 14px;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--notes-accent) 9%, transparent), transparent 34%),
        linear-gradient(155deg, color-mix(in srgb, var(--notes-accent) 6%, var(--surface-2, var(--db-surface-soft, #112544))), color-mix(in srgb, var(--surface-2, var(--db-surface-soft, #112544)) 96%, var(--surface, var(--db-surface, #0c1a2e))));
    box-shadow: 0 8px 26px color-mix(in srgb, var(--notes-accent) 9%, rgba(0, 0, 0, .11)), inset 0 1px rgba(255, 255, 255, .055);
    transition: transform .24s var(--notes-drawer-ease), border-color .24s ease, box-shadow .24s ease;
}
.short-note-card:hover {
    border-color: color-mix(in srgb, var(--notes-accent) 45%, var(--border, var(--db-border, #29456f)));
    box-shadow: 0 14px 32px color-mix(in srgb, var(--notes-accent) 14%, rgba(0, 0, 0, .14)), inset 0 1px rgba(255, 255, 255, .07);
    transform: translateY(-2px);
}
.short-note-card--intro { --notes-accent: var(--brand, var(--db-accent, #ffd43b)); }
.short-note-card--c1 { --notes-accent: #3b82f6; }
.short-note-card--c2 { --notes-accent: #8b5cf6; }
.short-note-card--c3 { --notes-accent: #10b981; }
.short-note-card--c4 { --notes-accent: #f59e0b; }
.short-note-card--c5 { --notes-accent: #ec4899; }
.short-note-card--c6 { --notes-accent: #06b6d4; }
.short-note-card > :last-child { margin-bottom: 0; }

:is(.short-notes-body, .db-short-notes-content) :is(p, li, h1, h2, h3, h4) { max-width: 100%; overflow-wrap: break-word; }
:is(.short-notes-body, .db-short-notes-content) :is(.code-block, .table-scroll) { width: 100%; max-width: 100%; min-width: 0; }

:is(.short-notes-body, .db-short-notes-content) h1 {
    margin: 0 0 calc(12px * var(--notes-font-scale, 1));
    padding: 0;
    border: 0;
    color: var(--text, var(--db-text, #eef3fb));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(25px * var(--notes-font-scale, 1));
    font-weight: 750;
    line-height: 1.28;
    letter-spacing: -0.02em;
}
:is(.short-notes-body, .db-short-notes-content) h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    margin: 0 0 calc(10px * var(--notes-font-scale, 1));
    padding: 0 0 calc(6px * var(--notes-font-scale, 1));
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--notes-accent) 22%, var(--border, var(--db-border, #29456f)));
    border-radius: 0;
    background: transparent;
    color: var(--notes-accent);
    box-shadow: none;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(22px * var(--notes-font-scale, 1));
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.35;
    text-transform: none;
}
:is(.short-notes-body, .db-short-notes-content) h2::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--notes-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--notes-accent) 80%, transparent);
    transform: rotate(45deg);
}
:is(.short-notes-body, .db-short-notes-content) h3 {
    margin: calc(10px * var(--notes-font-scale, 1)) 0 calc(6px * var(--notes-font-scale, 1));
    color: var(--text, var(--db-text, #eef3fb));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(19px * var(--notes-font-scale, 1));
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.01em;
}
:is(.short-notes-body, .db-short-notes-content) h4 {
    margin: calc(8px * var(--notes-font-scale, 1)) 0 calc(5px * var(--notes-font-scale, 1));
    color: var(--text, var(--db-text, #eef3fb));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(16.5px * var(--notes-font-scale, 1));
    font-weight: 650;
    line-height: 1.45;
}
:is(.short-notes-body, .db-short-notes-content) :is(h1, h2, h3, h4):first-child { margin-top: 0; }
:is(.short-notes-body, .db-short-notes-content) p {
    margin: 0 0 calc(8px * var(--notes-font-scale, 1));
    color: var(--text, var(--db-text, #eef3fb));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(17px * var(--notes-font-scale, 1));
    line-height: 1.6;
}
:is(.short-notes-body, .db-short-notes-content) h2 + p { color: var(--text, var(--db-text, #eef3fb)); }
:is(.short-notes-body, .db-short-notes-content) strong {
    display: inline;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 750;
    color: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 90%, var(--text, var(--db-text, #eef3fb)));
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 25%, transparent);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 10%, transparent);
}
:is(.short-notes-body, .db-short-notes-content) :is(ul, ol) {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--notes-font-scale, 1));
    margin: calc(6px * var(--notes-font-scale, 1)) 0 calc(10px * var(--notes-font-scale, 1));
    padding: 0;
    list-style: none;
}
:is(.short-notes-body, .db-short-notes-content) ul li {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 1px 0 1px 18px;
    border: none;
    background: transparent;
    font-size: calc(16.5px * var(--notes-font-scale, 1));
    line-height: 1.55;
    color: var(--text, var(--db-text, #eef3fb));
}
:is(.short-notes-body, .db-short-notes-content) ul li::before {
    content: '◆';
    position: absolute;
    left: 3px;
    top: 1px;
    color: var(--notes-accent, var(--brand, var(--db-accent, #ffd43b)));
    font-size: 8px;
    line-height: 1.8;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 50%, transparent));
}
:is(.short-notes-body, .db-short-notes-content) ol { counter-reset: fancy-item; }
:is(.short-notes-body, .db-short-notes-content) ol li {
    position: relative;
    min-height: 0;
    margin: 0;
    padding: 1px 0 1px 22px;
    border: none;
    background: transparent;
    font-size: calc(16.5px * var(--notes-font-scale, 1));
    line-height: 1.55;
    color: var(--text, var(--db-text, #eef3fb));
    counter-increment: fancy-item;
}
:is(.short-notes-body, .db-short-notes-content) ol li::before {
    content: counter(fancy-item);
    position: absolute;
    left: 0;
    top: 2px;
    display: grid;
    width: 15px;
    height: 15px;
    place-items: center;
    border-radius: 4px;
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 18%, var(--surface-3, #17325a));
    color: var(--notes-accent, var(--brand, var(--db-accent, #ffd43b)));
    font-size: 9px;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 30%, transparent);
}
:is(.short-notes-body, .db-short-notes-content) blockquote {
    margin: calc(8px * var(--notes-font-scale, 1)) 0 calc(10px * var(--notes-font-scale, 1));
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 25%, var(--border, var(--db-border, #29456f)));
    border-left: 3.5px solid var(--notes-accent, var(--brand, var(--db-accent, #ffd43b)));
    border-radius: 7px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 8%, var(--surface-3, #17325a)), color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 3%, var(--surface-2, var(--db-surface-soft, #112544))));
    color: var(--text, var(--db-text, #eef3fb));
    font-size: calc(16.5px * var(--notes-font-scale, 1));
    line-height: 1.55;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 8%, transparent);
}
:is(.short-notes-body, .db-short-notes-content) blockquote p:last-child { margin-bottom: 0; }
:is(.short-notes-body, .db-short-notes-content) .inline-code {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: calc(14.5px * var(--notes-font-scale, 1));
    font-weight: 400;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 12%, var(--surface-3, #17325a));
    color: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 85%, var(--text, var(--db-text, #eef3fb)));
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 25%, transparent);
}
:is(.short-notes-body, .db-short-notes-content) figure.code-block {
    margin: 5px 0 8px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 28%, var(--border, var(--db-border, #29456f)));
    box-shadow: 0 3px 12px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .04);
    background: #080d16;
}
:is(.short-notes-body, .db-short-notes-content) .code-block figcaption {
    min-height: 23px;
    padding: 2px 9px;
    font-size: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15));
}
:is(.short-notes-body, .db-short-notes-content) .code-block .fullscreen-toggle { display: none !important; }
:is(.short-notes-body, .db-short-notes-content) .code-block .icon-button {
    height: 18px;
    font-size: 9.5px;
    font-weight: 700;
    padding-inline: 7px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 35%, rgba(255, 255, 255, .15));
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 15%, transparent);
    color: #f1f5f9;
}
:is(.short-notes-body, .db-short-notes-content) .code-block .icon-button:hover {
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 30%, transparent);
    border-color: var(--notes-accent, var(--brand, var(--db-accent, #ffd43b)));
    color: #fff;
}
:is(.short-notes-body, .db-short-notes-content) .code-block pre {
    max-height: 240px;
    overflow: auto;
    padding: 8px 12px;
    font-size: calc(14.5px * var(--notes-font-scale, 1));
    line-height: 1.5;
    color: #e2e8f0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
:is(.short-notes-body, .db-short-notes-content) .code-block code { white-space: inherit; }
:is(.short-notes-body, .db-short-notes-content) .table-scroll {
    margin: 6px 0 8px;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 24%, var(--border, var(--db-border, #29456f)));
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
:is(.short-notes-body, .db-short-notes-content) table { width: 100%; min-width: 0; table-layout: auto; font-size: calc(15px * var(--notes-font-scale, 1)); }
:is(.short-notes-body, .db-short-notes-content) th {
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 14%, var(--surface-3, #17325a));
    color: var(--notes-accent, var(--brand, var(--db-accent, #ffd43b)));
    font-weight: 750;
    padding: 5px 8px;
    font-size: calc(15px * var(--notes-font-scale, 1));
}
:is(.short-notes-body, .db-short-notes-content) td {
    padding: 5px 8px;
    border-top: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 12%, var(--border-soft, rgba(255,255,255,.08)));
    font-size: calc(15px * var(--notes-font-scale, 1));
}
:is(.short-notes-body, .db-short-notes-content) :is(th, td) { overflow-wrap: anywhere; word-break: break-word; }
:is(.short-notes-body, .db-short-notes-content) hr {
    border: 0;
    height: 1px;
    margin: 10px 0;
    background: color-mix(in srgb, var(--notes-accent, var(--brand, var(--db-accent, #ffd43b))) 20%, var(--border, var(--db-border, #29456f)));
}

/* Mobile responsive sheet for Teacher Short Notes */
@media (max-width: 700px) {
    :is(.short-notes-panel, .db-short-notes) {
        top: auto !important;
        right: 6px !important;
        bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
        left: 6px !important;
        width: auto !important;
        max-width: none !important;
        height: min(91dvh, 820px) !important;
        border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 32%, var(--border, var(--db-border, #29456f))) !important;
        border-radius: 24px !important;
        box-shadow: 0 -24px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .035) !important;
        transform: translate3d(0, calc(100% + 24px), 0) scale(.985) !important;
        transform-origin: center bottom;
        transition: transform var(--notes-drawer-duration) var(--notes-drawer-ease), opacity .28s ease !important;
    }
    :is(.short-notes-panel, .db-short-notes).is-open {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }
    :is(.short-notes-panel, .db-short-notes).is-closing {
        transform: translate3d(0, calc(100% + 24px), 0) scale(.985) !important;
    }
    :is(.short-notes-panel, .db-short-notes).is-fullscreen {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        transform: scale(1) !important;
    }
    :is(.short-notes-panel, .db-short-notes).is-fullscreen.is-entering-fullscreen,
    :is(.short-notes-panel, .db-short-notes).is-fullscreen.is-exiting-fullscreen {
        transform: scale(0.985) !important;
    }
    :is(.short-notes-panel, .db-short-notes)::before { display: none; }
    :is(.short-notes-panel, .db-short-notes) .short-notes-handle {
        display: block;
        flex: 0 0 auto;
        width: 44px;
        height: 5px;
        margin: 10px auto 1px;
        border-radius: 999px;
        background: linear-gradient(90deg, color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 25%, var(--border, var(--db-border, #29456f))), var(--brand, var(--db-accent, #ffd43b)), color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 25%, var(--border, var(--db-border, #29456f))));
        box-shadow: 0 0 12px color-mix(in srgb, var(--brand, var(--db-accent, #ffd43b)) 26%, transparent);
    }
    :is(.short-notes-panel, .db-short-notes) > header {
        min-height: 54px;
        padding: 7px 12px 10px;
        transform: translate3d(0, 14px, 0);
    }
    :is(.short-notes-panel, .db-short-notes).is-open > header { transform: translate3d(0, 0, 0); }
    :is(.short-notes-panel, .db-short-notes) .short-notes-kicker { display: none; }
    :is(.short-notes-panel, .db-short-notes) .short-notes-title-copy { grid-template-columns: minmax(0, 1fr); }
    :is(.short-notes-panel, .db-short-notes) .short-notes-header small { display: none; }
    :is(.short-notes-body, .db-short-notes-content) { height: auto; padding: 10px 12px max(18px, env(safe-area-inset-bottom, 0px)); font-size: calc(16px * var(--notes-font-scale, 1)); line-height: 1.55; }
    :is(.short-notes-body, .db-short-notes-content) h1 { font-size: calc(22px * var(--notes-font-scale, 1)); }
    :is(.short-notes-body, .db-short-notes-content) h2 { margin: 0 0 5px; padding: 0 0 4px; font-size: calc(20px * var(--notes-font-scale, 1)); }
    :is(.short-notes-body, .db-short-notes-content) h3 { font-size: calc(18px * var(--notes-font-scale, 1)); }
    :is(.short-notes-body, .db-short-notes-content) p { margin-bottom: 5px; font-size: calc(16px * var(--notes-font-scale, 1)); }
    :is(.short-notes-body, .db-short-notes-content) :is(ul, ol) { margin: 3px 0 6px; }
    :is(.short-notes-body, .db-short-notes-content) ul li { padding-left: 15px; font-size: calc(15px * var(--notes-font-scale, 1)); }
    :is(.short-notes-body, .db-short-notes-content) ul li::before { font-size: 7px; left: 2px; }
    :is(.short-notes-body, .db-short-notes-content) ol li { padding-left: 19px; font-size: calc(15px * var(--notes-font-scale, 1)); }
    :is(.short-notes-body, .db-short-notes-content) ol li::before { width: 14px; height: 14px; font-size: 8.5px; }
    :is(.short-notes-body, .db-short-notes-content) strong { padding: 1px 4px; }
    :is(.short-notes-body, .db-short-notes-content) .short-note-card { padding: 11px 12px; border-radius: 12px; }
    .short-notes-fullscreen-toggle span,
    .short-notes-download span { display: none; }
    .short-notes-fullscreen-toggle,
    .short-notes-download { width: 34px; height: 34px; padding: 0; justify-content: center; }
    .code-fullscreen-modal { padding: 8px; }
    .code-fullscreen-card { width: 100%; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 8px; }
    .code-fullscreen-body { padding: 12px; }
    body.db-chapter-page :is(.db-lesson-content, .db-short-notes-content) .table-scroll table { min-width: 470px; }
}

@media (max-width: 380px) {
    .short-notes-title-icon { display: none; }
    .short-notes-title-lockup { gap: 0; }
    .short-notes-header-actions, .db-notes-controls { gap: 4px; }
    .short-notes-zoom.zoom-control { padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    :is(.short-notes-scrim, .db-notes-backdrop),
    :is(.short-notes-panel, .db-short-notes),
    .short-notes-header,
    .short-notes-title-icon,
    :is(.short-notes-body, .db-short-notes-content),
    .short-notes-sections,
    .short-note-card,
    .short-notes-fullscreen-toggle,
    .short-notes-download,
    .short-notes-download svg,
    #short-notes-close {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
}

/* ==========================================================================
   TOAST NOTIFICATION STACK
   ========================================================================== */
.toast-stack { position: fixed; z-index: 400; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--brand, #3b82f6) 34%, var(--border, #d1d5db)); border-radius: 999px; background: color-mix(in srgb, var(--surface, #ffffff) 96%, transparent); color: var(--text, #111827); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow, 0 4px 12px rgba(0, 0, 0, .1)); backdrop-filter: blur(14px); animation: toast-in .18s ease-out; }
.toast.is-leaving { animation: toast-out .18s ease-in forwards; }
.toast[data-variant="warn"] { border-color: color-mix(in srgb, var(--warn, #f59e0b) 40%, var(--border, #d1d5db)); }
.toast[data-variant="warn"]::before { content: '●'; color: var(--warn, #f59e0b); }
.toast[data-variant="success"]::before { content: '●'; color: var(--brand, #3b82f6); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(4px); } }

/* ==========================================================================
   MODAL & COPY WARNING
   ========================================================================== */
.modal { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 15px; background: rgba(1, 6, 13, .78); backdrop-filter: blur(7px); }
.modal[hidden] { display: none; }
.modal-card { width: min(480px, 94vw); padding: 22px 20px; border: 1px solid var(--border, #29415f); border-radius: 12px; background: var(--surface, #0d1a2d); color: var(--text, #f0f6fc); box-shadow: var(--shadow, 0 8px 32px rgba(0, 0, 0, .4)); }
.copy-warning-card { border-color: color-mix(in srgb, var(--danger, #ef4444) 55%, var(--border, #29415f)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--danger, #ef4444) 16%, transparent), transparent 42%), var(--surface, #0d1a2d); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger, #ef4444) 30%, transparent), var(--shadow, 0 8px 32px rgba(0, 0, 0, .4)); }
.copy-warning-card h2 { margin: 0; color: var(--danger, #ef4444); font-size: 1.1rem; font-weight: 800; }
.copy-warning-card p { margin: 10px 0; font-size: 13px; line-height: 1.55; color: var(--muted, #94a3b8); }
.copy-warning-card strong { color: var(--text, #f0f6fc); }
.copy-warning-divider { height: 1px; margin: 12px -20px; border: 0; background: color-mix(in srgb, var(--danger, #ef4444) 35%, var(--border, #29415f)); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ==========================================================================
   BOOKMARK & JUMP TO STYLES
   ========================================================================== */
.bookmark-toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; padding: 0; border: 0; background: transparent; color: var(--muted, #94a3b8); vertical-align: middle; cursor: pointer; border-radius: 4px; transition: color .18s ease, transform .18s ease; }
.bookmark-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.bookmark-toggle:hover { color: var(--accent, #0f9a8e); transform: scale(1.1); }
.bookmark-toggle[aria-pressed="true"] { color: var(--accent, #0f9a8e); }
.bookmark-toggle[aria-pressed="true"] svg { fill: currentColor; }
#dock-bookmark-toggle[aria-pressed="true"] { color: var(--accent, #0f9a8e); }
#dock-bookmark-toggle[aria-pressed="true"] svg { fill: currentColor; }
#dock-bookmark-toggle:disabled { opacity: .35; cursor: not-allowed; }
.jump-filter-bookmarks { flex: none; height: 22px; padding: 0 8px; border: 1px solid var(--border, #29415f); border-radius: 20px; background: var(--surface-2, #16243b); color: var(--muted, #94a3b8); font-size: 9px; font-weight: 800; cursor: pointer; }
.jump-filter-bookmarks:hover { border-color: var(--accent, #0f9a8e); color: var(--accent, #0f9a8e); }
.jump-filter-bookmarks[aria-pressed="true"] { border-color: var(--accent, #0f9a8e); background: color-mix(in srgb, var(--accent, #0f9a8e) 16%, var(--surface-2, #16243b)); color: var(--accent, #0f9a8e); }

.short-notes-body .heading-anchor, .short-notes-body .bookmark-toggle { display: none; }
body.is-scroll-locked { overflow: hidden; }

/* Section-heading accordion superseded by the shared .curriculum-tree
   component (assets/css/curriculum-tree.css) -- see partials/curriculum-tree.php. */

/* ==========================================================================
   UNIVERSAL EDUCATIONAL VISUALS
   Shared presentation for preset diagrams, declarative canvases, and charts.
   ========================================================================== */
.uce-component { max-width: 100%; }
.uce-visual {
    width: 100%;
    margin: 1.4rem 0;
    overflow: hidden;
    border: 1px solid var(--border, var(--db-border));
    border-radius: var(--radius, 14px);
    background: var(--surface, var(--db-surface));
    color: var(--text, var(--db-text));
    box-shadow: var(--shadow, var(--db-shadow));
}
.uce-visual__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 44px;
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border, var(--db-border));
    background: color-mix(in srgb, var(--surface-2, var(--db-surface-soft)) 84%, transparent);
}
.uce-visual__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; margin-inline-start: auto; }
.uce-visual__kind {
    overflow-wrap: anywhere;
    color: var(--muted, var(--db-muted));
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.uce-visual__zoom-control { width: 34px; min-width: 34px; padding-inline: 0; font-size: 1rem; }
.uce-visual__zoom-value { width: auto; min-width: 50px; padding-inline: .45rem; font-variant-numeric: tabular-nums; }
.uce-visual__zoom-control:disabled { cursor: not-allowed; opacity: .4; }
.uce-visual__fullscreen { flex: none; width: auto; min-width: 76px; padding-inline: .65rem; }
.uce-visual__viewport {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: clamp(.65rem, 2vw, 1.25rem);
    background: color-mix(in srgb, var(--surface, var(--db-surface)) 96%, var(--brand, var(--db-accent)) 4%);
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
}
.uce-visual__viewport:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, var(--db-accent)) 42%, transparent); outline-offset: -3px; }
.uce-visual__svg { display: block; width: auto; max-width: none; height: auto; max-height: min(72vh, 720px); margin: auto; }
.uce-visual__svg--wide { width: auto; max-width: none; }
.uce-visual[data-uce-visual-zoomed="true"] .uce-visual__viewport { overflow-y: auto; max-height: min(72vh, 720px); }
.uce-visual figcaption { padding: .7rem 1rem .85rem; border-top: 1px solid var(--border, var(--db-border)); color: var(--muted, var(--db-muted)); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.uce-visual:fullscreen { display: flex; flex-direction: column; width: 100vw; height: 100vh; margin: 0; border: 0; border-radius: 0; background: var(--surface, var(--db-surface)); }
.uce-visual:fullscreen .uce-visual__viewport { flex: 1; display: grid; place-items: center; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; }
.uce-visual:fullscreen .uce-visual__svg { width: auto; max-width: none; max-height: calc(100vh - 130px); }
.uce-visual:fullscreen .uce-visual__svg--wide { width: auto; max-width: none; }

.uce-svg-shape { vector-effect: non-scaling-stroke; fill: none; stroke: var(--brand, var(--db-accent)); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.uce-svg-style-primary { stroke: var(--brand, var(--db-accent)); }
.uce-svg-style-accent { stroke: var(--accent, #0f9a8e); }
.uce-svg-style-success { stroke: var(--success, #16835f); }
.uce-svg-style-warning { stroke: var(--warn, #c57a05); }
.uce-svg-style-danger { stroke: var(--danger, #c43b4d); }
.uce-svg-style-muted { stroke: var(--muted, var(--db-muted)); }
.uce-svg-style-surface { stroke: var(--text, var(--db-text)); }
.uce-svg-style-neutral { stroke: color-mix(in srgb, var(--text, var(--db-text)) 68%, transparent); }
.uce-svg-style-none { stroke: none; }
.uce-svg-fill-primary { fill: color-mix(in srgb, var(--brand, var(--db-accent)) 18%, var(--surface, var(--db-surface))); }
.uce-svg-fill-accent { fill: color-mix(in srgb, var(--accent, #0f9a8e) 18%, var(--surface, var(--db-surface))); }
.uce-svg-fill-success { fill: color-mix(in srgb, var(--success, #16835f) 18%, var(--surface, var(--db-surface))); }
.uce-svg-fill-warning { fill: color-mix(in srgb, var(--warn, #c57a05) 22%, var(--surface, var(--db-surface))); }
.uce-svg-fill-danger { fill: color-mix(in srgb, var(--danger, #c43b4d) 18%, var(--surface, var(--db-surface))); }
.uce-svg-fill-muted { fill: color-mix(in srgb, var(--muted, var(--db-muted)) 16%, var(--surface, var(--db-surface))); }
/* A small labelled circle on a line (cardinality "1"/"*") is a badge: the
   viewport's own background hides the line behind its text. */
.uce-svg-shape.uce-svg-badge { fill: color-mix(in srgb, var(--surface, var(--db-surface)) 96%, var(--brand, var(--db-accent)) 4%); }
.uce-svg-fill-surface { fill: var(--surface, var(--db-surface)); }
.uce-svg-fill-neutral { fill: color-mix(in srgb, var(--text, var(--db-text)) 10%, var(--surface, var(--db-surface))); }
.uce-svg-fill-none { fill: none; }
.uce-svg-stroke-dashed { stroke-dasharray: 9 7; }
.uce-svg-stroke-dotted { stroke-dasharray: 2 6; }
.uce-svg-emphasis { stroke-width: 3.75; }
.uce-svg-translucent { fill-opacity: .52; }
.uce-svg-marker { fill: var(--brand, var(--db-accent)); stroke: none; }
.uce-svg-tick { vector-effect: non-scaling-stroke; stroke: var(--muted, var(--db-muted)); stroke-width: 1.5; }
.uce-svg-text,
.uce-chart-label { fill: var(--text, var(--db-text)); stroke: none; font-family: var(--font-body); font-size: 16px; font-weight: 650; }
.uce-svg-point { fill: var(--brand, var(--db-accent)); }
.uce-svg-table { --uce-table-tone: var(--brand, var(--db-accent)); }
.uce-svg-table--accent { --uce-table-tone: var(--accent, #0f9a8e); }
.uce-svg-table--success { --uce-table-tone: var(--success, #16835f); }
.uce-svg-table--warning { --uce-table-tone: var(--warn, #c57a05); }
.uce-svg-table--danger { --uce-table-tone: var(--danger, #c43b4d); }
.uce-svg-table--muted, .uce-svg-table--neutral, .uce-svg-table--surface, .uce-svg-table--none { --uce-table-tone: var(--muted, var(--db-muted)); }
.uce-svg-table__cell { vector-effect: non-scaling-stroke; fill: var(--surface, var(--db-surface)); stroke: color-mix(in srgb, var(--text, var(--db-text)) 16%, transparent); stroke-width: 1; }
.uce-svg-table__cell--header { fill: color-mix(in srgb, var(--uce-table-tone) 16%, var(--surface, var(--db-surface))); }
.uce-svg-table__cell--alternate { fill: color-mix(in srgb, var(--text, var(--db-text)) 3.5%, var(--surface, var(--db-surface))); }
.uce-svg-table__cell--gutter { fill: color-mix(in srgb, var(--text, var(--db-text)) 7%, var(--surface, var(--db-surface))); }
.uce-svg-table__cell--highlight { fill: color-mix(in srgb, var(--warn, #c57a05) 24%, var(--surface, var(--db-surface))); stroke: var(--warn, #c57a05); stroke-width: 2.25; }
.uce-svg-table__frame { vector-effect: non-scaling-stroke; fill: none; stroke: color-mix(in srgb, var(--uce-table-tone) 55%, transparent); stroke-width: 1.5; }
.uce-svg-table__text { fill: var(--text, var(--db-text)); stroke: none; font-family: var(--font-body); font-size: 15px; font-weight: 520; font-variant-numeric: tabular-nums; }
.uce-svg-table__text--header { font-weight: 750; }
.uce-svg-table__text--highlight { font-weight: 700; }
.uce-svg-table__text--gutter { fill: var(--muted, var(--db-muted)); font-size: 13px; font-weight: 650; }
.uce-svg-math-host { display: grid; width: 100%; height: 100%; place-items: center; color: var(--text, var(--db-text)); overflow: hidden; }

.uce-chart-axis { vector-effect: non-scaling-stroke; stroke: var(--text, var(--db-text)); stroke-width: 2; }
.uce-chart-grid { vector-effect: non-scaling-stroke; stroke: color-mix(in srgb, var(--muted, var(--db-muted)) 35%, transparent); stroke-width: 1; }
.uce-chart-fill-primary { fill: var(--brand, var(--db-accent)); }
.uce-chart-fill-accent { fill: var(--accent, #0f9a8e); }
.uce-chart-fill-success { fill: var(--success, #16835f); }
.uce-chart-fill-warning { fill: var(--warn, #c57a05); }
.uce-chart-fill-danger { fill: var(--danger, #c43b4d); }
.uce-chart-fill-muted { fill: var(--muted, var(--db-muted)); }
.uce-chart-line-primary, .uce-chart-line-accent, .uce-chart-line-success, .uce-chart-line-warning, .uce-chart-line-danger, .uce-chart-line-muted { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.uce-chart-line-primary { stroke: var(--brand, var(--db-accent)); }
.uce-chart-line-accent { stroke: var(--accent, #0f9a8e); }
.uce-chart-line-success { stroke: var(--success, #16835f); }
.uce-chart-line-warning { stroke: var(--warn, #c57a05); }
.uce-chart-line-danger { stroke: var(--danger, #c43b4d); }
.uce-chart-line-muted { stroke: var(--muted, var(--db-muted)); }
.uce-chart-series-primary { stroke: var(--brand, var(--db-accent)); fill: var(--brand, var(--db-accent)); }
.uce-chart-series-accent { stroke: var(--accent, #0f9a8e); fill: var(--accent, #0f9a8e); }
.uce-chart-series-success { stroke: var(--success, #16835f); fill: var(--success, #16835f); }
.uce-chart-series-warning { stroke: var(--warn, #c57a05); fill: var(--warn, #c57a05); }
.uce-chart-series-danger { stroke: var(--danger, #c43b4d); fill: var(--danger, #c43b4d); }
.uce-chart-series-muted { stroke: var(--muted, var(--db-muted)); fill: var(--muted, var(--db-muted)); }
.uce-chart-area-primary { fill: color-mix(in srgb, var(--brand, var(--db-accent)) 22%, transparent); }
.uce-chart-area-accent { fill: color-mix(in srgb, var(--accent, #0f9a8e) 22%, transparent); }
.uce-chart-area-success { fill: color-mix(in srgb, var(--success, #16835f) 22%, transparent); }
.uce-chart-area-warning { fill: color-mix(in srgb, var(--warn, #c57a05) 22%, transparent); }
.uce-chart-area-danger { fill: color-mix(in srgb, var(--danger, #c43b4d) 22%, transparent); }
.uce-chart-area-muted { fill: color-mix(in srgb, var(--muted, var(--db-muted)) 22%, transparent); }
.uce-chart-doughnut-hole { fill: var(--surface, var(--db-surface)); }
.uce-chart-data { margin: 0; padding: .65rem 1rem .85rem; border-top: 1px solid var(--border, var(--db-border)); }
.uce-chart-data > summary { cursor: pointer; color: var(--brand, var(--db-accent)); font-weight: 750; }
.uce-component--diagnostic, .uce-component--fallback { display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: center; margin: 1rem 0; padding: .75rem .9rem; border: 1px solid color-mix(in srgb, var(--warn, #c57a05) 40%, var(--border, var(--db-border))); border-radius: 10px; background: color-mix(in srgb, var(--warn, #c57a05) 8%, var(--surface, var(--db-surface))); color: var(--text, var(--db-text)); overflow-wrap: anywhere; }

@media (max-width: 600px) {
    .uce-visual { margin-block: 1rem; border-radius: 10px; }
    .uce-visual__header { padding: .45rem .6rem; }
    .uce-visual__actions { gap: .25rem; }
    .uce-visual__zoom-control { width: 32px; min-width: 32px; }
    .uce-visual__zoom-value { min-width: 46px; }
    .uce-visual__viewport { padding: .45rem; }
    .uce-visual__fullscreen { min-width: 68px; font-size: .72rem; }
}

@media print {
    .uce-visual { break-inside: avoid; box-shadow: none; }
    .uce-visual__header { display: none; }
    .uce-visual__viewport { overflow: visible; padding: .4rem; background: #fff; }
    .uce-svg-shape.uce-svg-badge { fill: #fff; }
    .uce-visual__svg { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: 620px !important; }
    .uce-visual__svg--wide { width: 100% !important; max-width: 100% !important; }
    .uce-chart-data { display: none; }
}

/* Universal quiz components reuse the existing ToolRunner/practice controls. */
.uce-quiz {
    max-width: 100%;
    margin-block: 1.35rem;
    overflow: hidden;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 14px;
    background: var(--surface, var(--db-surface));
    box-shadow: var(--shadow-sm, 0 8px 24px rgb(0 0 0 / .08));
}
.uce-quiz__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border, var(--db-border));
    background: color-mix(in srgb, var(--brand, var(--db-accent)) 7%, var(--surface, var(--db-surface)));
}
.uce-quiz__header > div { display: grid; gap: .1rem; min-width: 0; }
.uce-quiz__header span { color: var(--muted, var(--db-muted)); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.uce-quiz__header strong { overflow-wrap: anywhere; }
.uce-quiz__instructions { margin: 0; padding: .75rem 1rem 0; color: var(--muted, var(--db-muted)); }
.uce-quiz__stage { padding: 1rem; }
.uce-quiz__static { padding: 1rem; }
.uce-quiz.is-mounted .uce-quiz__static { display: none; }
.uce-quiz__media { max-width: 100%; margin-bottom: 1rem; }
.uce-quiz__media .uce-visual, .uce-quiz__media .mermaid-diagram { margin-block: .5rem 1rem; }
.uce-quiz-media { margin: 0; text-align: center; }
.uce-quiz-media img { display: block; width: auto; max-width: 100%; max-height: min(65vh, 680px); margin-inline: auto; object-fit: contain; }
.uce-quiz-media figcaption { margin-top: .5rem; color: var(--muted, var(--db-muted)); overflow-wrap: anywhere; }
.uce-quiz-timer { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; margin-bottom: 1rem; padding: .7rem .8rem; border: 1px solid var(--border, var(--db-border)); border-radius: 10px; background: var(--surface-2, var(--db-surface-soft)); }
.uce-quiz-timer output { margin-inline-end: auto; color: var(--muted, var(--db-muted)); font-variant-numeric: tabular-nums; }
.quiz-question--blanks { line-height: 2.3; }
.quiz-inline-blank { width: clamp(7rem, 22vw, 13rem); min-height: 2.35rem; margin-inline: .35rem; padding: .35rem .55rem; border: 1px solid var(--border, var(--db-border)); border-radius: 7px; color: var(--text, var(--db-text)); background: var(--surface, var(--db-surface)); font: inherit; }
.tool-solution-section { margin-top: .75rem; padding: .8rem 1rem; border-inline-start: 4px solid var(--brand, var(--db-accent)); border-radius: 8px; background: color-mix(in srgb, var(--brand, var(--db-accent)) 7%, transparent); }
.tool-solution-section h4 { margin: 0 0 .45rem; }
.tool-solution-section :is(p, ul, ol) { margin-block: .35rem; }
.tool-instance-fallback { padding: 1rem; border: 1px dashed var(--border, var(--db-border)); border-radius: 10px; color: var(--muted, var(--db-muted)); }
.media-fallback { max-width: 100%; margin-block: .75rem; padding: .8rem 1rem; border: 1px dashed var(--border, var(--db-border)); border-radius: 9px; color: var(--muted, var(--db-muted)); background: var(--surface-2, var(--db-surface-soft)); overflow-wrap: anywhere; }
.uce-quiz:fullscreen { width: 100vw; height: 100vh; overflow: auto; border: 0; border-radius: 0; padding-bottom: 2rem; }

@media (max-width: 560px) {
    .uce-quiz__header, .uce-quiz__stage, .uce-quiz__static { padding-inline: .7rem; }
    .uce-quiz__header .fullscreen-toggle { min-width: 68px; font-size: .72rem; }
    .uce-quiz-timer { align-items: stretch; }
    .quiz-inline-blank { width: min(100%, 10rem); }
}

@media print {
    .uce-quiz { box-shadow: none; break-inside: avoid; }
    .uce-quiz__header button, .uce-quiz__stage { display: none !important; }
    .uce-quiz.is-mounted .uce-quiz__static { display: block; }
}

/* Chapter videos: one compact lesson player (never edge-to-edge), matching
   the main Lesson + Video player. The section spans the same width as the
   chapter cards around it; a single player stays centred in it. Several
   videos become a playlist -- on wide screens the player starts at the cards'
   left edge and the "Chapter videos" list fills the rest of the row so every
   video name is shown in full; on narrow screens the list sits below
   (database-chapter.js; without JavaScript every player is shown in turn). */
.db-lesson-main .chapter-videos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    margin: 16px 0 24px;
}
/* Playlist card heading: "Chapter videos" + a count pill, one compact row. */
.chapter-videos__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 8px 10px; }
.chapter-videos__eyebrow { color: var(--brand, var(--db-accent)); font: 850 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.chapter-videos__count { padding: 4px 9px; border: 1px solid var(--border, var(--db-border)); border-radius: 999px; background: var(--surface-2, var(--db-surface-soft)); color: var(--muted, var(--db-muted)); font: 700 11.5px/1 var(--font-body); white-space: nowrap; }
.chapter-videos__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.chapter-videos__stage { display: grid; gap: 16px; width: 100%; max-width: 880px; margin-inline: auto; }
/* The whole player (title line + 16:9 video + bar) fits the visible screen:
   the width is also capped by the viewport height (short laptop screens,
   150% display scaling), never below a usable 480px. */
.chapter-videos__stage { max-width: min(880px, max(480px, calc((100vh - var(--topbar, 46px) - 150px) * 16 / 9))); }
.chapter-videos__stage { max-width: min(880px, max(480px, calc((100svh - var(--topbar, 46px) - 150px) * 16 / 9))); }
.video-player__head { display: grid; gap: 2px; padding: 9px 12px 8px; }
.video-player__eyebrow { color: var(--brand, var(--db-accent)); font: 850 10.5px/1.2 var(--font-body); letter-spacing: .13em; text-transform: uppercase; }
.video-player__heading { margin: 0; overflow: hidden; color: var(--text, var(--db-text)); font: 750 15px/1.3 var(--font-body); text-overflow: ellipsis; white-space: nowrap; }
/* A playlist lines its player up with the cards' left edge (the list sits
   beside or below it); a single player stays centred. */
.chapter-videos.is-enhanced .chapter-videos__stage { margin-inline: 0; }
.chapter-videos__playlist { display: none; }
.chapter-videos.is-enhanced .chapter-videos__playlist {
    display: grid;
    align-content: start;
    padding: 8px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 16px;
    background: var(--surface, var(--db-surface));
    box-shadow: var(--shadow);
}
.chapter-videos__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) {
    .chapter-videos.is-enhanced .chapter-videos__layout { grid-template-columns: minmax(0, min(860px, max(480px, calc((100vh - var(--topbar, 46px) - 150px) * 16 / 9)))) minmax(280px, 1fr); justify-content: start; }
    .chapter-videos.is-enhanced .chapter-videos__stage { max-width: none; margin: 0; }
    .chapter-videos.is-enhanced .chapter-videos__playlist { position: sticky; top: calc(var(--topbar, 46px) + 14px); max-height: calc(100vh - var(--topbar, 46px) - 40px); overflow-y: auto; overscroll-behavior: contain; }
}
.chapter-videos__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 8px 10px;
    align-items: center;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--text, var(--db-text));
    text-align: left;
    cursor: pointer;
    transition: background .16s ease;
}
.chapter-videos__item:hover { background: var(--surface-2, var(--db-surface-soft)); }
.chapter-videos__item:focus-visible { outline: 2px solid var(--brand, var(--db-accent)); outline-offset: -2px; }
.chapter-videos__item.is-current { background: color-mix(in srgb, var(--brand, var(--db-accent)) 14%, var(--surface, var(--db-surface))); box-shadow: inset 3px 0 0 var(--brand, var(--db-accent)); }
.chapter-videos__index { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--border, var(--db-border)); border-radius: 9px; background: var(--surface-2, var(--db-surface-soft)); color: var(--muted, var(--db-muted)); font: 700 12px/1 var(--font-mono); }
.chapter-videos__item.is-current .chapter-videos__index { border-color: transparent; background: var(--brand, var(--db-accent)); color: var(--primary-text, #161000); }
.chapter-videos__item-text { display: grid; gap: 3px; min-width: 0; }
.chapter-videos__item-text strong { display: block; font: 700 14px/1.4 var(--font-body); overflow-wrap: anywhere; }
.chapter-videos__item-text small { color: var(--muted, var(--db-muted)); font: 600 11.5px/1.2 var(--font-body); }
.chapter-videos__item.is-current .chapter-videos__item-text small { color: var(--brand, var(--db-accent)); }
.chapter-videos__item-play { color: var(--muted, var(--db-muted)); font-size: 11px; }
.video-player[hidden] { display: none; }
.video-player__complete-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.video-player__replay--next { border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; }
.video-player__complete {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: clamp(18px, 4vw, 40px);
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--brand, var(--db-accent)) 25%, transparent), transparent 58%),
        #07101f;
    color: #fff;
    text-align: center;
}
.video-player__complete[hidden] { display: none; }
.video-player__complete-label { margin: 0; color: var(--brand, var(--db-accent)); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.video-player__complete-title { max-width: 48ch; margin: 0; font-size: clamp(16px, 2.4vw, 24px); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.video-player__replay {
    min-height: 44px;
    margin-top: 4px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    background: var(--brand, var(--db-accent));
    color: var(--primary-text, #161000);
    font: 800 14px/1 var(--font-body);
    cursor: pointer;
}
.video-player__replay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media print {
    .chapter-videos { display: none; }
}

/* ==========================================================================
   COURSE CHAPTERS DRAWER
   The lesson always uses the full page width; every chapter lives in a
   left drawer opened from the header, wide enough for full chapter titles.
   ========================================================================== */
.db-page-shell.app-shell { display: block; min-height: calc(100vh - var(--topbar)); }

.db-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 1px solid color-mix(in srgb, var(--brand, var(--db-accent)) 40%, var(--border, var(--db-border)));
    border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand, var(--db-accent)) 16%, var(--surface-2, var(--db-surface-soft))), color-mix(in srgb, var(--accent, #4f8dff) 10%, var(--surface-2, var(--db-surface-soft))));
    color: var(--text, var(--db-text));
    font: 750 12.5px/1 var(--font-body);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand, var(--db-accent)) 16%, transparent);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.db-drawer-toggle svg { width: 16px; height: 16px; flex: none; color: var(--brand, var(--db-accent)); }
.db-drawer-toggle:hover,
.db-drawer-toggle[aria-expanded="true"] { border-color: var(--brand, var(--db-accent)); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand, var(--db-accent)) 28%, transparent); transform: translateY(-1px); }
.db-drawer-toggle:focus-visible { outline: 2px solid var(--brand, var(--db-accent)); outline-offset: 2px; }

.db-chapter-drawer.course-sidebar {
    position: fixed;
    z-index: 370;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: min(600px, calc(100vw - 40px));
    height: 100vh;
    height: 100dvh;
    padding: 0 0 0 env(safe-area-inset-left, 0px);
    overflow: hidden;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--brand, var(--db-accent)) 24%, var(--border, var(--db-border)));
    border-radius: 0 20px 20px 0;
    background:
        radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--brand, var(--db-accent)) 12%, transparent), transparent 62%),
        var(--surface, var(--db-surface));
    box-shadow: 34px 0 90px rgba(0, 0, 0, .38);
    touch-action: pan-y;
    transform: translate3d(-104%, 0, 0);
    visibility: hidden;
    transition: transform .46s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .46s;
}
.db-chapter-drawer.course-sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform .46s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.db-chapter-drawer.course-sidebar.is-dragging { transition: none; }

.db-drawer-head {
    flex: none;
    display: grid;
    gap: 10px;
    padding: max(13px, env(safe-area-inset-top, 0px)) 18px 12px 20px;
    border-bottom: 1px solid var(--border, var(--db-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand, var(--db-accent)) 7%, transparent), transparent);
}
.db-drawer-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.db-drawer-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--brand, var(--db-accent)); font: 800 10.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.db-drawer-eyebrow svg { width: 15px; height: 15px; }
.db-chapter-drawer .db-sidebar-close {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 50%;
    background: var(--surface-2, var(--db-surface-soft));
    color: var(--text, var(--db-text));
    cursor: pointer;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .18s ease, color .18s ease;
}
.db-chapter-drawer .db-sidebar-close svg { width: 16px; height: 16px; }
.db-chapter-drawer .db-sidebar-close:hover,
.db-chapter-drawer .db-sidebar-close:focus-visible { border-color: var(--brand, var(--db-accent)); color: var(--brand, var(--db-accent)); transform: rotate(90deg); }
.db-drawer-course { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text, var(--db-text)); font: 800 clamp(16.5px, 1.5vw, 19px)/1.28 var(--font-body); letter-spacing: -.015em; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.db-drawer-progress { display: flex; align-items: center; gap: 12px; max-height: 24px; color: var(--muted, var(--db-muted)); font-size: 12px; font-weight: 650; white-space: nowrap; transition: max-height .25s ease, opacity .2s ease, margin .25s ease; }
.db-drawer-progress__track { flex: 1 1 auto; }
/* Once the learner scrolls the list, the head condenses to give the
   chapters more room: one-line course name, no progress row. */
.db-chapter-drawer.is-condensed .db-drawer-course { -webkit-line-clamp: 1; }
.db-chapter-drawer.is-condensed .db-drawer-progress { max-height: 0; margin-top: -10px; overflow: hidden; opacity: 0; }
.db-drawer-progress strong { color: var(--text, var(--db-text)); }
.db-drawer-progress__track { position: relative; height: 5px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--text, var(--db-text)) 10%, transparent); }
.db-drawer-progress__track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand, var(--db-accent)), var(--accent, #4f8dff)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #4f8dff) 50%, transparent); transition: width .9s cubic-bezier(.22, 1, .36, 1) .12s; }
.db-drawer-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 11px;
    background: var(--surface-2, var(--db-surface-soft));
    color: var(--muted, var(--db-muted));
    transition: border-color .18s ease, box-shadow .18s ease;
}
.db-drawer-search:focus-within { border-color: var(--brand, var(--db-accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, var(--db-accent)) 18%, transparent); }
.db-drawer-search svg { width: 17px; height: 17px; flex: none; }
.db-drawer-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text, var(--db-text)); font: 600 14px/1 var(--font-body); }
.db-drawer-search input::placeholder { color: var(--muted, var(--db-muted)); }

.db-drawer-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    padding: 12px 12px max(20px, env(safe-area-inset-bottom, 0px)) 14px;
    scroll-padding-top: 56px;
    scrollbar-width: thin;
}
.db-chapter-drawer.is-open .db-drawer-head { animation: db-drawer-rise .5s cubic-bezier(.22, 1, .36, 1) .06s both; }
.db-chapter-drawer.is-open .db-drawer-list { animation: db-drawer-rise .55s cubic-bezier(.22, 1, .36, 1) .12s both; }
@keyframes db-drawer-rise { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: none; } }

.db-chapter-drawer .chapter-list { display: grid; gap: 1px; margin: 4px 0; padding: 0; }
/* A course without sections is one plain list: no frame around it. */
.db-drawer-list > .curriculum-tree:has(> .chapter-list) { border: 0; border-radius: 0; overflow: visible; }
.db-chapter-drawer .curriculum-tree .curriculum-tree__body > .chapter-list { margin: 6px 8px 8px; }
.db-chapter-drawer .chapter-list a,
.db-chapter-drawer .chapter-list a:has(> .curriculum-free-tag) {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 7px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text, var(--db-text));
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.db-chapter-drawer .chapter-list a > span {
    display: grid;
    height: 25px;
    padding: 0;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--text, var(--db-text)) 6%, transparent);
    color: var(--muted, var(--db-muted));
    font: 750 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    transition: background .16s ease, color .16s ease;
}
.db-chapter-drawer .chapter-list strong { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.db-chapter-drawer .chapter-list a > .curriculum-free-tag { align-self: center; margin: 0; }
.db-chapter-drawer .chapter-list a:hover,
.db-chapter-drawer .chapter-list a:focus-visible { border-color: color-mix(in srgb, var(--brand, var(--db-accent)) 22%, transparent); background: color-mix(in srgb, var(--brand, var(--db-accent)) 8%, var(--surface-2, var(--db-surface-soft))); transform: translateX(3px); outline: 0; }
.db-chapter-drawer .chapter-list a:focus-visible { box-shadow: 0 0 0 2px var(--brand, var(--db-accent)); }
.db-chapter-drawer .chapter-list a:hover > span { color: var(--brand, var(--db-accent)); }
.db-chapter-drawer .chapter-list .is-current {
    border-color: color-mix(in srgb, var(--brand, var(--db-accent)) 45%, var(--border, var(--db-border)));
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand, var(--db-accent)) 17%, var(--surface, var(--db-surface))), color-mix(in srgb, var(--brand, var(--db-accent)) 5%, var(--surface, var(--db-surface))));
    box-shadow: inset 3px 0 0 var(--brand, var(--db-accent)), 0 8px 22px color-mix(in srgb, var(--brand, var(--db-accent)) 14%, transparent);
}
.db-chapter-drawer .chapter-list .is-current > span { background: linear-gradient(145deg, var(--brand, var(--db-accent)), var(--accent, #4f8dff)); color: #06121d; }
.db-chapter-drawer .chapter-list .is-current:hover > span { color: #06121d; }
.db-chapter-drawer .chapter-list .is-current strong { font-weight: 750; }
.db-chapter-drawer .chapter-list .is-disabled { opacity: .5; }
.db-chapter-drawer .chapter-list .is-disabled:hover { transform: none; }
.db-chapter-drawer mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--brand, var(--db-accent)) 30%, transparent); color: inherit; }
.db-drawer-list > .curriculum-tree:has(> .curriculum-tree__node) { display: grid; gap: 10px; overflow: visible; border: 0; border-radius: 0; }
.db-chapter-drawer .curriculum-tree__node[data-depth="0"] {
    overflow: clip;
    border: 1px solid var(--border, var(--db-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--text, var(--db-text)) 2%, var(--surface, var(--db-surface)));
}
.db-chapter-drawer .curriculum-tree__node[data-depth="0"] + .curriculum-tree__node[data-depth="0"] { border-top: 1px solid var(--border, var(--db-border)); }
.db-chapter-drawer .curriculum-tree__node[data-depth="0"]:has(.is-current) { border-color: color-mix(in srgb, var(--brand, var(--db-accent)) 40%, var(--border, var(--db-border))); }
.db-chapter-drawer .curriculum-tree__header {
    position: sticky;
    z-index: 2;
    /* Sticky offsets count from inside the list's 12px top padding. */
    top: -12px;
    gap: 6px 10px;
    padding: 11px 14px 11px 13px;
    border-left: 0;
    background: color-mix(in srgb, var(--brand, var(--db-accent)) 9%, var(--surface, var(--db-surface)));
    color: var(--text, var(--db-text));
    font-size: 14.5px;
    font-weight: 780;
    letter-spacing: -.005em;
}
.db-chapter-drawer .curriculum-tree__header:hover { background: color-mix(in srgb, var(--brand, var(--db-accent)) 14%, var(--surface, var(--db-surface))); }
.db-chapter-drawer .curriculum-tree__node[open] > .curriculum-tree__header {
    border-bottom: 1px solid color-mix(in srgb, var(--brand, var(--db-accent)) 20%, var(--border, var(--db-border)));
    box-shadow: inset 3px 0 0 var(--brand, var(--db-accent)), 0 6px 14px -10px rgba(0, 0, 0, .5);
}
.db-chapter-drawer .curriculum-tree__chevron {
    width: 7px;
    height: 7px;
    margin: 0 4px 2px 3px;
    border-color: var(--brand, var(--db-accent));
}
.db-chapter-drawer .curriculum-tree__node[open] > .curriculum-tree__header .curriculum-tree__chevron { margin: 3px 4px 0 3px; }
.db-chapter-drawer .curriculum-tree__node:has(.is-current) > .curriculum-tree__header .curriculum-tree__title { color: var(--brand-strong, var(--brand, var(--db-accent))); }
.db-chapter-drawer .curriculum-tree__count { background: color-mix(in srgb, var(--text, var(--db-text)) 8%, transparent); }
.db-chapter-drawer .db-preview-syllabus-group--free { border-color: color-mix(in srgb, var(--success, #22c55e) 30%, var(--border, var(--db-border))); }
.db-chapter-drawer .db-preview-syllabus-group--free > .curriculum-tree__header { background: color-mix(in srgb, var(--success, #22c55e) 9%, var(--surface, var(--db-surface))); }
.db-chapter-drawer .curriculum-tree__node[data-depth="0"] .curriculum-tree__body { padding: 8px 10px 10px 12px; }
.db-chapter-drawer .curriculum-tree__body > .chapter-list,
.db-chapter-drawer .curriculum-tree .curriculum-tree__body > .chapter-list {
    margin: 0 0 0 9px;
    padding-left: 10px;
    border-left: 2px solid color-mix(in srgb, var(--brand, var(--db-accent)) 22%, var(--border, var(--db-border)));
}
/* Nested sections: a smaller tinted header, sticky just below its parent. */
.db-chapter-drawer .curriculum-tree__node:not([data-depth="0"]) {
    margin: 8px 0 4px 9px;
    padding-left: 10px;
    border-left: 2px solid color-mix(in srgb, var(--brand, var(--db-accent)) 22%, var(--border, var(--db-border)));
}
.db-chapter-drawer .curriculum-tree__node:not([data-depth="0"]) > .curriculum-tree__header {
    z-index: 1;
    top: 35px;
    padding: 8px 12px 8px 11px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent, #4f8dff) 8%, var(--surface, var(--db-surface)));
    font-size: 13.5px;
    font-weight: 720;
}
.db-chapter-drawer .curriculum-tree__node:not([data-depth="0"])[open] > .curriculum-tree__header { border-radius: 10px 10px 0 0; box-shadow: inset 3px 0 0 var(--accent, #4f8dff); }
.db-chapter-drawer .curriculum-tree__node:not([data-depth="0"]) > .curriculum-tree__body { padding: 6px 0 2px; }
.db-drawer-empty { margin: 26px 8px; color: var(--muted, var(--db-muted)); font-size: 14px; text-align: center; }

.db-sidebar-backdrop {
    position: fixed;
    z-index: 365;
    inset: 0;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(2, 8, 18, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: default;
    opacity: 0;
    pointer-events: none;
    transition: opacity .38s ease;
}
.db-sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 700px) {
    .db-drawer-toggle { height: 30px; padding-inline: 8px 10px; font-size: 11.5px; }
    .db-chapter-drawer.course-sidebar { width: calc(100vw - 28px); border-radius: 0 16px 16px 0; }
    .db-drawer-head { gap: 11px; padding-inline: 16px 14px; }
    .db-drawer-list { padding-inline: 10px; }
    .db-chapter-drawer .chapter-list strong { font-size: 14px; }
}

/* Free-preview visitors also get Buy/Why-purchase actions in the header:
   keep the toggle icon-only (label still read by screen readers) there. */
@media (max-width: 900px) {
    html[data-preview-course-guide] .db-drawer-toggle { width: 34px; padding: 0; justify-content: center; }
    html[data-preview-course-guide] .db-drawer-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 420px) {
    html[data-preview-course-guide] .db-course-header .db-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .db-chapter-drawer.course-sidebar,
    .db-chapter-drawer.course-sidebar.is-open,
    .db-sidebar-backdrop,
    .db-drawer-progress__track i { transition: none; }
    .db-chapter-drawer.is-open .db-drawer-head,
    .db-chapter-drawer.is-open .db-drawer-list { animation: none; }
}

@media print {
    .db-drawer-toggle, .db-chapter-drawer, .db-sidebar-backdrop { display: none !important; }
}