:root { color-scheme: dark; /* Same shared palette as Chapter 4/5, deliberately reused, not a new theme. */ --bg: #0b0b0a; --bg-soft: #161512; --panel: #161512; --panel-strong: #221f19; --panel-soft: #1c1a15; --line: #38352c; --text: #f5f1e6; --muted: #c9c4b4; --accent: #5a7fa6; --accent-strong: #8fb3d9; --warm: #e68c57; --code-bg: #0f0e0b; --code-line: #2e2b22; --shadow: 0 24px 54px rgba(15, 0, 35, 0.48); /* Not part of the shared Chapter 4/5 palette: added only to give each Part heading its own distinct, non-purple color. */ --teal: #5fc9c0; --blue: #3d8bff; } * { box-sizing: border-box; } /* Baseline grid overlay, kept at very low opacity so it never competes water mark hidden class selector with real content. Applied via .grid-baseline on . */ .grid-baseline::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMzIwIDE2MCI+PHRleHQgeD0iMCIgeT0iOTAiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjI2IiBmaWxsPSIjZjVmMWU2IiBmaWxsLW9wYWNpdHk9IjAuMDQ1IiB0cmFuc2Zvcm09InJvdGF0ZSgtMjggMTYwIDgwKSI+Rm9saW9WaXN0YSBCb29rczwvdGV4dD48L3N2Zz4="); background-repeat: repeat; } .copy-block, .copy-block * { -webkit-user-select: none; -moz-user-select: none; user-select: none; } html { scroll-behavior: smooth; } body { margin: 0; background: linear-gradient(180deg, var(--bg) 0%, var(--panel) 100%); color: var(--text); font-family: "Source Sans 3", "Segoe UI", "Inter", system-ui, sans-serif; } a { color: inherit; } code { padding: 0.12em 0.4em; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 2, 22, 0.75); color: #f0e0d0; font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace; font-size: 0.94em; line-height: 1; overflow-wrap: anywhere; } .shell { width: min(1140px, calc(100vw - 32px)); margin: 0 auto; padding: 32px 0 72px; } .site-nav-panel { margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(90, 127, 166, 0.12); background: rgba(255, 255, 255, 0.04); } .site-nav-panel p { margin: 0 0 10px; color: var(--warm); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .page-links { display: flex; flex-wrap: wrap; gap: 8px; } .page-links a { padding: 8px 14px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: color 140ms ease, background 140ms ease; } .page-links a:hover, .page-links a:focus-visible { color: var(--text); background: rgba(90, 127, 166, 0.14); } @media (max-width: 720px) { .site-nav-panel { padding: 14px 16px; } } .hero, .section { border-radius: 20px; } .hero { padding: 30px 30px 34px; background: linear-gradient(150deg, #0b0b0a 0%, #0d1420 45%, #111f30 100%); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% -10%, rgba(230, 140, 87, 0.16), transparent 40%); pointer-events: none; } .eyebrow { position: relative; margin: 0 0 12px; color: var(--warm); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } h1, h2, h3, h4, p, figure { margin: 0; } h1, h2, h3, h4 { font-family: "Charter", "Source Serif Pro", "Iowan Old Style", Georgia, serif; font-weight: 700; } h1 { position: relative; max-width: 860px; font-size: clamp(2.1rem, 3.8vw, 3.4rem); line-height: 1.06; color: #e8c589; } h2 { color: var(--accent-strong); font-size: 1.6rem; line-height: 1.1; border-bottom: 1px solid var(--line); padding-bottom: 10px; } #part-1 > h2 { color: #d4a24c; } #part-2 > h2 { color: #dbb06a; } #part-3 > h2 { color: #c9954f; } #part-4 > h2 { color: #e0b878; } #part-5 > h2 { color: #b8874a; } h3 { color: var(--warm); font-size: 1.06rem; line-height: 1.28; } h4 { color: var(--accent-strong); font-size: 0.98rem; line-height: 1.32; } .hero-copy { position: relative; max-width: 820px; margin-top: 14px; color: rgba(243, 236, 250, 0.92); font-size: 1.02rem; line-height: 1.65; } .meta-row, .quick-nav, .figure-grid, .term-grid { display: grid; gap: 14px; } .meta-row { position: relative; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .quick-nav { position: relative; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .figure-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .term-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .meta-card, .manuscript-section, .figure-card, .term-card, .note-panel, .warning-panel, .step-block { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; } .meta-card, .note-panel, .warning-panel { padding: 15px 17px; } .manuscript-section, .figure-card, .term-card { padding: 22px 20px 20px; } .mini-label { display: block; margin-bottom: 7px; color: var(--warm); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .meta-card strong { display: block; margin-bottom: 6px; } .nav-link { display: inline-block; width: fit-content; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.045); text-decoration: none; font-weight: 600; font-size: 0.92rem; } .nav-link:hover { border-color: rgba(90, 127, 166, 0.5); background: rgba(90, 127, 166, 0.14); } .section { margin-top: 26px; padding: 32px 24px 26px; } .section-intro { margin: 10px 0 20px; color: var(--muted); line-height: 1.68; } .manuscript-stack { display: grid; gap: 16px; } .manuscript-section { min-width: 0; background: rgba(255, 255, 255, 0.03); } .manuscript-section h3 { margin-bottom: 14px; } .manuscript-section h4 { margin: 18px 0 10px; } .manuscript-section p { line-height: 1.74; color: var(--muted); } .manuscript-section p + p, .manuscript-section p + ul, .manuscript-section p + ol, .manuscript-section p + pre, .manuscript-section pre + p, .manuscript-section ul + p, .manuscript-section ol + p, .manuscript-section .figure-embed + p, .note-panel p + p { margin-top: 14px; } .table-scroll { margin: 14px 0 0; overflow-x: auto; } .manuscript-section table { width: 100%; min-width: 480px; border-collapse: collapse; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 0.92rem; } .manuscript-section th, .manuscript-section td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); } .manuscript-section thead th { background: rgba(90, 127, 166, 0.14); color: var(--accent-strong); font-weight: 700; text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.08em; } .manuscript-section tbody tr:last-child td { border-bottom: none; } .checklist, .ordered-list { margin: 14px 0 0; padding-left: 18px; } .checklist li, .ordered-list li { margin-bottom: 9px; line-height: 1.66; color: var(--muted); } .checklist li:last-child, .ordered-list li:last-child { margin-bottom: 0; } .code-block { margin: 14px 0 0; padding: 16px 18px; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 14px; border: 1px solid var(--code-line); background: var(--code-bg); color: #f0e6d2; font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace; font-size: 0.92rem; line-height: 1.55; } .code-file-label { display: inline-block; margin: 14px 0 -6px; padding: 5px 11px; border-radius: 8px 8px 0 0; background: rgba(111, 168, 220, 0.14); border: 1px solid rgba(111, 168, 220, 0.3); border-bottom: none; color: var(--text); font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace; font-size: 0.78rem; font-weight: 600; } .callout { margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(90, 127, 166, 0.3); background: linear-gradient(160deg, rgba(90, 127, 166, 0.14), rgba(90, 127, 166, 0.04)), rgba(255, 255, 255, 0.02); } .code-fold { margin: 14px 0 0; } .code-fold-summary { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; border-radius: 8px; background: rgba(230, 140, 87, 0.14); border: 1px solid rgba(230, 140, 87, 0.3); color: var(--warm); font-family: "DejaVu Sans Mono", "Ubuntu Mono", monospace; font-size: 0.78rem; font-weight: 600; cursor: pointer; list-style: none; } .code-fold-summary::-webkit-details-marker { display: none; } .code-fold-summary::before { content: "▸"; font-size: 0.9rem; line-height: 1; } .code-fold[open] > .code-fold-summary::before { content: "▾"; } .code-fold[open] > .code-fold-summary { border-radius: 8px 8px 0 0; border-bottom: none; margin-bottom: -6px; } .code-fold-summary:hover { background: rgba(230, 140, 87, 0.22); } .code-fold-summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .code-fold-meta { color: var(--muted); font-weight: 400; } .code-fold > .code-block { margin-top: 0; } /* Prose fold (C4): bare

wrapping a prose aside, not a code listing. Colour family matches .callout above (var(--accent) is rgba(90, 127, 166, ...) in hex), not a separate purple accent. */ .manuscript-section > details { margin: 14px 0 0; border-left: 3px solid var(--accent); background: rgba(90, 127, 166, 0.06); border-radius: 0 14px 14px 0; padding: 2px 16px; } .manuscript-section > details > summary { cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--accent-strong); list-style: none; } .manuscript-section > details > summary::-webkit-details-marker { display: none; } .manuscript-section > details > summary::before { content: "▸ "; color: var(--accent); } .manuscript-section > details[open] > summary::before { content: "▾ "; } .callout p { line-height: 1.7; } .callout .callout-label { display: block; margin-bottom: 8px; color: var(--accent-strong); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .figure-embed { margin-top: 16px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(6, 1, 16, 0.85); } .figure-link { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; } .figure-embed img { display: block; width: 100%; height: auto; border-radius: 10px; background: #ffffff; } .figure-link:focus-visible img, .figure-link:hover img { outline: 2px solid rgba(90, 127, 166, 0.55); outline-offset: 4px; } .figure-caption { margin-top: 12px; color: var(--muted); font-size: 0.9rem; line-height: 1.6; } .figure-hint { margin-top: 8px; color: var(--accent-strong); font-size: 0.82rem; font-weight: 600; } .note-panel { margin-top: 16px; border-color: rgba(90, 127, 166, 0.28); background: linear-gradient(160deg, rgba(90, 127, 166, 0.16), rgba(90, 127, 166, 0.05)), rgba(255, 255, 255, 0.025); } .warning-panel { margin-top: 16px; border-color: rgba(230, 140, 87, 0.3); background: linear-gradient(180deg, rgba(230, 140, 87, 0.1), rgba(230, 140, 87, 0.03)), rgba(255, 255, 255, 0.02); } .term-card { background: linear-gradient(180deg, rgba(90, 127, 166, 0.08), rgba(90, 127, 166, 0.02)), rgba(255, 255, 255, 0.025); } .term-card h4 { margin-bottom: 8px; color: var(--warm); } .lightbox { width: min(1300px, calc(100vw - 48px)); max-width: 1300px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: rgba(12, 3, 24, 0.97); color: var(--text); box-shadow: 0 30px 68px rgba(0, 0, 0, 0.5); } .lightbox::backdrop { background: rgba(3, 0, 10, 0.82); backdrop-filter: blur(4px); } .lightbox-panel { padding: 20px; } .lightbox-close { display: block; margin-left: auto; margin-bottom: 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .lightbox-close:hover, .lightbox-close:focus-visible { border-color: rgba(90, 127, 166, 0.5); background: rgba(90, 127, 166, 0.14); } .lightbox-image { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: #fff; } .lightbox-caption { margin-top: 14px; color: rgba(243, 236, 250, 0.85); font-size: 0.94rem; line-height: 1.65; } .footer-note { margin-top: 22px; color: var(--muted); text-align: center; font-size: 0.84rem; line-height: 1.65; } .book-tag { display: inline-block; margin: 14px 0 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(90, 127, 166, 0.35); background: rgba(90, 127, 166, 0.12); color: var(--accent-strong); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 720px) { .shell { width: min(1140px, calc(100vw - 20px)); padding-top: 20px; } .hero, .section { border-radius: 16px; padding: 20px 16px; } .code-block { font-size: 0.86rem; } .lightbox { width: min(1300px, calc(100vw - 20px)); } } /* Print / PDF: black-and-grey, matching the existing chapter preview PDFs. The screen theme above (purple gradient, dark panels) is intentionally replaced here, not just dimmed -- printed pages use this block only. */ @media print { :root { color-scheme: light; } body { background: #fff !important; color: #111 !important; } /* Baseline grid overlay, print variant -- darker mark for the light print background. */ .grid-baseline::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMjAiIGhlaWdodD0iMTYwIiB2aWV3Qm94PSIwIDAgMzIwIDE2MCI+PHRleHQgeD0iMCIgeT0iOTAiIGZvbnQtZmFtaWx5PSJHZW9yZ2lhLHNlcmlmIiBmb250LXNpemU9IjI2IiBmaWxsPSIjMTExMTExIiBmaWxsLW9wYWNpdHk9IjAuMDYiIHRyYW5zZm9ybT0icm90YXRlKC0yOCAxNjAgODApIj5Gb2xpb1Zpc3RhIEJvb2tzPC90ZXh0Pjwvc3ZnPg=="); } .shell { width: 100%; padding: 0; } #starting-point-example { break-before: page; page-break-before: always; } .hero, .section { box-shadow: none; border: 1px solid #ccc; border-radius: 12px; background: #fff !important; color: #111 !important; } .hero { margin: 18px; background: #fff !important; break-inside: avoid; page-break-inside: avoid; } .hero::after { display: none; } .section { margin: 18px; } .meta-card, .figure-card, .figure-embed, .figure-section, .term-card, .note-panel, .warning-panel, .callout, .code-block { break-inside: avoid; page-break-inside: avoid; } h2, h3, h4 { break-after: avoid; page-break-after: avoid; } .code-file-label, .mini-label, p:has(> strong:only-child), ul.checklist:has(> li:only-child > strong:only-child) { break-after: avoid; page-break-after: avoid; } .code-file-label { display: block; width: fit-content; } /* Folds (C3/C4): the reliable path is the sed force-open step in Part E, which strips class="code-fold" of its collapsed state before the PDF is generated -- these rules are a belt-and-suspenders backup only, UNVERIFIED per Part G (Chromium's handling of ::details-content in print was never confirmed). Do not rely on this block alone; the Part E probe (grep a fold-only string out of the generated PDF) is what actually proves a fold rendered. */ .code-fold, .code-fold-summary { break-after: avoid; page-break-after: avoid; } .code-fold-summary { display: block; width: fit-content; } .code-fold-summary::before { content: ""; } .code-fold::details-content, .manuscript-section > details::details-content { content-visibility: visible !important; block-size: auto !important; } .manuscript-section > details { border-left-color: #ccc !important; background: #f4f4f4 !important; } .manuscript-section > details > summary { color: #111 !important; } .manuscript-section > details > summary::before { color: #111 !important; } .code-step-section { break-inside: avoid; page-break-inside: avoid; } .code-block-flows { break-inside: auto; page-break-inside: auto; } .figure-section img { max-height: 6in; width: auto; max-width: 100%; margin: 0 auto; } .code-block { font-size: 0.72rem; line-height: 1.3; padding: 10px 12px; } .eyebrow { color: #444 !important; } h1, h2, h3, h4 { color: #111 !important; } h2 { border-bottom-color: #ccc; } .hero-copy, .section-intro, .manuscript-section p, .checklist li, .ordered-list li { color: #222 !important; } .meta-card, .manuscript-section, .figure-card, .term-card, .note-panel, .warning-panel, .callout { background: #f4f4f4 !important; border: 1px solid #ccc !important; color: #111 !important; box-shadow: none; } .code-block { background: #f0f0f0 !important; color: #111 !important; border: 1px solid #bbb !important; } .manuscript-section table { break-inside: avoid; page-break-inside: avoid; border-color: #ccc; } .manuscript-section th, .manuscript-section td { border-bottom-color: #ccc; color: #111 !important; } .manuscript-section thead th { background: #eee !important; color: #444 !important; } code { background: #eaeaea !important; color: #111 !important; border-color: #ccc; } .mini-label, .callout-label, .figure-hint { color: #555 !important; } .figure-embed { background: #fff !important; border-color: #ccc; } .lightbox, .quick-nav, .figure-hint { display: none !important; } a { color: #111 !important; text-decoration: underline; } }