:root {
                --bg: #ffffff;
                --bg-soft: #f8f7f4;
                --bg-code: #f3f2ed;
                --bg-code-inline: #ebe9e2;
                --ink: #1a1a1a;
                --ink-soft: #4a4a4a;
                --ink-faint: #6e6e6e;
                --rule: #d8d6cf;
                --rule-soft: #e8e6df;
                --accent: #1f4e79;
                --accent-soft: #e6eef5;
                --warn: #8a5a00;
                --warn-soft: #fbf2dc;
                --danger: #8b1a1a;
                --danger-soft: #f9e6e6;
                --good: #1f5e3f;
                --good-soft: #e3efe7;
                --story: #5b3a86;
                --story-soft: #f0eaf6;
                --kw: #1f4e79;
                --str: #6a3b00;
                --num: #2a4d2a;
                --com: #6e6e6e;
            }
            * {
                box-sizing: border-box;
            }
            html,
            body {
                margin: 0;
                padding: 0;
                background: var(--bg);
                color: var(--ink);
                font-family: "Charter", "Georgia", "Cambria", "Times New Roman", Times, serif;
                font-size: 15px;
                line-height: 1.62;
            }
            .wrap {
                max-width: 880px;
                margin: 0 auto;
                padding: 32px 40px 100px;
            }
            header.cover {
                border-bottom: 2px solid var(--ink);
                padding-bottom: 22px;
                margin-bottom: 32px;
            }
            header.cover h1 {
                font-size: 32px;
                margin: 0 0 6px;
                letter-spacing: -0.012em;
                line-height: 1.15;
            }
            header.cover .sub {
                color: var(--ink-soft);
                font-style: italic;
                font-size: 15px;
            }
            header.cover .meta {
                margin-top: 12px;
                font-size: 12px;
                color: var(--ink-faint);
                font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
            }
            h2 {
                font-size: 24px;
                margin: 44px 0 8px;
                padding-bottom: 6px;
                border-bottom: 1px solid var(--rule);
                letter-spacing: -0.005em;
                page-break-after: avoid;
            }
            h3 {
                font-size: 18px;
                margin: 26px 0 6px;
                color: var(--accent);
                page-break-after: avoid;
            }
            h4 {
                font-size: 14px;
                margin: 18px 0 4px;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--ink-soft);
                font-weight: 600;
            }
            p {
                margin: 8px 0 12px;
            }
            code,
            kbd,
            pre,
            .mono {
                font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
            }
            code {
                background: var(--bg-code-inline);
                padding: 1px 5px;
                border-radius: 3px;
                font-size: 12.8px;
            }
            pre {
                background: var(--bg-code);
                border: 1px solid var(--rule);
                border-left: 3px solid var(--accent);
                padding: 14px 16px;
                border-radius: 3px;
                overflow-x: auto;
                margin: 10px 0 14px;
                line-height: 1.55;
                page-break-inside: avoid;
                break-inside: avoid;
            }
            pre code {
                background: transparent;
                padding: 0;
                font-size: 12.8px;
            }
            /* manual KQL syntax tinting via spans, no JS highlighter */
            .k {
                color: var(--kw);
                font-weight: 600;
            }
            .s {
                color: var(--str);
            }
            .n {
                color: var(--num);
            }
            .c {
                color: var(--com);
                font-style: italic;
            }
            .fn {
                color: #5b3a86;
            }
            .t {
                color: #2c4d2a;
                font-weight: 600;
            }
            /* TOC */
            .toc {
                background: var(--bg-soft);
                border: 1px solid var(--rule);
                padding: 16px 24px 14px;
                border-radius: 4px;
                margin: 22px 0 32px;
                font-size: 13.5px;
            }
            .toc h4 {
                margin: 0 0 8px;
                font-size: 12px;
                letter-spacing: 0.06em;
            }
            .toc ol {
                margin: 0;
                padding-left: 22px;
                column-count: 2;
                column-gap: 26px;
                line-height: 1.75;
            }
            .toc a {
                color: var(--accent);
                text-decoration: none;
            }
            .toc a:hover {
                text-decoration: underline;
            }
            /* Callouts: each named for its purpose so they are self-documenting */
            .callout {
                border: 1px solid var(--rule);
                border-left: 4px solid var(--accent);
                background: var(--accent-soft);
                padding: 12px 16px;
                margin: 12px 0 16px;
                border-radius: 0 3px 3px 0;
                font-size: 14px;
                page-break-inside: avoid;
                break-inside: avoid;
            }
            .callout.warn {
                border-left-color: var(--warn);
                background: var(--warn-soft);
            }
            .callout.danger {
                border-left-color: var(--danger);
                background: var(--danger-soft);
            }
            .callout.good {
                border-left-color: var(--good);
                background: var(--good-soft);
            }
            .callout.from-past {
                border-left-color: var(--story);
                background: var(--story-soft);
            }
            .callout .label {
                display: inline-block;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                font-weight: 700;
                color: var(--accent);
                margin-right: 6px;
            }
            .callout.warn .label {
                color: var(--warn);
            }
            .callout.danger .label {
                color: var(--danger);
            }
            .callout.good .label {
                color: var(--good);
            }
            .callout.from-past .label {
                color: var(--story);
            }
            .callout p:last-child {
                margin-bottom: 0;
            }
            .callout p:first-child {
                margin-top: 0;
            }
            /* "Read it out loud" sentence boxes */
            .read-aloud {
                background: #fffbf0;
                border: 1px solid #efe1b8;
                border-left: 4px solid #c89a32;
                padding: 10px 14px;
                margin: 10px 0 14px;
                font-size: 14px;
                font-style: italic;
                color: #5a4715;
                border-radius: 0 3px 3px 0;
            }
            .read-aloud strong {
                font-style: normal;
                color: #4a3a10;
            }
            /* Tables for reference data (Event IDs, schema cards, etc.) */
            table {
                border-collapse: collapse;
                width: 100%;
                margin: 10px 0 16px;
                font-size: 13.5px;
                page-break-inside: avoid;
                break-inside: avoid;
            }
            th,
            td {
                border: 1px solid var(--rule);
                padding: 7px 10px;
                text-align: left;
                vertical-align: top;
            }
            th {
                background: var(--bg-soft);
                font-weight: 600;
                font-size: 13px;
            }
            tbody tr:nth-child(even) td {
                background: #fbfaf6;
            }
            /* Image / screenshot slot */
            .image-slot {
                border: 1.5px dashed #b8b6ae;
                background: repeating-linear-gradient(45deg, #fafaf6, #fafaf6 8px, #f3f2ec 8px, #f3f2ec 16px);
                padding: 22px 18px;
                margin: 14px 0 18px;
                text-align: center;
                color: var(--ink-faint);
                font-size: 13px;
                border-radius: 3px;
                page-break-inside: avoid;
            }
            .image-slot .caption {
                margin-top: 6px;
                font-style: italic;
                font-size: 12px;
            }
            .image-slot img {
                max-width: 100%;
                height: auto;
            }
            /* Exercise cards */
            .exercise {
                border: 1px solid var(--rule);
                border-left: 5px solid var(--accent);
                border-radius: 3px;
                padding: 14px 18px;
                margin: 16px 0 20px;
                background: #fdfdfb;
                page-break-inside: avoid;
                break-inside: avoid;
            }
            .exercise h3 {
                margin: 0 0 6px;
                color: var(--ink);
            }
            .exercise .badge {
                display: inline-block;
                font-size: 10.5px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                padding: 2px 7px;
                border-radius: 10px;
                margin-right: 8px;
                vertical-align: 2px;
                color: white;
                background: var(--accent);
            }
            .exercise details {
                margin-top: 10px;
                border-top: 1px dashed var(--rule);
                padding-top: 10px;
            }
            .exercise details summary {
                cursor: pointer;
                font-weight: 600;
                font-size: 14px;
                color: var(--accent);
                list-style: revert;
            }
            .exercise details[open] summary {
                margin-bottom: 8px;
            }
            /* Print rules */
            @media print {
                body {
                    font-size: 11pt;
                }
                .wrap {
                    max-width: 100%;
                    padding: 0 12mm;
                }
                pre {
                    font-size: 9pt;
                }
                details {
                    display: block;
                }
                details > summary {
                    display: none;
                }
                details > *:not(summary) {
                    display: revert !important;
                }
                .toc ol {
                    column-count: 2;
                }
                .no-print {
                    display: none !important;
                }
                a {
                    color: var(--ink);
                    text-decoration: none;
                }
                .callout,
                .read-aloud,
                .exercise,
                pre,
                table,
                figure {
                    page-break-inside: avoid;
                }
            }
            .toolbar {
                position: sticky;
                top: 0;
                background: rgba(255, 255, 255, 0.96);
                border-bottom: 1px solid var(--rule);
                padding: 8px 0;
                margin: -10px 0 10px;
                font-size: 12.5px;
                z-index: 10;
            }
            .toolbar button {
                font-family: inherit;
                font-size: 12px;
                padding: 4px 10px;
                border: 1px solid var(--rule);
                background: var(--bg-soft);
                border-radius: 3px;
                cursor: pointer;
                margin-right: 6px;
            }
            .toolbar button:hover {
                background: #ebe9e0;
            }
            .small {
                font-size: 12px;
                color: var(--ink-faint);
            }
            hr.thin {
                border: 0;
                border-top: 1px solid var(--rule);
                margin: 22px 0;
            }
            /* Schema mini-cards */
            .schema-card {
                border: 1px solid var(--rule);
                border-radius: 4px;
                padding: 12px 16px;
                margin: 10px 0 14px;
                background: var(--bg-soft);
                font-size: 13.5px;
                page-break-inside: avoid;
            }
            .schema-card h4 {
                margin: 0 0 4px;
                color: var(--accent);
                font-family: ui-monospace, monospace;
                font-size: 13.5px;
                text-transform: none;
                letter-spacing: 0;
            }
            .schema-card .desc {
                font-size: 13px;
                color: var(--ink-soft);
                margin: 4px 0 8px;
            }
            .schema-card .cols {
                font-family: ui-monospace, monospace;
                font-size: 12px;
                color: var(--ink-soft);
                line-height: 1.7;
            }
            .schema-card .cols b {
                color: var(--ink);
                font-weight: 600;
            }
        
    /* 
    Dark theme override - matches palette.
    */
:root {
  --bg: #071512;
  --bg-soft: #0f231c;
  --bg-code: #050f0d;
  --bg-code-inline: #183229;
  --ink: #f4fbf6;
  --ink-soft: #d4e5dc;
  --ink-faint: #90ac9d;
  --rule: rgba(157, 223, 199, 0.20);
  --rule-soft: rgba(157, 223, 199, 0.10);
  --accent: #46d09a;
  --accent-soft: rgba(70, 208, 154, 0.10);
  --warn: #e9c66d;
  --warn-soft: rgba(233, 198, 109, 0.08);
  --danger: #ef9273;
  --danger-soft: rgba(239, 146, 115, 0.08);
  --good: #46d09a;
  --good-soft: rgba(70, 208, 154, 0.08);
  --story: #c8a8e0;
  --story-soft: rgba(200, 168, 224, 0.08);
  --kw: #46d09a;
  --str: #e9c66d;
  --num: #8bf0c3;
  --com: #688679;
  --op: #d4e5dc;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
  background-image:
    radial-gradient(720px 480px at 8% 0%,    rgba(139, 240, 195, 0.06), transparent 60%),
    radial-gradient(540px 320px at 96% 12%,  rgba(160, 42, 30, 0.07),   transparent 58%);
  background-attachment: fixed;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Override hardcoded light values from both cheatsheets */
.challenge,
.callout,
.mscompare,
pre.story,
.read-aloud,
.toolbar,
.toolbar button,
table {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  border-color: var(--rule) !important;
}
.toolbar { background: rgba(7, 21, 18, 0.92) !important; backdrop-filter: blur(8px); }
.toolbar button { color: var(--ink-soft) !important; border: 1px solid var(--rule) !important; }
.toolbar button:hover { background: var(--bg-code-inline) !important; color: var(--accent) !important; }

table td, table th { border-color: var(--rule) !important; color: var(--ink) !important; }
tbody tr:nth-child(even) td { background: rgba(15, 35, 28, 0.4) !important; }

/* Syntax highlight tokens - make them readable on dark */
.fn { color: var(--story) !important; }
.t  { color: var(--num) !important; }

/* Callouts */
.read-aloud {
  background: var(--warn-soft) !important;
  border-left-color: var(--warn) !important;
  color: var(--ink-soft) !important;
  font-style: italic;
}
.read-aloud strong { color: var(--warn) !important; }

/* Code blocks already use --bg-code via :root, plus borders */
pre { border: 1px solid var(--rule) !important; border-left-color: var(--accent) !important; }
code { background: var(--bg-code-inline) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; }
pre code { background: transparent !important; border: none !important; }

/* Headings + accent */
h1, h2, h3, h4 { color: var(--ink) !important; }
h2 { border-bottom-color: var(--rule) !important; }
h3 { color: var(--accent) !important; }

/* Links inside the cheatsheet content area */
.wrap a { color: var(--accent); }
.wrap a:hover { color: #8bf0c3; }

/* TOC styling */
.toc { background: var(--bg-soft) !important; border-color: var(--rule) !important; }
.toc a { color: var(--ink-soft); }
.toc a:hover { color: var(--accent); }

/* Fix exercise cards in dark mode */
.exercise {
    background: var(--bg-soft) !important;
    color: var(--ink) !important;
    border-color: var(--rule) !important;
}

.exercise h3 {
    color: var(--ink) !important;
}

.exercise details summary {
    color: var(--accent) !important;
}

.exercise .badge {
    background: var(--accent) !important;
    color: #071512 !important; /* improves contrast vs white */
}

/* Print-only adjustments preserved */
@media print { body { background: white; color: black; } }