:root { --nav: #0b2a45; --nav2: #12385f; --ink: #102033; --muted: #5e7188; --line: #d9e3ef; --paper: #ffffff; --soft: #f4f8fc; --accent: #174b82; --accent2: #267855; --warning: #fff6cc;
} * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: #eef3f8; line-height: 1.65;
} .app-shell { display: grid; grid-template-columns: 315px minmax(0, 1fr); min-height: 100vh;
} .book-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, #09233c, #0b2a45); color: #fff; padding: 1rem 0.85rem; border-right: 1px solid rgba(255,255,255,0.12);
} .brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem;
} .brand-mark { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #ffffff; color: var(--nav); font-weight: 950;
} .brand strong { display: block; letter-spacing: 0.08em; }
.brand span { display: block; color: #b9c9da; font-size: 0.86rem; } .sidebar-search { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; margin: 0.8rem 0 1rem;
} .sidebar-search input, .sidebar-search button { border: 0; border-radius: 10px; padding: 0.55rem 0.65rem;
} .sidebar-search button { font-weight: 850; color: #fff; background: #2d6aa0;
} .chapter-nav-group { margin: 0.25rem 0; } .chapter-nav-title { display: grid; grid-template-columns: 30px 1fr; gap: 0.55rem; align-items: start; color: #eaf4ff; text-decoration: none; padding: 0.62rem 0.55rem; border-radius: 12px; font-weight: 850;
} .chapter-nav-group.active .chapter-nav-title,
.chapter-nav-title:hover { background: rgba(255,255,255,0.10);
} .chapter-number { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 999px; background: rgba(255,255,255,0.14); font-size: 0.8rem;
} .section-nav { margin: 0.2rem 0 0.8rem 2.2rem; padding: 0; border-left: 1px solid rgba(255,255,255,0.15);
} .section-nav li { list-style: none; } .section-nav a { display: block; color: #cfe1f5; text-decoration: none; padding: 0.35rem 0.65rem; border-radius: 8px; font-size: 0.92rem;
} .section-nav li.sub a { font-size: 0.84rem; font-style: italic; color: #b9cee5;
} .section-nav a:hover { background: rgba(255,255,255,0.09); color: #fff;
} .book-main { min-width: 0; padding: 0 1.5rem 3rem;
} .topbar { position: sticky; top: 0; z-index: 20; display: flex; gap: 1rem; justify-content: flex-end; align-items: center; height: 58px; background: rgba(238,243,248,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
} .topbar a { color: var(--nav2); font-weight: 850; text-decoration: none;
} .sidebar-toggle { margin-right: auto; display: none; border: 0; border-radius: 10px; padding: 0.45rem 0.65rem; background: var(--accent); color: #fff; font-weight: 900;
} .chapter { max-width: 1120px; margin: 0 auto; background: var(--paper); padding: 2.2rem 2.5rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: calc(100vh - 58px);
} .chapter-header { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line);
} .eyebrow { margin: 0 0 0.3rem; color: var(--accent); font-weight: 950; letter-spacing: 0.1em; text-transform: uppercase;
} .chapter h1 { margin: 0; color: var(--nav2); font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1;
} .lead { color: var(--muted); font-size: 1.05rem;
} .chapter-section { margin: 2rem 0; scroll-margin-top: 82px;
} .chapter h2 { color: var(--nav2); font-size: 1.65rem; border-bottom: 1px solid var(--line); padding-bottom: 0.45rem; margin-top: 2rem;
} .chapter h3 { color: #143d66; margin-top: 1.4rem;
} .chapter p { font-size: 1.02rem; } .chapter a { color: #165c9a; } .learningbox,
.keybox,
.definition,
.theorem,
.lemma,
.proposition,
.corollary,
.example,
.remark,
.warningbox,
.algorithm,
.algorithm-card,
.solutionbox { margin: 1.1rem 0; padding: 1rem 1.1rem; border-radius: 18px; border: 1px solid var(--line); background: #fbfdff; box-shadow: 0 10px 25px rgba(16,42,67,0.06);
} .learningbox { background: #f3fbf6; border-color: #cbe9d7; }
.keybox { background: #f6fbff; border-color: #cfe0f2; }
.definition { background: #fbfbff; border-color: #d9d8f0; }
.example { background: #fffdf4; border-color: #efe2a3; }
.solutionbox { background: #fffdf4; border-color: #e8d77b; } .solution-accordion { margin: 0.85rem 0; border: 1px solid #e4d891; border-radius: 16px; background: #fffdf1; overflow: hidden;
} .solution-accordion summary { cursor: pointer; padding: 0.85rem 1rem; color: var(--nav2); font-weight: 950; background: #fff6c8;
} .solution-body { padding: 1rem 1.1rem; border-top: 1px solid #e9dfaa; background: #ffffff;
} .exercise-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0;
} .exercise-actions button,
.card-toolbar button,
.quiz-controls button,
.lab-form button { border: 0; border-radius: 999px; padding: 0.65rem 1rem; font-weight: 900; color: #fff; background: var(--accent); cursor: pointer; box-shadow: 0 8px 20px rgba(16,42,67,0.15);
} .activity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin-top: 1rem;
} .activity-card, .eval-mode-card { display: grid; gap: 0.35rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f8fbff); text-decoration: none; color: var(--ink); box-shadow: 0 10px 25px rgba(16,42,67,0.07);
} .activity-card strong, .eval-mode-card strong { color: var(--nav2); font-size: 1.03rem;
} .activity-card span, .eval-mode-card span { color: var(--muted); font-size: 0.92rem;
} .math { visibility: hidden;
} .math.math-rendered { visibility: visible;
} .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0;
} pre, code { font-family: "Cascadia Mono", "Fira Code", Consolas, monospace;
} pre { border-radius: 16px; padding: 1rem; background: #0b1d31; color: #f4f8fc; overflow-x: auto;
} .book-footer { max-width: 1120px; margin: 0 auto; padding: 1rem 2.5rem; color: var(--muted); font-size: 0.9rem;
} .flash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.85rem; margin-top: 1rem;
} .flip-card { min-height: 120px; border: 0; border-radius: 18px; background: transparent; cursor: pointer; text-align: left;
} .flip-card .front,
.flip-card .back { display: flex; min-height: 120px; align-items: center; justify-content: center; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 28px rgba(16,42,67,0.10); font-weight: 850;
} .flip-card .front { color: var(--nav2); background: linear-gradient(180deg, #fff, #f8fbff);
} .flip-card .back { display: none; color: #164b34; background: linear-gradient(180deg, #fff, #f2fbf6);
} .flip-card.flipped .front { display: none; }
.flip-card.flipped .back { display: flex; } .tool-page { background: #eef3f8;
} .tool-shell { max-width: 1050px; margin: 2rem auto; background: #fff; padding: 2rem; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 35px rgba(16,42,67,0.08);
} .lab-form { display: grid; gap: 0.8rem; max-width: 720px; margin: 1rem 0;
} .lab-form label { display: grid; gap: 0.25rem; font-weight: 800;
} .lab-form input, .lab-form textarea, .lab-form select { border: 1px solid var(--line); border-radius: 12px; padding: 0.65rem; font: inherit;
} .result-box, .quiz-box { margin: 1rem 0; padding: 1rem; border-radius: 18px; border: 1px solid var(--line); background: #f8fbff;
} .drag-list { display: grid; gap: 0.7rem; margin: 1rem 0;
} .drag-item { padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(16,42,67,0.06); cursor: grab; font-weight: 750;
} @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .book-sidebar { position: fixed; z-index: 100; left: 0; top: 0; width: 310px; transform: translateX(-105%); transition: transform 0.2s ease; } body.sidebar-open .book-sidebar { transform: translateX(0); } .sidebar-toggle { display: inline-flex; } .book-main { padding: 0 0.75rem 2rem; } .chapter { padding: 1.3rem 1rem; }
} .solution-body:empty::after{content:"ERROR: empty solution body";color:#a00;font-weight:900}.exercise-card{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:18px;background:#fffdf7}.solutionbox,.theorem,.definition,.proof,.keybox,.warningbox,.summarybox{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:16px;background:#f8fbff} /* v44: display math blocks converted from raw \[...\] to KaTeX nodes */
div.math.display { display: block; margin: 0.85rem auto; text-align: center; overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0.2rem; color: inherit;
}
.math:not(.math-rendered) { visibility: hidden;
}
.math.math-rendered { visibility: visible;
} /* v44: exercise/evaluation/cards/labs entries in the left menu are emphasized */
.section-nav li.special-nav-item > a,
.section-nav a[href*="solutions"],
.section-nav a[href*="interactive"],
.section-nav a[href*="evaluation"],
.section-nav a[href*="cards"],
.section-nav a[href*="game"],
.section-nav a[href*="lab"],
.section-nav a[href*="exercise"],
.section-nav a[href*="problem"] { font-weight: 950 !important; font-style: italic !important; color: #fff2a8 !important; letter-spacing: 0.01em;
} .section-nav li.special-nav-item > a::before,
.section-nav a[href*="solutions"]::before,
.section-nav a[href*="interactive"]::before,
.section-nav a[href*="evaluation"]::before,
.section-nav a[href*="cards"]::before,
.section-nav a[href*="game"]::before,
.section-nav a[href*="lab"]::before,
.section-nav a[href*="exercise"]::before,
.section-nav a[href*="problem"]::before { content: "★ "; font-style: normal; font-weight: 950;
} /* v44: no raw LaTeX titles in the menu; special didactic items are visually separated */
.section-nav li.special-nav-item > a,
.section-nav a[href*="solutions"],
.section-nav a[href*="interactive"],
.section-nav a[href*="evaluation"],
.section-nav a[href*="cards"],
.section-nav a[href*="game"],
.section-nav a[href*="lab"],
.section-nav a[href*="exercise"],
.section-nav a[href*="problem"] { font-weight: 950 !important; font-style: italic !important; color: #fff2a8 !important; letter-spacing: 0.01em;
} .section-nav li.special-nav-item > a::before,
.section-nav a[href*="solutions"]::before,
.section-nav a[href*="interactive"]::before,
.section-nav a[href*="evaluation"]::before,
.section-nav a[href*="cards"]::before,
.section-nav a[href*="game"]::before,
.section-nav a[href*="lab"]::before,
.section-nav a[href*="exercise"]::before,
.section-nav a[href*="problem"]::before { content: "★ "; font-style: normal; font-weight: 950;
} /* v44: clean didactic navigation and table conversion */
.section-nav li.special-nav-item > a,
.section-nav a[href*="solutions"],
.section-nav a[href*="interactive"],
.section-nav a[href*="evaluation"],
.section-nav a[href*="cards"],
.section-nav a[href*="game"],
.section-nav a[href*="lab"],
.section-nav a[href*="exercise"],
.section-nav a[href*="problem"] { font-weight: 950 !important; font-style: italic !important; color: #fff2a8 !important; letter-spacing: 0.01em; }
.section-nav li.special-nav-item > a::before,
.section-nav a[href*="solutions"]::before,
.section-nav a[href*="interactive"]::before,
.section-nav a[href*="evaluation"]::before,
.section-nav a[href*="cards"]::before,
.section-nav a[href*="game"]::before,
.section-nav a[href*="lab"]::before,
.section-nav a[href*="exercise"]::before,
.section-nav a[href*="problem"]::before { content: "★ "; font-style: normal; font-weight: 950; }
.method-comparison-table { width: 100%; border-collapse: collapse; margin: 1rem 0; overflow-x: auto; display: table; font-size: 0.95rem; }
.method-comparison-table th, .method-comparison-table td { border: 1px solid var(--line); padding: 0.55rem 0.65rem; vertical-align: top; }
.method-comparison-table th { background: #edf5ff; color: var(--nav2); } /* v44: special didactic items in the menu */
.section-nav li.special-nav-item > a,
.section-nav a[href*="solutions"],
.section-nav a[href*="interactive"],
.section-nav a[href*="evaluation"],
.section-nav a[href*="cards"],
.section-nav a[href*="game"],
.section-nav a[href*="lab"],
.section-nav a[href*="exercise"],
.section-nav a[href*="problem"] { font-weight: 950 !important; font-style: italic !important; color: #fff2a8 !important; letter-spacing: 0.01em;
}
.section-nav li.special-nav-item > a::before,
.section-nav a[href*="solutions"]::before,
.section-nav a[href*="interactive"]::before,
.section-nav a[href*="evaluation"]::before,
.section-nav a[href*="cards"]::before,
.section-nav a[href*="game"]::before,
.section-nav a[href*="lab"]::before,
.section-nav a[href*="exercise"]::before,
.section-nav a[href*="problem"]::before { content: "★ "; font-style: normal; font-weight: 950;
}
div.math.display { display: block; margin: 0.85rem auto; text-align: center; overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0.2rem;
}
.math:not(.math-rendered) { visibility: hidden; }
.math.math-rendered { visibility: visible; } /* v44: appendix and formula-card styling */
.formula-card-grid { display: grid; gap: 0.85rem; margin: 1rem 0 2rem; }
.formula-card { border: 1px solid #d7e3f1; border-radius: 18px; background: #fbfdff; box-shadow: 0 10px 24px rgba(16,42,67,0.06); overflow: hidden; }
.formula-card summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 950; color: #12385f; background: #eef6ff; }
.formula-card-body { padding: 1rem 1.15rem; background: #ffffff; border-top: 1px solid #d7e3f1; }
.appendix-page .eyebrow { color: #6c3a00; }
.section-nav li.special-nav-item > a,
.section-nav a[href*="solutions"], .section-nav a[href*="interactive"], .section-nav a[href*="evaluation"],
.section-nav a[href*="cards"], .section-nav a[href*="game"], .section-nav a[href*="lab"],
.section-nav a[href*="exercise"], .section-nav a[href*="problem"], .section-nav a[href*="appendix"],
.section-nav a[href*="formula"] { font-weight: 950 !important; font-style: italic !important; color: #fff2a8 !important; letter-spacing: 0.01em;
}
.section-nav li.special-nav-item > a::before,
.section-nav a[href*="solutions"]::before, .section-nav a[href*="interactive"]::before, .section-nav a[href*="evaluation"]::before,
.section-nav a[href*="cards"]::before, .section-nav a[href*="game"]::before, .section-nav a[href*="lab"]::before,
.section-nav a[href*="exercise"]::before, .section-nav a[href*="problem"]::before, .section-nav a[href*="appendix"]::before,
.section-nav a[href*="formula"]::before { content: "★ "; font-style: normal; font-weight: 950; }
div.math.display { display: block; margin: 0.85rem auto; text-align: center; overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0.2rem; }
.math:not(.math-rendered) { visibility: hidden; }
.math.math-rendered { visibility: visible; } /* v44: frontmatter, contents, and web index */
.frontmatter-page .chapter-header { border-left: 6px solid #0f4c81; padding-left: 1.2rem; }
.frontmatter-body table, .contents-index-page table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.frontmatter-body th, .frontmatter-body td, .symbols-table th, .symbols-table td { border-bottom: 1px solid #d7e3f1; padding: 0.55rem 0.65rem; vertical-align: top; }
.symbols-table { width: 100%; border-collapse: collapse; }
.symbols-table .symbol-group th { background: #eef6ff; color: #12385f; text-align: left; font-size: 1.05rem; }
.symbol-cell { width: 28%; white-space: nowrap; }
.toc-grid { display: grid; gap: 0.85rem; }
.toc-card { border: 1px solid #d7e3f1; border-radius: 18px; background: #ffffff; box-shadow: 0 10px 24px rgba(16,42,67,0.06); overflow: hidden; }
.toc-card summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 950; color: #12385f; background: #eef6ff; }
.toc-label { display: inline-block; min-width: 4.5rem; font-weight: 950; color: #0f4c81; }
.toc-section-list { margin: 0; padding: 0.7rem 1.2rem 1rem 2.0rem; }
.toc-level-3 { margin-left: 1.2rem; font-size: 0.94rem; }
.alphabetical-index { columns: 2 20rem; column-gap: 2rem; }
.index-letter { break-after: avoid; color: #0f4c81; border-bottom: 1px solid #d7e3f1; margin-top: 1rem; }
.index-entry { break-inside: avoid; margin: 0.25rem 0; }
.chapter-nav-title[href*="chapter=90"], .chapter-nav-title[href*="chapter=91"], .chapter-nav-title[href*="chapter=92"], .chapter-nav-title[href*="chapter=93"] { background: rgba(255,255,255,0.05); } /* v44: numbered exercise cards with uniform style */
.exercise-card { border: 1px solid #d8e6f4; border-radius: 18px; background: #ffffff; box-shadow: 0 14px 30px rgba(16,42,67,0.06); margin: 1.25rem 0; overflow: hidden;
}
.exercise-card-header { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; padding: 0.85rem 1rem; background: linear-gradient(90deg, #eef6ff, #f8fbff); border-bottom: 1px solid #d8e6f4;
}
.exercise-number { font-weight: 950; color: #ffffff; background: #0f4c81; border-radius: 999px; padding: 0.28rem 0.7rem; letter-spacing: 0.01em;
}
.exercise-tag { font-weight: 900; font-style: italic; color: #6c3a00; background: #fff5d1; border: 1px solid #efd48a; border-radius: 999px; padding: 0.24rem 0.6rem;
}
.exercise-title { font-weight: 950; color: #09243f;
}
.exercise-card-body { padding: 1rem 1.15rem 1.1rem;
}
.exercise-card-body > p:first-child { margin-top: 0;
}
.exercise-card-body .math.display,
.exercise-card-body div.math.display { margin: 0.8rem auto;
}
.solution-accordion summary { font-weight: 950;
} /* v44: full chapters 11--15 from DROPIN_FINAL sources */
.chapter .lead strong.full-source-note { color: #0f4c81;
} /* v44: uniform uploaded-source book styling */
.chapter-header { padding: 1.6rem 0 1.25rem; border-bottom: 1px solid #d7e3f1; margin-bottom: 1.5rem;
}
.chapter-header .eyebrow { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 950; color: #0f4c81; margin-bottom: 0.35rem;
}
.chapter-header h1 { font-size: clamp(2rem, 3.5vw, 3.8rem); line-height: 1.03; margin: 0.2rem 0 0.55rem; color: #09243f;
}
.chapter-section { margin: 1.8rem 0;
}
.chapter-section h2 { font-size: 1.55rem; line-height: 1.25; color: #0b3763; border-bottom: 1px solid #d7e3f1; padding-bottom: 0.45rem; margin-top: 2rem;
}
.chapter-section h3 { font-size: 1.25rem; color: #12385f; margin-top: 1.45rem;
}
.book-box { border: 1px solid #d7e3f1; border-radius: 18px; margin: 1.15rem 0; background: #ffffff; box-shadow: 0 12px 28px rgba(16,42,67,0.06); overflow: hidden;
}
.book-box .box-title { padding: 0.82rem 1rem; font-weight: 950; color: #09243f; background: #eef6ff; border-bottom: 1px solid #d7e3f1;
}
.book-box .box-body { padding: 1rem 1.15rem;
}
.theorem-box .box-title { background: #edf4ff; color: #073763; }
.definition-box .box-title { background: #eefaf2; color: #0f5132; }
.example-box .box-title { background: #fff8e8; color: #6c3a00; }
.proof-box .box-title { background: #f4f1ff; color: #3f2a7a; }
.warning-box .box-title { background: #fff1f1; color: #8a1f1f; }
.key-box .box-title { background: #eef7ff; color: #064b70; }
.learning-box .box-title { background: #edf8f3; color: #0f5132; }
.summary-box .box-title { background: #f8f4ea; color: #5a3c00; }
.algorithm-box .box-title { background: #f0f7ff; color: #083e67; }
.figure-box .box-title { background: #f7f7f7; color: #344054; } .exercise-card { border: 1px solid #d8e6f4; border-radius: 18px; background: #ffffff; box-shadow: 0 14px 30px rgba(16,42,67,0.06); margin: 1.25rem 0; overflow: hidden;
}
.exercise-card-header { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; padding: 0.85rem 1rem; background: linear-gradient(90deg, #eef6ff, #f8fbff); border-bottom: 1px solid #d8e6f4;
}
.exercise-number { font-weight: 950; color: #ffffff; background: #0f4c81; border-radius: 999px; padding: 0.28rem 0.7rem; letter-spacing: 0.01em;
}
.exercise-tag { font-weight: 900; font-style: italic; color: #6c3a00; background: #fff5d1; border: 1px solid #efd48a; border-radius: 999px; padding: 0.24rem 0.6rem;
}
.exercise-title { font-weight: 950; color: #09243f;
}
.exercise-card-body { padding: 1rem 1.15rem 1.1rem;
}
.solution-accordion { border: 1px solid #eadb94; border-radius: 14px; background: #fff8cb; margin: 0.85rem 0; overflow: hidden;
}
.solution-accordion summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 950; color: #09243f;
}
.solution-accordion[open] summary { border-bottom: 1px solid #eadb94;
}
.solution-body { background: #fffdf0; padding: 1rem 1.15rem;
}
.formula-card-grid { display: grid; gap: 0.85rem; margin: 1rem 0 2rem;
}
.formula-card { border: 1px solid #d7e3f1; border-radius: 18px; background: #fbfdff; box-shadow: 0 10px 24px rgba(16,42,67,0.06); overflow: hidden;
}
.formula-card summary { cursor: pointer; padding: 0.85rem 1rem; font-weight: 950; color: #12385f; background: #eef6ff;
}
.formula-card-body { padding: 1rem 1.15rem; background: #ffffff; border-top: 1px solid #d7e3f1;
}
.reference-card { padding: 0.85rem 1rem; border: 1px solid #d7e3f1; border-radius: 14px; margin: 0.75rem 0; background: #ffffff;
}
.ref-key { display: inline-block; font-weight: 950; color: #0f4c81; min-width: 8rem;
}
.symbols-table { width: 100%; border-collapse: collapse;
}
.symbols-table th, .symbols-table td { border-bottom: 1px solid #d7e3f1; padding: 0.55rem 0.65rem; vertical-align: top;
}
.symbols-table .symbol-group th { background: #eef6ff; color: #12385f; text-align: left;
}
.symbol-cell { width: 28%; white-space: nowrap;
}
.qed { text-align: right; font-weight: 950;
} /* v44: professional interactive tools */
.pro-tool-page .tool-shell { max-width: 1180px; }
.tool-nav-pro { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin:0 0 1.4rem; padding:.75rem; border:1px solid #d8e6f4; border-radius:18px; background:#f8fbff; position:sticky; top:.5rem; z-index:5; box-shadow:0 12px 24px rgba(16,42,67,.06); }
.tool-nav-pro a,.tool-nav-pro button,.button-link { appearance:none; border:1px solid #c9d9ea; background:#fff; color:#0f3d66; border-radius:999px; padding:.48rem .8rem; font-weight:850; text-decoration:none; cursor:pointer; }
.tool-nav-pro .tool-nav-main,.tool-nav-pro .active-tool,.tool-nav-pro a:hover,.tool-nav-pro button:hover,.button-link:hover { background:#0f4c81; color:#fff; border-color:#0f4c81; }
.tool-hero { border-left:6px solid #0f4c81; padding:.5rem 0 .75rem 1.2rem; margin-bottom:1rem; }
.tool-hero .eyebrow { text-transform:uppercase; letter-spacing:.12em; font-weight:950; color:#0f4c81; }
.tool-formula,.lab-panel,.diagnostic-card,.quiz-box { border:1px solid #d8e6f4; border-radius:20px; background:#fff; box-shadow:0 14px 30px rgba(16,42,67,.06); padding:1rem; margin:1rem 0; }
.lab-input-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.85rem; }
.lab-input-grid label,.quiz-options label { display:grid; gap:.35rem; font-weight:850; }
.lab-input-grid input,.quiz-options input,.matching-row select { border:1px solid #c9d9ea; border-radius:14px; padding:.65rem .75rem; font-size:1rem; }
.tool-actions,.quiz-controls,.pro-card-toolbar,.quiz-options { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin:1rem 0; }
.tool-actions button,.quiz-controls button,.pro-card-toolbar button,.quiz-options button,.lab-panel button { border:0; background:#0f4c81; color:#fff; border-radius:999px; padding:.62rem 1rem; font-weight:950; cursor:pointer; }
.lab-table { width:100%; border-collapse:collapse; margin:.5rem 0; }
.lab-table th,.lab-table td { border-bottom:1px solid #d8e6f4; text-align:left; padding:.55rem; vertical-align:top; }
.pro-flash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.pro-flip-card { min-height:170px; border:1px solid #d8e6f4; border-radius:22px; background:#fff; box-shadow:0 14px 30px rgba(16,42,67,.08); padding:1rem; text-align:left; cursor:pointer; }
.pro-flip-card .front,.pro-flip-card .back { display:block; }
.pro-flip-card .back { display:none; margin-top:.5rem; color:#16324f; }
.pro-flip-card.is-flipped { background:#f7fbff; border-color:#0f4c81; }
.pro-flip-card.is-flipped .back { display:block; }
.pro-drag-list,.matching-board { display:grid; gap:.75rem; margin:1rem 0; }
.drag-item { border:1px solid #d8e6f4; border-radius:16px; background:#fff; padding:.85rem 1rem; box-shadow:0 10px 22px rgba(16,42,67,.06); cursor:grab; display:flex; gap:.75rem; align-items:center; justify-content:space-between; }
.drag-item.dragging { opacity:.5; }
.drag-handle { color:#0f4c81; font-weight:950; }
.move-buttons { margin-left:auto; display:flex; gap:.25rem; }
.move-buttons button { border:1px solid #c9d9ea; background:#f8fbff; color:#0f4c81; border-radius:10px; padding:.2rem .45rem; cursor:pointer; }
.matching-row { display:grid; grid-template-columns:minmax(180px,.45fr) 1fr; gap:.75rem; align-items:center; border:1px solid #d8e6f4; border-radius:16px; padding:.75rem; background:#fff; }
.matching-term { font-weight:950; color:#09243f; }
.answer-ok { border-color:#2e7d32 !important; background:#f1fbf2 !important; }
.answer-bad { border-color:#b23b3b !important; background:#fff6f6 !important; }
.question-explanation { margin-top:.55rem; padding:.55rem .75rem; background:#f8fbff; border-left:4px solid #0f4c81; border-radius:10px; }
.tool-error { color:#8a1f1f; font-weight:850; }
@media(max-width:720px){ .matching-row{grid-template-columns:1fr;} .tool-nav-pro{position:static;} } /* v44: comparative laboratories with plots and animations */
.comparative-lab-shell { max-width: 1280px; }
.comparative-hero { background: linear-gradient(90deg, #f8fbff, #ffffff); border-radius: 20px; padding: 1rem 1.2rem; }
.method-comparison-card { border: 1px solid #d8e6f4; border-radius: 20px; background: #ffffff; box-shadow: 0 14px 30px rgba(16,42,67,.06); padding: 1rem; margin: 1rem 0;
}
.method-table { width: 100%; border-collapse: collapse;
}
.method-table th,
.method-table td { border-bottom: 1px solid #d8e6f4; padding: .65rem .75rem; text-align: left; vertical-align: top;
}
.method-table thead th { color: #0f4c81; background: #eef6ff;
}
.lab-layout { display: grid; grid-template-columns: minmax(320px, 1.35fr) minmax(280px, .75fr); gap: 1rem; align-items: start;
}
.plot-card,
.result-card { border: 1px solid #d8e6f4; border-radius: 20px; background: #ffffff; box-shadow: 0 14px 30px rgba(16,42,67,.06); padding: 1rem; overflow: hidden;
}
.plot-stage { min-height: 360px; display: grid; place-items: center;
}
.lab-svg { width: 100%; height: auto; display: block;
}
.axis-label { font: 700 16px system-ui, -apple-system, Segoe UI, sans-serif; fill: #17324d;
}
.tick-label,
.legend-label { font: 650 13px system-ui, -apple-system, Segoe UI, sans-serif; fill: #17324d;
}
.plot-caption { margin-top: .75rem; padding: .7rem .85rem; background: #f8fbff; border-left: 4px solid #0f4c81; border-radius: 12px; font-weight: 750;
}
.sticky-actions { position: sticky; top: 4.5rem; z-index: 4; background: rgba(255,255,255,.92); padding: .5rem 0; backdrop-filter: blur(8px);
}
@media (max-width: 900px) { .lab-layout { grid-template-columns: 1fr; } .sticky-actions { position: static; }
} /* v44: clickable concept bubbles and programming practice */
.concept-bubble-trigger { border: 0; background: linear-gradient(180deg, #fff7cf, #ffef98); color: #09243f; border-bottom: 2px dotted #0f4c81; border-radius: 8px; padding: 0 .18rem; font: inherit; cursor: pointer;
}
.concept-bubble-trigger:hover { background: #dff0ff; color: #0f4c81;
}
.concept-popover { position: absolute; z-index: 9999; width: min(430px, calc(100vw - 34px)); background: #ffffff; border: 1px solid #bfd3e8; border-radius: 18px; box-shadow: 0 24px 70px rgba(16,42,67,.25); padding: 1rem;
}
.concept-popover-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .45rem;
}
.concept-type { display: inline-block; background: #0f4c81; color: #ffffff; border-radius: 999px; padding: .2rem .6rem; font-weight: 950; font-size: .8rem; letter-spacing: .03em;
}
.concept-close { border: 0; background: #eef6ff; color: #0f4c81; border-radius: 999px; width: 2rem; height: 2rem; font-size: 1.2rem; cursor: pointer;
}
.concept-popover h3 { margin: .2rem 0 .55rem; color: #09243f;
}
.concept-diagnostic { background: #f8fbff; border-left: 4px solid #0f4c81; border-radius: 10px; padding: .6rem .75rem;
}
.coding-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, .95fr); gap: 1rem; align-items: start;
}
.code-editor-card,
.code-feedback-card { border: 1px solid #d8e6f4; border-radius: 20px; background: #ffffff; box-shadow: 0 14px 30px rgba(16,42,67,.06); padding: 1rem;
}
.code-editor-card textarea { width: 100%; min-height: 340px; resize: vertical; border: 1px solid #c9d9ea; border-radius: 16px; padding: .9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .94rem; line-height: 1.45; background: #0b1624; color: #eff6ff;
}
.corrected-code { white-space: pre-wrap; background: #0b1624; color: #eff6ff; border-radius: 16px; padding: 1rem; overflow: auto;
}
.mini-code-plot { min-height: 180px;
}
.visual-stage { min-height: 440px;
}
.visual-svg text { font-family: system-ui, -apple-system, Segoe UI, sans-serif;
}
@media (max-width: 900px) { .coding-layout { grid-template-columns: 1fr; }
} /* v44: professional plots and animations inserted directly inside the book text */
.inline-visual-explainer { margin: 1.35rem 0 1.6rem; border: 1px solid #c9d9ea; border-radius: 24px; background: linear-gradient(180deg, #ffffff, #f8fbff); box-shadow: 0 18px 44px rgba(16,42,67,.10); overflow: hidden;
}
.inline-visual-header { padding: 1rem 1.1rem .5rem; border-bottom: 1px solid #d8e6f4; background: linear-gradient(90deg, #eef6ff, #ffffff);
}
.inline-visual-label { display: inline-block; background: #0f4c81; color: #ffffff; border-radius: 999px; padding: .24rem .68rem; font-weight: 950; font-size: .8rem; letter-spacing: .03em;
}
.inline-visual-header h3 { margin: .55rem 0 .2rem; color: #09243f; font-size: 1.25rem;
}
.inline-visual-caption { margin: .85rem 1.1rem; color: #23415f; font-weight: 680;
}
.inline-visual-stage { padding: .5rem 1rem 0; min-height: 260px; display: grid; place-items: center;
}
.inline-svg { width: 100%; max-height: 420px; display: block;
}
.inline-visual-actions { display: flex; gap: .55rem; flex-wrap: wrap; padding: .75rem 1.1rem 1rem;
}
.inline-visual-actions button { border: 0; background: #0f4c81; color: #ffffff; border-radius: 999px; padding: .5rem .9rem; font-weight: 950; cursor: pointer;
}
.inline-visual-actions button:hover { filter: brightness(.92);
}
.inline-visual-explainer + p,
.inline-visual-explainer + section { margin-top: 1.2rem;
}
@media (max-width: 760px) { .inline-visual-stage { padding: .25rem .45rem 0; min-height: 220px; } .inline-visual-header, .inline-visual-caption, .inline-visual-actions { padding-left: .8rem; padding-right: .8rem; }
} /* v44: replace omitted source figures with generated professional method graphics */
.pro-method-figure { margin: 1.35rem 0 1.65rem; border: 1px solid #c9d9ea; border-radius: 24px; background: linear-gradient(180deg,#ffffff,#f8fbff); box-shadow: 0 18px 44px rgba(16,42,67,.11); overflow: hidden;
}
.pro-method-figure figcaption { display: grid; gap: .35rem; padding: 1rem 1.1rem .75rem; border-bottom: 1px solid #d8e6f4; background: linear-gradient(90deg,#eef6ff,#ffffff); color: #17324d;
}
.method-figure-label { display: inline-block; width: max-content; background: #0f4c81; color: #ffffff; border-radius: 999px; padding: .24rem .68rem; font-weight: 950; font-size: .8rem; letter-spacing: .03em;
}
.pro-method-figure figcaption strong { font-size: 1.22rem; color: #09243f;
}
.method-figure-stage { padding: .75rem 1rem .25rem; min-height: 290px; display: grid; place-items: center;
}
.method-svg { width: 100%; display: block; max-height: 520px;
}
.method-figure-actions { display: flex; gap: .55rem; flex-wrap: wrap; padding: .75rem 1.1rem 1rem;
}
.method-figure-actions button,
.method-figure-actions a { border: 0; background: #0f4c81; color: #ffffff; border-radius: 999px; padding: .5rem .9rem; font-weight: 950; cursor: pointer; text-decoration: none;
}
.method-figure-actions a { background: #2e7d32;
}
.method-figure-actions button:hover,
.method-figure-actions a:hover { filter: brightness(.92);
}
@media (max-width: 760px) { .method-figure-stage { padding: .35rem .45rem .15rem; min-height: 240px; } .pro-method-figure figcaption, .method-figure-actions { padding-left: .8rem; padding-right: .8rem; }
} /* v44: robust live graphics fixes */
.live-graphics-svg { width: 100%; display: block;
}
.pro-method-figure .method-figure-stage,
.inline-visual-explainer .inline-visual-stage,
.visual-stage { background: #ffffff;
}
.method-figure-actions button,
.inline-visual-actions button,
.tool-actions button { user-select: none;
}
.method-figure-actions button:active,
.inline-visual-actions button:active,
.tool-actions button:active { transform: translateY(1px);
} .chapter-lab-section { margin: 2rem 0; padding: 1rem; border: 1px solid #cfe0f3; border-radius: 22px; background: #f8fbff;
}
.chapter-lab-section > h2 { margin-top: 0;
}



/* v44: clean navigation labels and prevent huge broken appendix titles */
.sidebar a,
.side-nav a,
.book-sidebar a,
.nav-link,
.chapter-link,
.toc a,
.left-nav a {
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.22;
}

.sidebar .appendix-link,
.side-nav .appendix-link,
.book-sidebar .appendix-link {
  font-size: 0.92rem;
  line-height: 1.18;
}

.nav-title,
.sidebar-title,
.book-title {
  line-height: 1.15;
}