/* Custom styling with Quarto-inspired typography */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+Pro:wght@300;400;600;700&family=Source+Code+Pro:wght@300;400;600&display=swap');

:root {
    --pst-color-primary: #2962ff;
    --pst-color-secondary: #1976d2;
    --pst-color-info: #0288d1;
    --pst-color-warning: #f57c00;
    --pst-color-success: #388e3c;
    --pst-color-danger: #d32f2f;
    
    /* Quarto-style typography */
    --pst-font-family-base: "Source Serif Pro", Georgia, Cambria, "Times New Roman", Times, serif;
    --pst-font-family-heading: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --pst-font-family-monospace: "Source Code Pro", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Atom One Dark palette */
    --atom-bg: #282c34;
    --atom-panel: #21252b;
    --atom-surface: #2c313c;
    --atom-elevated: #353b45;
    --atom-border: #3a3f4b;
    --atom-highlight: #2c313c;
    --atom-text: #abb2bf;
    --atom-muted: #98a2b3;
    --atom-accent: #61afef;
    --atom-green: #98c379;
    --atom-cyan: #56b6c2;
    --atom-orange: #d19a66;
    --atom-yellow: #e5c07b;
    --atom-red: #e06c75;
    --atom-purple: #c678dd;
}

/* Header styling */
.bd-header {
    background-color: #1976d2;
}

.bd-header .navbar-brand {
    font-weight: 600;
    font-size: 1.3rem;
}

/* Sidebar styling */
.bd-sidebar {
    border-right: 1px solid #e0e0e0;
}

.bd-sidebar .navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 1.2rem 1.25rem 1rem;
    text-align: center;
}

.bd-sidebar .navbar-brand img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    background-color: #fff;
    padding: 0.5rem;
}

.bd-sidebar .navbar-brand .logo__title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0.3rem 0 0;
}

.bd-sidebar .nav-link {
    padding: 0.5rem 1rem;
    border-left: 3px solid transparent;
}

.bd-sidebar .nav-link.active {
    border-left-color: #2962ff;
    background-color: rgba(41, 98, 255, 0.05);
    font-weight: 600;
}

/* Content area */
.bd-content {
    padding: 2rem;
}

/* Code blocks */
div.highlight {
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Admonitions */
.admonition {
    border-radius: 4px;
    border-left: 4px solid;
}

.admonition.note {
    border-left-color: #2962ff;
}

.admonition.warning {
    border-left-color: #f57c00;
}

.admonition.tip {
    border-left-color: #388e3c;
}

/* Buttons */
.btn-primary {
    background-color: #2962ff;
    border-color: #2962ff;
}

.btn-primary:hover {
    background-color: #1976d2;
    border-color: #1976d2;
}

/* Launch buttons */
.dropdown-buttons button {
    margin: 0.2rem;
}

/* Footer */
.footer-text {
    text-align: center;
    padding: 1rem;
    color: #666;
    font-size: 0.9rem;
}

/* Notebook cells */
.cell {
    margin-bottom: 1.5rem;
}

.cell,
.cell_input,
.cell_output,
.thebe-cell,
.thebe-input,
.thebe-output,
.thebelab-cell,
.thebelab-pre-wrapper {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 400;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cell pre,
.cell code,
.cell_output pre,
.cell_output code,
.thebe-cell pre,
.thebe-cell code,
.thebelab-pre-wrapper pre,
.thebelab-pre-wrapper code {
    font-family: "Source Code Pro", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 400;
}

.cm-s-jupyter.CodeMirror,
.cm-s-default.CodeMirror,
.thebelab-cell .CodeMirror {
    font-weight: 400 !important;
}

.bd-content img.intro-hero-logo {
    display: block;
    margin: 2rem auto;
    width: 75%;
    max-width: 720px;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

table td, table th {
    padding: 0.75rem;
    border: 1px solid #e0e0e0;
}

/* Professional typography - elegant system fonts */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.8;
    font-size: 17px;
    letter-spacing: 0.01em;
    font-weight: 400;
}

.bd-content p {
    line-height: 1.8;
    margin-bottom: 1.3em;
    font-size: 17px;
    color: #374151;
}

/* Elegant heading hierarchy */
.bd-content h1, .bd-content h2, .bd-content h3, 
.bd-content h4, .bd-content h5, .bd-content h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
    letter-spacing: -0.01em;
}

.bd-content h1 {
    font-size: 2.5em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid #e5e7eb;
}

.bd-content h2 {
    font-size: 2em;
    font-weight: 600;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.bd-content h3 {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.bd-content h4 {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.bd-content h5 {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 1.3em;
    margin-bottom: 0.4em;
}

.bd-content h6 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 1.2em;
    margin-bottom: 0.4em;
    color: #6b7280;
}

/* Modern code styling */
code, pre, .highlight {
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
    font-size: 0.88em;
    letter-spacing: 0;
}

pre {
    line-height: 1.6;
    border-radius: 8px;
    padding: 1.2em;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    overflow-x: auto;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

/* ========================================
   MATHEMATICAL EQUATIONS FORMATTING
   ======================================== */

/* Display equations - centered with horizontal scrolling */
.bd-content div.math {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1em 0.5em;
    margin: 1.3em auto;
    max-width: 100%;
    display: block;
    text-align: center;
}

/* Prevent equations from being cut off */
.math {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: block;
    text-align: center;
}

/* MathJax display containers - force scrolling and center */
.MathJax_Display,
mjx-container[display="true"],
mjx-container[display="block"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
    padding: 0.5em 0 !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* MathJax 3 CHTML output containers */
mjx-math {
    display: inline-block !important;
}

/* Wrapper for display equations */
.bd-content p + div.math,
.cell_output div.math {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    text-align: center;
}

/* Better spacing around equations */
.bd-content p + div.math {
    margin-top: 1.2em;
}

.bd-content div.math + p {
    margin-top: 1.2em;
}

/* Visible scrollbar styling for long equations */
div.math::-webkit-scrollbar,
.MathJax_Display::-webkit-scrollbar,
mjx-container[display="true"]::-webkit-scrollbar,
mjx-container[display="block"]::-webkit-scrollbar {
    height: 8px;
}

div.math::-webkit-scrollbar-track,
.MathJax_Display::-webkit-scrollbar-track,
mjx-container[display="true"]::-webkit-scrollbar-track,
mjx-container[display="block"]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
    margin: 0 0.5em;
}

div.math::-webkit-scrollbar-thumb,
.MathJax_Display::-webkit-scrollbar-thumb,
mjx-container[display="true"]::-webkit-scrollbar-thumb,
mjx-container[display="block"]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    border: 2px solid #f1f5f9;
}

div.math::-webkit-scrollbar-thumb:hover,
.MathJax_Display::-webkit-scrollbar-thumb:hover,
mjx-container[display="true"]::-webkit-scrollbar-thumb:hover,
mjx-container[display="block"]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Firefox scrollbar styling */
div.math,
.MathJax_Display,
mjx-container[display="true"],
mjx-container[display="block"] {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Dark mode equation styling */
html[data-theme="dark"] div.math::-webkit-scrollbar-track,
html[data-theme="dark"] .MathJax_Display::-webkit-scrollbar-track,
html[data-theme="dark"] mjx-container[display="true"]::-webkit-scrollbar-track,
html[data-theme="dark"] mjx-container[display="block"]::-webkit-scrollbar-track {
    background: #334155;
}

html[data-theme="dark"] div.math::-webkit-scrollbar-thumb,
html[data-theme="dark"] .MathJax_Display::-webkit-scrollbar-thumb,
html[data-theme="dark"] mjx-container[display="true"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] mjx-container[display="block"]::-webkit-scrollbar-thumb {
    background: #475569;
    border-color: #334155;
}

html[data-theme="dark"] div.math::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .MathJax_Display::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] mjx-container[display="true"]::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] mjx-container[display="block"]::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

html[data-theme="dark"] div.math,
html[data-theme="dark"] .MathJax_Display,
html[data-theme="dark"] mjx-container[display="true"],
html[data-theme="dark"] mjx-container[display="block"] {
    scrollbar-color: #475569 #334155;
}

/* Inline code with minimalist style */
code:not(.highlight code) {
    background-color: rgba(175, 184, 193, 0.15);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    color: #e73e8c;
    font-size: 0.88em;
    font-weight: 500;
    border: 1px solid rgba(175, 184, 193, 0.2);
}

p code, li code, td code {
    background-color: rgba(175, 184, 193, 0.15);
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.88em;
    font-weight: 500;
}

/* Elegant blockquotes */
blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1.5em;
    margin: 1.8em 0;
    font-style: italic;
    color: #6b7280;
    font-size: 1.05em;
}

/* Lists with better spacing */
.bd-content ul, .bd-content ol {
    line-height: 1.8;
    margin-bottom: 1.3em;
    padding-left: 1.8em;
}

.bd-content li {
    margin-bottom: 0.6em;
}

/* Clean, professional links */
.bd-content a {
    color: #2563eb;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.bd-content a:hover {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

/* Minimalist tables */
.bd-content table {
    font-size: 0.95em;
    border-collapse: collapse;
    margin: 1.8em 0;
    width: 100%;
    border: none;
}

.bd-content th {
    font-weight: 600;
    padding: 0.9em 1em;
    border-bottom: 2px solid #d1d5db;
    border-top: 2px solid #d1d5db;
    background-color: transparent;
    text-align: left;
    color: #111827;
}

.bd-content td {
    padding: 0.8em 1em;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.bd-content tbody tr:last-child td {
    border-bottom: 2px solid #d1d5db;
}

.bd-content tbody tr:hover {
    background-color: #f9fafb;
}

/* ========================================
   DARK MODE SUPPORT – ATOM ONE DARK
   ======================================== */

html[data-theme="dark"],
body[data-theme="dark"],
.theme-dark,
body.dark-mode {
    --pst-color-text-base: var(--atom-text);
    --pst-color-background: var(--atom-bg);
    --pst-color-surface: var(--atom-panel);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .bd-content,
body[data-theme="dark"] .bd-content,
.theme-dark body,
.theme-dark .bd-content,
body.dark-mode .bd-content {
    background-color: var(--atom-bg);
    color: var(--atom-text);
}

html[data-theme="dark"] .bd-content p,
body[data-theme="dark"] .bd-content p,
.theme-dark .bd-content p {
    color: var(--atom-text) !important;
}

html[data-theme="dark"] .bd-content h1,
html[data-theme="dark"] .bd-content h2,
html[data-theme="dark"] .bd-content h3,
html[data-theme="dark"] .bd-content h4,
html[data-theme="dark"] .bd-content h5,
html[data-theme="dark"] .bd-content h6 {
    color: #f8fafd !important;
}

html[data-theme="dark"] .bd-content h1 {
    border-bottom-color: var(--atom-border) !important;
}

html[data-theme="dark"] .bd-content h6 {
    color: var(--atom-muted) !important;
}

html[data-theme="dark"] .bd-content img.intro-hero-logo {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .cell,
html[data-theme="dark"] .cell_input,
html[data-theme="dark"] .cell_output,
body[data-theme="dark"] .cell,
body[data-theme="dark"] .cell_input,
body[data-theme="dark"] .cell_output,
.theme-dark .cell,
.theme-dark .cell_input,
.theme-dark .cell_output {
    background-color: var(--atom-panel);
    color: var(--atom-text) !important;
    border: 1px solid var(--atom-border);
    border-radius: 10px;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] div.highlight,
html[data-theme="dark"] .highlight pre {
    background-color: var(--atom-surface) !important;
    color: var(--atom-text) !important;
    border: 1px solid var(--atom-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] code:not(.highlight code),
html[data-theme="dark"] p code,
html[data-theme="dark"] li code,
html[data-theme="dark"] td code {
    background-color: rgba(97, 175, 239, 0.15);
    color: var(--atom-accent);
    border: 1px solid rgba(97, 175, 239, 0.35);
}

html[data-theme="dark"] table {
    color: var(--atom-text);
}

html[data-theme="dark"] table th {
    background-color: transparent;
    color: #f8fafd;
    border-color: var(--atom-border);
}

html[data-theme="dark"] table td {
    border-color: var(--atom-border);
    background-color: transparent;
    color: var(--atom-text);
}

html[data-theme="dark"] tbody tr:last-child td {
    border-bottom-color: var(--atom-border);
}

html[data-theme="dark"] tbody tr:hover {
    background-color: rgba(97, 175, 239, 0.1);
}

html[data-theme="dark"] .bd-content a {
    color: var(--atom-accent);
    border-bottom-color: transparent;
}

html[data-theme="dark"] .bd-content a:hover {
    color: #7cc4ff;
    border-bottom-color: #7cc4ff;
}

html[data-theme="dark"] .admonition {
    background-color: var(--atom-panel);
    color: var(--atom-text);
    border-color: var(--atom-border);
}

html[data-theme="dark"] .bd-sidebar {
    background-color: var(--atom-bg);
    border-right-color: var(--atom-border);
}

html[data-theme="dark"] .bd-sidebar .nav-link {
    color: var(--atom-text);
}

html[data-theme="dark"] .bd-sidebar .nav-link.active {
    background-color: rgba(97, 175, 239, 0.15);
    border-left-color: var(--atom-accent);
}

html[data-theme="dark"] .bd-sidebar .navbar-brand img {
    background-color: #0b1119;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .bd-sidebar .navbar-brand .logo__title {
    color: #f8fafc;
}

html[data-theme="dark"] .output_text,
html[data-theme="dark"] .output_stream,
html[data-theme="dark"] .output_stdout,
html[data-theme="dark"] .output_stderr {
    color: var(--atom-text) !important;
}

html[data-theme="dark"] .jp-OutputArea-output {
    background-color: var(--atom-panel);
    color: var(--atom-text);
}

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

html[data-theme="dark"] .bd-content li {
    color: var(--atom-text);
}

html[data-theme="dark"] img {
    filter: none;
    opacity: 0.92;
}

html[data-theme="dark"] .output_png,
html[data-theme="dark"] .output_jpeg {
    background-color: #111827;
    padding: 10px;
    border-radius: 4px;
}

html[data-theme="dark"] .footer-text {
    color: var(--atom-muted);
    border-top-color: var(--atom-border);
}

html[data-theme="dark"] .footer-text a {
    color: var(--atom-accent);
}

html[data-theme="dark"] .footer-text a:hover {
    color: #7cc4ff;
}

html[data-theme="dark"] .slide-counter {
    color: var(--atom-muted);
}

html[data-theme="dark"] .fullscreen-btn {
    background: var(--atom-accent);
}

html[data-theme="dark"] .fullscreen-btn:hover {
    background: #7cc4ff;
}

html[data-theme="dark"] .new-tab-btn {
    background: var(--atom-border);
}

html[data-theme="dark"] .new-tab-btn:hover {
    background: var(--atom-surface);
}

/* Syntax token colors for Atom One Dark */
html[data-theme="dark"] .highlight .c,
html[data-theme="dark"] .highlight .cm,
html[data-theme="dark"] .highlight .cp,
html[data-theme="dark"] .highlight .c1,
html[data-theme="dark"] .highlight .cs {
    color: #5c6370;
    font-style: italic;
}

html[data-theme="dark"] .highlight .k,
html[data-theme="dark"] .highlight .kd,
html[data-theme="dark"] .highlight .kn,
html[data-theme="dark"] .highlight .kr,
html[data-theme="dark"] .highlight .kt,
html[data-theme="dark"] .highlight .kp,
html[data-theme="dark"] .highlight .nb,
html[data-theme="dark"] .highlight .bp {
    color: var(--atom-purple);
}

html[data-theme="dark"] .highlight .s,
html[data-theme="dark"] .highlight .sb,
html[data-theme="dark"] .highlight .sc,
html[data-theme="dark"] .highlight .sd,
html[data-theme="dark"] .highlight .s1,
html[data-theme="dark"] .highlight .s2,
html[data-theme="dark"] .highlight .se,
html[data-theme="dark"] .highlight .sh,
html[data-theme="dark"] .highlight .si,
html[data-theme="dark"] .highlight .sr,
html[data-theme="dark"] .highlight .ss,
html[data-theme="dark"] .highlight .sx {
    color: var(--atom-green);
}

html[data-theme="dark"] .highlight .m,
html[data-theme="dark"] .highlight .mb,
html[data-theme="dark"] .highlight .mf,
html[data-theme="dark"] .highlight .mh,
html[data-theme="dark"] .highlight .mi,
html[data-theme="dark"] .highlight .il {
    color: var(--atom-orange);
}

html[data-theme="dark"] .highlight .o,
html[data-theme="dark"] .highlight .ow {
    color: var(--atom-text);
}

html[data-theme="dark"] .highlight .n,
html[data-theme="dark"] .highlight .nn,
html[data-theme="dark"] .highlight .nl,
html[data-theme="dark"] .highlight .py,
html[data-theme="dark"] .highlight .nv,
html[data-theme="dark"] .highlight .vc,
html[data-theme="dark"] .highlight .vg,
html[data-theme="dark"] .highlight .vi {
    color: var(--atom-text);
}

html[data-theme="dark"] .highlight .na,
html[data-theme="dark"] .highlight .nt {
    color: var(--atom-cyan);
}

html[data-theme="dark"] .highlight .nf,
html[data-theme="dark"] .highlight .fm,
html[data-theme="dark"] .highlight .nc,
html[data-theme="dark"] .highlight .ne,
html[data-theme="dark"] .highlight .nd {
    color: var(--atom-accent);
}

html[data-theme="dark"] .highlight .no,
html[data-theme="dark"] .highlight .ni,
html[data-theme="dark"] .highlight .bp,
html[data-theme="dark"] .highlight .w {
    color: var(--atom-yellow);
}

html[data-theme="dark"] .highlight .err {
    color: var(--atom-bg);
    background-color: var(--atom-red);
}

/* Live code / Thebe integration */
.thebe-launch-button,
button.thebe-launch-button {
    border-radius: 6px;
    font-weight: 600;
    padding: 0.5em 1.2em;
    border: none;
    background: #111827;
    color: #f9fafb;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.thebe-launch-button:hover,
button.thebe-launch-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .thebe-launch-button,
html[data-theme="dark"] button.thebe-launch-button {
    background: var(--atom-accent);
    color: var(--atom-bg);
    box-shadow: 0 12px 30px rgba(97, 175, 239, 0.35);
}

html[data-theme="dark"] .thebe-launch-button:hover,
html[data-theme="dark"] button.thebe-launch-button:hover {
    background: #7cc4ff;
}

html[data-theme="dark"] .thebe-cell,
html[data-theme="dark"] .thebe-input,
html[data-theme="dark"] .thebe-output,
html[data-theme="dark"] .thebelab-cell,
html[data-theme="dark"] .thebelab-pre-wrapper {
    background-color: var(--atom-panel) !important;
    color: var(--atom-text) !important;
    border: 1px solid var(--atom-border);
    border-radius: 10px;
}

html[data-theme="dark"] .thebe-status,
html[data-theme="dark"] .thebe-status-field,
html[data-theme="dark"] .thebe-status-button,
html[data-theme="dark"] .thebe-buttons button {
    background-color: var(--atom-surface);
    color: var(--atom-text);
    border: 1px solid var(--atom-border);
}

html[data-theme="dark"] .thebe-status-button {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* CodeMirror (live code) overrides */
html[data-theme="dark"] .cm-s-jupyter.CodeMirror,
html[data-theme="dark"] .cm-s-default.CodeMirror,
html[data-theme="dark"] .thebelab-cell .CodeMirror {
    background-color: var(--atom-surface) !important;
    color: var(--atom-text) !important;
    border: 1px solid var(--atom-border) !important;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-scroll,
html[data-theme="dark"] .cm-s-default .CodeMirror-scroll,
html[data-theme="dark"] .thebelab-cell .CodeMirror-scroll {
    background: transparent !important;
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-lines,
html[data-theme="dark"] .cm-s-default .CodeMirror-lines,
html[data-theme="dark"] .thebelab-cell .CodeMirror-lines {
    background: transparent !important;
    background-image: none !important;
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror pre,
html[data-theme="dark"] .cm-s-default .CodeMirror pre,
html[data-theme="dark"] .thebelab-cell .CodeMirror pre {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-code > div,
html[data-theme="dark"] .cm-s-default .CodeMirror-code > div,
html[data-theme="dark"] .thebelab-cell .CodeMirror-code > div {
    border-bottom: none !important;
    background: transparent !important;
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-linebackground,
html[data-theme="dark"] .cm-s-default .CodeMirror-linebackground,
html[data-theme="dark"] .thebelab-cell .CodeMirror-linebackground,
html[data-theme="dark"] .cm-s-jupyter .CodeMirror-linewidget,
html[data-theme="dark"] .cm-s-default .CodeMirror-linewidget,
html[data-theme="dark"] .thebelab-cell .CodeMirror-linewidget {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-gutters,
html[data-theme="dark"] .cm-s-default .CodeMirror-gutters {
    background: var(--atom-panel) !important;
    border-right: 1px solid var(--atom-border);
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-linenumber,
html[data-theme="dark"] .cm-s-default .CodeMirror-linenumber {
    color: var(--atom-muted);
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-activeline-background,
html[data-theme="dark"] .cm-s-default .CodeMirror-activeline-background {
    background: rgba(97, 175, 239, 0.12) !important;
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-activeline-gutter,
html[data-theme="dark"] .cm-s-default .CodeMirror-activeline-gutter {
    background: rgba(97, 175, 239, 0.12) !important;
    color: var(--atom-text);
}

html[data-theme="dark"] .cm-s-jupyter .CodeMirror-cursor,
html[data-theme="dark"] .cm-s-default .CodeMirror-cursor {
    border-left: 2px solid var(--atom-accent) !important;
}

/* Syntax colors for CodeMirror */
html[data-theme="dark"] .cm-s-jupyter span.cm-keyword,
html[data-theme="dark"] .cm-s-default span.cm-keyword,
html[data-theme="dark"] .cm-s-jupyter span.cm-atom {
    color: var(--atom-purple) !important;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-def,
html[data-theme="dark"] .cm-s-default span.cm-def,
html[data-theme="dark"] .cm-s-jupyter span.cm-builtin,
html[data-theme="dark"] .cm-s-default span.cm-builtin,
html[data-theme="dark"] .cm-s-jupyter span.cm-variable-3,
html[data-theme="dark"] .cm-s-default span.cm-variable-3 {
    color: var(--atom-accent) !important;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-variable-2,
html[data-theme="dark"] .cm-s-default span.cm-variable-2,
html[data-theme="dark"] .cm-s-jupyter span.cm-tag,
html[data-theme="dark"] .cm-s-default span.cm-tag {
    color: var(--atom-cyan) !important;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-string,
html[data-theme="dark"] .cm-s-default span.cm-string,
html[data-theme="dark"] .cm-s-jupyter span.cm-string-2,
html[data-theme="dark"] .cm-s-default span.cm-string-2 {
    color: var(--atom-green) !important;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-number,
html[data-theme="dark"] .cm-s-default span.cm-number {
    color: var(--atom-orange) !important;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-operator,
html[data-theme="dark"] .cm-s-default span.cm-operator,
html[data-theme="dark"] .cm-s-jupyter span.cm-property,
html[data-theme="dark"] .cm-s-default span.cm-property {
    color: var(--atom-text) !important;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-comment,
html[data-theme="dark"] .cm-s-default span.cm-comment {
    color: #5c6370 !important;
    font-style: italic;
}

html[data-theme="dark"] .cm-s-jupyter span.cm-error,
html[data-theme="dark"] .cm-s-default span.cm-error {
    color: var(--atom-bg) !important;
    background: var(--atom-red) !important;
}

/* Plot and media adjustments */
html[data-theme="dark"] .cell_output img,
html[data-theme="dark"] .output_area img,
html[data-theme="dark"] .cell_output_wrapper img,
html[data-theme="dark"] div.cell img {
    background-color: transparent !important;
}

html[data-theme="dark"] .cell_output,
html[data-theme="dark"] .output_area,
html[data-theme="dark"] .cell_output_wrapper,
html[data-theme="dark"] div.cell div.output {
    background-color: transparent !important;
}

html[data-theme="dark"] .jp-RenderedImage,
html[data-theme="dark"] .jp-OutputArea-output {
    background-color: transparent !important;
}

html[data-theme="dark"] .cell_output img,
html[data-theme="dark"] .output_area img {
    filter: brightness(1.15) contrast(1.05);
    mix-blend-mode: normal;
}

/* ========================================
   PRESENTATION VIEWER
   ======================================== */

.presentation-wrapper {
    margin: 2em 0;
}

.presentation-controls-top {
    display: flex;
    gap: 0.75em;
    margin-bottom: 1em;
    justify-content: flex-end;
}

.fullscreen-btn,
.new-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.2em;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.fullscreen-btn:hover,
.new-tab-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.new-tab-btn {
    background: #6b7280;
}

.new-tab-btn:hover {
    background: #4b5563;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.presentation-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
}

.presentation-container iframe {
    display: block;
    width: 100%;
    min-height: 600px;
    border: none;
}

.presentation-controls-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-top: 1em;
    padding: 1em;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1em;
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    transform: translateY(-1px);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn svg {
    flex-shrink: 0;
}

.slide-counter {
    padding: 0 1em;
    color: #6b7280;
    font-size: 0.9em;
    font-weight: 500;
}

/* Fullscreen mode styles */
.presentation-container:fullscreen {
    background: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.presentation-container:fullscreen iframe {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

/* Responsive presentation sizing */
@media (max-width: 768px) {
    .presentation-container iframe {
        min-height: 400px;
    }
    
    .presentation-controls-top {
        flex-direction: column;
    }
    
    .presentation-controls-bottom {
        flex-wrap: wrap;
        gap: 0.5em;
    }
    
    .nav-btn {
        font-size: 0.85em;
        padding: 0.5em 0.8em;
    }
    
    .slide-counter {
        width: 100%;
        text-align: center;
        padding: 0.5em 0;
    }
}

/* Dark mode presentation styles */
html[data-theme="dark"] .presentation-container {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    border: 1px solid #374151;
}

html[data-theme="dark"] .presentation-controls-bottom {
    background: #1e293b;
    border-color: #334155;
}

html[data-theme="dark"] .nav-btn {
    background: #334155;
    color: #e5e7eb;
    border-color: #475569;
}

html[data-theme="dark"] .nav-btn:hover {
    background: #475569;
    border-color: #64748b;
}

/* ========================================
   CUSTOM FOOTER STYLING
   ======================================== */

/* Hide default copyright notice */
.bd-footer-copyright {
    display: none !important;
}

/* Style the footer text */
.footer-text {
    text-align: center;
    font-size: 0.9em;
    color: #6b7280;
    padding: 1.5em 0;
    border-top: 1px solid #e5e7eb;
}

.footer-text a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-text a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Dark mode footer */
html[data-theme="dark"] .footer-text {
    color: #9ca3af;
    border-top-color: #374151;
}

html[data-theme="dark"] .footer-text a {
    color: #60a5fa;
}

html[data-theme="dark"] .footer-text a:hover {
    color: #93c5fd;
}

html[data-theme="dark"] .slide-counter {
    color: #9ca3af;
}

html[data-theme="dark"] .fullscreen-btn {
    background: #2563eb;
}

html[data-theme="dark"] .fullscreen-btn:hover {
    background: #1d4ed8;
}

html[data-theme="dark"] .new-tab-btn {
    background: #475569;
}

html[data-theme="dark"] .new-tab-btn:hover {
    background: #334155;
}

/* Force transparent/dark backgrounds for all plot images */
html[data-theme="dark"] .cell_output img,
html[data-theme="dark"] .output_area img,
html[data-theme="dark"] .cell_output_wrapper img,
html[data-theme="dark"] div.cell img {
    background-color: transparent !important;
    background: transparent !important;
}

/* Remove any white/light backgrounds from output containers */
html[data-theme="dark"] .cell_output,
html[data-theme="dark"] .output_area,
html[data-theme="dark"] .cell_output_wrapper,
html[data-theme="dark"] div.cell div.output {
    background-color: transparent !important;
    background: transparent !important;
}

/* Ensure matplotlib figure containers have no background */
html[data-theme="dark"] .jp-RenderedImage,
html[data-theme="dark"] .jp-OutputArea-output {
    background-color: transparent !important;
}

/* Enhance plot visibility in dark mode with subtle brightness boost */
/* This helps dark text remain readable without inverting colors */
html[data-theme="dark"] .cell_output img,
html[data-theme="dark"] .output_area img {
    filter: brightness(1.15) contrast(1.05);
    mix-blend-mode: normal;
}