/* Hallmark · genre: editorial · macrostructure: Index-First · theme: Almanac (warm OKLCH) * nav: N6 masthead · footer: Ft4 colophon · design-system: design.md · designed-as-app * pre-emit critique: P5 H5 E4 S5 R5 V5 * A warm editorial "almanac" reskin of the shared Drafting Table system: * Fraunces + Newsreader + IBM Plex Mono, ivory paper, oxblood ink accent. * Every class name is preserved — this is a token + component reskin, not a rewrite. */ @import url("print.css") print; /* shared black-on-white print / PDF rules */ @import url("prism.css"); /* Prism.js syntax highlighting (theme + slab override) */ /* ============================================================================ DRAFTING TABLE — shared design system for the study notes ---------------------------------------------------------------------------- A cool blueprint-paper aesthetic for code-dense reference reading. Link this from any note page and set . Everything is driven by the variables in :root, so a new subject is one accent swap. Legacy class aliases at the bottom let older pages adopt the system without rewriting their markup first. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap'); /* ── Tokens ───────────────────────────────────────────────────────────── */ :root { /* type — an editorial trio: serif display, serif text, mono for labels + code */ --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; --font-body: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* paper + ink — warm ivory stock, sepia-black ink */ --paper: oklch(96.5% 0.015 85); --paper-2: oklch(93.8% 0.019 82); /* recessed wells */ --card: oklch(98.4% 0.010 88); /* raised surfaces */ --ink: oklch(27% 0.022 55); /* primary text */ --ink-soft: oklch(43% 0.024 52); /* secondary text */ --ink-faint: oklch(57% 0.022 58); /* captions, meta */ --hairline: oklch(86% 0.018 78); --hairline-2: oklch(90% 0.015 82); --grid: oklch(50% 0.02 60 / 0.05); /* the ink slab used for code — warm espresso, not cold navy */ --slab: oklch(26% 0.020 55); --slab-line: oklch(21% 0.018 52); --slab-text: oklch(90% 0.014 82); /* per-subject accent — overridden by [data-cat] below (default: oxblood) */ --accent: oklch(47% 0.13 30); --accent-soft: oklch(47% 0.13 30 / 0.12); --accent-line: oklch(47% 0.13 30 / 0.30); /* semantic callout hues (stable across subjects) */ --note: oklch(50% 0.09 235); --note-bg: oklch(50% 0.09 235 / 0.10); --tip: oklch(48% 0.10 150); --tip-bg: oklch(48% 0.10 150 / 0.10); --warn: oklch(56% 0.11 62); --warn-bg: oklch(56% 0.11 62 / 0.12); --danger: oklch(51% 0.15 28); --danger-bg: oklch(51% 0.15 28 / 0.10); --muse: oklch(52% 0.13 300); --muse-bg: oklch(52% 0.13 300 / 0.10); /* code tokens (on the espresso slab) */ --tk-com: oklch(62% 0.02 60); --tk-kw: oklch(70% 0.13 28); --tk-type: oklch(74% 0.09 185); --tk-str: oklch(76% 0.12 128); --tk-fn: oklch(80% 0.12 74); --tk-num: oklch(74% 0.13 45); --tk-punc: oklch(70% 0.02 60); /* surface highlights + inline code (flip in dark mode) */ --vignette: oklch(100% 0 0 / 0.55); --edge-hi: oklch(100% 0 0 / 0.5); --inline-bg: oklch(45% 0.03 55 / 0.09); --maxw: 940px; --rail: 232px; --radius: 8px; --radius-sm: 5px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* per-subject inks — retuned as printed almanac inks in the warm palette */ [data-cat="java"] { --accent:oklch(56% 0.11 66); --accent-soft:oklch(56% 0.11 66 / 0.13); --accent-line:oklch(56% 0.11 66 / 0.30); } [data-cat="sql"] { --accent:oklch(52% 0.085 205); --accent-soft:oklch(52% 0.085 205 / 0.13); --accent-line:oklch(52% 0.085 205 / 0.30); } [data-cat="dsa"] { --accent:oklch(50% 0.11 150); --accent-soft:oklch(50% 0.11 150 / 0.13); --accent-line:oklch(50% 0.11 150 / 0.30); } [data-cat="react"] { --accent:oklch(53% 0.10 245); --accent-soft:oklch(53% 0.10 245 / 0.13); --accent-line:oklch(53% 0.10 245 / 0.30); } [data-cat="fsd"] { --accent:oklch(49% 0.12 353); --accent-soft:oklch(49% 0.12 353 / 0.13); --accent-line:oklch(49% 0.12 353 / 0.30); } [data-cat="js"] { --accent:oklch(58% 0.11 82); --accent-soft:oklch(58% 0.11 82 / 0.14); --accent-line:oklch(58% 0.11 82 / 0.32); } [data-cat="projects"] { --accent:oklch(55% 0.15 45); --accent-soft:oklch(55% 0.15 45 / 0.13); --accent-line:oklch(55% 0.15 45 / 0.30); } [data-cat="ai"] { --accent:oklch(52% 0.14 300); --accent-soft:oklch(52% 0.14 300 / 0.13); --accent-line:oklch(52% 0.14 300 / 0.32); } [data-cat="sd"] { --accent:oklch(51% 0.085 190); --accent-soft:oklch(51% 0.085 190 / 0.13); --accent-line:oklch(51% 0.085 190 / 0.30); } [data-cat="python"] { --accent:oklch(51% 0.095 255); --accent-soft:oklch(51% 0.095 255 / 0.13); --accent-line:oklch(51% 0.095 255 / 0.30); } [data-cat="bbg"] { --accent:oklch(48% 0.13 285); --accent-soft:oklch(48% 0.13 285 / 0.13); --accent-line:oklch(48% 0.13 285 / 0.30); } [data-cat="finance"] { --accent:oklch(50% 0.10 195); --accent-soft:oklch(50% 0.10 195 / 0.13); --accent-line:oklch(50% 0.10 195 / 0.30); } /* ── Dark mode — remap the surface tokens; everything else inherits ────── */ [data-theme="dark"] { --paper:oklch(22% 0.014 62); --paper-2:oklch(19% 0.013 60); --card:oklch(26% 0.015 62); --ink:oklch(91% 0.014 85); --ink-soft:oklch(74% 0.016 78); --ink-faint:oklch(60% 0.016 72); --hairline:oklch(35% 0.015 60); --hairline-2:oklch(31% 0.014 58); --grid:oklch(80% 0.02 80 / 0.05); --slab:oklch(17% 0.012 55); --slab-line:oklch(13% 0.010 52); --slab-text:oklch(90% 0.014 82); --vignette:oklch(75% 0.06 70 / 0.08); --edge-hi:oklch(100% 0 0 / 0.04); --inline-bg:oklch(85% 0.03 80 / 0.10); --accent:oklch(67% 0.14 38); --accent-soft:oklch(67% 0.14 38 / 0.16); --accent-line:oklch(67% 0.14 38 / 0.34); } /* brightened per-subject inks for legibility on dark stock */ [data-theme="dark"][data-cat="java"] { --accent:oklch(78% 0.12 74); --accent-soft:oklch(78% 0.12 74 / 0.16); --accent-line:oklch(78% 0.12 74 / 0.34); } [data-theme="dark"][data-cat="sql"] { --accent:oklch(74% 0.10 200); --accent-soft:oklch(74% 0.10 200 / 0.16); --accent-line:oklch(74% 0.10 200 / 0.34); } [data-theme="dark"][data-cat="dsa"] { --accent:oklch(76% 0.14 150); --accent-soft:oklch(76% 0.14 150 / 0.16); --accent-line:oklch(76% 0.14 150 / 0.34); } [data-theme="dark"][data-cat="react"] { --accent:oklch(74% 0.11 245); --accent-soft:oklch(74% 0.11 245 / 0.16); --accent-line:oklch(74% 0.11 245 / 0.34); } [data-theme="dark"][data-cat="fsd"] { --accent:oklch(74% 0.13 350); --accent-soft:oklch(74% 0.13 350 / 0.16); --accent-line:oklch(74% 0.13 350 / 0.34); } [data-theme="dark"][data-cat="js"] { --accent:oklch(82% 0.13 85); --accent-soft:oklch(82% 0.13 85 / 0.16); --accent-line:oklch(82% 0.13 85 / 0.34); } [data-theme="dark"][data-cat="projects"] { --accent:oklch(74% 0.15 48); --accent-soft:oklch(74% 0.15 48 / 0.16); --accent-line:oklch(74% 0.15 48 / 0.34); } [data-theme="dark"][data-cat="ai"] { --accent:oklch(76% 0.14 300); --accent-soft:oklch(76% 0.14 300 / 0.16); --accent-line:oklch(76% 0.14 300 / 0.34); } [data-theme="dark"][data-cat="sd"] { --accent:oklch(74% 0.10 190); --accent-soft:oklch(74% 0.10 190 / 0.16); --accent-line:oklch(74% 0.10 190 / 0.34); } [data-theme="dark"][data-cat="python"] { --accent:oklch(73% 0.11 255); --accent-soft:oklch(73% 0.11 255 / 0.16); --accent-line:oklch(73% 0.11 255 / 0.34); } [data-theme="dark"][data-cat="bbg"] { --accent:oklch(75% 0.13 285); --accent-soft:oklch(75% 0.13 285 / 0.16); --accent-line:oklch(75% 0.13 285 / 0.34); } [data-theme="dark"][data-cat="finance"] { --accent:oklch(74% 0.11 195); --accent-soft:oklch(74% 0.11 195 / 0.16); --accent-line:oklch(74% 0.11 195 / 0.34); } /* ── Theme toggle (injected by notes.js into the top bar / masthead) ───── */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; padding:0; cursor:pointer; color:var(--ink-soft); background:var(--card); border:1px solid var(--hairline); border-radius:8px; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .theme-toggle:hover { color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); } .theme-toggle svg { width:16px; height:16px; } /* ── Bookmark: pin button (topbar), one global pinned spot ─────────────── */ .pin-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; padding:0; cursor:pointer; color:var(--ink-soft); background:var(--card); border:1px solid var(--hairline); border-radius:8px; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .pin-toggle:hover { color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); } .pin-toggle svg { width:16px; height:16px; } .pin-toggle.active { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); } .pin-toggle.active svg path, .pin-toggle.active svg circle { fill:currentColor; } /* ── Bookmark: floating resume chip (auto last-visit / manual pin) ─────── */ .resume-chip { position:fixed; left:16px; bottom:18px; z-index:59; display:inline-flex; align-items:center; gap:9px; max-width:min(80vw, 360px); padding:8px 9px 8px 13px; background:var(--card); border:1px solid var(--hairline); border-radius:999px; box-shadow:0 14px 30px -18px rgba(0,0,0,0.35); text-decoration:none; color:var(--ink); animation:resume-in .32s var(--ease); } .resume-chip:hover { border-color:var(--accent-line); transform:translateY(-2px); } .resume-chip svg { width:15px; height:15px; flex:none; color:var(--accent); } .resume-chip .rc-text { min-width:0; overflow:hidden; } .resume-chip .rc-kind { display:block; font:600 0.6rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px; } .resume-chip .rc-label { display:block; font:500 0.82rem/1.3 var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .resume-chip .rc-close { flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-faint); border-radius:50%; margin-left:2px; background:none; border:0; cursor:pointer; } .resume-chip .rc-close:hover { color:var(--ink); background:var(--paper-2); } .resume-chip .rc-close svg { width:12px; height:12px; color:inherit; } @keyframes resume-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } @media print { .resume-chip, .pin-toggle { display:none !important; } } /* ── Bookmark: bigger inline "continue reading" card (index page) ──────── */ .resume-card { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; background:var(--card); border:1px solid var(--accent-line); border-radius:var(--radius); text-decoration:none; color:inherit; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .resume-card + .resume-card { margin-top:12px; } .resume-card:hover { transform:translateY(-2px); box-shadow:0 16px 36px -26px rgba(52,38,26,0.55); } .resume-card .rc-ico { flex:none; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; background:var(--accent-soft); color:var(--accent); } .resume-card .rc-ico svg { width:18px; height:18px; } .resume-card .rc-body { flex:1; min-width:0; } .resume-card .rc-kind { display:block; font:600 0.68rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; } .resume-card .rc-title { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); } .resume-card .rc-go { flex:none; display:inline-flex; align-items:center; gap:6px; font:500 0.78rem/1 var(--font-mono); color:var(--accent); } .resume-card .rc-go svg { width:13px; height:13px; } #resume-slot:empty { display:none; } #resume-slot { margin-bottom:clamp(28px,5vw,40px); } /* ── Reset ────────────────────────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:84px; } body { font-family:var(--font-body); color:var(--ink); background-color:var(--paper); /* warm paper stock + a soft top-light — no cold blueprint grid */ background-image: radial-gradient(125% 78% at 50% -8%, var(--vignette), transparent 62%); background-attachment: fixed; font-size:1.02rem; line-height:1.72; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ── Top bar (the bound edge) ─────────────────────────────────────────── */ .topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; /* keep the bar full-bleed, but align its contents to the centered reading column so the back-link sits directly above the body text */ padding-block:13px; padding-inline:calc(max((100% - var(--maxw)) / 2, 0px) + clamp(18px, 5vw, 40px)); background:color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hairline); box-shadow:0 1px 0 var(--edge-hi) inset, 0 -3px 0 var(--accent) inset; } .topbar a.home { display:inline-flex; align-items:center; gap:7px; font:500 0.82rem/1 var(--font-body); color:var(--ink-soft); text-decoration:none; padding:6px 11px 6px 8px; border-radius:8px; border:1px solid transparent; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .topbar a.home:hover { background:var(--card); border-color:var(--hairline); color:var(--ink); } .topbar a.home svg { width:14px; height:14px; transition:transform .2s var(--ease); } .topbar a.home:hover svg { transform:translateX(-2px); } .crumb { display:flex; align-items:center; gap:8px; font:500 0.74rem/1 var(--font-mono); letter-spacing:0.02em; color:var(--ink-faint); text-transform:uppercase; overflow:hidden; white-space:nowrap; } .crumb .sep { opacity:0.45; } .crumb .here { color:var(--ink); } .crumb .tab { color:var(--accent); border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:5px; padding:3px 7px; letter-spacing:0.08em; } .topbar .spacer { flex:1; } /* ── Page frame ───────────────────────────────────────────────────────── */ .sheet { position:relative; z-index:1; } .doc { max-width:var(--maxw); margin:0 auto; padding:clamp(40px, 7vw, 76px) clamp(18px, 5vw, 40px) 120px; } /* ── Document header ──────────────────────────────────────────────────── */ .doc-head { margin-bottom:clamp(34px, 6vw, 56px); } .eyebrow { display:inline-flex; align-items:center; gap:8px; font:600 0.7rem/1 var(--font-mono); letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } .eyebrow::before { content:""; width:22px; height:1.5px; background:var(--accent); display:inline-block; } .doc-head h1, h1.title { font-family:var(--font-display); font-weight:600; font-size:clamp(2rem, 4.6vw, 3.1rem); line-height:1.08; letter-spacing:-0.02em; color:var(--ink); text-wrap:balance; } .doc-head .sub, p.dek { margin-top:16px; font-size:1.02rem; color:var(--ink-soft); max-width:66ch; line-height:1.6; } .doc-head .meta { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; font:500 0.74rem/1 var(--font-mono); color:var(--ink-faint); } .doc-head .meta b { color:var(--ink-soft); font-weight:600; } /* ── Typographic flow ─────────────────────────────────────────────────── */ .doc p { margin:0 0 1.1em; max-width:74ch; } .doc h2, .doc h3, .doc h4 { font-family:var(--font-display); letter-spacing:-0.01em; color:var(--ink); scroll-margin-top:84px; } .doc h2 { font-size:1.55rem; font-weight:600; margin:2.4em 0 0.7em; line-height:1.2; } .doc h3 { font-size:1.2rem; font-weight:600; margin:1.9em 0 0.5em; } .doc h4 { font-size:1.02rem; font-weight:600; margin:1.5em 0 0.4em; } .doc a { color:var(--accent); text-underline-offset:3px; text-decoration-thickness:1px; } .doc strong, .doc b { color:var(--ink); font-weight:600; } .doc em { color:var(--ink-soft); } .doc ul, .doc ol { margin:0 0 1.2em 1.3em; } .doc li { margin:0.35em 0; padding-left:0.2em; } .doc li::marker { color:var(--accent); } .doc hr, .divider { border:0; height:1px; background:var(--hairline); margin:3em 0; position:relative; } .doc hr::after, .divider::after { content:""; position:absolute; left:0; top:-0.5px; width:48px; height:2px; background:var(--accent); } /* lede paragraph */ .lede, p.lede { font-size:1.08rem; color:var(--ink-soft); line-height:1.6; max-width:68ch; } /* ── Drafting section marker ──────────────────────────────────────────── */ /*

Title

*/ .sec-head { display:flex; align-items:center; gap:14px; margin:2.4em 0 0.8em; } .sec-head h2, .sec-head h3, .sec-head h4 { margin:0; } .sec-num { flex-shrink:0; position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:2.3em; height:2.3em; padding:0 0.5em; font:600 0.82rem/1 var(--font-mono); color:var(--accent); background:var(--card); border:1.5px solid var(--accent-line); border-radius:999px; } .sec-num::after { /* leader line into the title */ content:""; position:absolute; right:-12px; top:50%; width:10px; height:1.5px; background:var(--accent-line); } /* ── Code: ink slab on paper ──────────────────────────────────────────── */ .doc pre, pre.code, .code-block { position:relative; background:var(--slab); color:var(--slab-text); border:1px solid var(--slab-line); border-radius:var(--radius); padding:18px 20px; margin:1.4em 0; overflow:auto; font-family:var(--font-mono); font-size:0.86rem; line-height:1.7; box-shadow:0 1px 0 rgba(255,255,255,0.4), 0 14px 30px -22px rgba(40,28,18,0.55); tab-size:4; } .doc pre::before { /* drafting label on the slab */ content:attr(data-lang); position:absolute; top:10px; right:14px; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--tk-com); pointer-events:none; } .doc pre code { background:none; border:0; padding:0; color:inherit; font-size:inherit; } /* inline code */ .doc :not(pre) > code, code.inl, .inline { font-family:var(--font-mono); font-size:0.86em; background:var(--inline-bg); color:var(--ink); border:1px solid var(--hairline-2); border-radius:5px; padding:0.08em 0.4em; overflow-wrap:anywhere; /* long inline code wraps instead of blowing out mobile width */ } /* code token colors */ .tok-com, .c, .comment { color:var(--tk-com); font-style:italic; } .tok-kw, .kw, .k, .keyword { color:var(--tk-kw); } .tok-type,.t, .type { color:var(--tk-type); } .tok-str, .s, .str, .string { color:var(--tk-str); } .tok-fn, .fn, .m, .func { color:var(--tk-fn); } .tok-num, .n, .num { color:var(--tk-num); } .tok-punc,.p, .punc { color:var(--tk-punc); } /* copy button injected by notes.js */ .copy-btn { position:absolute; top:8px; right:10px; font:500 0.66rem/1 var(--font-mono); letter-spacing:0.04em; color:var(--tk-com); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:5px 9px; cursor:pointer; opacity:0; transform:translateY(-2px); transition:opacity .18s var(--ease), color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); } .doc pre:hover .copy-btn { opacity:1; transform:none; } .copy-btn:hover { color:#fff; background:rgba(255,255,255,0.14); } .copy-btn.copied { color:var(--tk-str); } .doc pre[data-lang] .copy-btn { top:30px; } /* ── Callouts ─────────────────────────────────────────────────────────── */ .callout, .note, .tip, .warn, .danger, .analogy, .gotcha { position:relative; margin:1.5em 0; padding:16px 18px 16px 20px; background:var(--card); border:1px solid var(--hairline); border-left:3px solid var(--accent); border-radius:10px; } .callout > :last-child, .note > :last-child, .tip > :last-child, .warn > :last-child, .danger > :last-child, .analogy > :last-child, .gotcha > :last-child { margin-bottom:0; } .callout .k, .note .k, .tip .k, .warn .k, .danger .k, .analogy .k, .gotcha .k, .callout[data-tag]::before { display:block; font:600 0.68rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; color:var(--accent); } .callout[data-tag]::before { content:attr(data-tag); } .note { border-left-color:var(--note); background:var(--note-bg); } .note .k { color:var(--note); } .tip { border-left-color:var(--tip); background:var(--tip-bg); } .tip .k { color:var(--tip); } .warn { border-left-color:var(--warn); background:var(--warn-bg); } .warn .k { color:var(--warn); } .danger { border-left-color:var(--danger); background:var(--danger-bg); } .danger .k { color:var(--danger); } .analogy{ border-left-color:var(--muse); background:var(--muse-bg); } .analogy .k{ color:var(--muse); } /* the headline takeaway */ .crux { margin:1.8em 0; padding:22px 24px; background:linear-gradient(180deg, var(--card), var(--paper-2)); border:1px solid var(--hairline); border-radius:var(--radius); box-shadow:0 1px 0 var(--edge-hi) inset; font-size:1.06rem; line-height:1.6; } .crux[data-tag]::before { content:attr(data-tag); display:block; font:600 0.68rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } .crux b { color:var(--accent); } .grn { color:var(--tip); font-weight:600; } /* ── Card grids ───────────────────────────────────────────────────────── */ .grid { display:grid; gap:14px; margin:1.5em 0; } .grid.two { grid-template-columns:repeat(2, 1fr); } .grid.three { grid-template-columns:repeat(3, 1fr); } @media (max-width:640px){ .grid.two, .grid.three { grid-template-columns:1fr; } } .card { background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:16px 18px; transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .card:hover { border-color:var(--accent-line); transform:translateY(-2px); box-shadow:0 10px 26px -20px rgba(52,38,26,0.5); } .card .k { font:600 0.66rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; display:block; } .card h5 { font-family:var(--font-display); font-size:1rem; font-weight:600; margin-bottom:6px; color:var(--ink); } .card p { font-size:0.9rem; color:var(--ink-soft); margin:0; } /* ── Versus / compare ─────────────────────────────────────────────────── */ .vs { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:1.5em 0; align-items:stretch; position:relative; } @media (max-width:640px){ .vs { grid-template-columns:1fr; } } .vs > * { background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:16px 18px; } .vs > :first-child { border-top:2px solid var(--note); } .vs > :last-child { border-top:2px solid var(--warn); } /* ── Flow / pipeline ──────────────────────────────────────────────────── */ .flow { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:1.4em 0; } .flow > span { font:500 0.84rem/1.3 var(--font-mono); background:var(--card); border:1px solid var(--hairline); border-radius:8px; padding:8px 12px; color:var(--ink); } .flow > span:not(:last-child)::after { content:"→"; margin-left:10px; color:var(--accent); } /* ── Tables ───────────────────────────────────────────────────────────── */ .doc table, table.data-table { width:100%; border-collapse:collapse; margin:1.5em 0; font-size:0.9rem; background:var(--card); border:1px solid var(--hairline); border-radius:10px; overflow:hidden; } .doc th, .doc td, .data-table th, .data-table td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--hairline-2); } .doc thead th, .data-table thead th { font:600 0.72rem/1.2 var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper-2); border-bottom:1.5px solid var(--accent-line); } .doc tbody tr:last-child td { border-bottom:0; } .doc tbody tr:hover td { background:rgba(52,38,26,0.025); } /* ── Pills (one-line recall) ──────────────────────────────────────────── */ .pill-row { display:flex; flex-wrap:wrap; gap:8px; margin:1.4em 0; } .pill { font:500 0.76rem/1 var(--font-mono); color:var(--ink-soft); background:var(--card); border:1px solid var(--hairline); border-radius:999px; padding:7px 13px; } .pill:hover { border-color:var(--accent-line); color:var(--ink); } /* ── Q&A ──────────────────────────────────────────────────────────────── */ .qa-head { display:flex; align-items:center; gap:14px; margin:2.4em 0 1em; } .qa-head h4 { margin:0; } details.qa { background:var(--card); border:1px solid var(--hairline); border-radius:10px; margin:10px 0; overflow:hidden; transition:border-color .2s var(--ease); } details.qa[open] { border-color:var(--accent-line); } details.qa summary { list-style:none; cursor:pointer; padding:14px 18px; display:flex; gap:10px; align-items:flex-start; font-weight:500; color:var(--ink); } details.qa summary::-webkit-details-marker { display:none; } details.qa summary::after { content:"+"; margin-left:auto; color:var(--accent); font-family:var(--font-mono); font-size:1.1rem; line-height:1; transition:transform .2s var(--ease); } details.qa[open] summary::after { transform:rotate(45deg); } .qmark { color:var(--accent); font:600 0.84rem/1.5 var(--font-mono); flex-shrink:0; } details.qa .ans { padding:0 18px 16px 40px; color:var(--ink-soft); } details.qa .ans > :last-child { margin-bottom:0; } /* ── Quick-nav: always-in-view section jumper (built by notes.js) ─────── */ .quicknav { position:fixed; z-index:60; } .qn-toggle { display:none; } .qn-item { text-decoration:none; } .qn-label { color:var(--ink-soft); } /* Wide: a draughtsman's tick-rail pinned to the right edge. Current section is labelled; hovering the rail reveals every label. */ @media (min-width:1240px) { .quicknav { top:50%; right:20px; transform:translateY(-50%); max-height:82vh; } .qn-list { list-style:none; margin:0; padding:6px 0; display:flex; flex-direction:column; gap:4px; align-items:flex-end; max-height:82vh; overflow:auto; scrollbar-width:none; } .qn-list::-webkit-scrollbar { display:none; } .qn-item { display:flex; align-items:center; justify-content:flex-end; gap:11px; height:18px; } .qn-label { font:500 0.76rem/1 var(--font-mono); letter-spacing:-0.01em; max-width:0; opacity:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:var(--card); border:1px solid transparent; border-radius:7px; padding:0; transition:max-width .26s var(--ease), opacity .2s var(--ease), padding .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } /* a quiet column of ticks; the label is revealed only for the active section and for whichever tick you point at — never the whole stack */ .qn-tick { flex-shrink:0; width:14px; height:2px; border-radius:2px; background:var(--hairline); opacity:0.7; transition:width .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease); } .qn-item.lvl-3 .qn-tick { width:8px; } .quicknav:hover .qn-tick { opacity:1; } .qn-item:hover .qn-tick { background:var(--accent); opacity:1; } .qn-item:hover .qn-label { max-width:230px; opacity:1; padding:5px 9px; color:var(--ink); border-color:var(--hairline); box-shadow:0 8px 22px -14px rgba(52,38,26,0.45); } .qn-item.active .qn-tick { width:24px; background:var(--accent); opacity:1; } .qn-item.active .qn-label { max-width:210px; opacity:1; padding:5px 9px; color:var(--ink); border-color:var(--hairline); } } /* Narrow: a floating "Sections" button that opens a jump panel. */ @media (max-width:1239px) { .quicknav { right:16px; bottom:18px; display:flex; flex-direction:column; align-items:flex-end; gap:10px; } .qn-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:600 0.78rem/1 var(--font-body); color:#fff; background:var(--accent); border:0; border-radius:999px; padding:11px 16px; box-shadow:0 10px 26px -10px var(--accent-line), 0 2px 6px rgba(52,38,26,0.2); } .qn-ico { font-size:1rem; line-height:1; } .qn-list { order:-1; list-style:none; margin:0; display:none; flex-direction:column; gap:1px; background:var(--card); border:1px solid var(--hairline); border-radius:14px; padding:8px; min-width:210px; max-width:76vw; max-height:60vh; overflow:auto; box-shadow:0 20px 48px -18px rgba(52,38,26,0.55); } .quicknav.open .qn-list { display:flex; } .qn-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; } .qn-item:hover { background:var(--paper-2); } .qn-tick { order:-1; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--hairline); } .qn-item.lvl-3 { padding-left:24px; } .qn-label { font:500 0.86rem/1.3 var(--font-body); } .qn-item.active .qn-tick { background:var(--accent); } .qn-item.active .qn-label { color:var(--accent); font-weight:600; } } @media print { .quicknav { display:none !important; } } /* ── Footer ───────────────────────────────────────────────────────────── */ .doc-foot { max-width:var(--maxw); margin:0 auto; padding:28px clamp(18px,5vw,40px) 64px; border-top:1px solid var(--hairline); display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font:500 0.76rem/1.5 var(--font-mono); color:var(--ink-faint); } .doc-foot a { color:var(--ink-soft); text-decoration:none; } .doc-foot a:hover { color:var(--accent); } /* ── Quality floor ────────────────────────────────────────────────────── */ :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } ::selection { background:var(--accent-soft); } /* overflow-x:hidden on body only — setting it on html too makes both html and body overflow containers, which breaks position:sticky (topbar, quick-nav, pin button, resume chip) as soon as the page scrolls */ body { overflow-x:hidden; max-width:100%; } html { max-width:100%; } .eyebrow { flex-wrap:wrap; max-width:100%; } @media (max-width:560px) { .eyebrow { letter-spacing:0.1em; font-size:0.64rem; } .eyebrow::before { width:16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } @media print { body { background:#fff; } .topbar, .toc, .copy-btn { display:none !important; } .doc, .doc.has-toc { display:block; max-width:none; padding:0; } .doc pre { background:#f4f6f7; color:#15212e; border:1px solid #ccc; box-shadow:none; } .tok-com,.c{color:#5a6b78}.tok-kw,.kw,.k{color:#1f4e79}.tok-type,.t{color:#0f6f63} .tok-str,.s{color:#3d6b1f}.tok-fn,.fn,.m{color:#9a6a12}.tok-num,.n{color:#a4502f} } /* ============================================================================ LEGACY ALIASES — let pre-existing pages adopt the system before their markup is normalized. Safe to delete a block once a page is converted. ========================================================================== */ /* SQL page (was light/serif) */ .topic { margin-top:2.6em; } .hl { background:var(--accent-soft); color:var(--ink); padding:0.05em 0.35em; border-radius:4px; font-weight:600; } .result-wrap { margin:1.2em 0; } .result-label { font:600 0.68rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; display:block; } .result { background:var(--card); border:1px solid var(--hairline); border-radius:8px; overflow:auto; } .hw-subtitle { color:var(--ink-soft); font-style:italic; } .section-header { display:flex; align-items:center; gap:14px; margin:2.6em 0 0.9em; } .section-header h2 { margin:0; } .section-num { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:2.3em; height:2.3em; border-radius:999px; border:1.5px solid var(--accent-line); background:var(--card); color:var(--accent); font:600 0.9rem/1 var(--font-mono); } .code-block { padding:0; overflow:hidden; } .code-block .code-label { display:block; background:var(--slab-line); color:var(--tk-com); font:600 0.66rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; padding:9px 16px; } .code-block code, .code-block > code { display:block; white-space:pre; overflow:auto; padding:14px 16px; margin:0; font-family:var(--font-mono); font-size:0.84rem; line-height:1.6; color:var(--slab-text); background:none; border:0; } .null { color:var(--tk-com); font-style:italic; } .code-block .keyword { color:var(--tk-kw); } .source { color:var(--ink-faint); font-size:0.85rem; font-style:italic; } /* SQL inner contents card */ #typedView > .toc { background:var(--card); border:1px solid var(--hairline); border-radius:12px; padding:18px 22px; margin:0 0 2.4em; } .toc-part-label { font:600 0.66rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin:16px 0 8px; } .toc-part-label:first-child { margin-top:0; } .toc-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1px 18px; } .toc-item { cursor:pointer; padding:5px 0; color:var(--ink-soft); font-size:0.9rem; display:flex; align-items:center; gap:9px; } .toc-item:hover { color:var(--accent); } .toc-tag { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; border-radius:6px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line); font:600 0.66rem/1 var(--font-mono); } /* collapsible sample data */ .sample-data-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; cursor:pointer; background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:12px 16px; font:600 0.92rem/1.3 var(--font-body); color:var(--ink); margin:1.2em 0; text-align:left; } .sample-data-toggle:hover { border-color:var(--accent-line); } .sample-data-toggle .arrow { color:var(--accent); transition:transform .2s var(--ease); } .sample-data-toggle.open .arrow { transform:rotate(180deg); } .sample-data-content { display:none; margin-bottom:1.6em; } .sample-data-content.open { display:block; } /* JDBC page (parts, roman numerals, framed code, output) */ .part { margin-top:3.5em; } .part-head { display:flex; align-items:center; gap:16px; margin-bottom:0.5em; padding-bottom:14px; border-bottom:1px solid var(--hairline); position:relative; } .part-head::after { content:""; position:absolute; left:0; bottom:-1px; width:60px; height:2px; background:var(--accent); } .part-head h2 { margin:0; font-size:clamp(1.5rem,3vw,1.85rem); } .roman { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:2.4em; height:2.4em; border-radius:999px; border:1.5px solid var(--accent-line); background:var(--card); color:var(--accent); font:600 0.95rem/1 var(--font-mono); } .part-desc { color:var(--ink-soft); font-size:1.02rem; max-width:66ch; margin:0 0 1.6em; } .num { color:var(--accent); font:600 0.92em var(--font-mono); margin-right:7px; } .claim { color:var(--ink-soft); } .added { display:inline-block; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:4px; padding:0 5px; font:600 0.72em/1.5 var(--font-mono); } .toc-note { color:var(--ink-faint); font-size:0.92rem; font-style:italic; } .toc-note .xlink, .xlink { font-weight:500; } .doodle { color:var(--muse); font:600 0.85em var(--font-mono); } .check { color:var(--tip); font-weight:700; margin-right:6px; } .lbl { display:inline-block; font:600 0.66rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); } .ascii { background:var(--slab); color:var(--slab-text); border:1px solid var(--slab-line); border-radius:var(--radius); padding:16px 18px; margin:1.4em 0; overflow:auto; font-family:var(--font-mono); font-size:0.82rem; line-height:1.55; white-space:pre-line; tab-size:4; } .ascii pre { margin:0; background:none; border:0; padding:0; box-shadow:none; color:inherit; white-space:pre; } .ascii pre::before { content:none; } .code { margin:1.4em 0; } .code .code-head { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--slab-line); border:1px solid var(--slab-line); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; padding:9px 14px; font:500 0.74rem/1 var(--font-mono); } .code .fname { color:var(--slab-text); } .code .lang { color:var(--tk-com); text-transform:uppercase; letter-spacing:0.12em; font-size:0.62rem; } .code .run { background:var(--slab); color:var(--tk-str); border:1px solid var(--slab-line); border-top:0; border-bottom:0; padding:8px 14px; font:0.78rem/1.5 var(--font-mono); } .code .run::before { content:"$ "; color:var(--tk-com); } .code pre { margin:0; border-top:0; border-radius:0 0 var(--radius) var(--radius); } .olbl { display:block; font:600 0.66rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:1.2em 0 6px; } .out { background:var(--card); border:1px solid var(--hairline); border-radius:8px; padding:12px 14px; font:0.82rem/1.6 var(--font-mono); color:var(--ink-soft); white-space:pre-wrap; overflow:auto; } /* ============================================================================ ROLLOUT ALIASES — map the older pages' bespoke vocabulary onto the system. Best-effort; anything unmapped still inherits clean semantic styling. ========================================================================== */ /* extra code-token schemes (Jackson/http/threads/etc.) */ .cmt, .cm, .com { color:var(--tk-com); font-style:italic; } .kw { color:var(--tk-kw); } .ty, .type { color:var(--tk-type); } .st { color:var(--tk-str); } .nm, .name, .var { color:var(--tk-fn); } .nu { color:var(--tk-num); } .pn, .op { color:var(--tk-punc); } /* inline code spans used as .inl across React/Java pages */ .inl { font-family:var(--font-mono); font-size:0.86em; background:var(--inline-bg); color:var(--ink); border:1px solid var(--hairline-2); border-radius:5px; padding:0.08em 0.4em; } /* hero variants */ .subtitle, .sub, .dek { color:var(--ink-soft); } .topic-desc { margin-top:14px; font-size:1.02rem; color:var(--ink-soft); max-width:64ch; line-height:1.6; } h1.title, .hero h1 { font-family:var(--font-display); font-weight:600; letter-spacing:-0.02em; } /* section heading helpers */ .sec-title { font-family:var(--font-display); font-weight:600; } .sec-lead, .sec-sub, .sec-desc, .section-sub, .part-sub, .part-lead, .lead { color:var(--ink-soft); } .sec-label, .part-tag, .part-eyebrow, .ep, .kicker, .k { font:600 0.68rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); } /* ledes & insight lists */ ul.insights, .insights { list-style:none; margin:1.2em 0; padding:0; } ul.insights li, .insights li { position:relative; padding-left:20px; margin:0.5em 0; } ul.insights li::before, .insights li::before { content:""; position:absolute; left:2px; top:0.62em; width:7px; height:7px; border-radius:50%; background:var(--accent); } /* callout family → tinted boxes */ .matter, .note-card, .note-mini, .note-why, .why, .trade, .enrich, .think, .call { position:relative; margin:1.4em 0; padding:14px 16px; background:var(--card); border:1px solid var(--hairline); border-left:3px solid var(--accent); border-radius:10px; } .trick, .m-trick { color:var(--tip); } .pit, .pitfall, .m-pit { color:var(--warn); } .note-why .lbl, .why .lbl { color:var(--note); } /* small inline badges / markers */ .plus, .add-marker, .tag-added, .added, .badge, .chip, .tag, .marker, .part-tag { display:inline-block; font:600 0.68rem/1.5 var(--font-mono); letter-spacing:0.04em; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:5px; padding:1px 7px; } .m-trick { color:var(--tip); background:var(--tip-bg); border-color:var(--tip); } .m-pit { color:var(--warn); background:var(--warn-bg); border-color:var(--warn); } .m-tip { color:var(--note); background:var(--note-bg); border-color:var(--note); } .plus, .add-marker, .tag-added { color:var(--accent); } /* code-block chrome variants */ .codewrap, .codecard, .code-card, .codecard, .src-wrap { margin:1.4em 0; } .codehead, .codebar, .fhead, .fhdr, .ex-head, .exhead, .out-head, .nb-head, .code-head { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--slab-line); border:1px solid var(--slab-line); border-bottom:0; border-radius:var(--radius) var(--radius) 0 0; padding:9px 14px; font:500 0.72rem/1 var(--font-mono); color:var(--tk-com); } .fname, .file { color:var(--slab-text); } .runcmd { background:var(--slab); color:var(--tk-str); border:1px solid var(--slab-line); border-top:0; border-bottom:0; padding:8px 14px; font:0.78rem/1.5 var(--font-mono); } .runcmd::before { content:"$ "; color:var(--tk-com); } .codewrap pre, .codecard pre, .code-card pre, pre.src { margin:0; } .out-card, .olab { } .olab { display:block; font:600 0.66rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:1.2em 0 6px; } /* React session blocks */ .session { margin:2.2em 0; } .session-banner { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:0.6em; padding-bottom:14px; border-bottom:1px solid var(--hairline); position:relative; } .session-banner::after { content:""; position:absolute; left:0; bottom:-1px; width:54px; height:2px; background:var(--accent); } .session-banner h2 { margin:0; } .tl { width:100%; color:var(--ink-soft); font-style:italic; font-size:0.96rem; } /* lab / exercise blocks */ .exercise, .ex, .ex-body, .lab, .rubric, .grade, .ex-grade { background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:14px 16px; margin:1.2em 0; } .ex-lbl, .ex-grade, .goal, .predict, .expected, .expect { font:600 0.68rem/1 var(--font-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); } .yes { color:var(--tip); } .nb { color:var(--ink-soft); } /* cross links + utilities */ .xref, .inlink, .back, .next, .xlink { color:var(--accent); text-decoration:none; } .xref:hover, .inlink:hover, .back:hover, .next:hover, .xlink:hover { text-decoration:underline; } .muted, .dim, .soft { color:var(--ink-faint); } .fw, .strong { font-weight:600; color:var(--ink); } .legend { color:var(--ink-faint); font-size:0.85rem; } .pillbar { display:flex; flex-wrap:wrap; gap:8px; margin:1em 0; } .atom { width:34px; height:34px; margin-bottom:14px; } /* ── Frontend System Design notebook (v2) extras ─────────────────────── */ /* beginner "Start here" on-ramp */ .onramp { font-size:1.02rem; color:var(--ink); background:var(--card); border:1px solid var(--hairline); border-left:3px solid var(--note); border-radius:10px; padding:16px 18px; margin:0 0 1.4em; } .onramp .k { display:block; font:600 0.68rem/1 var(--font-mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--note); margin-bottom:7px; } /* sessions overview nav */ .doc nav.toc { display:block; background:var(--card); border:1px solid var(--hairline); border-radius:12px; padding:16px 20px; margin:0 0 2.4em; } .doc nav.toc h2 { font:600 0.7rem/1 var(--font-mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; font-family:var(--font-mono); } .doc nav.toc a { display:flex; gap:11px; align-items:baseline; padding:6px 0; color:var(--ink-soft); text-decoration:none; font-size:0.94rem; } .doc nav.toc a:hover { color:var(--accent); } .doc nav.toc a b { color:var(--accent); font:600 0.8rem/1 var(--font-mono); } /* vs with a middle separator */ .vs:has(.mid) { grid-template-columns:1fr auto 1fr; } .vs .side { background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:15px 16px; } .vs .side .k { display:block; font:600 0.66rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; } .vs .mid { display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0 4px; font-family:var(--font-mono); color:var(--accent); } /* flow with step cards */ .flow .step { flex:1 1 130px; min-width:120px; position:relative; background:var(--card); border:1px solid var(--hairline); border-radius:10px; padding:12px 13px; } .flow .step::after { content:none; } .flow .step .n { font:500 0.7rem/1 var(--font-mono); color:var(--accent); } .flow .step h5 { margin:3px 0 4px; font-size:0.92rem; } .flow .step p { margin:0; font-size:0.84rem; color:var(--ink-soft); } /* ASCII / box diagram (ink slab with caption) */ .diagram { background:var(--slab); border:1px solid var(--slab-line); border-radius:var(--radius); padding:18px 20px; margin:1.5em 0; overflow:auto; color:var(--slab-text); } .diagram pre { background:none; border:0; padding:0; margin:0; box-shadow:none; color:var(--slab-text); font-size:0.82rem; line-height:1.5; white-space:pre; } .diagram pre::before { content:none; } .diagram .cap { display:block; font:600 0.66rem/1 var(--font-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--tk-com); margin-bottom:12px; } .diagram b { color:var(--tk-fn); } .diagram .grn { color:var(--tk-str); } .diagram .bl { color:var(--tk-kw); } .bl { color:var(--tk-kw); } .cap { color:var(--ink-faint); } .range { font-family:var(--font-mono); color:var(--ink-soft); font-size:0.82rem; }