/* The deck kit: styling every LearnSlides deck shares (D13, 2026-09-30).
   Each deck links this before its own <style>, so a deck rule still wins over a kit rule.
   Change the look of all decks here. Extracted from the ten intro decks by
   scratchpad kit/extract_kit.py: a rule used word for word by at least five decks. */

.reveal-viewport { background: var(--bg-deep); }
.reveal { font-size: 30px; font-family: 'DM Sans', -apple-system, sans-serif; }
/* Titles: yellow, sans-serif; pinned to the top (style contract 2026-08-24).
           .slides in the selector outranks the app's slide-base.css. */
        .reveal .slides h1, .reveal .slides h2, .reveal .slides h3 {
            font-family: 'DM Sans', -apple-system, sans-serif; text-transform: none;
            font-weight: 700; letter-spacing: 0.01em; color: var(--accent-yellow);
        }
.reveal h1 { font-size: 1.7em; }
.reveal h2 { font-size: 1.25em; margin-bottom: 0.6em; }
.reveal h3 { font-size: 1.0em; }
.reveal .slides section { text-align: left; padding-top: 44px; }
.reveal .slides section.centered {
            text-align: center; height: 100%; padding-top: 0;
            display: flex; flex-direction: column; justify-content: center;
        }
.reveal .slides section.quiz-engine-slide { height: 100%; padding-top: 0; }
.reveal .slides a { color: var(--accent-blue); }
/* Interactive affordances wear orange (Joseph, note #39) */
        .ix { color: var(--accent-orange); font-weight: 600; }
/* Notebook-style code walk: code left, live outputs right (note #43) */
        .cw-split { display: flex; gap: 20px; align-items: stretch; }
.cw-code { flex: 0 0 56%; }
.cw-out-panel { flex: 1; min-width: 0; overflow: hidden;
                        border: 1px solid rgba(219,228,245,0.18); border-radius: 12px;
                        padding: 14px 16px; background: rgba(255,255,255,0.02);
                        display: flex; flex-direction: column; justify-content: center; }
.cw-print { font-family: 'JetBrains Mono', monospace; font-size: 0.55em;
                    color: #e6ebf5; line-height: 1.7; white-space: pre; }
.cw-print .cw-lbl { color: var(--accent-yellow); }
.cw-out .katex-display { margin: 0.4em 0; }
.flow-node.solid-in  { background: var(--accent-orange); border: none; color: #0d1017; }
.flow-node.solid-out { background: var(--accent-green); border: none; color: #0d1017; }
.small-text { font-size: 21.6px; }
.tiny-text { font-size: 17.4px; }
.muted { color: #dbe4f5; }
.keyword { color: var(--accent-blue); font-weight: 600; }
/* ===== Template Book system: B boxes, K1/K2 key results, C cards, D aside ===== */
        .box-b { position: relative; border: 1px solid rgba(97,175,239,0.32); border-radius: 10px;
                 padding: 0.72em 0.9em 0.52em; margin: 0.85em 0 0.4em; background: transparent; }
.box-b > .tab { position: absolute; top: -0.7em; left: 16px; background: var(--bg-deep);
                 padding: 0 9px; font-family: 'JetBrains Mono', monospace; font-size: 0.5em;
                 font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
                 color: var(--accent-blue); white-space: nowrap; }
.box-b.green  { border-color: rgba(152,195,121,0.32); }
.box-b.green > .tab  { color: var(--accent-green); }
.box-b.red    { border-color: rgba(224,108,117,0.32); }
.box-b.red > .tab    { color: var(--accent-red); }
.box-b.yellow { border-color: rgba(229,192,123,0.32); }
.box-b.yellow > .tab { color: var(--accent-yellow); }
.key-k1 { position: relative; border: 1px solid rgba(152,195,121,0.45); border-radius: 12px;
                  padding: 0.8em 1.1em 0.6em; margin: 1em auto 0.4em; text-align: center;
                  box-shadow: 0 0 22px rgba(152,195,121,0.08) inset, 0 0 14px rgba(152,195,121,0.06); }
.key-k1 > .tab { position: absolute; top: -0.72em; left: 50%; transform: translateX(-50%);
                  background: var(--bg-deep); padding: 0 11px; font-family: 'JetBrains Mono', monospace;
                  font-size: 0.5em; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
                  color: var(--accent-green); white-space: nowrap; }
.key-k2 { background: #6e2a33; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
                  padding: 0.55em 1em; text-align: center; margin: 0.55em auto;
                  box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
.key-k2.blue { background: #274768; }
.box-c { border-radius: 10px; overflow: hidden; margin: 0.3em 0;
                 background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); }
.box-c > .hdr { background: rgba(97,175,239,0.13); color: #cfdcf2; font-weight: 600;
                 font-size: 0.62em; letter-spacing: 1.2px; text-transform: uppercase; padding: 0.42em 1em; }
.box-c > .bod { padding: 0.5em 0.85em 0.6em; font-size: 21.6px; }
.box-c.green  > .hdr { background: rgba(152,195,121,0.13); color: #d3e4c4; }
.box-c.red    > .hdr { background: rgba(224,108,117,0.13); color: #f0cdd1; }
.box-c.yellow > .hdr { background: rgba(229,192,123,0.13); color: #efe0c2; }
.box-c ul { display: block; margin: 0 0 0 1em; }
.eq-box {
            border: 1px solid rgba(219,228,245,0.18);
            border-radius: 12px; padding: 0.45em 0.8em; text-align: center; margin: 0.5em auto;
        }
.two-column { display: flex; gap: 26px; align-items: flex-start; }
.two-column > div { flex: 1; min-width: 0; }
.viz-wrap { text-align: center; }
.viz-wrap svg { background: rgba(255,255,255,0.03); border-radius: 12px; }
.axis text { fill: #dbe4f5; font-size: 15px; }
.axis path, .axis line { stroke: #4a5261; }
.axis-label { fill: #e6ebf5; font-size: 17px; font-weight: 600; }
.viz-controls { display: flex; gap: 22px; justify-content: center; align-items: center;
                    margin-top: 8px; font-size: 0.55em; color: #e6ebf5; flex-wrap: wrap; }
.viz-controls label { display: flex; align-items: center; gap: 8px; }
.viz-controls input[type=range] { width: 150px; accent-color: var(--accent-blue); }
.viz-controls .val { font-family: 'JetBrains Mono', monospace; color: var(--accent-yellow);
                         min-width: 3.2em; display: inline-block; }
.btn {
            background: rgba(97,175,239,0.15); color: #dbe4f5; border: 1px solid rgba(97,175,239,0.4);
            border-radius: 8px; padding: 4px 14px; font-size: 1em; cursor: pointer;
        }
.btn:hover { background: rgba(97,175,239,0.3); }
.btn.active { background: rgba(152,195,121,0.25); border-color: var(--accent-green); }
.data-table { border-collapse: collapse; margin: 0.4em auto; font-size: 0.62em; }
.data-table th { color: var(--accent-yellow); border-bottom: 2px solid #4a5261; padding: 6px 22px; }
.data-table td { border-bottom: 1px solid #333a46; padding: 6px 22px; text-align: center;
                         font-family: 'JetBrains Mono', monospace; }
.data-table .hl { color: var(--accent-cyan); }
.box-title { display: block; font-weight: 650; margin-bottom: 0.3em; color: #e8edf7; }
.highlight-box ul, .principle-box ul, .warning-box ul, .success-box ul {
            display: block; margin: 0.2em 0 0.1em 1.1em; }
.aside-rule { border-left: 2px solid var(--ink-faint, #4a5261); padding-left: 0.8em;
                      color: var(--ink-muted); font-style: italic; margin: 0.5em 0; }
.flow-diagram { display: flex; justify-content: center; align-items: center;
                        gap: 20px; margin: 0.5em 0; }
.flow-node { border-radius: 12px; padding: 0.25em 0.8em; font-size: 1.1em; font-weight: 600; }
.flow-node.in  { background: rgba(97,175,239,0.22); border: 2px solid var(--accent-blue); }
.flow-node.out { background: rgba(152,195,121,0.22); border: 2px solid var(--accent-green); }
.flow-arrow { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.flow-arrow .fn { color: var(--accent-yellow); font-size: 0.75em; }
.reveal pre { width: 88%; margin: 0.5em auto; font-size: 0.76em; line-height: 1.42;
                      font-family: 'JetBrains Mono', Menlo, monospace;
                      box-shadow: 0 8px 26px rgba(0,0,0,0.45); }
.reveal pre code { border-radius: 10px; padding: 18px 22px; max-height: 560px;
                           font-family: 'JetBrains Mono', Menlo, monospace; }
.footnote { position: absolute; bottom: 0.4em; right: 0.8em; font-size: 0.45em; color: #dbe4f5; }
.ix { color: var(--accent-orange); font-weight: 600; }
.box-b.exercise { border-color: rgba(209,154,102,0.65); background: rgba(209,154,102,0.05); }
.box-b.exercise > .tab { color: var(--accent-orange); }
.reveal h2 .sub { display: block; font-size: 0.62em; font-weight: 500; color: #e6ebf5; margin-top: 0.15em; }
/* ===== Shared course tokens (One Dark) ===== */
        :root {
            --bg-deep: #0d1017;
            --accent-blue: #61afef;
            --accent-green: #98c379;
            --accent-yellow: #e5c07b;
            --accent-red: #e06c75;
            --accent-purple: #c678dd;
            --accent-cyan: #56b6c2;
            --accent-orange: #d19a66;
            --ink-muted: #dbe4f5;
        }