:root {
    color-scheme: dark;
    --bg: #060d18;
    --surface: #0c1a2e;
    --surface-2: #112544;
    --surface-3: #17325a;
    --border: #29456f;
    --border-soft: rgba(255, 212, 59, .14);
    --text: #eef3fb;
    --muted: #91a6c4;
    --brand: #ffd43b;
    --brand-strong: #f4b400;
    --primary-start: #ffdc5e;
    --primary-end: #f2b100;
    --primary-text: #1c1400;
    --primary-border: #ffe485;
    --primary-shadow: rgba(244, 180, 0, .26);
    --accent: #4f8dff;
    --warn: #ffb454;
    --danger: #ff7a90;
    --code-bg: #04070f;
    --code-text: #eef6ff;
    --scroll-track: #0a1526;
    --scroll-thumb: #2f4d78;
    --scroll-hover: #ffd43b;
    --topbar: 46px;
    --sidebar: 248px;
    --radius: 14px;
    --shadow: 0 16px 42px rgba(0, 0, 0, .3);
    --font-body: 'Mukta', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-editorial: var(--font-body);
    --font-mono: 'JetBrains Mono', "Cascadia Code", Consolas, monospace;
    font-family: var(--font-body);
    font-weight: 400;
}

:root[data-theme="paper"] {
    color-scheme: light;
    --bg: #faf6ec;
    --surface: #fffcf4;
    --surface-2: #f3ecda;
    --surface-3: #e9dfc5;
    --border: #ddceac;
    --border-soft: rgba(120, 79, 4, .13);
    --text: #2b2312;
    --muted: #74674c;
    --brand: #9a6b00;
    --brand-strong: #7d5800;
    --primary-start: #b17e00;
    --primary-end: #8a6200;
    --primary-text: #ffffff;
    --primary-border: #c4900f;
    --primary-shadow: rgba(138, 98, 0, .22);
    --accent: #2f5fd0;
    --warn: #9a5b00;
    --danger: #bd3247;
    --code-bg: #1c1706;
    --code-text: #fbf6e8;
    --scroll-track: #f0e8d4;
    --scroll-thumb: #c3af86;
    --scroll-hover: #9a6b00;
    --shadow: 0 16px 42px rgba(80, 60, 10, .13);
}
:root[data-theme="white"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2f6fd;
    --surface-3: #e6edfa;
    --border: #cddaf3;
    --border-soft: rgba(31, 111, 235, .10);
    --text: #0f1c2e;
    --muted: #57708f;
    --brand: #1f6feb;
    --brand-strong: #1657c4;
    --primary-start: #3b82f6;
    --primary-end: #1f6feb;
    --primary-text: #ffffff;
    --primary-border: #6ba3fb;
    --primary-shadow: rgba(31, 111, 235, .20);
    --accent: #c9930b;
    --warn: #9a6700;
    --danger: #c5324b;
    --code-bg: #060d18;
    --code-text: #f0f6ff;
    --scroll-track: #eef2fa;
    --scroll-thumb: #9db3d6;
    --scroll-hover: #1f6feb;
    --shadow: 0 16px 38px rgba(31, 111, 235, .10);
}
:root[data-theme="midnight"] { color-scheme: dark; }
:root[data-theme="ocean"] {
    color-scheme: dark;
    --bg: #031421;
    --surface: #06253a;
    --surface-2: #0a3350;
    --surface-3: #0f4468;
    --border: #1f5c82;
    --border-soft: rgba(56, 216, 255, .16);
    --text: #e9f8ff;
    --muted: #8fc0d8;
    --brand: #38d8ff;
    --brand-strong: #12b8e6;
    --primary-start: #63e3ff;
    --primary-end: #12aee0;
    --primary-text: #02131c;
    --primary-border: #8aeeff;
    --primary-shadow: rgba(18, 184, 230, .3);
    --accent: #ff8a5c;
    --warn: #ffd172;
    --danger: #ff8da1;
    --code-bg: #010a12;
    --code-text: #eafbff;
    --scroll-track: #041c2c;
    --scroll-thumb: #1d5b7c;
    --scroll-hover: #38d8ff;
    --shadow: 0 18px 48px rgba(0, 10, 16, .5);
}
:root[data-theme="forest"] {
    color-scheme: dark;
    --bg: #071409;
    --surface: #0d2213;
    --surface-2: #14311c;
    --surface-3: #1c4126;
    --border: #305a3a;
    --border-soft: rgba(214, 224, 84, .15);
    --text: #edfaec;
    --muted: #9fc0a4;
    --brand: #d6e054;
    --brand-strong: #b9c72e;
    --primary-start: #e2ea7c;
    --primary-end: #b3c22a;
    --primary-text: #141a02;
    --primary-border: #eaf299;
    --primary-shadow: rgba(179, 194, 42, .28);
    --accent: #3fc7a8;
    --warn: #f5cd72;
    --danger: #ff8f96;
    --code-bg: #030b05;
    --code-text: #f2fff2;
    --scroll-track: #081a0c;
    --scroll-thumb: #386c44;
    --scroll-hover: #d6e054;
    --shadow: 0 18px 48px rgba(0, 10, 4, .5);
}
:root[data-theme="aurora"] {
    color-scheme: dark;
    --bg: #0e0a1c;
    --surface: #191233;
    --surface-2: #241a46;
    --surface-3: #2f2359;
    --border: #45356f;
    --border-soft: rgba(255, 92, 205, .16);
    --text: #f6f0ff;
    --muted: #b7a6d4;
    --brand: #ff5ccd;
    --brand-strong: #e13cae;
    --primary-start: #ff7dda;
    --primary-end: #c045e8;
    --primary-text: #1c0616;
    --primary-border: #ffa0e6;
    --primary-shadow: rgba(225, 60, 174, .3);
    --accent: #55e8ff;
    --warn: #ffd077;
    --danger: #ff879b;
    --code-bg: #08050f;
    --code-text: #fbf5ff;
    --scroll-track: #150e28;
    --scroll-thumb: #5a4380;
    --scroll-hover: #ff5ccd;
    --shadow: 0 18px 50px rgba(6, 0, 16, .6);
}
:root[data-theme="sunset"] {
    color-scheme: light;
    --bg: #fff2e6;
    --surface: #fffaf4;
    --surface-2: #ffe2c4;
    --surface-3: #fccb9a;
    --border: #f0b479;
    --border-soft: rgba(191, 84, 4, .14);
    --text: #3a2210;
    --muted: #866a4c;
    --brand: #ff7a1a;
    --brand-strong: #d4590a;
    --primary-start: #ff9a44;
    --primary-end: #e56a12;
    --primary-text: #2a1200;
    --primary-border: #ffb266;
    --primary-shadow: rgba(213, 92, 12, .24);
    --accent: #0e7d8f;
    --warn: #9a6200;
    --danger: #c73352;
    --code-bg: #1e1006;
    --code-text: #fff3e6;
    --scroll-track: #fbe4cd;
    --scroll-thumb: #dba066;
    --scroll-hover: #ff7a1a;
    --shadow: 0 18px 42px rgba(178, 82, 14, .16);
}
:root[data-theme="lavender"] {
    color-scheme: light;
    --bg: #f6f3ff;
    --surface: #fffeff;
    --surface-2: #eae2ff;
    --surface-3: #dccffc;
    --border: #cbb9f5;
    --border-soft: rgba(120, 55, 205, .13);
    --text: #241a3d;
    --muted: #6d6089;
    --brand: #8b3ce0;
    --brand-strong: #6f28bd;
    --primary-start: #a463ec;
    --primary-end: #7d34cf;
    --primary-text: #ffffff;
    --primary-border: #b988f0;
    --primary-shadow: rgba(111, 40, 189, .22);
    --accent: #0f9a8e;
    --warn: #966500;
    --danger: #c13d67;
    --code-bg: #140b21;
    --code-text: #f9f4ff;
    --scroll-track: #ece3fb;
    --scroll-thumb: #ab8de0;
    --scroll-hover: #8b3ce0;
    --shadow: 0 18px 42px rgba(90, 46, 160, .15);
}
:root[data-theme="cyber"] {
    color-scheme: dark;
    --bg: #040a06;
    --surface: #08150d;
    --surface-2: #0d2013;
    --surface-3: #132c1b;
    --border: #244a30;
    --border-soft: rgba(57, 255, 143, .16);
    --text: #ecfff2;
    --muted: #8fcaa2;
    --brand: #39ff8f;
    --brand-strong: #17e070;
    --primary-start: #6dffb0;
    --primary-end: #14d976;
    --primary-text: #001a0c;
    --primary-border: #8bffc4;
    --primary-shadow: rgba(20, 217, 118, .3);
    --accent: #ff4fd8;
    --warn: #ffd66b;
    --danger: #ff6b8a;
    --code-bg: #010603;
    --code-text: #eafff3;
    --scroll-track: #061109;
    --scroll-thumb: #1f5a35;
    --scroll-hover: #39ff8f;
    --shadow: 0 18px 50px rgba(0, 8, 4, .68);
}
:root[data-theme="slate"] {
    color-scheme: dark;
    --bg: #0e141d;
    --surface: #151e29;
    --surface-2: #1d2938;
    --surface-3: #263647;
    --border: #38495d;
    --border-soft: rgba(122, 200, 255, .14);
    --text: #eaf1f8;
    --muted: #9fb1c4;
    --brand: #7ac8ff;
    --brand-strong: #4fa8ea;
    --primary-start: #92d3ff;
    --primary-end: #4098db;
    --primary-text: #06131f;
    --primary-border: #b3e1ff;
    --primary-shadow: rgba(79, 168, 234, .25);
    --accent: #ffb454;
    --warn: #f1c96d;
    --danger: #ff8797;
    --code-bg: #070c12;
    --code-text: #eef5fb;
    --scroll-track: #101822;
    --scroll-thumb: #3c5165;
    --scroll-hover: #7ac8ff;
    --shadow: 0 18px 46px rgba(0, 6, 12, .52);
}
:root[data-theme="rose"] {
    color-scheme: light;
    --bg: #fff4f6;
    --surface: #fffdfd;
    --surface-2: #ffe3ea;
    --surface-3: #fccdd8;
    --border: #f0b7c4;
    --border-soft: rgba(199, 24, 92, .13);
    --text: #351721;
    --muted: #855869;
    --brand: #e01a6f;
    --brand-strong: #b81058;
    --primary-start: #ee4a8c;
    --primary-end: #d0166c;
    --primary-text: #ffffff;
    --primary-border: #f279aa;
    --primary-shadow: rgba(208, 22, 108, .22);
    --accent: #0f8f7c;
    --warn: #976300;
    --danger: #c42e46;
    --code-bg: #1c0a12;
    --code-text: #fff2f6;
    --scroll-track: #fbe5eb;
    --scroll-thumb: #d698ac;
    --scroll-hover: #e01a6f;
    --shadow: 0 18px 42px rgba(160, 24, 88, .15);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { min-height: 34px; border: 1px solid var(--scroll-track); border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--scroll-thumb) 78%, var(--accent)), var(--scroll-thumb)); }
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar) + 10px); }
body { margin: 0; min-width: 280px; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, select { font: inherit; }
a { color: var(--accent); }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 1000; top: 6px; left: 8px; transform: translateY(-140%); padding: 6px 10px; border-radius: 6px; background: var(--brand); color: #04120f; font-weight: 800; }
.skip-link:focus { transform: none; }

.topbar { position: sticky; z-index: 100; top: 0; height: var(--topbar); display: grid; grid-template-columns: auto minmax(150px, 1fr) minmax(170px, 280px) auto; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); }
.topbar-actions { display: flex; align-items: center; gap: 10px; justify-self: end; min-width: 0; }
.brand { display: flex; align-items: center; gap: 7px; font-weight: 850; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; background: linear-gradient(145deg, var(--brand), var(--accent)); color: #06121d; font-size: 11px; letter-spacing: -.04em; box-shadow: 0 0 22px color-mix(in srgb, var(--brand) 35%, transparent); }
.brand-copy { display: grid; line-height: 1; white-space: nowrap; }
.brand-copy strong { color: var(--text); font-size: 12px; letter-spacing: -.015em; }
.brand-copy small { margin-top: 3px; color: var(--muted); font-size: 7px; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.crumb { overflow: hidden; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.crumb strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; }
.crumb i { font-style: normal; opacity: .55; }
.jump-control { position: relative; min-width: 0; }
.jump-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 34px; padding: 3px 8px 3px 10px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(145deg, var(--surface-2), color-mix(in srgb, var(--surface-3) 76%, var(--accent))); color: var(--text); text-align: left; box-shadow: inset 0 1px rgba(255, 255, 255, .035); cursor: pointer; }
.jump-toggle:hover, .jump-control.is-open .jump-toggle { border-color: color-mix(in srgb, var(--brand) 62%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 8%, transparent); }
.jump-copy { display: grid; min-width: 0; line-height: 1.05; }
.jump-copy small { color: var(--brand); font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.jump-copy strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.jump-toggle svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 1.8; transition: transform .2s ease; }
.jump-control.is-open .jump-toggle svg { transform: rotate(180deg); }
.jump-menu { position: absolute; z-index: 230; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 20px)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 24px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .025); backdrop-filter: blur(18px); transform-origin: top right; animation: jump-menu-in .18s ease-out; }
.jump-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 11px 8px; border-bottom: 1px solid var(--border-soft); }
.jump-menu-heading > div { display: grid; line-height: 1.1; }
.jump-menu-heading small { color: var(--brand); font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.jump-menu-heading strong { margin-top: 3px; font-size: 13px; }
.jump-menu-heading kbd { padding: 2px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--muted); font: 700 8px/1.3 ui-monospace, monospace; }
.jump-search { display: flex; align-items: center; gap: 7px; margin: 8px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.jump-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 9%, transparent); }
.jump-search > span { color: var(--brand); font-size: 17px; line-height: 1; }
.jump-search input { width: 100%; height: 32px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.jump-search input::placeholder { color: var(--muted); }
.jump-options { max-height: min(58vh, 480px); overflow-y: auto; padding: 0 6px 7px; }
.jump-option { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 7px; align-items: center; width: 100%; min-height: 34px; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; }
.jump-option > span { color: color-mix(in srgb, var(--muted) 75%, transparent); font: 800 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.jump-option strong { overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.jump-option:hover, .jump-option:focus-visible { border-color: color-mix(in srgb, var(--brand) 24%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 11%, var(--surface-2)), var(--surface-2)); color: var(--text); outline: 0; }
.jump-option:hover > span, .jump-option:focus-visible > span { color: var(--brand); }
.jump-option[aria-selected="true"] { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); color: var(--text); }
.jump-option[aria-selected="true"] > span { color: var(--brand); }
.jump-empty { margin: 5px 7px; padding: 13px; border: 1px dashed var(--border); border-radius: 7px; color: var(--muted); font-size: 11px; text-align: center; }

@keyframes jump-menu-in {
    from { opacity: 0; transform: translateY(-7px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Two states that were previously toggled via document.body.style.overflow
   / a hidden textarea's own style.position+opacity -- both fixed, static
   values, so a class is the right fix (and simpler than the animation
   stack trick used for the genuinely dynamic per-instance styles above). */
body.is-scroll-locked { overflow: hidden; }
.clipboard-fallback-textarea { position: fixed; opacity: 0; }
.topbar-button { height: 30px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 750; cursor: pointer; }
.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); color: var(--brand-strong); text-decoration: none; }
.dashboard-link svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 780px) { .dashboard-link span { display: none; } .dashboard-link { padding-inline: 0; width: 30px; justify-content: center; } }

/* Practice Lab navbar shortcut -- deliberately styled apart from the plain
   .topbar-button look (Dashboard, Menu) so it reads as the primary call to
   action rather than a peer utility button. Reuses the .button-primary
   brand gradient plus a slow glow pulse (paused under
   prefers-reduced-motion, matching every other motion-bearing rule in this
   file) so it draws the eye without a distracting fast flash. */
.practice-lab-nav-button {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    border-color: var(--primary-border);
    background: linear-gradient(145deg, var(--primary-start), var(--primary-end));
    color: var(--primary-text);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-strong) 55%, transparent), 0 5px 14px var(--primary-shadow), 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), 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) 55%, transparent), 0 5px 14px var(--primary-shadow), inset 0 1px rgba(255, 255, 255, .24); }
    70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-strong) 0%, transparent), 0 5px 14px var(--primary-shadow), inset 0 1px rgba(255, 255, 255, .24); }
    100% { box-shadow: 0 0 0 0 transparent, 0 5px 14px var(--primary-shadow), inset 0 1px rgba(255, 255, 255, .24); }
}
@media (prefers-reduced-motion: reduce) { .practice-lab-nav-button { animation: none; } }
@media (max-width: 780px) { .practice-lab-nav-button span { display: none; } .practice-lab-nav-button { padding-inline: 0; width: 30px; justify-content: center; } }
/* Short Notes navbar button -- was missing the same display:inline-flex +
   fixed svg sizing every other topbar-button icon button (.dashboard-link,
   .practice-lab-nav-button) already declares, so its icon rendered at full
   native SVG size instead of a compact 14px glyph. */
.short-notes-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.short-notes-toggle svg { width: 14px; height: 14px; flex: none; }
.short-notes-toggle:hover, .short-notes-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (max-width: 780px) { .short-notes-toggle span { display: none; } .short-notes-toggle { padding-inline: 0; width: 30px; justify-content: center; } }
/* Keep the labelled navbar action discoverable at normal phone widths. */
@media (max-width: 700px) {
    .short-notes-toggle { display: inline-flex; width: auto; padding-inline: 8px; }
    .short-notes-toggle span { display: inline; }
}
.theme-picker { position: relative; }
.theme-toggle-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.theme-menu { position: absolute; z-index: 330; bottom: calc(100% + 12px); left: 0; width: min(270px, calc(100vw - 16px)); max-height: calc(100vh - 140px); overflow-y: auto; padding: 7px; border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: theme-menu-in .16s ease-out; }
.theme-menu > p { display: grid; gap: 1px; margin: 0 0 5px; padding: 6px 7px 8px; border-bottom: 1px solid var(--border); }
.theme-menu > p strong { font-size: 12px; }.theme-menu > p span { color: var(--muted); font-size: 9px; }
.theme-menu > button { display: grid; grid-template-columns: 39px minmax(0, 1fr) 18px; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.theme-menu > button:hover, .theme-menu > button[aria-checked="true"] { border-color: color-mix(in srgb, var(--brand) 34%, var(--border)); background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.theme-menu > button > span { display: grid; min-width: 0; }.theme-menu > button strong { font-size: 11px; }.theme-menu > button small { margin-top: 2px; color: var(--muted); font-size: 8.5px; }.theme-menu > button b { visibility: hidden; color: var(--brand); font-size: 13px; }.theme-menu > button[aria-checked="true"] b { visibility: visible; }
.theme-swatch { display: flex; align-items: flex-end; gap: 2px; width: 38px; height: 27px; padding: 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: var(--sw-bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.theme-swatch span { width: 8px; border-radius: 2px; background: var(--sw-accent); }.theme-swatch span:nth-child(1) { height: 8px; opacity: .62; }.theme-swatch span:nth-child(2) { height: 14px; }.theme-swatch span:nth-child(3) { height: 10px; opacity: .8; }
.theme-swatch.is-midnight { --sw-bg: #07101c; --sw-accent: #69e0c1; }.theme-swatch.is-paper { --sw-bg: #f5f8fc; --sw-accent: #067c67; }.theme-swatch.is-white { --sw-bg: #fff; --sw-accent: #2563eb; border-color: #cbd5e1; }.theme-swatch.is-ocean { --sw-bg: #041720; --sw-accent: #49e1d0; }.theme-swatch.is-forest { --sw-bg: #07150e; --sw-accent: #a8df72; }.theme-swatch.is-aurora { --sw-bg: #130b20; --sw-accent: #ff8fca; }.theme-swatch.is-sunset { --sw-bg: #fff5ed; --sw-accent: #e4572e; }.theme-swatch.is-lavender { --sw-bg: #f8f5ff; --sw-accent: #7657d7; }.theme-swatch.is-cyber { --sw-bg: #050816; --sw-accent: #00e5ff; }.theme-swatch.is-slate { --sw-bg: #101720; --sw-accent: #65b7ff; }.theme-swatch.is-rose { --sw-bg: #fff5f7; --sw-accent: #d9406f; }
@keyframes theme-menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu-toggle { display: none; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.course-sidebar { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow: hidden auto; padding: 14px 10px; border-right: 1px solid var(--border); background: var(--surface); scrollbar-width: thin; }
.sidebar-heading { position: relative; display: grid; gap: 2px; padding: 0 7px 10px; border-bottom: 1px solid var(--border-soft); }
.sidebar-heading strong { font-size: 16px; }
.sidebar-close { display: none; }
.eyebrow { color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.chapter-list { display: grid; gap: 3px; margin: 10px 0 16px; padding: 0; list-style: none; }
.chapter-list a { display: grid; grid-template-columns: 27px 1fr; gap: 7px; align-items: start; padding: 7px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); text-decoration: none; }
.chapter-list a > span { padding-top: 1px; color: var(--muted); font: 700 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.chapter-list strong { font-size: 12px; line-height: 1.4; }
.chapter-list a:hover { background: var(--surface-2); color: var(--text); }
.chapter-list .is-current { border-color: color-mix(in srgb, var(--brand) 36%, var(--border)); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); color: var(--text); }
.chapter-list .is-current > span { color: var(--brand); }
.chapter-list .is-disabled { opacity: .48; cursor: default; }
.tutorial-sidebar-chapter-gate { display: grid; gap: 5px; margin: 10px 0 16px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.tutorial-sidebar-chapter-gate strong { color: var(--text); font-size: 12px; line-height: 1.35; }
.tutorial-sidebar-chapter-gate p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.tutorial-sidebar-chapter-gate a { color: var(--brand); font-size: 12px; font-weight: 700; }
.sidebar-toc { padding: 11px 7px 0; border-top: 1px solid var(--border-soft); }
.sidebar-toc nav { display: grid; gap: 1px; margin-top: 7px; }
.sidebar-toc a { overflow: hidden; padding: 4px 6px; border-left: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.35; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toc a:hover, .sidebar-toc a.is-active { border-color: var(--brand); color: var(--text); background: var(--surface-2); }
.sidebar-scrim { display: none; }

.lesson { width: 100%; max-width: 1480px; min-width: 0; margin: 0 auto; padding: 18px clamp(14px, 2.2vw, 34px) 28px; }
.breadcrumb { min-width: 0; margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 680; line-height: 1.45; }
.breadcrumb ol { display: flex; min-width: 0; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; }
.breadcrumb li { display: inline-flex; min-width: 0; align-items: center; gap: 4px; }
.breadcrumb li:not(:last-child)::after { color: color-mix(in srgb, var(--muted) 58%, transparent); content: "/"; font-weight: 500; }
.breadcrumb a, .breadcrumb span { min-height: 32px; padding: 4px 3px; align-items: center; overflow-wrap: anywhere; }
.breadcrumb a { display: inline-flex; color: var(--brand); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 780; }
.chapter-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: end; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(circle at 92% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%), linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-2) 82%, var(--brand))); box-shadow: var(--shadow); }
.chapter-hero > div { position: relative; padding-left: 18px; }
.chapter-hero > div::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 5px; border-radius: 4px; background: linear-gradient(180deg, var(--brand), var(--accent)); box-shadow: 0 0 16px color-mix(in srgb, var(--brand) 60%, transparent); }
.chapter-hero h1 { margin: 2px 0 4px; font-family: var(--font-body); font-size: clamp(30px, 4.4vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.chapter-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg) 45%, transparent); }
.chapter-stats div { min-width: 68px; padding: 7px 10px; text-align: center; }
.chapter-stats div + div { border-left: 1px solid var(--border); }
.chapter-stats dt { color: var(--text); font: 800 14px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }
.chapter-stats dd { margin: 2px 0 0; color: var(--muted); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }

.chapter-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 14px 0; }
.video-player { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.video-player__media { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background: #000; isolation: isolate; }
.video-player__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--surface-2, var(--surface)); }
.video-player__poster-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-player__play-icon { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 999px; background: color-mix(in srgb, var(--brand) 88%, black 4%); color: #06110d; font-size: 18px; box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 50%, transparent); transition: transform .18s ease; }
.video-player__poster:hover .video-player__play-icon, .video-player__poster:focus-visible .video-player__play-icon { transform: translate(-50%, -50%) scale(1.08); }
.video-player__title { margin: 0; padding: 9px 12px; color: var(--text); font-size: 12.5px; font-weight: 700; }
.video-player__media > iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }

.practice-deck { position: relative; margin: 14px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--border)); border-radius: var(--radius); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 5%, var(--surface)), var(--surface)); box-shadow: var(--shadow); }
.practice-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.practice-heading h2 { margin: 1px 0 0; font-size: 19px; letter-spacing: -.025em; }
.section-fullscreen { position: absolute; z-index: 2; top: 10px; right: 10px; height: 27px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 800; cursor: pointer; }
.practice-heading .section-fullscreen { position: static; }
.tool-tabs { display: flex; gap: 4px; margin: 11px 0; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.tool-tab { flex: 0 0 auto; margin-bottom: -1px; padding: 6px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.tool-tab.is-active { border-color: var(--brand); color: var(--text); }
.practice-summary { display: flex; gap: 5px; margin: -3px 0 10px; overflow-x: auto; scrollbar-width: thin; }
.practice-summary span { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 700; }
.practice-summary strong { color: var(--text); }
.practice-tool { max-width: 900px; }
.tool-status { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 750 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.progress-track { height: 4px; margin: 6px 0 12px; overflow: hidden; border-radius: 10px; background: var(--surface-3); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .25s ease; }
.quiz-question { margin: 0 0 10px; font-size: 17px; line-height: 1.35; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.quiz-option { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); cursor: pointer; }
.quiz-option:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); }
.quiz-option:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.quiz-option.is-correct-choice { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); box-shadow: inset 3px 0 var(--brand); }
.quiz-option.is-wrong-choice { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); box-shadow: inset 3px 0 var(--danger); }
.quiz-option input { margin: 4px 0 0; accent-color: var(--brand-strong); }
.option-key { color: var(--brand); font: 800 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; }
.tool-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.button { min-height: 32px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; font-weight: 850; line-height: 1.25; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease; cursor: pointer; }
.button:disabled { opacity: .46; filter: saturate(.45); box-shadow: none; transform: none; cursor: not-allowed; }
.button-muted { background: var(--surface-2); color: var(--text); }
.button-primary { border-color: var(--primary-border); background: linear-gradient(145deg, var(--primary-start), var(--primary-end)); color: var(--primary-text); text-shadow: 0 1px 0 rgba(0, 0, 0, .12); box-shadow: 0 5px 14px var(--primary-shadow), inset 0 1px rgba(255, 255, 255, .24); }
.button-primary:hover:not(:disabled) { filter: brightness(1.07) saturate(1.06); box-shadow: 0 7px 20px var(--primary-shadow), inset 0 1px rgba(255, 255, 255, .3); transform: translateY(-1px); }
.button-primary:active:not(:disabled) { filter: brightness(.96); box-shadow: 0 2px 7px var(--primary-shadow), inset 0 2px 3px rgba(0, 0, 0, .13); transform: translateY(1px); }
.button-primary:focus-visible { outline-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 5px 14px var(--primary-shadow); }
.button-warn { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); background: color-mix(in srgb, var(--warn) 11%, var(--surface-2)); color: var(--warn); }
.quiz-result { display: grid; grid-template-columns: repeat(5, minmax(70px, 1fr)); gap: 7px; }
.quiz-result > div { padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); text-align: center; }
.quiz-result strong { display: block; font-size: 20px; line-height: 1.2; }
.quiz-result span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.result-note { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid var(--brand); background: var(--surface-2); color: var(--muted); }
.review-item { margin: 8px 0; padding: 10px; border: 1px solid var(--border); border-radius: 7px; }
.review-item.is-correct { border-left: 3px solid var(--brand); }
.review-item.is-wrong { border-left: 3px solid var(--danger); }
.review-item h4, .review-item p { margin: 2px 0; }

.generated-tool { min-height: 270px; }
.index-grid-wrap { max-width: 100%; margin: 10px 0; overflow-x: auto; }
.index-grid { width: auto; min-width: 180px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.index-grid th, .index-grid td { min-width: 42px; padding: 8px 10px; border: 1px solid var(--border-soft); text-align: center; font: 700 13px/1.3 var(--font-mono, monospace); }
.index-grid thead th { background: var(--surface-2); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.index-grid tbody th { background: var(--surface-2); color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.index-grid td.is-correct-cell { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 18%, var(--surface-2)); color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.index-grid td.is-selected-cell.is-wrong-cell { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface-2)); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
.quiz-options code { font: 700 12.5px/1.4 var(--font-mono, monospace); }
.teacher-feedback { margin-top: 10px; padding: 11px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 7px; background: var(--surface-2); }
.teacher-feedback.is-correct { border-left-color: var(--brand); animation: correct-pulse 900ms ease-out; }
.teacher-feedback.is-wrong { border-left-color: var(--danger); }
.teacher-feedback > strong { color: var(--text); }
.teacher-feedback p { margin: 5px 0; color: var(--muted); }
.teacher-feedback small { color: var(--muted); }
.tool-code { max-width: 780px; margin: 9px 0; overflow: hidden; border: 1px solid #29415f; border-radius: 7px; background: var(--code-bg); }
.tool-code > div { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 7px 0 10px; border-bottom: 1px solid #21344d; background: #0a1627; color: #9eb3cc; font: 800 9px/1 var(--font-mono); letter-spacing: .09em; }
.tool-code-actions { display: inline-flex; align-items: center; gap: 5px; }
.tool-code pre { max-height: 380px; margin: 0; overflow: auto; padding: 12px 14px; }
.tool-code code { color: var(--code-text); font-size: 12.5px; line-height: 1.65; font-family: var(--font-mono); }
.mini-copy { height: 21px; padding: 0 7px; border: 1px solid #29415f; border-radius: 4px; background: #102038; color: #aec0d8; font-size: 9px; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.tool-code .fullscreen-toggle { height: 21px; padding: 0 7px; border: 1px solid #29415f; border-radius: 4px; background: #102038; color: #aec0d8; font-size: 9px; cursor: pointer; }
.assessment-code-choice { min-width: 0; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--surface-2) 88%, transparent); }
.assessment-code-choice .quiz-option { margin-bottom: 7px; }
.assessment-code-choice .tool-code { width: 100%; max-width: none; margin: 0; }
.assessment-code-choice.is-correct-choice { border-color: var(--brand); box-shadow: inset 3px 0 var(--brand); }
.assessment-code-choice.is-wrong-choice { border-color: var(--danger); box-shadow: inset 3px 0 var(--danger); }
.tool-code:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) { position: fixed; z-index: 600; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; background: var(--code-bg, #030812) !important; overflow: auto; }
.tool-code:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) pre { max-height: calc(100vh - 36px); height: calc(100vh - 36px); padding: clamp(18px, 4vw, 56px); background: var(--code-bg, #030812); }
.tool-code:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) code { color: var(--code-text, #f5f8ff); font-size: clamp(13px, 1.6vw, 21px); }
.mode-switch { display: inline-flex; gap: 3px; margin-bottom: 9px; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.mode-button { min-height: 26px; padding: 3px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; cursor: pointer; }
.mode-button.is-active { background: var(--surface-3); color: var(--brand); }
.scenario-context { max-width: 780px; margin: 9px 0; padding: 9px 11px; border-left: 3px solid var(--accent); background: var(--surface-2); color: var(--muted); }
.scenario-context.observed-error { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.scenario-context pre { margin: 4px 0 0; padding: 0; background: none; border: 0; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.interview-answer { max-width: 820px; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.interview-answer p { margin: 5px 0; }
.follow-up { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted); }
.response-label, .select-answer { display: grid; max-width: 780px; gap: 5px; margin-top: 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.completion-selectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); gap: 8px; }
.tool-textarea, .tool-input, .select-answer select, .match-row select { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }
.tool-textarea { min-height: 76px; resize: vertical; padding: 9px 10px; font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.code-editor { min-height: 170px; background: var(--code-bg); color: var(--code-text); font: 12.5px/1.6 var(--font-mono); tab-size: 4; }
.tool-input { height: 35px; padding: 0 9px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.select-answer select, .match-row select { height: 34px; padding: 0 8px; font-size: 12px; }
.self-grade { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tool-start { display: grid; gap: 11px; max-width: 480px; margin: 6px auto; padding: 20px 16px; border: 1px dashed var(--border); border-radius: 10px; text-align: center; justify-items: center; }
.tool-start .quiz-question { margin: 0; }
.tool-start p { margin: 0; color: var(--muted); font-size: 12.5px; }
.match-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 820px; }
.match-column { display: grid; gap: 6px; align-content: start; }
.match-item { display: block; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 12.5px; line-height: 1.4; text-align: left; cursor: pointer; }
.match-item.is-selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); box-shadow: inset 3px 0 var(--brand); }
.match-item.is-paired { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.match-item.is-correct { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.match-item.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)); }
.match-item.is-correct::after, .match-item.is-wrong::after { display: block; margin-top: 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.match-item.is-correct::after { content: 'Correct'; color: var(--brand); }
.match-item.is-wrong::after { content: 'Incorrect'; color: var(--danger); }
.match-item:disabled { cursor: default; opacity: .85; }

/* Java Program Structure Explorer -- clickable/focusable annotation
   targets nested inside a plain (non-highlighted) code block; visited
   targets get a subtle persistent tint so progress is visible at a glance. */
.explore-code-block { max-width: 780px; }
.explore-code-block pre { max-height: 420px; }
.explore-target { border-radius: 3px; padding: 0 1px; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, var(--brand) 60%, transparent); text-underline-offset: 3px; }
.explore-target:hover, .explore-target:focus-visible { background: color-mix(in srgb, var(--brand) 22%, transparent); outline: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); }
.explore-target.is-visited { text-decoration-style: solid; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.explore-target.is-current { box-shadow: 0 0 0 2px var(--brand); background: color-mix(in srgb, var(--brand) 26%, transparent); }
.explore-panel { max-width: 780px; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 7px; background: var(--surface-2); }
.explore-panel-label { color: var(--brand); font-weight: 800; font-size: 13px; }
.explore-panel-concept { margin: 3px 0 6px; color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.explore-panel p { margin: 4px 0; }
.explore-why { color: var(--muted); }

/* Debug Challenge -- buggy/fixed code labels, reusing .tool-code (via
   codePanel()) for the code itself. */
.debug-code-label { display: inline-block; margin: 8px 0 4px; padding: 2px 8px; border-radius: 20px; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.debug-code-label.is-buggy { background: color-mix(in srgb, var(--danger) 16%, var(--surface-2)); color: var(--danger); }
.debug-code-label.is-fixed { background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); color: var(--brand-strong); }
.debug-hint { max-width: 780px; margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--warn); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--warn) 10%, var(--surface-2)); }
.debug-reveal { margin-top: 8px; }

/* Variable Classification Lab -- the one identifier a challenge asks the
   learner to classify, highlighted inline without disturbing the rest of
   the code's plain-text rendering. */
.target-variable { padding: 0 .2em; border-radius: 3px; background: color-mix(in srgb, var(--brand) 24%, transparent); color: var(--brand-strong); font-weight: 800; }

/* Compile & Run Flow Builder -- click-to-append step pool plus an
   orderable sequence (reuses .order-list for the sequence list). */
.flow-pool { display: flex; flex-wrap: wrap; gap: 6px; max-width: 820px; margin: 8px 0; }
.flow-chip { padding: 7px 11px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
.flow-chip:disabled { opacity: .5; cursor: not-allowed; }
.flow-sequence { min-height: 44px; }
.flow-sequence li { grid-template-columns: 24px minmax(0, 1fr) 27px 27px 27px; }
.flow-remove { color: var(--danger); }

.matching-grid { display: grid; max-width: 780px; gap: 6px; }
.match-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr); gap: 9px; align-items: center; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.match-row strong { font-size: 12px; }
.match-row.is-correct { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface-2)); }
.match-row.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface-2)); }
.order-list { display: grid; max-width: 720px; gap: 6px; padding: 0; list-style: none; }
.order-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 29px 29px; gap: 5px; align-items: center; min-height: 39px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.order-list li.is-correct { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); box-shadow: inset 3px 0 var(--brand); }
.order-list li.is-wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, var(--surface-2)); box-shadow: inset 3px 0 var(--danger); }
.order-list li.is-dragging { opacity: .55; border-style: dashed; }
.order-position-status { display: block; margin-top: 2px; color: inherit; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.order-list li > span { color: var(--brand); font: 800 11px/1 ui-monospace, monospace; text-align: center; }
.order-list li > strong { font-size: 12px; }
.order-list button { height: 27px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-3); color: var(--text); cursor: pointer; }
.rapid-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.rapid-stats span { padding: 3px 7px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.decision-grid { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 7px; max-width: 860px; }
.decision-choice { min-height: 54px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 800; cursor: pointer; }
.decision-choice:hover, .decision-choice.is-selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.decision-result pre { overflow: auto; margin: 8px 0; padding: 10px; border-radius: 6px; background: var(--code-bg); color: var(--code-text); font-size: 12px; line-height: 1.6; font-family: var(--font-mono); }
.empty-tool { color: var(--muted); }

@keyframes correct-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 30%, transparent); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

.flashcard { position: relative; display: grid; width: min(100%, 650px); min-height: 180px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); perspective: 900px; cursor: pointer; }
.flashcard-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 180px; padding: 22px; border-radius: inherit; background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%), var(--surface-2); backface-visibility: hidden; transition: transform .45s ease; }
.flashcard-face small { color: var(--brand); font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.flashcard-face strong { max-width: 520px; font-size: 19px; line-height: 1.4; }
.flashcard-face em { color: var(--muted); font-size: 11px; font-style: normal; }
.flashcard-back { transform: rotateY(180deg); }
.flashcard.is-flipped .flashcard-front { transform: rotateY(180deg); }
.flashcard.is-flipped .flashcard-back { transform: rotateY(360deg); }

.lesson-content { display: grid; gap: 12px; font-family: var(--font-body); font-weight: 500; zoom: 1.2; }
.content-section { position: relative; min-width: 0; padding: clamp(15px, 2vw, 24px); border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); content-visibility: auto; contain-intrinsic-size: auto 720px; }
/* Chapter hero + the lesson content directly under it read as two stacked
   cards even at 0px gap, because each independently rounds all four
   corners and draws its own border -- the touching edges create a visible
   double-border/double-curve seam. Fuse them into one continuous block by
   dropping only the shared edge's border and rounding on both sides (the
   hero's own gradient/padding/typography above this line are untouched);
   scoped to when a video isn't sitting between them, since chapter-videos
   already has its own intentional gap there and a squared-off hero edge
   with nothing directly under it would look like a mismatch, not a fix. */
.chapter-hero:has(+ .lesson-content) { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chapter-hero + .lesson-content > .content-section:first-child { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.content-section.interactive-section { border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }
.lesson-content h1, .lesson-content h2, .lesson-content h3, .lesson-content h4 { line-height: 1.25; letter-spacing: -.025em; }
.lesson-content h1 { margin: 0 0 14px; padding: 0 78px 9px 0; border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: clamp(21px, 2.2vw, 29px); font-weight: 700; }
.lesson-content h2 { margin: 23px 0 8px; color: var(--text); font-size: 18px; font-weight: 600; }
.lesson-content h3 { margin: 18px 0 7px; font-size: 15px; font-weight: 600; }
.heading-anchor { margin-left: 7px; color: var(--muted); font-size: .65em; text-decoration: none; opacity: 0; }
h1:hover .heading-anchor, h2:hover .heading-anchor, h3:hover .heading-anchor, .heading-anchor:focus { opacity: .65; }
.lesson-content p { max-width: 940px; margin: 7px 0; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.lesson-content ul, .lesson-content ol { max-width: 940px; margin: 7px 0; padding-left: 22px; }
.lesson-content li { margin: 2px 0; padding-left: 2px; }
.lesson-content li::marker { color: var(--brand); font-weight: 800; }
.lesson-content hr { height: 1px; margin: 17px 0; border: 0; background: var(--border-soft); }
.lesson-content blockquote, .callout { position: relative; max-width: 940px; margin: 12px 0; padding: 11px 14px 11px 40px; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); color: var(--text); font-weight: 500; }
.lesson-content blockquote::before, .callout::before { position: absolute; top: 8px; left: 12px; color: var(--brand); font-family: var(--font-body); font-size: 22px; font-weight: 700; line-height: 1; content: "“"; }
.lesson-content blockquote strong, .callout strong { color: var(--brand); }
.definition-callout { max-width: 940px; margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--def-color, var(--accent)); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--def-color, var(--accent)) 9%, var(--surface-2)); color: var(--text); }
.definition-callout p { margin: 0; font-weight: 500; }
.definition-callout-label { display: block; margin-bottom: 4px; color: var(--def-color, var(--accent)); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.definition-callout-label-meaning { margin-top: 10px; }
/* Six theme-agnostic accent colors that a chapter's successive "Definition"
   callouts cycle through (assigned in build order by markdown.php's
   sd_markdown(), not randomly, so a rebuild with no content change never
   produces a spurious diff in the committed content.php). Chosen at a
   moderate saturation/lightness that keeps sufficient contrast for a
   left-border + 9%-tinted background + uppercase label across every reading
   theme, from the darkest (midnight, cyber) to the lightest (white, paper),
   without needing a bespoke palette per theme. --def-color is unset outside
   these classes, so any spot that still renders a bare .definition-callout
   keeps its original var(--accent) styling via the fallback above. */
.definition-callout--c1 { --def-color: #3b82f6; }
.definition-callout--c2 { --def-color: #a855f7; }
.definition-callout--c3 { --def-color: #10b981; }
.definition-callout--c4 { --def-color: #f59e0b; }
.definition-callout--c5 { --def-color: #ec4899; }
.definition-callout--c6 { --def-color: #06b6d4; }

/* Learning Outcomes -- the first thing after the chapter hero, so it's
   meant to grab attention immediately rather than read like just another
   paragraph. markdown.php wraps the heading's own intro line + list in
   this div (see its own comment for why the wrapping has to happen at
   render time, matching however this chapter numbered/leveled the
   heading). */
.learning-outcomes-highlight { position: relative; max-width: 940px; margin: 4px 0 10px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border)); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 48%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 11%, var(--surface-2)), var(--surface-2)); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 14%, transparent); }
.learning-outcomes-highlight::before { content: 'What You Will Learn'; display: block; margin-bottom: 10px; color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
/* Chapter priority subtitle ("**Priority:** Job: High | Interview: Medium"),
   built by ChapterContentRenderer::decorateChapterPriority(). The level word
   is always visible; its hue is only reinforcement, blended toward the theme
   text color so it stays readable on light and dark themes. */
.chapter-priority { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 940px; margin: 0 0 4px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface-2)), var(--surface-2)); }
.chapter-priority__label { color: var(--accent); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.chapter-priority .chapter-priority__list { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin: 0; padding: 0; list-style: none; }
.chapter-priority .chapter-priority__item { --priority-hue: var(--accent); display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 4px 5px 4px 11px; border: 1px solid color-mix(in srgb, var(--priority-hue) 30%, var(--border)); border-radius: 999px; background: var(--surface); font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.chapter-priority .chapter-priority__item::marker { content: none; }
.chapter-priority .chapter-priority__item[data-priority-level="critical"] { --priority-hue: #dc2626; }
.chapter-priority .chapter-priority__item[data-priority-level="high"] { --priority-hue: #ea580c; }
.chapter-priority .chapter-priority__item[data-priority-level="medium"] { --priority-hue: #ca8a04; }
.chapter-priority .chapter-priority__item[data-priority-level="low"] { --priority-hue: #16a34a; }
.chapter-priority__area { color: var(--muted); font-weight: 650; }
.chapter-priority__value { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--priority-hue) 16%, var(--surface)); color: color-mix(in srgb, var(--priority-hue) 70%, var(--text)); font-weight: 800; }
.chapter-priority .chapter-priority__value :is(code, .inline-code) { padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; }
/* In the chapter hero (database-chapter.php lifts the strip there) it reads as
   the title's subtitle: no card of its own, chips sized for the unzoomed hero. */
.chapter-hero .chapter-priority { max-width: none; margin: 12px 0 2px; padding: 0; border: 0; background: none; gap: 8px 10px; }
.chapter-hero .chapter-priority .chapter-priority__item { background: color-mix(in srgb, var(--surface) 72%, transparent); font-size: 13.5px; }
.learning-outcomes-highlight p { margin: 0 0 10px; font-weight: 650; }
.learning-outcomes-highlight ul, .learning-outcomes-highlight ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.learning-outcomes-highlight li { position: relative; margin: 0; padding: 9px 12px 9px 36px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 9px; background: color-mix(in srgb, var(--surface) 88%, var(--accent) 3%); font-size: 12.5px; line-height: 1.5; }
.learning-outcomes-highlight li::before { content: '✓'; position: absolute; left: 10px; top: 9px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-size: 10px; font-weight: 900; }
.learning-outcomes-highlight hr { display: none; }

/* "Poor Design Example" / "Improved Design Direction" contrast pair --
   compact, visually distinct cards instead of plain headings. */
.example-heading { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px !important; padding: 6px 12px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; font-size: 13px !important; }
.example-poor { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)) !important; background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger) !important; }
.example-good { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)) !important; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand-strong) !important; }
.example-heading + .code-block, .example-heading + p { margin-top: 8px; }

/* Interview Preparation Q&A -- a numbered question collapses its answer
   behind a native <details>/<summary> disclosure so nothing is exposed
   before the learner intentionally reveals it. */
.interview-qa { max-width: 940px; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.interview-qa + .interview-qa { margin-top: 8px; }
.interview-qa summary { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 40px 12px 14px; background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.45; list-style: none; cursor: pointer; }
.interview-qa summary::-webkit-details-marker { display: none; }
.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(--brand); color: var(--brand); font-size: 11px; font-weight: 800; }
.interview-qa summary::after { content: '+'; position: absolute; top: 12px; right: 14px; color: var(--brand); font-size: 18px; font-weight: 800; line-height: 1; }
.interview-qa[open] summary::after { content: '\2212'; }
.interview-qa summary:hover { background: var(--surface-3); }
.interview-qa summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.interview-qa[open] summary { border-bottom: 1px solid var(--border-soft); }
.qa-answer { padding: 12px 14px; }
.qa-answer > p { margin: 0 0 8px; color: var(--text); font-size: 14.5px; line-height: 1.65; }
.qa-answer > p:last-child { margin-bottom: 0; }
.qa-answer > p:first-of-type { padding-left: 10px; border-left: 3px solid color-mix(in srgb, #16a34a 70%, var(--text) 30%); }
.inline-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: 700; line-height: 1.3; font-family: var(--font-mono); }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 10px 0; border: 1px solid var(--border); border-radius: 7px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 7px 9px; border-bottom: 1px solid var(--border-soft); text-align: left; }
th { background: var(--surface-2); color: var(--brand); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }

/* Cascadia Code / JetBrains Mono ship programming ligatures (>=, !=, <=, ->
   render as one merged glyph). This course teaches exact Python syntax, so
   every monospace surface must show the literal characters instead. */
code, pre, kbd { font-variant-ligatures: none; -webkit-font-feature-settings: "liga" 0, "calt" 0; font-feature-settings: "liga" 0, "calt" 0; }
.code-block { position: relative; max-width: 1060px; margin: 10px 0; overflow: hidden; border: 1px solid #243955; border-radius: 9px; background: var(--code-bg); box-shadow: 0 13px 32px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .03); }
.code-block.is-expected-output { border-color: color-mix(in srgb, var(--accent) 62%, #243955); }
.code-block.is-expected-output figcaption { box-shadow: inset 4px 0 var(--accent); }
.code-block.is-error-output { border-color: color-mix(in srgb, var(--danger) 68%, #243955); }
.code-block.is-error-output figcaption { box-shadow: inset 4px 0 var(--danger); }
.code-block.is-literal-input { border-color: color-mix(in srgb, var(--warn) 58%, #243955); }
.code-block.is-literal-input figcaption { box-shadow: inset 4px 0 var(--warn); }
.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; }
.code-language { display: inline-flex; align-items: center; gap: 7px; color: #a8bad2; font: 800 10px/1 var(--font-mono); letter-spacing: .1em; }
.code-language i { width: 7px; height: 7px; border-radius: 50%; background: #57ddb9; box-shadow: 0 0 10px rgba(87, 221, 185, .65); }
.code-actions { display: flex; gap: 4px; }
.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; }
.icon-button:hover { border-color: #4d6f9a; color: #fff; }
.copy-code.is-copied, .mini-copy.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); }
.try-it-yourself { border-color: color-mix(in srgb, var(--brand) 55%, #29415f); background: color-mix(in srgb, var(--brand) 20%, #102038); color: #fff; }
.try-it-yourself:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 32%, #102038); }
.code-block.is-copy-highlight, .tool-code.is-copy-highlight { border-color: #69e0c1; box-shadow: 0 0 0 2px rgba(105, 224, 193, .22), 0 0 30px rgba(103, 217, 255, .2), inset 0 0 28px rgba(105, 224, 193, .055); animation: copied-code-pulse 1.6s ease-out; }
@keyframes copied-code-pulse {
    0% { filter: brightness(1); }
    24% { filter: brightness(1.16); }
    100% { filter: brightness(1); }
}
.code-block pre { max-height: 560px; margin: 0; overflow: auto; padding: 13px 15px 15px; tab-size: 4; }
.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); }
.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); }

.chapter-pagination { display: flex; justify-content: space-between; margin-top: 14px; }
.chapter-pagination button, .chapter-pagination a { padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 11px; text-decoration: none; }
.chapter-pagination a:hover { border-color: var(--brand); color: var(--text); }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 9px 20px 9px calc(var(--sidebar) + 20px); border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; }
.site-footer a { color: var(--text); text-decoration: none; }

.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-card { width: min(100%, 410px); padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.modal-card h2 { margin: 0; font-size: 20px; }
.modal-card p { margin: 7px 0; color: var(--muted); font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.copy-warning-card { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--danger) 16%, transparent), transparent 42%), var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent), var(--shadow); }
.copy-warning-card h2 { color: var(--danger); }

/* Deliberately a real *height* (not just max-height): a flex child only
   grows to fill available space when its container has definite extra
   space to distribute, so leaving this as max-height-only (bounded purely
   by content) meant the editor/output panes never grew past their small
   min-height floor even on a large monitor -- the exact "coding area stays
   tiny with its own scrollbar despite empty space around it" bug. */
.python-playground-card { display: flex; flex-direction: column; width: min(96vw, 1100px); height: min(92vh, 880px); }
.python-playground-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.python-playground-header h2 { font-size: 16px; }
.python-playground-header-actions { display: flex; gap: 6px; }
.python-playground-status { min-height: 16px; margin: 4px 0 10px; color: var(--muted); font-size: 11px; font-weight: 700; }
.python-playground-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; flex: 1; overflow-y: auto; }
.python-playground-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 5px; }
.python-playground-pane-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.python-playground-editor-wrap { --editor-line-height: 21px; --editor-font-size: 12.5px; position: relative; display: flex; flex: 1; min-width: 0; min-height: 220px; border: 1px solid var(--border); border-radius: 6px; background: var(--code-bg); overflow: hidden; box-sizing: border-box; transition: border-color .18s ease, box-shadow .18s ease; }
.python-playground-editor-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.python-playground-gutter { flex: 0 0 28px; width: 28px; min-width: 28px; box-sizing: border-box; padding: 10px 4px 30px 2px; margin: 0; background: color-mix(in srgb, var(--surface-2) 55%, var(--code-bg)); border-right: 1px solid var(--border); color: var(--code-text); font-family: var(--font-mono); font-size: var(--editor-font-size); line-height: var(--editor-line-height); font-weight: 700; text-align: right; user-select: none; -webkit-user-select: none; pointer-events: none; overflow: hidden; }
.python-playground-gutter.has-many-lines { flex: 0 0 36px; width: 36px; min-width: 36px; }
.playground-line-num { display: block; height: var(--editor-line-height); line-height: var(--editor-line-height); box-sizing: border-box; color: var(--code-text); opacity: .92; font-weight: 700; padding-right: 2px; transition: color .15s ease, background-color .15s ease; }
.playground-line-num.is-error { color: #ffffff !important; background: #e63946 !important; font-weight: 800; border-radius: 3px; opacity: 1; }
.python-playground-code-surface { position: relative; flex: 1 1 0%; width: 0; min-width: 0; height: 100%; min-height: 100%; overflow: hidden; }
.python-playground-highlight { position: absolute; inset: 0; margin: 0; padding: 10px 8px; border: 0; box-sizing: border-box; background: transparent; color: var(--code-text); font-family: var(--font-mono); font-size: var(--editor-font-size); line-height: var(--editor-line-height); white-space: pre; word-wrap: normal; tab-size: 4; -moz-tab-size: 4; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; letter-spacing: normal; word-spacing: normal; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 1; }
.python-playground-highlight code { font-family: inherit; font-size: inherit; line-height: inherit; white-space: inherit; tab-size: inherit; -moz-tab-size: inherit; letter-spacing: inherit; word-spacing: inherit; font-variant-ligatures: inherit; display: block; margin: 0; padding: 0; border: 0; background: transparent; }
.python-playground-editor { flex: 1; min-height: 220px; resize: none; }
.python-playground-editor-wrap .python-playground-editor { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 100%; margin: 0; padding: 10px 8px; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: transparent; caret-color: var(--code-text); font-family: var(--font-mono); font-size: var(--editor-font-size); line-height: var(--editor-line-height); white-space: pre; word-wrap: normal; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; letter-spacing: normal; word-spacing: normal; overflow-x: auto; overflow-y: auto; resize: none; tab-size: 4; -moz-tab-size: 4; box-sizing: border-box; z-index: 2; }
.python-playground-editor-wrap .python-playground-editor::selection { background: rgba(79, 141, 255, 0.38); color: transparent; }
.python-playground-editor-wrap .python-playground-editor::-moz-selection { background: rgba(79, 141, 255, 0.38); color: transparent; }
/* Syntax token classes */
.hl-kw { color: #f472b6; font-weight: 600; }
.hl-builtin { color: #38bdf8; font-weight: 600; }
.hl-bool { color: #fb923c; font-weight: 600; }
.hl-str { color: #4ade80; }
.hl-num { color: #facc15; }
.hl-com { color: #94a3b8; font-style: italic; opacity: .88; }
.hl-fn { color: #c084fc; }
.hl-dec { color: #f59e0b; }
.python-playground-input-block { display: flex; flex-direction: column; flex: 0 0 auto; gap: 5px; }
.python-playground-input { min-height: 52px; max-height: 90px; resize: vertical; padding: 8px 10px; font-size: 12.5px; font-family: var(--font-mono); text-transform: none; letter-spacing: 0; }
.python-playground-output { flex: 1; min-height: 140px; margin: 0; padding: 10px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--code-bg); color: var(--code-text); font-size: 12.5px; line-height: 1.6; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.python-playground-output.is-error { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); color: color-mix(in srgb, var(--danger) 70%, var(--code-text)); }
.python-playground-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; flex: 0 0 auto; }
/* Chrome's internal fullscreen top-layer handling resets `display` on the
   fullscreened element (observed as `display: block` overriding the base
   rule's `display: flex` despite normal cascade order) -- redeclaring
   `flex`/`flex-direction` explicitly here, inside the same rule that wins
   while fullscreen, is what actually keeps the header/body/actions column
   layout (and therefore the body's `flex: 1` stretch) working once
   fullscreened, instead of silently collapsing to block layout. */
.python-playground-card:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) { display: flex !important; flex-direction: column !important; position: fixed; z-index: 600; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 20px; border: 0; border-radius: 0; background: var(--surface) !important; }
/* Fullscreen gives the editor/output every spare pixel instead of stopping
   at the same min-height used in the normal modal card. */
.python-playground-card:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .python-playground-editor-wrap,
.python-playground-card:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .python-playground-code-surface,
.python-playground-card:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .python-playground-editor,
.python-playground-card:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .python-playground-output { min-height: 0; }

@media (max-width: 900px) {
    .python-playground-card { width: 100%; height: 94vh; height: 94dvh; padding: 12px; }
    .python-playground-body { grid-template-columns: 1fr; }
    .python-playground-editor-wrap { min-height: 200px; --editor-font-size: 11.5px; }
    .python-playground-gutter { flex: 0 0 24px; width: 24px; min-width: 24px; }
    .python-playground-gutter.has-many-lines { flex: 0 0 32px; width: 32px; min-width: 32px; }
    .python-playground-code-surface,
    .python-playground-editor { min-height: 200px; }
    .python-playground-output { min-height: 110px; }
}
@media (max-width: 420px) {
    .python-playground-header h2 { font-size: 14px; }
    .python-playground-actions .button { flex: 1 1 calc(50% - 4px); min-height: 36px; }
}
.copy-warning-card strong { color: var(--text); }
.copy-warning-divider { height: 1px; margin: 10px -18px; border: 0; background: color-mix(in srgb, var(--danger) 35%, var(--border)); }

/* Particle/glow position, size, and color are driven entirely by
   assets/js/tutorial.js's celebrate() via the Web Animations API
   (element.animate(), never element.style) -- the site's CSP is
   deliberately style-src 'self' with no 'unsafe-inline', so a CSS
   @keyframes animation fed by JS-set custom properties can't be used
   here. What's left below is purely static: shape, and an opacity: 0
   default so a particle/glow is invisible during its WAAPI `delay`
   phase, before its own keyframes have taken effect (fill: 'forwards'
   doesn't apply the first keyframe's styling until playback starts). */
.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); }
}

:fullscreen { overflow: auto; background-color: var(--bg, #07101c) !important; color: var(--text, #e8f0fa); }
:fullscreen::backdrop { background: var(--bg, #07101c); }
:-webkit-full-screen { overflow: auto; background-color: var(--bg, #07101c) !important; color: var(--text, #e8f0fa); }
:-webkit-full-screen::backdrop { background: var(--bg, #07101c); }
.fullscreen-active { display: block !important; visibility: visible !important; opacity: 1 !important; background-color: var(--bg, #07101c) !important; color: var(--text, #e8f0fa) !important; }
.code-block:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) { position: fixed; z-index: 600; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; background: var(--code-bg, #030812) !important; content-visibility: visible; overflow: auto; }
.code-block:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) pre { max-height: calc(100vh - 34px); height: calc(100vh - 34px); padding: clamp(18px, 4vw, 56px); background: var(--code-bg, #030812); }
.code-block:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) code { color: var(--code-text, #f5f8ff); font-size: clamp(13px, 1.6vw, 21px); }
.interactive-section:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) { position: fixed; z-index: 600; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; overflow: auto; padding: clamp(18px, 3vw, 42px); border: 0; border-radius: 0; background: var(--bg, #07101c) !important; color: var(--text, #e8f0fa); content-visibility: visible; }
.interactive-section:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) > * { max-width: 1100px; }
/* A lesson code-block's ancestor .content-section uses content-visibility:
   auto for offscreen-render skipping. When the code-block itself is pulled
   into the fullscreen top layer, its original position collapses and some
   browsers keep treating the ancestor as "not relevant to the user", so the
   fullscreened content never actually paints (a blank/white box). Forcing
   the ancestor visible while it holds a fullscreen descendant fixes that. */
.content-section:has(:fullscreen), .content-section:has(.fullscreen-active) { content-visibility: visible !important; }

/* Reading tools: text zoom, study notepad, per-section bookmarks, jump to
   top, and whole-page fullscreen. All state is client-side (localStorage),
   mirroring how theme/reading-progress/per-tool answers already persist --
   no server round-trip needed for personal reading-comfort preferences. */
/* Reading dock: a single floating bottom-center pill holding every
   reading-comfort control (theme, fullscreen, text size, notepad,
   bookmark, scroll progress) so Jump To / Dashboard / Menu can stay in the
   topbar as page-navigation concerns while these stay together as one
   reading-experience cluster, always in reach regardless of scroll
   position. */
.reading-dock { position: fixed; z-index: 250; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.reading-dock-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; }
.reading-dock-button:hover { background: var(--surface-2); color: var(--text); }
.reading-dock-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.reading-dock-divider { flex: none; width: 1px; height: 22px; margin: 0 2px; background: var(--border); }

.reading-tools { position: relative; }
.reading-tools-menu { position: absolute; z-index: 330; bottom: calc(100% + 12px); right: 0; width: min(220px, calc(100vw - 16px)); padding: 10px; border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(18px); animation: theme-menu-in .16s ease-out; }
.reading-tools-section > p { display: grid; gap: 1px; margin: 0 0 8px; }
.reading-tools-section > p strong { font-size: 12px; }
.reading-tools-section > p span { color: var(--muted); font-size: 9px; }
.zoom-control { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.zoom-control button { width: 30px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 800; cursor: pointer; }
.zoom-control button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.zoom-control button:disabled { opacity: .42; cursor: not-allowed; }
.zoom-control span { flex: 1; color: var(--muted); font-size: 11px; font-weight: 800; text-align: center; }
.reading-tools-link { width: 100%; height: 28px; margin-top: 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 750; cursor: pointer; }
.reading-tools-link:hover { border-color: var(--brand); color: var(--brand-strong); }

/* Bookmark: a star toggle next to each heading (rendered by markdown.php
   alongside the existing # permalink anchor), a matching dock-level
   toggle for whichever section is currently in view (#dock-bookmark-toggle,
   wired to the same activeJumpOption tracking Jump To already uses), and a
   matching indicator inside the corresponding Jump To row -- all three
   read/write the same savedState.bookmarks array so they never fall out
   of sync. */
.bookmark-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; padding: 0; border: 0; background: transparent; color: var(--muted); vertical-align: middle; cursor: pointer; }
.bookmark-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.bookmark-toggle:hover { color: var(--accent); }
.bookmark-toggle[aria-pressed="true"] { color: var(--accent); }
.bookmark-toggle[aria-pressed="true"] svg { fill: currentColor; }
#dock-bookmark-toggle[aria-pressed="true"] { color: var(--accent); }
#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); border-radius: 20px; background: var(--surface-2); color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.jump-filter-bookmarks:hover { border-color: var(--accent); color: var(--accent); }
.jump-filter-bookmarks[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); }

/* A captioned diagram/canvas/chart shows "Figure n: caption" in its header
   bar (the header is the figure's <figcaption>). The more specific selector
   keeps the plain bottom-caption styling from applying to it. */
.uce-visual > figcaption.uce-visual__header { padding: .55rem .75rem; border-top: 0; color: var(--text); font-size: 1rem; line-height: 1.4; }
.uce-visual__title { flex: 1 1 16rem; min-width: 0; color: var(--text); font-size: .95rem; font-weight: 650; line-height: 1.45; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.uce-visual__title .uce-figure-number { margin-right: .2rem; color: var(--brand); font-weight: 800; }

/* `inline code` inside quiz questions, options, and explanations. */
.quiz-inline-code { padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--brand) 26%, var(--border)); border-radius: 5px; background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); color: var(--text); font-family: var(--font-mono); font-size: .9em; font-weight: 600; overflow-wrap: anywhere; }

/* Study notepad: a floating, movable, resizable window that stays open
   while the learner reads (no backdrop, no scroll lock). The script
   positions it and remembers its place; it can also go full screen. On
   phones it becomes a bottom sheet so the lesson stays visible above it. */
.notepad-panel {
    position: fixed;
    z-index: 360;
    top: auto;
    left: auto;
    right: 24px;
    bottom: 96px;
    display: flex;
    flex-direction: column;
    width: 420px;
    height: 520px;
    min-width: 300px;
    min-height: 260px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    resize: both;
    padding: 0 14px 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .03);
}
.notepad-panel.is-entering { animation: notepad-in .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes notepad-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.notepad-panel.is-dragging { box-shadow: 0 36px 90px rgba(0, 0, 0, .48), 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); user-select: none; }
.notepad-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -14px 10px;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface)));
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.notepad-panel.is-dragging .notepad-header { cursor: grabbing; }
.notepad-grip { display: grid; width: 16px; color: var(--muted); }
.notepad-grip svg { width: 16px; height: 16px; fill: currentColor; }
.notepad-header strong { flex: 1; min-width: 0; font-size: 14px; }
.notepad-window-actions { display: flex; gap: 6px; }
.notepad-window-button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.notepad-window-button svg { width: 15px; height: 15px; }
.notepad-window-button:hover, .notepad-window-button:focus-visible { border-color: var(--brand); color: var(--brand); outline: 0; }
.notepad-icon-collapse, .notepad-panel.is-fullscreen .notepad-icon-expand { display: none; }
.notepad-panel.is-fullscreen .notepad-icon-collapse { display: block; }
#notepad-text { flex: 1; width: 100%; min-height: 0; padding: 12px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.6; tab-size: 4; resize: none; }
#notepad-text:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.notepad-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.notepad-footer small { flex: 1 1 130px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.notepad-actions { display: flex; flex: 0 0 auto; gap: 6px; margin-left: auto; }
.notepad-footer .reading-tools-link { display: inline-flex; align-items: center; gap: 4px; width: auto; margin-top: 0; padding-inline: 10px; }
.notepad-footer .notepad-download svg { width: 14px; height: 14px; }
.notepad-footer .notepad-download--pdf { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); }
.notepad-footer .notepad-download.is-busy { cursor: progress; }
.notepad-footer .notepad-download.is-busy svg { animation: notepad-busy .9s ease-in-out infinite; }
@keyframes notepad-busy { 50% { transform: translateY(3px); } }
.notepad-footer .reading-tools-link:disabled { opacity: .45; cursor: not-allowed; }
.notepad-footer .reading-tools-link:disabled:hover { border-color: var(--border); color: var(--text); }
.notepad-footer .notepad-download.is-busy:disabled { opacity: .8; cursor: progress; }

/* Full screen: a calm writing surface over the whole page. */
.notepad-panel.is-fullscreen {
    z-index: 390;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    padding: 0 max(18px, calc((100vw - 980px) / 2)) max(18px, env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 0;
    resize: none;
    box-shadow: none;
}
.notepad-panel.is-fullscreen .notepad-header { margin-inline: calc(-1 * max(18px, (100vw - 980px) / 2)); padding-inline: max(18px, calc((100vw - 980px) / 2)); cursor: default; }
.notepad-panel.is-fullscreen .notepad-grip { display: none; }
.notepad-panel.is-fullscreen #notepad-text { padding: 20px 22px; font-size: 17px; line-height: 1.75; }
@media (prefers-reduced-motion: reduce) {
    .notepad-panel.is-entering, .notepad-footer .notepad-download.is-busy svg { animation: none; }
}

/* Short Notes: a right-side desktop drawer (matching .notepad-panel's own
   proven fixed/inset/box-shadow drawer technique) that becomes a genuine
   bottom-sheet on narrow viewports instead of the notepad's full-screen
   treatment -- distinct from it because Short Notes is read-only reference
   content, not an editor, so a partial-height sheet that still shows page
   context behind it reads better on a phone. */
.short-notes-scrim { 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; }
.short-notes-scrim:not([hidden]) { animation: short-notes-fade-in .18s ease-out; }
.short-notes-panel { 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; border-left: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border)); background: var(--surface); box-shadow: -18px 0 48px rgba(0, 0, 0, .32); font-family: var(--font-body); }
.short-notes-panel:not([hidden]) { animation: short-notes-drawer-in .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes short-notes-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes short-notes-drawer-in { from { opacity: .35; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes short-notes-sheet-in { from { opacity: .4; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.short-notes-handle { display: none; }
.short-notes-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface-2)), var(--surface-2)); flex: 0 0 auto; min-height: 46px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.short-notes-title-lockup { display: flex; min-width: 0; align-items: center; gap: 9px; }
.short-notes-title-icon { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 7px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 25%, var(--surface-3)), color-mix(in srgb, var(--brand) 8%, var(--surface-2))); color: var(--brand); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 20%, transparent); }
.short-notes-title-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.short-notes-title-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.short-notes-header strong { order: 1; color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.short-notes-kicker { order: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); 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) 18%, transparent); margin: 0; }
.short-notes-kicker::before { content: '★'; font-size: 8px; }
.short-notes-header small { display: none; }
.short-notes-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.short-notes-zoom.zoom-control { flex: 0 0 auto; gap: 2px; padding: 2px; border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border)); border-radius: 7px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); }
.short-notes-zoom.zoom-control button { width: 23px; height: 23px; border: 0; border-radius: 5px; background: transparent; font-size: 11px; }
.short-notes-zoom.zoom-control button:hover:not(:disabled) { border-color: transparent; background: var(--surface-3); color: var(--brand); }
.short-notes-zoom.zoom-control span { min-width: 28px; padding: 0 2px; font-size: 9.5px; }
#short-notes-close { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border)); border-radius: 6px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--muted); font-size: 13px; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; }
#short-notes-close:hover, #short-notes-close:focus-visible { border-color: var(--brand); background: var(--surface-3); color: var(--text); }

/* Fancy, highlighted, and space-efficient revision cards.
   Maximizes readability, highlighting key concepts while preserving compact space. */
.short-notes-body { 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) 40%, var(--scroll-thumb)) transparent; scrollbar-gutter: stable; font-family: var(--font-body); font-size: 13.5px; font-weight: 400; line-height: 1.55; zoom: 1.2; }
.short-notes-body::-webkit-scrollbar { width: 6px; }
.short-notes-body::-webkit-scrollbar-track { background: transparent; }
.short-notes-body::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--brand) 35%, var(--scroll-thumb)); }
.short-notes-body > .content-section { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; overflow-x: clip; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; content-visibility: visible; }
.short-notes-sections { display: grid; width: 100%; min-width: 0; gap: 10px; }
.short-note-card { --notes-accent: var(--brand); 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)); 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(--surface-2)); 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; }
.short-note-card:hover { border-color: color-mix(in srgb, var(--notes-accent) 45%, var(--border)); box-shadow: 0 5px 16px color-mix(in srgb, var(--notes-accent) 14%, rgba(0, 0, 0, .1)); }
.short-note-card--intro { --notes-accent: var(--brand); }
.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; }
.short-notes-body :is(p, li, h1, h2, h3, h4) { max-width: 100%; overflow-wrap: break-word; }
.short-notes-body :is(.code-block, .table-scroll) { width: 100%; max-width: 100%; min-width: 0; }
.short-notes-body h2 { display: flex; align-items: center; gap: 8px; width: auto; max-width: none; margin: 0 0 8px; padding: 0 0 6px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--notes-accent) 22%, var(--border)); border-radius: 0; background: transparent; color: var(--notes-accent); box-shadow: none; font-size: 11.5px; font-weight: 850; letter-spacing: .07em; line-height: 1.3; text-transform: uppercase; }
.short-notes-body 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); }
.short-notes-body h1, .short-notes-body h3 { margin: 10px 0 5px; color: var(--text); font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.short-notes-body h1:first-child, .short-notes-body h3:first-child { margin-top: 0; }
.short-notes-body p { margin: 0 0 6px; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.short-notes-body h2 + p { color: var(--text); }
.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)) 90%, var(--text)); background: color-mix(in srgb, var(--notes-accent, var(--brand)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 25%, transparent); box-shadow: 0 1px 3px color-mix(in srgb, var(--notes-accent, var(--brand)) 10%, transparent); }
.short-notes-body :is(ul, ol) { display: flex; flex-direction: column; gap: 3.5px; margin: 4px 0 8px; padding: 0; list-style: none; }
.short-notes-body ul li { position: relative; min-height: 0; margin: 0; padding: 1px 0 1px 18px; border: none; background: transparent; font-size: 13px; line-height: 1.5; color: var(--text); }
.short-notes-body ul li::before { content: '◆'; position: absolute; left: 3px; top: 1px; color: var(--notes-accent, var(--brand)); font-size: 8px; line-height: 1.8; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--notes-accent, var(--brand)) 50%, transparent)); }
.short-notes-body ol { counter-reset: fancy-item; }
.short-notes-body ol li { position: relative; min-height: 0; margin: 0; padding: 1px 0 1px 22px; border: none; background: transparent; font-size: 13px; line-height: 1.5; color: var(--text); counter-increment: fancy-item; }
.short-notes-body 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)) 18%, var(--surface-3)); color: var(--notes-accent, var(--brand)); font-size: 9px; font-weight: 800; border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 30%, transparent); }
.short-notes-body blockquote { margin: 6px 0 8px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 25%, var(--border)); border-left: 3.5px solid var(--notes-accent, var(--brand)); border-radius: 7px; background: linear-gradient(135deg, color-mix(in srgb, var(--notes-accent, var(--brand)) 8%, var(--surface-3)), color-mix(in srgb, var(--notes-accent, var(--brand)) 3%, var(--surface-2))); color: var(--text); font-size: 13px; line-height: 1.5; box-shadow: 0 2px 8px color-mix(in srgb, var(--notes-accent, var(--brand)) 8%, transparent); }
.short-notes-body blockquote p:last-child { margin-bottom: 0; }
.short-notes-body .inline-code { white-space: normal; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: color-mix(in srgb, var(--notes-accent, var(--brand)) 12%, var(--surface-3)); color: color-mix(in srgb, var(--notes-accent, var(--brand)) 85%, var(--text)); border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 25%, transparent); }
.short-notes-body figure.code-block { margin: 5px 0 8px; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 28%, var(--border)); box-shadow: 0 3px 12px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .04); background: #080d16; }
.short-notes-body .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)); }
.short-notes-body .code-block .fullscreen-toggle { display: none !important; }
.short-notes-body .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)) 35%, rgba(255, 255, 255, .15)); background: color-mix(in srgb, var(--notes-accent, var(--brand)) 15%, transparent); color: #f1f5f9; }
.short-notes-body .code-block .icon-button:hover { background: color-mix(in srgb, var(--notes-accent, var(--brand)) 30%, transparent); border-color: var(--notes-accent, var(--brand)); color: #fff; }
.short-notes-body .code-block pre { max-height: 200px; overflow: auto; padding: 6px 10px; font-size: 12px; line-height: 1.45; color: #e2e8f0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.short-notes-body .code-block code { white-space: inherit; }
.short-notes-body .table-scroll { margin: 6px 0 8px; overflow-x: auto; border: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 24%, var(--border)); border-radius: 7px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.short-notes-body table { width: 100%; min-width: 0; table-layout: auto; font-size: 12px; }
.short-notes-body th { background: color-mix(in srgb, var(--notes-accent, var(--brand)) 14%, var(--surface-3)); color: var(--notes-accent, var(--brand)); font-weight: 750; padding: 5px 8px; }
.short-notes-body td { padding: 5px 8px; border-top: 1px solid color-mix(in srgb, var(--notes-accent, var(--brand)) 12%, var(--border-soft)); }
.short-notes-body :is(th, td) { overflow-wrap: anywhere; word-break: break-word; }
.short-notes-body hr { border: 0; height: 1px; margin: 10px 0; background: color-mix(in srgb, var(--notes-accent, var(--brand)) 20%, var(--border)); }
.short-notes-body .heading-anchor, .short-notes-body .bookmark-toggle { display: none; }

/* Scroll-progress ring: reuses the exact conic-gradient + inset::before
   "donut with a number in the middle" technique .quiz-score-ring already
   established (driven by a --score custom property set via the CSP-safe
   setStyle() helper) -- same mechanism, --scroll-percent instead of
   --score, so the page-scroll button and the quiz result ring look and
   behave consistently. */
.back-to-top { position: relative; width: 36px; height: 36px; margin-left: 2px; border: 0; border-radius: 50%; background: conic-gradient(var(--brand) calc(var(--scroll-percent, 0) * 1%), color-mix(in srgb, var(--border) 65%, transparent) 0); cursor: pointer; }
.back-to-top::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--surface); }
.back-to-top:hover::before { background: var(--surface-2); }
.back-to-top span { position: relative; z-index: 1; font-size: 9px; font-weight: 850; color: var(--text); }

/* Content is hidden until a real script engine confirms it ran (see the
   very first line of theme-init.js, which runs synchronously before body
   parsing even starts, so there's no visible flash for JS-enabled
   visitors) -- fails closed rather than open, so a blocked/disabled
   script leaves the lesson hidden instead of defaulting to shown. This is
   a deterrent against trivial no-JS scraping, not a guarantee: content
   still exists in the response HTML for anyone who reads it directly. */
#main-content { display: none; }
.js-ready #main-content { display: block; }
.no-js-notice { max-width: 640px; margin: 40px auto; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); text-align: center; }
.no-js-notice strong { display: block; margin-bottom: 6px; color: var(--brand); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.no-js-notice p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Toast stack: shared by bookmark confirmations and connectivity
   notices. Connectivity uses a fixed data-toast-id ("connectivity") so a
   later online/offline event replaces the existing toast in place rather
   than stacking duplicates; bookmark toasts have no id and always add a
   new, auto-dismissing entry. */
.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) 34%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow); 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) 40%, var(--border)); }
.toast[data-variant="warn"]::before { content: '●'; color: var(--warn); }
.toast[data-variant="success"]::before { content: '●'; color: var(--brand); }
@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); } }

/* Text zoom: discrete steps rather than a continuous slider, applied via
   CSS `zoom` (not a font-size multiplier) because lesson and Short Notes
   typography uses fixed px sizes -- zoom scales every rendered note/content
   element consistently regardless of the units inside it. Mirrors the
   data-theme attribute pattern so no computed value ever touches the style
   attribute (the site's CSP is style-src 'self' with no 'unsafe-inline').
   Default is 120% on larger screens; the mobile rule below resets both
   content surfaces to their compact baseline unless the learner explicitly
   selects one of these higher-specificity zoom steps. */
:root[data-zoom="80"] :is(.lesson-content, .short-notes-body) { zoom: .8; }
:root[data-zoom="90"] :is(.lesson-content, .short-notes-body) { zoom: .9; }
:root[data-zoom="100"] :is(.lesson-content, .short-notes-body) { zoom: 1; }
:root[data-zoom="110"] :is(.lesson-content, .short-notes-body) { zoom: 1.1; }
:root[data-zoom="130"] :is(.lesson-content, .short-notes-body) { zoom: 1.3; }
:root[data-zoom="140"] :is(.lesson-content, .short-notes-body) { zoom: 1.4; }
:root[data-zoom="150"] :is(.lesson-content, .short-notes-body) { zoom: 1.5; }

@media (max-width: 900px) {
    .topbar { grid-template-columns: auto 1fr minmax(145px, 230px) auto; }
    .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
    :root { --sidebar: 210px; }
    .chapter-hero { grid-template-columns: 1fr; }
    .chapter-stats { width: max-content; }
    .lesson { padding-inline: 13px; }
}

@media (max-width: 700px) {
    :root { --topbar: 84px; }
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    .app-shell, .lesson, .lesson-content { min-width: 0; max-width: 100%; }
    .topbar { gap: 0 6px; padding-inline: 8px; }
    /* A single 395px row leaves almost no tolerance for browser text scaling.
       Give navigation and course actions their own rows so the header never
       grows the document or pushes the viewport sideways. The stronger
       selector intentionally wins over course-information.css, which loads
       later and otherwise restores an 8rem topic-picker column. */
    html[data-course-info-layout="compact"]:not([data-preview-course-guide]) body[data-course-info-only] .topbar {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: 40px 40px;
    }
    html[data-course-info-layout="compact"]:not([data-preview-course-guide]) body[data-course-info-only] .brand { grid-column: 1; grid-row: 1; }
    html[data-course-info-layout="compact"]:not([data-preview-course-guide]) body[data-course-info-only] .jump-control { grid-column: 2; grid-row: 1; }
    html[data-course-info-layout="compact"]:not([data-preview-course-guide]) body[data-course-info-only] .topbar-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-self: stretch;
        justify-content: flex-end;
        gap: 4px;
    }
    .brand > span:last-child, .crumb { display: none; }
    .jump-control { display: block; justify-self: end; width: 34px; }
    .jump-toggle { width: 34px; padding: 0; justify-content: center; }
    .jump-copy { display: none; }
    .jump-menu { position: fixed; top: calc(var(--topbar) + 6px); right: 8px; left: 8px; width: auto; max-height: calc(100vh - var(--topbar) - 14px); }
    .jump-options { max-height: calc(100vh - var(--topbar) - 112px); }
    .topbar-button { height: 30px; padding-inline: 8px; font-size: 11px; font-weight: 700; border-radius: 6px; }
    .menu-toggle { display: block; }
    .app-shell { display: block; }
    .course-sidebar { position: fixed; z-index: 300; inset: 0 auto 0 0; top: 0; width: min(86vw, 290px); height: 100vh; transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--shadow); padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); padding-left: max(10px, env(safe-area-inset-left, 0px)); }
    .course-sidebar.is-open { transform: none; }
    .sidebar-close { position: absolute; top: 4px; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); font-size: 24px; cursor: pointer; }
    .sidebar-scrim { position: fixed; z-index: 250; inset: 0; display: block; border: 0; background: rgba(1, 6, 13, .66); }
    .lesson { padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 84px); }
    .chapter-hero { min-width: 0; max-width: 100%; overflow: hidden; gap: 12px; padding: 14px 12px; }
    .chapter-hero h1 { font-size: clamp(22px, 6vw, 28px); }
    .chapter-stats { width: 100%; min-width: 0; }
    .chapter-stats div { min-width: 0; padding: 6px 4px; }
    .chapter-stats dt { font-size: 13px; }
    .practice-deck { max-width: 100%; margin-block: 10px; padding: 10px 10px 12px; }
    .content-section { max-width: 100%; overflow-x: hidden; overflow-x: clip; padding: 14px 12px; }
    .lesson-content { gap: 8px; }
    .lesson-content, .short-notes-body { zoom: 1; }
    .lesson-content h1 { font-size: 21px; padding-right: 0; }
    .lesson-content h2 { font-size: 18px; margin-top: 18px; }
    .lesson-content h3 { font-size: 15.5px; margin-top: 14px; }
    .lesson-content p, .lesson-content li { font-size: 14.5px; line-height: 1.62; }
    .lesson-content, .content-section, .quiz-question, .quiz-option, .flashcard-face, .match-item, h1, h2, h3, h4, p, li { overflow-wrap: break-word; }
    .learning-outcomes-highlight { padding: 12px 13px; }
    .learning-outcomes-highlight ul, .learning-outcomes-highlight ol { grid-template-columns: 1fr; }
    .code-block { width: 100%; max-width: 100%; margin-inline: 0; border-radius: 7px; }
    .code-block pre { padding: 11px 12px; font-size: 12px; line-height: 1.45; -webkit-overflow-scrolling: touch; }
    .code-block figcaption { min-height: 33px; padding: 0 8px; }
    .icon-button { min-width: 44px; height: 26px; font-size: 10px; }
    .table-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .table-scroll th, .table-scroll td { padding: 8px 10px; font-size: 12px; }
    .breadcrumb { margin: 0 0 10px; font-size: 11.5px; line-height: 1.4; }
    .breadcrumb a, .breadcrumb span { min-height: 26px; padding: 2px 2px; }
    .chapter-pagination { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
    .chapter-pagination a, .chapter-pagination button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; font-size: 13px; font-weight: 700; border-radius: 8px; text-align: center; }
    .site-footer { padding: 12px 12px; margin-top: 16px; font-size: 11px; }
    .reading-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); padding: 4px 6px; gap: 3px; }
    .reading-dock-button { width: 34px; height: 34px; }
    .reading-dock-button svg { width: 16px; height: 16px; }
    .back-to-top { width: 34px; height: 34px; }
    .reading-dock-divider { height: 20px; margin: 0 1px; }
    .theme-menu { position: fixed; inset: auto 12px calc(env(safe-area-inset-bottom, 0px) + 70px) auto; width: min(280px, calc(100vw - 24px)); max-height: min(440px, calc(100dvh - 86px)); transform-origin: bottom right; }
    .reading-tools-menu { position: fixed; inset: auto 12px calc(env(safe-area-inset-bottom, 0px) + 70px) auto; width: min(230px, calc(100vw - 24px)); max-height: min(340px, calc(100dvh - 86px)); transform-origin: bottom right; }
    .notepad-panel:not(.is-fullscreen) { inset: auto 0 0 0; width: 100vw; height: min(62dvh, 560px); min-width: 0; max-width: 100vw; border-width: 1px 0 0; border-radius: 18px 18px 0 0; resize: none; overscroll-behavior: contain; padding: 0 max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
    .notepad-panel:not(.is-fullscreen) .notepad-header { cursor: default; }
    .notepad-panel:not(.is-fullscreen) .notepad-grip { display: none; }
    .notepad-header strong { font-size: 16px; }
    .notepad-window-button { width: 36px; height: 36px; }
    #notepad-text { font-size: 16px; padding: 12px; }
    .notepad-footer small { font-size: 11px; line-height: 1.4; }
    .notepad-footer .reading-tools-link { min-height: 36px; padding-inline: 14px; font-size: 12px; }
    /* Genuine bottom-sheet on mobile: slides up from the bottom edge rather
       than following the notepad's full-screen treatment above. */
    .short-notes-panel { inset: auto 0 0 0; width: auto; max-width: none; height: auto; max-height: 88vh; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--brand) 32%, var(--border)); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, .36); padding: 0; overscroll-behavior: contain; }
    .short-notes-panel:not([hidden]) { animation-name: short-notes-sheet-in; }
    .short-notes-handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--brand) 40%, var(--border)); margin: 7px auto 5px; flex: 0 0 auto; }
    .short-notes-header { gap: 8px; margin-bottom: 0; padding: 6px 12px 8px; min-height: 42px; }
    .short-notes-title-lockup { gap: 7px; }
    .short-notes-title-icon { width: 26px; height: 26px; border-radius: 6px; }
    .short-notes-title-icon svg { width: 14px; height: 14px; }
    .short-notes-kicker { display: none; }
    .short-notes-header strong { font-size: 14px; }
    .short-notes-header small { display: none; }
    .short-notes-header-actions { gap: 6px; }
    .short-notes-zoom.zoom-control button { width: 22px; height: 22px; }
    #short-notes-close { width: 30px; height: 30px; font-size: 13px; border-radius: 6px; }
    .short-notes-body { padding: 8px 12px max(14px, env(safe-area-inset-bottom, 0px)); font-size: 12.5px; line-height: 1.5; }
    .short-notes-sections { gap: 8px; }
    .short-note-card { padding: 8px 11px; border-radius: 8px; }
    .short-note-card--intro { padding-top: 8px; }
    .short-notes-body h2 { margin: 0 0 5px; padding: 0 0 4px; font-size: 11px; }
    .short-notes-body p { margin-bottom: 5px; font-size: 12.5px; }
    .short-notes-body :is(ul, ol) { margin: 3px 0 6px; }
    .short-notes-body ul li { padding-left: 15px; font-size: 12.5px; }
    .short-notes-body ul li::before { font-size: 7px; left: 2px; }
    .short-notes-body ol li { padding-left: 19px; font-size: 12.5px; }
    .short-notes-body ol li::before { width: 14px; height: 14px; font-size: 8.5px; }
    .short-notes-body strong { padding: 1px 4px; }
    .tutorial-bundle-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; }
    .tutorial-bundle-banner__btn { width: 100%; min-height: 36px; justify-content: center; }
    .toast { max-width: calc(100vw - 24px); white-space: normal; text-align: center; font-size: 11.5px; }
}

@media (max-width: 300px) {
    body[data-course-info-only] .tutorial-home-link { width: 30px; min-height: 30px; padding: 0; }
    body[data-course-info-only] .tutorial-home-link span { display: none; }
}

/* Mobile practice workspace: one viewport shell, horizontally swipeable tool
   tabs, and one internal scrolling exercise area with actions kept in reach. */
@media (max-width: 700px), (max-width: 900px) and (max-height: 560px) {
    .practice-deck { margin-block: 7px; padding: 9px 8px 11px; }
    .practice-heading { gap: 6px; align-items: flex-start; }
    .practice-heading .eyebrow { font-size: 8.5px; }
    .practice-heading h2 { font-size: 16px; line-height: 1.2; }
    .section-fullscreen { top: 7px; right: 7px; height: 26px; padding-inline: 7px; font-size: 9px; }
    .tool-tabs { gap: 2px; margin: 6px -8px 5px; padding-inline: 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
    .tool-tab { min-height: 28px; padding: 4px 7px; font-size: 10px; scroll-snap-align: start; }
    .practice-summary { gap: 3px; margin: 0 0 6px; }
    .practice-summary span { padding: 2px 6px; font-size: 8px; }
    .practice-tool { font-size: 13px; line-height: 1.45; }
    .generated-tool { min-height: 0; }
    .tool-status { font-size: 11px; font-weight: 600; }
    .progress-track { margin: 4px 0 6px; }
    .quiz-question { margin-bottom: 8px; font-size: 15px; line-height: 1.4; font-weight: 700; }
    .quiz-options { display: grid; gap: 8px; }
    .quiz-option { gap: 8px; min-height: 44px; padding: 9px 12px; font-size: 13.5px; line-height: 1.42; border-radius: 8px; align-items: flex-start; }
    .quiz-option input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }
    .option-key { font-size: 11.5px; font-weight: 800; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; flex: 0 0 auto; }
    .tool-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .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; }
    .tool-controls .button:only-child, .tool-controls #quiz-submit, .tool-controls #quiz-begin { flex: 1 1 100%; }
    .quiz-result { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .quiz-result > div { padding: 7px 5px; }
    .quiz-result strong { font-size: 17px; }
    .result-note, .review-item { margin-block: 6px; padding: 8px; font-size: 12px; }
    .teacher-feedback { margin-top: 8px; padding: 9px 10px; font-size: 13px; line-height: 1.45; }
    .teacher-feedback p { margin: 3px 0; }
    .tool-code { margin: 6px 0; }
    .tool-code pre { max-height: clamp(170px, 40dvh, 360px); padding: 8px 9px; }
    .tool-code code { font-size: 11px; line-height: 1.45; }
    .mode-switch { margin-bottom: 5px; }
    .mode-button { min-height: 28px; padding-inline: 8px; font-size: 10px; }
    .scenario-context, .interview-answer { margin-block: 6px; padding: 8px 10px; font-size: 12.5px; }
    .interview-answer p { margin: 3px 0; }
    .follow-up { margin-top: 5px; padding-top: 5px; }
    .response-label, .select-answer { gap: 4px; margin-top: 6px; font-size: 10px; }
    .completion-selectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .tool-textarea { min-height: clamp(64px, 16dvh, 120px); padding: 8px 9px; font-size: 13px; }
    .code-editor { min-height: clamp(110px, 28dvh, 250px); max-height: min(40dvh, 360px); font-size: 11px; line-height: 1.45; }
    .tool-input, .select-answer select, .match-row select { height: 34px; font-size: 12px; }
    .self-grade { gap: 5px; margin-top: 6px; }
    .matching-grid, .order-list { gap: 4px; }
    .match-row { gap: 5px; padding: 6px 7px; }
    .match-columns { grid-template-columns: minmax(100px, 1fr) minmax(145px, 1.8fr); gap: 6px; }
    .match-item { padding: 8px 9px; font-size: 11.5px; line-height: 1.35; min-height: 40px; border-radius: 7px; }
    .tool-start { padding: 16px 14px; }
    .tool-start p { font-size: 13px; line-height: 1.45; }
    .explore-code-block pre { max-height: 260px; }
    .explore-panel { padding: 8px 9px; }
    .flow-pool { gap: 4px; }
    .flow-chip { padding: 6px 9px; font-size: 11.5px; }
    .flow-sequence li { grid-template-columns: 20px minmax(0, 1fr) 24px 24px 24px; min-height: 34px; padding: 3px 4px; }
    .match-row strong, .order-list li > strong { font-size: 11px; }
    .order-list li { grid-template-columns: 20px minmax(0, 1fr) 27px 27px; min-height: 34px; padding: 3px 4px; }
    .order-list button { height: 26px; }
    .rapid-stats { gap: 4px; margin: 6px 0; }
    .rapid-stats span { padding: 3px 6px; font-size: 9px; }
    .decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .decision-choice { min-height: 42px; padding: 7px; font-size: 11px; }
    .decision-result pre { margin: 5px 0; padding: 7px; font-size: 11px; line-height: 1.45; }
    .flashcard { min-height: clamp(140px, 32dvh, 230px); max-height: min(52dvh, 420px); border-radius: 10px; }
    .flashcard-face { min-height: clamp(140px, 32dvh, 230px); height: 100%; gap: 6px; padding: 14px; }
    .flashcard-face strong { font-size: 16px; line-height: 1.4; }
    .flashcard-face em { font-size: 12px; }
    .flashcard-face small { font-size: 10.5px; }

    .interactive-section:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) {
        position: fixed; z-index: 600; inset: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 0; margin: 0;
        padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
        overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) {
        display: grid !important; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0;
        height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none;
    }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-heading { min-height: 29px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .tool-tabs { margin-top: 3px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-tool:not([hidden]) {
        display: flex; flex-direction: column; min-width: 0; min-height: 0; max-width: none; overflow: auto; padding: 2px 2px max(5px, env(safe-area-inset-bottom));
        overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-tool:not([hidden]) > :is(.flashcard, .tool-code, .code-editor, .decision-grid, .matching-grid, .order-list, .match-columns, .explore-code-block, .flow-pool, .flow-sequence) { flex: 1 1 auto; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .tool-code { display: flex; flex-direction: column; max-height: min(48dvh, 380px); }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .tool-code pre { flex: 1 1 auto; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) :is(.decision-grid, .matching-grid, .order-list) { align-content: start; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .tool-controls {
        position: sticky; z-index: 5; bottom: -2px; margin-top: auto; padding: 6px 1px 2px;
        background: linear-gradient(180deg, transparent, var(--surface) 24%);
    }
}

@media (max-width: 420px) {
    body { font-size: 14px; }
    .chapter-hero h1 { font-size: 24px; }
    /* Keep actions touch-sized without letting a short control consume an
       entire row. Full-width quiz begin/submit actions retain the stronger
       mobile rule above; ordinary practice actions share two columns. */
    .tool-controls .button { flex: 1 1 calc(50% - 6px); min-width: 0; min-height: 36px; padding-inline: 7px; }
    .code-actions .fullscreen-toggle { font-size: 0; }
    .code-actions .fullscreen-toggle::after { content: 'Expand'; font-size: 9px; }
    .code-actions .try-it-yourself { font-size: 0; }
    .code-actions .try-it-yourself::after { content: 'Run'; font-size: 9px; }
}

@media (max-width: 900px) and (max-height: 560px) {
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-heading .eyebrow { display: none; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-heading h2 { font-size: 12px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .tool-tab { min-height: 25px; padding-block: 3px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-summary { display: none; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) { grid-template-rows: auto auto minmax(0, 1fr); }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .quiz-option { min-height: 30px; padding-block: 4px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .flashcard,
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .flashcard-face { min-height: 118px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .tool-code pre { max-height: 130px; }
    .practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .code-editor { min-height: 90px; max-height: 130px; }
}

/* ---------- Themed interactive actions ---------- */
:root { --control-start: var(--primary-start); --control-end: var(--primary-end); }
:root[data-theme="paper"], :root[data-theme="light"], :root[data-theme="white"],
:root[data-theme="sunset"], :root[data-theme="lavender"], :root[data-theme="rose"] {
    --control-start: color-mix(in srgb, var(--primary-start) 78%, #000000);
    --control-end: color-mix(in srgb, var(--primary-end) 90%, #000000);
}
.section-fullscreen {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border-color: color-mix(in srgb, var(--brand) 68%, var(--border));
    background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); color: var(--brand);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 7%, transparent), 0 5px 14px color-mix(in srgb, var(--brand) 15%, transparent);
}
.section-fullscreen::before { content: '\2197'; font-size: 13px; line-height: 1; }
.section-fullscreen:hover, .section-fullscreen:focus-visible {
    border-color: var(--brand); background: color-mix(in srgb, var(--brand) 20%, var(--surface-2)); color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent), 0 7px 20px color-mix(in srgb, var(--brand) 22%, transparent);
}
.interactive-section .button:not(.button-primary):not(.button-warn):not(:disabled) {
    border-color: color-mix(in srgb, var(--brand) 46%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 12%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 1px color-mix(in srgb, #fff 12%, transparent), 0 3px 9px color-mix(in srgb, var(--brand) 9%, transparent);
}
.interactive-section .button:not(:disabled):hover, .interactive-section .button:not(:disabled):focus-visible {
    border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent), 0 6px 17px color-mix(in srgb, var(--brand) 20%, transparent);
}
.interactive-section .button-primary:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary-border) 84%, #fff);
    background: linear-gradient(145deg, var(--control-start), var(--control-end));
    box-shadow: 0 6px 18px var(--primary-shadow), 0 0 0 2px color-mix(in srgb, var(--brand) 9%, transparent), inset 0 1px rgba(255, 255, 255, .3);
}
.interactive-section :is(.mode-button, .decision-choice, .order-list button):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.interactive-section .mode-button.is-active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 48%, var(--border)); }

.interactive-section:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .fullscreen-toggle,
.code-block:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .fullscreen-toggle {
    border-color: color-mix(in srgb, var(--primary-border) 84%, #fff);
    background: linear-gradient(145deg, var(--control-start), var(--control-end)); color: var(--primary-text);
    text-shadow: 0 1px rgba(0, 0, 0, .18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent), 0 0 24px var(--primary-shadow);
}
.interactive-section:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) > .fullscreen-toggle {
    position: sticky; top: 0; margin-left: auto;
}
.interactive-section:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .fullscreen-toggle::before,
.code-block:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .fullscreen-toggle::before { content: '\00D7'; font-size: 17px; line-height: 1; }

@media (max-width: 420px) {
    .code-block:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .fullscreen-toggle::after { content: 'Exit'; }
}

/* Strong pointer feedback for practice controls. */
.interactive-section button, .interactive-section .quiz-option {
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover: hover) and (pointer: fine) {
    .interactive-section .button:not(.button-primary):not(.button-warn):not(:disabled):hover {
        border-color: var(--brand); background: color-mix(in srgb, var(--brand) 23%, var(--surface-2)); color: var(--text);
        transform: translateY(-2px); filter: brightness(1.08) saturate(1.08);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 17%, transparent), 0 9px 22px color-mix(in srgb, var(--brand) 27%, transparent);
    }
    .interactive-section .button-primary:not(:disabled):hover {
        outline: 2px solid color-mix(in srgb, var(--primary-border) 76%, #fff); outline-offset: 2px;
        background: linear-gradient(325deg, var(--control-start), var(--control-end)); color: var(--primary-text);
        transform: translateY(-2px) scale(1.025); filter: brightness(1.14) saturate(1.14);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 21%, transparent), 0 11px 26px var(--primary-shadow);
    }
    .interactive-section .button-warn:not(:disabled):hover {
        border-color: var(--warn); background: color-mix(in srgb, var(--warn) 22%, var(--surface-2)); color: var(--text);
        transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--warn) 24%, transparent);
    }
    .interactive-section .quiz-option:hover {
        border-color: var(--brand); background: color-mix(in srgb, var(--brand) 17%, var(--surface-2));
        transform: translateX(3px); box-shadow: inset 3px 0 var(--brand), 0 6px 15px color-mix(in srgb, var(--brand) 15%, transparent);
    }
    .interactive-section :is(.tool-tab, .mode-button, .decision-choice, .order-list button):not(:disabled):hover {
        border-color: var(--brand); background: color-mix(in srgb, var(--brand) 20%, var(--surface-2)); color: var(--text);
        transform: translateY(-2px); box-shadow: 0 6px 15px color-mix(in srgb, var(--brand) 20%, transparent);
    }
}
.interactive-section button:not(:disabled):active { transform: translateY(1px) scale(.98); filter: brightness(.94); }

/* Smooth themed flashcards with independent hover and flip transforms. */
.flashcard {
    isolation: isolate; border-color: color-mix(in srgb, var(--brand) 42%, var(--border)); border-radius: 14px; outline: none;
    background: var(--surface-2); box-shadow: 0 15px 30px color-mix(in srgb, var(--bg) 60%, transparent);
    transform-style: preserve-3d; transition: transform .24s cubic-bezier(.2, .75, .25, 1), border-color .24s ease, box-shadow .24s ease;
}
.flashcard-face {
    isolation: isolate; overflow: hidden; transform-style: preserve-3d; will-change: transform;
    transition: transform .68s cubic-bezier(.2, .72, .2, 1);
    background: radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--brand) 8%, var(--surface-2)), var(--surface));
    box-shadow: inset 0 3px var(--brand), inset 0 1px rgba(255,255,255,.11);
}
.flashcard-back {
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--surface-2)), var(--surface));
    box-shadow: inset 0 3px var(--accent), inset 0 1px rgba(255,255,255,.11);
}
.flashcard-face::after {
    content: ''; position: absolute; z-index: -1; inset: -55% auto -55% -42%; width: 36%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg) translateX(-220%);
    transition: transform .72s ease; pointer-events: none;
}
.flashcard-face > * { position: relative; z-index: 1; }
.flashcard-face small { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, transparent); }
.flashcard-back small { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.flashcard-face em { padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 68%, transparent); }
@media (hover: hover) and (pointer: fine) {
    .flashcard:hover { border-color: var(--brand); transform: translateY(-4px) scale(1.012); box-shadow: 0 20px 36px color-mix(in srgb, var(--brand) 22%, transparent); }
    .flashcard:hover .flashcard-face::after { transform: skewX(-18deg) translateX(560%); }
}
.flashcard:focus-visible { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand), 0 18px 34px color-mix(in srgb, var(--brand) 20%, transparent); }
.flashcard:active { transform: translateY(1px) scale(.99); }

/* ---------- MCQ result dashboard ---------- */
.quiz-result-dashboard {
    --result-color: var(--brand); overflow: hidden; margin-bottom: 8px; padding: 14px;
    border: 1px solid color-mix(in srgb, var(--result-color) 42%, var(--border)); border-radius: 12px;
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--result-color) 16%, transparent), transparent 34%), linear-gradient(145deg, var(--surface-2), var(--surface));
    box-shadow: 0 13px 30px color-mix(in srgb, var(--result-color) 11%, transparent);
}
.quiz-result-dashboard.is-growing { --result-color: var(--warn); }.quiz-result-dashboard.is-revise { --result-color: var(--danger); }
.quiz-result-hero { display: flex; align-items: center; gap: 15px; }
.quiz-score-ring { position: relative; flex: none; width: 96px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--result-color) calc(var(--score) * 1%), color-mix(in srgb, var(--border) 72%, transparent) 0); box-shadow: 0 0 24px color-mix(in srgb, var(--result-color) 24%, transparent); animation: quiz-result-pop .55s cubic-bezier(.2,.8,.2,1); }
.quiz-score-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.quiz-score-ring > div { position: relative; z-index: 1; display: grid; text-align: center; }
.quiz-score-ring strong { color: var(--result-color); font-size: 23px; line-height: 1; }.quiz-score-ring span { margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.quiz-result-heading { min-width: 0; }.quiz-result-kicker { color: var(--result-color); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.quiz-result-heading h3 { margin: 3px 0; font-size: 19px; }.quiz-result-heading p { margin: 0; color: var(--muted); font-size: 11.5px; }
.quiz-result-dashboard .quiz-result { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; }
.quiz-result-dashboard .quiz-result > div { min-width: 0; padding: 7px 5px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.quiz-result-dashboard .quiz-result strong { overflow: hidden; color: var(--text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.quiz-result-dashboard .quiz-result .is-correct strong { color: var(--brand); }.quiz-result-dashboard .quiz-result .is-wrong strong { color: var(--danger); }
.quiz-result-progress { margin-top: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--surface) 76%, transparent); }
.quiz-result-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 10px; }.quiz-result-progress > div:first-child span { color: var(--muted); }
.quiz-result-bar { display: flex; height: 11px; overflow: hidden; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 1px 3px rgba(0,0,0,.18); }
.quiz-result-bar > span { height: 100%; transform-origin: left; animation: quiz-result-grow .75s cubic-bezier(.2,.75,.25,1) both; }
.quiz-result-bar .is-correct { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 68%, #fff)); }.quiz-result-bar .is-wrong { background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 72%, #fff)); }.quiz-result-bar .is-unanswered { background: var(--muted); opacity: .46; }
.quiz-result-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; color: var(--muted); font-size: 8.5px; }
.quiz-result-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: currentColor; }.quiz-result-legend .is-correct { color: var(--brand); }.quiz-result-legend .is-wrong { color: var(--danger); }
.quiz-result-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }.quiz-result-insights > div { min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--surface) 75%, transparent); }.quiz-result-insights > div > strong { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.quiz-result-chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 0; }.quiz-result-chip-list span { padding: 3px 6px; border-radius: 999px; font-size: 9px; line-height: 1.25; }.quiz-result-chip-list.is-strong span { background: color-mix(in srgb, var(--brand) 15%, var(--surface-2)); color: var(--brand); }.quiz-result-chip-list.is-weak span { background: color-mix(in srgb, var(--danger) 13%, var(--surface-2)); color: var(--danger); }
@keyframes quiz-result-grow { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes quiz-result-pop { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Modal actions remain high-contrast regardless of the selected palette. */
.modal-card { border-color: color-mix(in srgb, var(--brand) 42%, var(--border)); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand) 14%, transparent), transparent 42%), var(--surface); }
.modal-actions .button { min-width: 112px; min-height: 35px; border-color: color-mix(in srgb, var(--brand) 52%, var(--border)); font-weight: 850; }
.modal-actions .button-muted { background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); color: var(--text); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 12%, transparent); }
.modal-actions .button-primary { border-color: color-mix(in srgb, var(--primary-border) 82%, #fff); background: linear-gradient(145deg, var(--control-start), var(--control-end)); color: var(--primary-text); box-shadow: 0 7px 20px var(--primary-shadow); }
@media (hover: hover) and (pointer: fine) { .modal-actions .button:hover { border-color: var(--brand); transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent), 0 9px 22px color-mix(in srgb, var(--brand) 28%, transparent); } }

@media (max-width: 700px), (max-width: 900px) and (max-height: 560px) {
    .quiz-result-dashboard { padding: 9px; border-radius: 10px; }.quiz-result-hero { gap: 10px; }.quiz-score-ring { width: clamp(70px, 20vw, 84px); }.quiz-score-ring::before { inset: 7px; }.quiz-score-ring strong { font-size: 19px; }
    .quiz-result-heading h3 { font-size: 15px; }.quiz-result-heading p { font-size: 10px; }.quiz-result-dashboard .quiz-result { gap: 3px; margin-top: 7px; overflow: visible; }.quiz-result-dashboard .quiz-result > div { padding: 5px 2px; }.quiz-result-dashboard .quiz-result strong { font-size: 13px; }.quiz-result-dashboard .quiz-result span { font-size: 7px; }
    .quiz-result-progress { margin-top: 6px; padding: 6px 7px; }.quiz-result-bar { height: 8px; }.quiz-result-insights { gap: 4px; margin-top: 5px; }.quiz-result-insights > div { padding: 6px; }
    .modal-actions { display: grid; grid-template-columns: repeat(2, 1fr); }.modal-actions .button { min-width: 0; width: 100%; }
}

/* ---------- Unified practice-button finish ---------- */
.practice-deck :is(.button, .tool-tab, .mode-button, .decision-choice, .order-list button, .mini-copy) {
    position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.practice-deck :is(.button, .tool-tab, .mode-button, .decision-choice, .order-list button, .mini-copy)::after {
    content: ''; position: absolute; z-index: -1; top: 0; left: -45%; width: 32%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-18deg);
    transition: left .42s ease; pointer-events: none;
}
.practice-deck .tool-tabs { gap: 5px; padding-bottom: 5px; border-bottom-color: color-mix(in srgb, var(--brand) 20%, var(--border)); }
.practice-deck .tool-tab {
    margin-bottom: 0; border: 1px solid color-mix(in srgb, var(--brand) 27%, var(--border)); border-radius: 7px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 6%, var(--surface-2)), var(--surface)); color: var(--muted);
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 3px 8px color-mix(in srgb, var(--bg) 35%, transparent);
}
.practice-deck .tool-tab.is-active {
    border-color: var(--brand); color: var(--text); background: radial-gradient(circle at 88% 0, color-mix(in srgb, var(--brand) 22%, transparent), transparent 48%), color-mix(in srgb, var(--brand) 14%, var(--surface-2));
    box-shadow: inset 0 -2px var(--brand), 0 0 0 2px color-mix(in srgb, var(--brand) 10%, transparent), 0 7px 16px color-mix(in srgb, var(--brand) 18%, transparent);
}
.practice-tool .button-muted:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand) 41%, var(--border)); color: var(--text);
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 11%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 1px rgba(255,255,255,.09), 0 4px 11px color-mix(in srgb, var(--bg) 42%, transparent);
}
.practice-tool .button-primary:not(:disabled) { letter-spacing: .01em; }
.practice-tool .button-warn:not(:disabled) {
    border-color: color-mix(in srgb, var(--warn) 64%, var(--border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--warn) 18%, var(--surface-2)), color-mix(in srgb, var(--warn) 8%, var(--surface-2)));
    box-shadow: inset 0 1px rgba(255,255,255,.08), 0 4px 12px color-mix(in srgb, var(--warn) 16%, transparent);
}
.practice-tool .mode-switch { padding: 4px; box-shadow: inset 0 1px 4px color-mix(in srgb, var(--bg) 45%, transparent); }
.practice-tool .mode-button { border: 1px solid transparent; border-radius: 6px; }
.practice-tool .mode-button.is-active { border-color: color-mix(in srgb, var(--brand) 54%, var(--border)); background: color-mix(in srgb, var(--brand) 17%, var(--surface-3)); box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 16%, transparent); }
.practice-tool .decision-choice {
    border-color: color-mix(in srgb, var(--brand) 27%, var(--border));
    background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%), linear-gradient(145deg, color-mix(in srgb, var(--brand) 6%, var(--surface-2)), var(--surface-2));
    box-shadow: inset 0 1px rgba(255,255,255,.065), 0 4px 11px color-mix(in srgb, var(--bg) 38%, transparent);
}
.practice-tool .decision-choice.is-selected { border-color: var(--brand); box-shadow: inset 3px 0 var(--brand), 0 0 0 2px color-mix(in srgb, var(--brand) 11%, transparent), 0 7px 16px color-mix(in srgb, var(--brand) 18%, transparent); }
.practice-tool .order-list button { border-color: color-mix(in srgb, var(--brand) 38%, var(--border)); background: color-mix(in srgb, var(--brand) 11%, var(--surface-3)); color: var(--brand); box-shadow: 0 3px 8px color-mix(in srgb, var(--bg) 40%, transparent); }
.practice-tool .mini-copy { border-color: color-mix(in srgb, var(--brand) 45%, #29415f); background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 14%, #102038), #102038); color: #d7e5f5; box-shadow: 0 3px 9px rgba(0,0,0,.28); }
.practice-tool .quiz-option { border-color: color-mix(in srgb, var(--brand) 24%, var(--border)); background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 5%, var(--surface-2)), var(--surface-2)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 3px 9px color-mix(in srgb, var(--bg) 32%, transparent); }
.practice-tool .quiz-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 3px 0 var(--brand), 0 0 0 2px color-mix(in srgb, var(--brand) 11%, transparent), 0 7px 15px color-mix(in srgb, var(--brand) 17%, transparent); }
.practice-deck :is(.button, .tool-tab, .mode-button, .decision-choice, .order-list button, .mini-copy):focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent), 0 7px 18px color-mix(in srgb, var(--brand) 22%, transparent);
}
.practice-deck :is(.button, .tool-tab, .mode-button, .decision-choice, .order-list button, .mini-copy):disabled {
    opacity: .48; filter: grayscale(.35) saturate(.55); box-shadow: none; cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
    .practice-deck :is(.button, .tool-tab, .mode-button, .decision-choice, .order-list button, .mini-copy):not(:disabled):hover::after { left: 118%; }
    .practice-deck .tool-tab:not(:disabled):hover { border-color: var(--brand); color: var(--text); transform: translateY(-2px); box-shadow: 0 8px 19px color-mix(in srgb, var(--brand) 22%, transparent); }
}

/* Readable MCQ results on phones: larger cells, stacked insights and a
   two-column action grid instead of compressed five-across content. */
@media (max-width: 520px) {
    .quiz-result-dashboard { width: 100%; padding: 10px; }
    .quiz-result-hero { align-items: center; gap: 11px; }
    .quiz-score-ring { width: 78px; }
    .quiz-result-heading h3 { font-size: 16px; overflow-wrap: anywhere; }
    .quiz-result-heading p { font-size: 10.5px; }
    .quiz-result-dashboard .quiz-result { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .quiz-result-dashboard .quiz-result > div { padding: 7px 5px; }
    .quiz-result-dashboard .quiz-result > div:last-child { grid-column: 1 / -1; }
    .quiz-result-dashboard .quiz-result strong { font-size: 15px; }
    .quiz-result-progress { padding: 8px; }
    .quiz-result-progress > div:first-child { align-items: center; }
    .quiz-result-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .quiz-result-legend .is-unanswered { grid-column: 1 / -1; }
    .quiz-result-insights { grid-template-columns: 1fr; gap: 5px; }
    .quiz-result-chip-list span { padding: 4px 7px; font-size: 9.5px; overflow-wrap: anywhere; }
    .quiz-result-dashboard + .tool-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .quiz-result-dashboard + .tool-controls .button { width: 100%; min-height: 34px; }
}

.quiz-result-dashboard, .review-item { flex: 0 0 auto; }
.practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .practice-tool:not([hidden]) > #quiz-stage { flex: 0 0 auto; width: 100%; }
.practice-deck:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .quiz-result-dashboard + .tool-controls { flex: 0 0 auto; margin-top: 6px; }

@media (max-width: 360px) {
    .quiz-result-hero { align-items: flex-start; }
    .quiz-score-ring { width: 70px; }
    .quiz-result-kicker { font-size: 8px; }.quiz-result-heading h3 { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .celebration-layer { display: none !important; }
}