/* ===========================================================
   Theme — the floating toggle + flavor menu, plus every
   dark-mode override.

   Kept in one file on purpose: the page stylesheets stay the
   light source of truth, and everything dark lives here behind
   [data-theme="dark"] (which also out-specifies the inline
   <style> blocks on index.html and books.html). A second
   attribute, [data-flavor], picks which dark palette's variables
   are active — see "Dark palette" below.
   =========================================================== */

/* --- the toggle + its menu (both themes) --- */
.theme-picker {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 200;
}

.theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6e46be;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
        border-color 0.25s ease, box-shadow 0.25s ease;
}

.theme-toggle:hover {
    transform: scale(1.08);
    color: #8b6cef;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-toggle:focus-visible {
    outline: 2px solid #8b6cef;
    outline-offset: 3px;
}

[data-theme="dark"] .theme-toggle {
    background: rgba(24, 24, 24, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    color: #c9b3ff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .theme-toggle:hover {
    color: #e0d0ff;
}

/* --- the flavor menu --- */
.theme-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 201;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 208px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.theme-menu[hidden] {
    display: none;
}

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.85rem;
    color: #29252f;
    cursor: pointer;
    text-align: left;
}

.theme-menu button:hover {
    background: rgba(0, 0, 0, 0.05);
}

.theme-menu button:focus-visible {
    outline: 2px solid #8b6cef;
    outline-offset: -2px;
}

.theme-menu button[aria-checked="true"] {
    background: rgba(110, 70, 190, 0.1);
    color: #6e46be;
    font-weight: 600;
}

.theme-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.theme-menu button .theme-label {
    flex: 1;
}

.theme-check {
    opacity: 0;
    color: #6e46be;
}

.theme-menu button[aria-checked="true"] .theme-check {
    opacity: 1;
}

[data-theme="dark"] .theme-menu {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .theme-menu button {
    color: var(--dk-text);
}

[data-theme="dark"] .theme-menu button:hover {
    background: var(--dk-surface-2);
}

[data-theme="dark"] .theme-menu button[aria-checked="true"] {
    background: color-mix(in srgb, var(--dk-link) 16%, transparent);
    color: var(--dk-link);
}

[data-theme="dark"] .theme-check {
    color: var(--dk-link);
}

[data-theme="dark"] .theme-dot {
    border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .theme-picker {
        top: 12px;
        right: 12px;
    }

    .theme-toggle {
        width: 34px;
        height: 34px;
    }
}

/* ===========================================================
   Dark palette
   Three selectable flavors, all on GitHub's neutral scale, all
   sharing the same violet link/accent (--dk-link). The base
   [data-theme="dark"] block below is the "gh-dark" flavor and
   also the fallback if [data-flavor] is ever missing; the two
   blocks after it override just the neutrals for the other
   flavors. Everything downstream reads the --dk-* custom
   properties, so it re-themes automatically — nothing else in
   this file needs to know a flavor exists.
   =========================================================== */
html[data-theme="dark"] {
    /* GitHub Dark — default flavor */
    --dk-bg: #0d1117;
    --dk-surface: #161b22;
    --dk-surface-2: #1c2128;
    --dk-border: #30363d;
    --dk-text: #e6edf3;
    --dk-heading: #f0f6fc;
    --dk-muted: #7d8590;
    --dk-faint: #6e7681;
    --dk-link: #b088f9;
    --dk-link-hover: #d5bfff;

    /* variables the Blogs stylesheet already reads */
    --bg-color: #0d1117;
    --text-color: #e6edf3;
    --text-muted: #7d8590;
    --accent-color: #b088f9;
    --accent-hover: #d5bfff;
    --border-color: #30363d;

    color-scheme: dark;
}

html[data-theme="dark"][data-flavor="gh-dimmed"] {
    /* GitHub Dark Dimmed — warmer, lower-contrast greys */
    --dk-bg: #22272e;
    --dk-surface: #2d333b;
    --dk-surface-2: #373e47;
    --dk-border: #444c56;
    --dk-text: #adbac7;
    --dk-heading: #cdd9e5;
    --dk-muted: #768390;
    --dk-faint: #636e7b;

    --bg-color: #22272e;
    --text-color: #adbac7;
    --text-muted: #768390;
    --border-color: #444c56;
}

html[data-theme="dark"][data-flavor="gh-hc"] {
    /* GitHub Dark High Contrast — punchier borders, white headings */
    --dk-bg: #0a0c10;
    --dk-surface: #151b23;
    --dk-surface-2: #1c232c;
    --dk-border: #3d444d;
    --dk-text: #f0f3f6;
    --dk-heading: #ffffff;
    --dk-muted: #9ea7b3;
    --dk-faint: #7a828e;

    --bg-color: #0a0c10;
    --text-color: #f0f3f6;
    --text-muted: #9ea7b3;
    --border-color: #3d444d;
}

[data-theme="dark"] body {
    background: var(--dk-bg);
    color: var(--dk-text);
}

/* --- shared: links, headings, type --- */
[data-theme="dark"] a {
    color: var(--dk-link);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: var(--dk-link-hover);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] name,
[data-theme="dark"] papertitle,
[data-theme="dark"] heading,
[data-theme="dark"] strong,
[data-theme="dark"] .section-heading {
    color: var(--dk-heading);
}

[data-theme="dark"] .social-icon {
    color: var(--dk-link);
}

[data-theme="dark"] .social-icon:hover {
    color: var(--dk-link-hover);
}

[data-theme="dark"] span.highlight {
    background-color: rgba(255, 224, 102, 0.22);
    color: var(--dk-heading);
}

/* ===========================================================
   Homepage (index.html)
   =========================================================== */
[data-theme="dark"] .alias {
    color: #5f6472;
}

[data-theme="dark"] .news-heading {
    color: var(--dk-heading);
}

[data-theme="dark"] .news-date {
    color: var(--dk-faint);
}

[data-theme="dark"] .news-desc {
    color: var(--dk-text);
}

[data-theme="dark"] .news-desc a {
    color: var(--dk-link);
}

[data-theme="dark"] .news-desc a:hover {
    color: var(--dk-link-hover);
}

[data-theme="dark"] .news-card::-webkit-scrollbar-thumb {
    background: #333;
}

/* --- Reading --- */
[data-theme="dark"] .reading-intro {
    color: var(--dk-muted);
}

[data-theme="dark"] .news-badge.paper {
    background: rgba(59, 130, 246, 0.2);
    color: #7fb0ff;
}

[data-theme="dark"] .news-badge.position {
    background: rgba(16, 185, 129, 0.2);
    color: #48d3a5;
}

[data-theme="dark"] .news-badge.intern {
    background: rgba(245, 158, 11, 0.2);
    color: #f2b34b;
}

[data-theme="dark"] .news-badge.award {
    background: rgba(168, 85, 247, 0.2);
    color: #c79bfa;
}

[data-theme="dark"] .news-badge.talk {
    background: rgba(236, 72, 153, 0.2);
    color: #f492c3;
}

[data-theme="dark"] .project-card {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .project-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .project-links a {
    color: var(--dk-link);
}

[data-theme="dark"] .exp-card .exp-date {
    color: var(--dk-muted);
}

/* Institution logos are drawn for white paper — give them a card to sit on. */
[data-theme="dark"] .exp-card img,
[data-theme="dark"] .project-logo {
    background: #f4f4f6;
    border-radius: 10px;
    padding: 6px;
}

/* Paper rows use a legacy bgcolor attribute; author CSS still wins. */
[data-theme="dark"] .research-table tr[bgcolor],
[data-theme="dark"] tr[bgcolor="#cac4db"] {
    background-color: var(--dk-surface) !important;
}

[data-theme="dark"] #footer {
    color: var(--dk-faint);
}

[data-theme="dark"] .footer-mark {
    opacity: 0.65;
}

[data-theme="dark"] #visual-canvas:focus-visible {
    outline-color: var(--dk-link);
}

/* ===========================================================
   Books (books.html)
   =========================================================== */
[data-theme="dark"] .book-card,
[data-theme="dark"] .container {
    background-color: transparent;
}

[data-theme="dark"] .book-card {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .book-title,
[data-theme="dark"] .book-author {
    color: var(--dk-text);
}

/* ===========================================================
   Blogs section

   The writing index is a body.plain page now, so its dark values
   come from plain.css tokens — nothing for this file to override.
   =========================================================== */
[data-theme="dark"] h2 {
    border-bottom-color: var(--dk-border);
}

[data-theme="dark"] blockquote {
    color: var(--dk-muted);
    border-left-color: var(--dk-border);
}

[data-theme="dark"] pre {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] figure img {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ===========================================================
   Notes / chapter pages — dark values derived from each series
   stylesheet (same rules, colours remapped for a dark ground).
   =========================================================== */
/* ---- derived from Blogs/notes/notes-core.css ---- */
[data-theme="dark"] .reading-progress {
    background: linear-gradient(90deg, var(--accent), #79dae7);
}

[data-theme="dark"] .series-breadcrumb {
    color: var(--dk-muted);
}

[data-theme="dark"] .series-breadcrumb a {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-header {
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-header h1 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-title {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-list a {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-content h2 {
    color: var(--dk-text);
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content h3 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content h4 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content blockquote {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content pre {
    background: var(--dk-surface-2);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content p code,
[data-theme="dark"] .chapter-content li code {
    color: var(--dk-text);
}

[data-theme="dark"] .code-copy-btn {
    background: rgba(31, 31, 31, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.208);
    color: var(--dk-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
}

[data-theme="dark"] .code-copy-btn:hover {
    color: #f5f5f5;
}

[data-theme="dark"] .code-copy-btn.copied {
    background: #4cbd52;
    color: #f5f5f5;
    border-color: #45ba4b;
}

[data-theme="dark"] .chapter-link:hover {
    color: #9f85d6;
}

[data-theme="dark"] .chapter-content thead th {
    color: var(--dk-text);
    border-bottom: 2px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-content tbody td {
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content figcaption {
    color: var(--dk-muted);
}

[data-theme="dark"] .note-box.definition {
    background: rgba(59, 130, 246, 0.085);
    border-left: 3px solid #5b8ad6;
}

[data-theme="dark"] .note-box.definition .note-label {
    color: #709feb;
}

[data-theme="dark"] .note-box.intuition {
    background: rgba(245, 158, 11, 0.102);
    border-left: 3px solid #cc9434;
}

[data-theme="dark"] .note-box.implementation {
    background: rgba(16, 185, 129, 0.085);
    border-left: 3px solid #33cc99;
}

[data-theme="dark"] .note-box.implementation .note-label {
    color: #70ebc5;
}

[data-theme="dark"] details.collapsible {
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] details.collapsible summary {
    background: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] details.collapsible summary:hover {
    background: var(--dk-surface);
}

[data-theme="dark"] details.collapsible .details-content {
    border-top: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-nav {
    border-top: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-nav a {
    background: var(--dk-surface);
    border: 1px solid #2a3a51;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.13), 0 2px 4px -1px rgba(0, 0, 0, 0.078);
}

[data-theme="dark"] .chapter-nav .nav-title {
    color: var(--dk-text);
}

[data-theme="dark"] .key-takeaways {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, transparent), rgba(176, 136, 249, 0.068));
}

[data-theme="dark"] .chapter-intro {
    color: var(--dk-text);
    background: var(--dk-surface);
    border-left: 3px solid var(--dk-border);
}

[data-theme="dark"] .chapter-bridge {
    color: var(--dk-text);
    background: linear-gradient(135deg, var(--dk-surface), color-mix(in srgb, var(--accent) 3%, transparent));
}

[data-theme="dark"] .chapter-content hr {
    background: var(--dk-surface);
}

[data-theme="dark"] .interactive-container {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .series-hero h1 {
    color: var(--dk-text);
}

[data-theme="dark"] .series-hero .series-subtitle {
    color: var(--dk-text);
}

[data-theme="dark"] .series-hero .series-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-card {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-card .card-title {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-card .card-desc {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-card .card-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-card .topic-tag {
    background: var(--dk-surface);
    color: var(--dk-text);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .learning-path .path-connector {
    background: var(--dk-surface-2);
}

[data-theme="dark"] .note-widget {
    border: 1px solid #2f474c;
    background: #182020;
}

[data-theme="dark"] .note-widget button {
    background: var(--dk-surface);
}

[data-theme="dark"] .note-widget button:hover {
    color: #f5f5f5;
}

[data-theme="dark"] .note-widget button.secondary {
    border-color: #474747;
    color: var(--dk-text);
}

[data-theme="dark"] .note-widget button.secondary:hover {
    background: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] .note-widget label {
    color: var(--dk-text);
}

[data-theme="dark"] .note-widget .w-readout {
    color: var(--dk-text);
    background: var(--dk-surface);
    border: 1px solid #30444a;
}

[data-theme="dark"] .note-widget .w-note {
    color: var(--dk-text);
}

[data-theme="dark"] .note-widget .chip {
    border: 1px solid #474747;
    color: var(--dk-text);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-content .part-marker .part-name {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content .part-marker .part-sub {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content .fig-row .fig-cell {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content img.pixelated {
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .note-widget table.w-table th {
    border-bottom: 1px solid #2a4a50;
}

[data-theme="dark"] .note-widget table.w-table td {
    border-bottom: 1px solid #2d494d;
    color: var(--dk-text);
}

[data-theme="dark"] .note-widget table.w-table tr.total td {
    border-top: 1.5px solid #2a4a50;
}

[data-theme="dark"] .ref-pop {
    background: var(--dk-surface);
    border: 1px solid #2a4a50;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.338);
}

[data-theme="dark"] .ref-pop-label {
    border-bottom: 1px solid #2d494d;
}

[data-theme="dark"] .ref-pop-body {
    color: var(--dk-text);
}

@media (min-width: 1100px) {
    [data-theme="dark"] .toc-inner::-webkit-scrollbar-thumb {
        background: var(--dk-surface-2);
    }

}

/* ---- derived from Blogs/deep-gen/dgm-notes-style.css ---- */
[data-theme="dark"] .reading-progress {
    background: linear-gradient(90deg, #2fb5da, #79dae7);
}

[data-theme="dark"] .series-breadcrumb {
    color: var(--dk-muted);
}

[data-theme="dark"] .series-breadcrumb a {
    color: var(--dk-muted);
}

[data-theme="dark"] .series-breadcrumb a:hover {
    color: #70d0eb;
}

[data-theme="dark"] .chapter-header {
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-number {
    color: #70d0eb;
    background: rgba(14, 116, 144, 0.136);
}

[data-theme="dark"] .chapter-header h1 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-title {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-list a {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-list a:hover {
    color: #70d0eb;
}

[data-theme="dark"] .toc-list a.active {
    color: #70d0eb;
    border-left-color: #33abcc;
}

[data-theme="dark"] .chapter-content h2 {
    color: var(--dk-text);
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content h3 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content h4 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content a {
    color: #70d0eb;
    border-bottom: 1px dotted rgba(14, 116, 144, 0.51);
}

[data-theme="dark"] .chapter-content a:hover {
    border-bottom-color: #33abcc;
}

[data-theme="dark"] .chapter-content blockquote {
    border-left: 3px solid #33abcc;
    background: rgba(14, 116, 144, 0.068);
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content pre {
    background: var(--dk-surface-2);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content p code,
[data-theme="dark"] .chapter-content li code {
    background: rgba(14, 116, 144, 0.102);
    color: var(--dk-text);
}

[data-theme="dark"] .code-copy-btn {
    background: rgba(31, 31, 31, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.208);
    color: var(--dk-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
}

[data-theme="dark"] .code-copy-btn:hover {
    background: #2fb5da;
    color: #f5f5f5;
    border-color: #33abcc;
}

[data-theme="dark"] .code-copy-btn.copied {
    background: #4cbd52;
    color: #f5f5f5;
    border-color: #45ba4b;
}

[data-theme="dark"] .chapter-link {
    color: #70d0eb;
}

[data-theme="dark"] .chapter-link:hover {
    color: #9f85d6;
}

[data-theme="dark"] .chapter-content thead th {
    color: var(--dk-text);
    border-bottom: 2px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-content tbody td {
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content tbody tr:hover {
    background: rgba(14, 116, 144, 0.034);
}

[data-theme="dark"] .katex-display .boxed {
    border: 2px solid #33abcc;
    background: rgba(14, 116, 144, 0.051);
}

[data-theme="dark"] .chapter-content figcaption {
    color: var(--dk-muted);
}

[data-theme="dark"] .note-box.definition {
    background: rgba(59, 130, 246, 0.085);
    border-left: 3px solid #5b8ad6;
}

[data-theme="dark"] .note-box.definition .note-label {
    color: #709feb;
}

[data-theme="dark"] .note-box.theorem {
    background: rgba(14, 116, 144, 0.085);
    border-left: 3px solid #33abcc;
}

[data-theme="dark"] .note-box.theorem .note-label {
    color: #70d0eb;
}

[data-theme="dark"] .note-box.intuition {
    background: rgba(245, 158, 11, 0.102);
    border-left: 3px solid #cc9434;
}

[data-theme="dark"] .note-box.intuition .note-label {
    color: #ebb270;
}

[data-theme="dark"] .note-box.implementation {
    background: rgba(16, 185, 129, 0.085);
    border-left: 3px solid #33cc99;
}

[data-theme="dark"] .note-box.implementation .note-label {
    color: #70ebc5;
}

[data-theme="dark"] details.collapsible {
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] details.collapsible summary {
    background: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] details.collapsible summary::before {
    color: #70d0eb;
}

[data-theme="dark"] details.collapsible summary:hover {
    background: var(--dk-surface);
}

[data-theme="dark"] details.collapsible .details-content {
    border-top: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-nav {
    border-top: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-nav a {
    background: var(--dk-surface);
    border: 1px solid #2a3a51;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.13), 0 2px 4px -1px rgba(0, 0, 0, 0.078);
}

[data-theme="dark"] .chapter-nav a:hover {
    border-color: #33abcc;
    background: rgba(14, 116, 144, 0.068);
    box-shadow: 0 10px 20px -5px rgba(14, 116, 144, 0.204), 0 8px 8px -6px rgba(14, 116, 144, 0.136);
}

[data-theme="dark"] .chapter-nav .nav-title {
    color: var(--dk-text);
}

[data-theme="dark"] .key-takeaways {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.068), rgba(176, 136, 249, 0.068));
    border: 1px solid rgba(14, 116, 144, 0.204);
}

[data-theme="dark"] .key-takeaways h2 {
    color: #70d0eb !important;
}

[data-theme="dark"] .chapter-intro {
    color: var(--dk-text);
    background: var(--dk-surface);
    border-left: 3px solid var(--dk-border);
}

[data-theme="dark"] .chapter-bridge {
    color: var(--dk-text);
    background: linear-gradient(135deg, var(--dk-surface), rgba(14, 116, 144, 0.051));
    border-left: 3px solid #33abcc;
}

[data-theme="dark"] .chapter-content hr {
    background: var(--dk-surface);
}

[data-theme="dark"] .interactive-container {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .interactive-container .interactive-title {
    color: #70d0eb;
}

[data-theme="dark"] .series-hero h1 {
    color: var(--dk-text);
}

[data-theme="dark"] .series-hero .series-subtitle {
    color: var(--dk-text);
}

[data-theme="dark"] .series-hero .series-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-card {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-card:hover {
    border-color: #33abcc;
    background: rgba(14, 116, 144, 0.034);
    box-shadow: 0 6px 20px rgba(14, 116, 144, 0.17);
}

[data-theme="dark"] .chapter-card .card-number {
    background: rgba(14, 116, 144, 0.136);
    color: #70d0eb;
}

[data-theme="dark"] .chapter-card .card-title {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-card .card-desc {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-card .card-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-card .topic-tag {
    background: var(--dk-surface);
    color: var(--dk-text);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .learning-path .path-connector {
    background: var(--dk-surface-2);
}

[data-theme="dark"] .dgm-widget {
    border: 1px solid #2f474c;
    background: #182020;
}

[data-theme="dark"] .dgm-widget .w-title {
    color: #70d0eb;
}

[data-theme="dark"] .dgm-widget button {
    color: #70d0eb;
    background: var(--dk-surface);
    border: 1px solid #33abcc;
}

[data-theme="dark"] .dgm-widget button:hover {
    background: #2fb5da;
    color: #f5f5f5;
}

[data-theme="dark"] .dgm-widget button.secondary {
    border-color: #474747;
    color: var(--dk-text);
}

[data-theme="dark"] .dgm-widget button.secondary:hover {
    background: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] .dgm-widget label {
    color: var(--dk-text);
}

[data-theme="dark"] .dgm-widget input[type=range] {
    accent-color: #2fb5da;
}

[data-theme="dark"] .dgm-widget .w-slider-val {
    color: #70d0eb;
}

[data-theme="dark"] .dgm-widget .w-readout {
    color: var(--dk-text);
    background: var(--dk-surface);
    border: 1px solid #30444a;
}

[data-theme="dark"] .dgm-widget .w-note {
    color: var(--dk-text);
}

[data-theme="dark"] .dgm-widget .chip {
    border: 1px solid #474747;
    color: var(--dk-text);
    background: var(--dk-surface);
}

[data-theme="dark"] .dgm-widget .chip.on {
    border-color: #33abcc;
    background: rgba(14, 116, 144, 0.136);
    color: #70d0eb;
}

[data-theme="dark"] .chapter-content .part-marker {
    border-bottom: 2px solid #33abcc;
}

[data-theme="dark"] .chapter-content .part-marker .part-label {
    color: #70d0eb;
}

[data-theme="dark"] .chapter-content .part-marker .part-name {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content .part-marker .part-sub {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content .fig-row .fig-cell {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content img.pixelated {
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .dgm-widget table.w-table th {
    color: #70d0eb;
    border-bottom: 1px solid #2a4a50;
}

[data-theme="dark"] .dgm-widget table.w-table td {
    border-bottom: 1px solid #2d494d;
    color: var(--dk-text);
}

[data-theme="dark"] .dgm-widget table.w-table tr.total td {
    border-top: 1.5px solid #2a4a50;
    color: #70d0eb;
}

[data-theme="dark"] .chapter-content .ref-link {
    color: #70d0eb;
    border-bottom: 1px dotted rgba(69, 201, 237, 0.55);
}

[data-theme="dark"] .chapter-content .ref-link:hover,
[data-theme="dark"] .chapter-content .ref-link:focus {
    background: rgba(14, 116, 144, 0.136);
}

[data-theme="dark"] .ref-pop {
    background: var(--dk-surface);
    border: 1px solid #2a4a50;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.338);
}

[data-theme="dark"] .ref-pop-label {
    color: #70d0eb;
    border-bottom: 1px solid #2d494d;
}

[data-theme="dark"] .ref-pop-body {
    color: var(--dk-text);
}

@media (min-width: 1100px) {
    [data-theme="dark"] .toc-inner::-webkit-scrollbar-thumb {
        background: var(--dk-surface-2);
    }

}

/* ---- derived from Blogs/reinforce_LLMs/rl-notes-style.css ---- */
[data-theme="dark"] .reading-progress {
    background: linear-gradient(90deg, #714abf, #261f33);
}

[data-theme="dark"] .series-breadcrumb {
    color: var(--dk-muted);
}

[data-theme="dark"] .series-breadcrumb a {
    color: var(--dk-muted);
}

[data-theme="dark"] .series-breadcrumb a:hover {
    color: #a086d5;
}

[data-theme="dark"] .chapter-header {
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-number {
    color: #a086d5;
    background: rgba(110, 70, 190, 0.136);
}

[data-theme="dark"] .chapter-header h1 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-title {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-list a {
    color: var(--dk-muted);
}

[data-theme="dark"] .toc-list a:hover {
    color: #a086d5;
}

[data-theme="dark"] .toc-list a.active {
    color: #a086d5;
}

[data-theme="dark"] .chapter-content h2 {
    color: var(--dk-text);
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content h3 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content h4 {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content a {
    color: #a086d5;
    border-bottom: 1px dotted rgba(110, 70, 190, 0.51);
}

[data-theme="dark"] .chapter-content blockquote {
    background: rgba(110, 70, 190, 0.068);
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-content pre {
    background: var(--dk-surface-2);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content p code,
[data-theme="dark"] .chapter-content li code {
    background: rgba(110, 70, 190, 0.102);
    color: var(--dk-text);
}

[data-theme="dark"] .code-copy-btn {
    background: rgba(31, 31, 31, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.208);
    color: var(--dk-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
}

[data-theme="dark"] .code-copy-btn:hover {
    background: #714abf;
    color: #f5f5f5;
}

[data-theme="dark"] .code-copy-btn.copied {
    background: #4cbd52;
    color: #f5f5f5;
    border-color: #45ba4b;
}

[data-theme="dark"] .chapter-link {
    color: #a086d5;
}

[data-theme="dark"] .chapter-link:hover {
    color: #9f85d6;
}

[data-theme="dark"] .chapter-content thead th {
    color: var(--dk-text);
    border-bottom: 2px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-content tbody td {
    border-bottom: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-content tbody tr:hover {
    background: rgba(110, 70, 190, 0.034);
}

[data-theme="dark"] .katex-display .boxed {
    background: rgba(110, 70, 190, 0.051);
}

[data-theme="dark"] .chapter-content figcaption {
    color: var(--dk-muted);
}

[data-theme="dark"] .note-box.definition {
    background: rgba(59, 130, 246, 0.085);
    border-left: 3px solid #5b8ad6;
}

[data-theme="dark"] .note-box.definition .note-label {
    color: #709feb;
}

[data-theme="dark"] .note-box.theorem {
    background: rgba(110, 70, 190, 0.085);
}

[data-theme="dark"] .note-box.theorem .note-label {
    color: #a086d5;
}

[data-theme="dark"] .note-box.intuition {
    background: rgba(245, 158, 11, 0.102);
    border-left: 3px solid #cc9434;
}

[data-theme="dark"] .note-box.intuition .note-label {
    color: #ebb270;
}

[data-theme="dark"] .note-box.implementation {
    background: rgba(16, 185, 129, 0.085);
    border-left: 3px solid #33cc99;
}

[data-theme="dark"] .note-box.implementation .note-label {
    color: #70ebc5;
}

[data-theme="dark"] details.collapsible {
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] details.collapsible summary {
    background: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] details.collapsible summary::before {
    color: #a086d5;
}

[data-theme="dark"] details.collapsible summary:hover {
    background: var(--dk-surface);
}

[data-theme="dark"] details.collapsible .details-content {
    border-top: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-nav {
    border-top: 1px solid var(--dk-border);
}

[data-theme="dark"] .chapter-nav a {
    background: var(--dk-surface);
    border: 1px solid #2a3a51;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.13), 0 2px 4px -1px rgba(0, 0, 0, 0.078);
}

[data-theme="dark"] .chapter-nav a:hover {
    background: rgba(110, 70, 190, 0.068);
    box-shadow: 0 10px 20px -5px rgba(110, 70, 190, 0.204), 0 8px 8px -6px rgba(110, 70, 190, 0.136);
}

[data-theme="dark"] .chapter-nav .nav-title {
    color: var(--dk-text);
}

[data-theme="dark"] .key-takeaways {
    background: linear-gradient(135deg, rgba(110, 70, 190, 0.068), rgba(176, 136, 249, 0.068));
    border: 1px solid rgba(110, 70, 190, 0.204);
}

[data-theme="dark"] .key-takeaways h2 {
    color: #a086d5 !important;
}

[data-theme="dark"] .chapter-intro {
    color: var(--dk-text);
    background: var(--dk-surface);
    border-left: 3px solid var(--dk-border);
}

[data-theme="dark"] .chapter-bridge {
    color: var(--dk-text);
    background: linear-gradient(135deg, var(--dk-surface), rgba(110, 70, 190, 0.051));
}

[data-theme="dark"] .chapter-content hr {
    background: var(--dk-surface);
}

[data-theme="dark"] .interactive-container {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .interactive-container .interactive-title {
    color: #a086d5;
}

[data-theme="dark"] .series-hero h1 {
    color: var(--dk-text);
}

[data-theme="dark"] .series-hero .series-subtitle {
    color: var(--dk-text);
}

[data-theme="dark"] .series-hero .series-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-card {
    border: 1px solid var(--dk-border);
    background: var(--dk-surface);
}

[data-theme="dark"] .chapter-card:hover {
    background: rgba(110, 70, 190, 0.034);
    box-shadow: 0 6px 20px rgba(110, 70, 190, 0.17);
}

[data-theme="dark"] .chapter-card .card-number {
    background: rgba(110, 70, 190, 0.136);
    color: #a086d5;
}

[data-theme="dark"] .chapter-card .card-title {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-card .card-desc {
    color: var(--dk-text);
}

[data-theme="dark"] .chapter-card .card-meta {
    color: var(--dk-muted);
}

[data-theme="dark"] .chapter-card .topic-tag {
    background: var(--dk-surface);
    color: var(--dk-text);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .learning-path .path-connector {
    background: var(--dk-surface-2);
}

@media (min-width: 1100px) {
    [data-theme="dark"] .toc-inner::-webkit-scrollbar-thumb {
        background: var(--dk-surface-2);
    }

}

/* ---- derived from Blogs/cs294-158/cs294-notes-style.css ---- */
[data-theme="dark"] .reading-progress {
    background: linear-gradient(90deg, #358dd4, #6fb3d2);
}


/* ===========================================================
   highlight.js — the pages load the light "github" theme from
   a CDN, so repaint its tokens for the dark ground.
   =========================================================== */
[data-theme="dark"] .hljs,
[data-theme="dark"] pre code.hljs,
[data-theme="dark"] pre code {
    background: var(--dk-surface);
    color: var(--dk-text);
}

[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote {
    color: #8b949e;
}

[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-doctag,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-name,
[data-theme="dark"] .hljs-strong {
    color: #ff7b72;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-title.function_ {
    color: #d2a8ff;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition,
[data-theme="dark"] .hljs-meta-string {
    color: #a5d6ff;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-attribute {
    color: #79c0ff;
}

[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet {
    color: #ffa657;
}

[data-theme="dark"] .hljs-deletion {
    color: #ffa198;
}

/* KaTeX inherits colour, but boxed/framed math draws its own rules */
[data-theme="dark"] .katex .frac-line,
[data-theme="dark"] .katex .overline .overline-line,
[data-theme="dark"] .katex .underline .underline-line {
    border-color: currentColor;
}

/* ===========================================================
   Series index + article pages — dark values derived from the
   inline <style> blocks on those pages.
   =========================================================== */
/* ---- derived from Blogs/deep-gen/index.html ---- */
[data-theme="dark"] .series-overview {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .series-overview h2 {
    color: var(--dk-text);
}

[data-theme="dark"] .series-overview p {
    color: var(--dk-text);
}

[data-theme="dark"] .prereqs {
    border-left: 3px solid #cc9434;
    background: rgba(245, 158, 11, 0.068);
    color: var(--dk-text);
}

[data-theme="dark"] .prereqs strong {
    color: #ebb270;
}

[data-theme="dark"] .divider-label {
    color: var(--dk-muted);
}

[data-theme="dark"] .divider-label::before,
[data-theme="dark"] .divider-label::after {
    background: var(--dk-surface);
}

/* ---- derived from Blogs/reinforce_LLMs/index.html ---- */
[data-theme="dark"] .series-overview {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .series-overview h2 {
    color: var(--dk-text);
}

[data-theme="dark"] .series-overview p {
    color: var(--dk-text);
}

[data-theme="dark"] .series-overview ul {
    color: var(--dk-text);
}

[data-theme="dark"] .prereqs {
    border-left: 3px solid #cc9434;
    background: rgba(245, 158, 11, 0.068);
    color: var(--dk-text);
}

[data-theme="dark"] .prereqs strong {
    color: #ebb270;
}

[data-theme="dark"] .divider-label {
    color: var(--dk-muted);
}

[data-theme="dark"] .divider-label::before,
[data-theme="dark"] .divider-label::after {
    background: var(--dk-surface);
}

/* ---- derived from Blogs/cs294-158/index.html ---- */
[data-theme="dark"] .series-overview {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
}

[data-theme="dark"] .series-overview h2 {
    color: var(--dk-text);
}

[data-theme="dark"] .series-overview p {
    color: var(--dk-text);
}

[data-theme="dark"] .prereqs {
    border-left: 3px solid #cc9434;
    background: rgba(245, 158, 11, 0.068);
    color: var(--dk-text);
}

[data-theme="dark"] .prereqs strong {
    color: #ebb270;
}

[data-theme="dark"] .divider-label {
    color: var(--dk-muted);
}

[data-theme="dark"] .divider-label::before,
[data-theme="dark"] .divider-label::after {
    background: var(--dk-surface);
}



/* The writing index's sections, tags and lecture-notes disclosure
   are body.plain elements styled from plain.css tokens, so their
   dark values follow automatically. */