: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: 'Tiro Devanagari Marathi', 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; } }
.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); right: 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; }
.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__poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; 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 iframe { display: block; width: 100%; aspect-ratio: 16 / 9; 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 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; }
.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; }
.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 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: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 > 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; }
.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: Georgia, serif; 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(--accent); border-radius: 0 8px 8px 0; background: color-mix(in srgb, 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(--accent); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.definition-callout-label-meaning { margin-top: 10px; }

/* 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; }
.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; 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 figcaption { display: flex; align-items: center; justify-content: space-between; min-height: 33px; padding: 0 7px 0 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); }
.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); }
.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 { border-color: var(--brand); color: var(--brand); }
.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-option-bookmark { flex: none; margin-left: 6px; color: color-mix(in srgb, var(--muted) 40%, transparent); font-size: 11px; font-style: normal; }
.jump-option-bookmark.is-active { color: var(--accent); }
.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); }

/* Study notepad: a slide-in drawer from the right, independent of the
   left-hand course sidebar. Always a fixed overlay (unlike .course-sidebar,
   which is only an overlay on mobile) since it's opened on demand rather
   than being permanent chrome. */
.notepad-scrim { position: fixed; z-index: 350; inset: 0; border: 0; background: rgba(1, 6, 13, .6); cursor: default; }
.notepad-panel { position: fixed; z-index: 360; inset: 0 0 0 auto; display: flex; flex-direction: column; width: min(380px, 100vw); height: 100vh; height: 100dvh; padding: 14px; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -24px 0 60px rgba(0, 0, 0, .35); }
.notepad-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.notepad-header strong { font-size: 14px; }
#notepad-close { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; }
#notepad-close:hover { border-color: var(--accent); color: var(--accent); }
#notepad-text { flex: 1; width: 100%; min-height: 0; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; resize: none; }
#notepad-text:focus { outline: 0; border-color: var(--accent); }
.notepad-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.notepad-footer small { color: var(--muted); font-size: 9.5px; line-height: 1.35; }
.notepad-footer .reading-tools-link { width: auto; margin-top: 0; padding-inline: 10px; }

/* 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-content's own
   heading/paragraph sizes are fixed px, not em -- zoom scales the whole
   rendered box 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% (the base .lesson-content rule above), so 100% is the only step
   that needs its own override back down; 120 itself has none since it IS
   the base. */
:root[data-zoom="80"] .lesson-content { zoom: .8; }
:root[data-zoom="90"] .lesson-content { zoom: .9; }
:root[data-zoom="100"] .lesson-content { zoom: 1; }
:root[data-zoom="110"] .lesson-content { zoom: 1.1; }
:root[data-zoom="130"] .lesson-content { zoom: 1.3; }
:root[data-zoom="140"] .lesson-content { zoom: 1.4; }
:root[data-zoom="150"] .lesson-content { 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: 43px; }
    body { overflow-x: hidden; }
    .topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding-inline: 8px; }
    .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: 28px; padding-inline: 7px; font-size: 10px; }
    .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, 280px); height: 100vh; transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--shadow); }
    .course-sidebar.is-open { transform: none; }
    .sidebar-close { position: absolute; top: -2px; right: 4px; display: block; 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 20px; }
    .chapter-hero { min-width: 0; max-width: 100%; overflow: hidden; gap: 13px; padding: 15px; }
    .chapter-hero h1 { font-size: 30px; }
    .chapter-stats { width: 100%; min-width: 0; }
    .practice-deck { max-width: 100%; margin-block: 9px; padding: 11px; }
    .quiz-options { grid-template-columns: 1fr; }
    .decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .match-row { grid-template-columns: 1fr; }
    .quiz-result { grid-template-columns: repeat(2, 1fr); }
    .content-section { max-width: 100%; overflow: hidden; padding: 14px 12px; }
    .lesson-content { gap: 8px; }
    .lesson-content h1 { font-size: 21px; }
    .lesson-content p { line-height: 1.62; }
    .learning-outcomes-highlight { padding: 12px 13px; }
    .code-block { width: calc(100% + 8px); max-width: calc(100% + 8px); margin-inline: -4px; border-radius: 6px; }
    .code-block pre { padding: 11px; }
    .site-footer { padding: 10px 12px; }
}

@media (max-width: 420px) {
    body { font-size: 14px; }
    .chapter-stats div { min-width: 0; padding-inline: 6px; }
    .practice-heading { align-items: flex-start; }
    .tool-controls .button { flex: 1 1 auto; }
    .flashcard-face strong { font-size: 16px; }
    .code-actions .fullscreen-toggle { font-size: 0; }
    .code-actions .fullscreen-toggle::after { content: 'Expand'; font-size: 9px; }
}

/* 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: 8px; }
    .practice-heading { gap: 6px; }
    .practice-heading .eyebrow { font-size: 8px; }
    .practice-heading h2 { font-size: 15px; line-height: 1.15; }
    .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: 11.5px; line-height: 1.4; }
    .generated-tool { min-height: 0; }
    .tool-status { font-size: 9.5px; }
    .progress-track { margin: 4px 0 6px; }
    .quiz-question { margin-bottom: 6px; font-size: 13px; line-height: 1.3; }
    .quiz-options { gap: 4px; }
    .quiz-option { gap: 6px; min-height: clamp(34px, 5dvh, 42px); padding: clamp(5px, .9dvh, 8px) 7px; font-size: 11px; line-height: 1.3; }
    .quiz-option input { margin-top: 2px; }
    .option-key { font-size: 10px; }
    .tool-controls { gap: 4px; margin-top: 6px; }
    .tool-controls .button { flex: 0 1 auto; min-height: 30px; padding: 4px 8px; font-size: 10px; }
    .quiz-result { grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 4px; overflow-x: auto; }
    .quiz-result > div { padding: 6px 4px; }
    .quiz-result strong { font-size: 16px; }
    .result-note, .review-item { margin-block: 5px; padding: 7px; }
    .teacher-feedback { margin-top: 6px; padding: 7px 8px; }
    .teacher-feedback p { margin: 3px 0; }
    .tool-code { margin: 5px 0; }
    .tool-code pre { max-height: clamp(170px, 40dvh, 360px); padding: 8px 9px; }
    .tool-code code { font-size: 10.5px; line-height: 1.45; }
    .mode-switch { margin-bottom: 5px; }
    .mode-button { min-height: 25px; padding-inline: 7px; font-size: 9px; }
    .scenario-context, .interview-answer { margin-block: 5px; padding: 7px 8px; }
    .interview-answer p { margin: 3px 0; }
    .follow-up { margin-top: 5px; padding-top: 5px; }
    .response-label, .select-answer { gap: 3px; margin-top: 5px; font-size: 8.5px; }
    .completion-selectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .tool-textarea { min-height: clamp(58px, 14dvh, 110px); padding: 7px 8px; font-size: 11.5px; }
    .code-editor { min-height: clamp(110px, 28dvh, 250px); max-height: min(40dvh, 360px); font-size: 10.5px; line-height: 1.45; }
    .tool-input, .select-answer select, .match-row select { height: 31px; font-size: 11px; }
    .self-grade { gap: 4px; margin-top: 5px; }
    .matching-grid, .order-list { gap: 3px; }
    .match-row { gap: 4px; padding: 5px 6px; }
    .match-columns { grid-template-columns: 1fr; gap: 5px; }
    .match-item { padding: 7px 9px; font-size: 11px; }
    .tool-start { padding: 14px 12px; }
    .explore-code-block pre { max-height: 260px; }
    .explore-panel { padding: 8px 9px; }
    .flow-pool { gap: 4px; }
    .flow-chip { padding: 5px 8px; font-size: 10.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: 10.5px; }
    .order-list li { grid-template-columns: 20px minmax(0, 1fr) 27px 27px; min-height: 34px; padding: 3px 4px; }
    .order-list button { height: 25px; }
    .rapid-stats { gap: 3px; margin: 5px 0; }
    .rapid-stats span { padding: 2px 5px; font-size: 8px; }
    .decision-grid { gap: 4px; }
    .decision-choice { min-height: 42px; padding: 6px; font-size: 10.5px; }
    .decision-result pre { margin: 5px 0; padding: 7px; font-size: 10.5px; line-height: 1.45; }
    .flashcard { min-height: clamp(126px, 30dvh, 230px); max-height: min(52dvh, 420px); }
    .flashcard-face { min-height: clamp(126px, 30dvh, 230px); height: 100%; }
    .flashcard-face { gap: 5px; padding: 10px; }
    .flashcard-face strong { font-size: 13px; line-height: 1.3; }

    .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: 8px;
        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: 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; }
}