:root .bk{
  color-scheme: light;
  --paper: #f7f3ea; --page: #fffdf8; --raise: #ffffff; --sunk: #f0ebdf;
  --ink: #1d1a16; --ink-2: #4d473e; --ink-3: #7d766a;
  --rule: #e3dccd; --rule-2: #cfc6b3;
  --accent: #b8500f; --accent-ink: #8f3c08; --accent-soft: #fbe9d9; --on-accent: #ffffff;
  --moss: #2f6b4f; --moss-soft: #e2f0e8; --blue: #24609f; --blue-soft: #e1ecf8;
  --gold: #8a6400; --gold-soft: #fbf0cf; --red: #b3302f; --red-soft: #fbe4e2;
  --code-bg: #211e1a; --code-ink: #f1ece2; --code-dim: #a79f90;
  
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4;
  --grid: #e1e0d9; --axis: #c3c2b7; --muted: #898781;
  --good: #0ca30c; --critical: #d03b3b; --warning: #fab219;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px; --col: 720px; --side: 300px;
  --shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 8px 24px rgba(40, 30, 10, .06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bk{
    color-scheme: dark;
    --paper: #12100d; --page: #191612; --raise: #211d18; --sunk: #0d0b09;
    --ink: #f3eee4; --ink-2: #c9c1b2; --ink-3: #958d7e;
    --rule: #2e2922; --rule-2: #423b31;
    --accent: #f08a45; --accent-ink: #f6a56c; --accent-soft: #3a2415; --on-accent: #1a0f06;
    --moss: #6cc09a; --moss-soft: #15291f; --blue: #7db4ee; --blue-soft: #14233a;
    --gold: #e3b94a; --gold-soft: #2e2610; --red: #f08583; --red-soft: #3a1817;
    --code-bg: #0b0a08; --code-ink: #ece6da; --code-dim: #8d8577;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
    --grid: #2c2c2a; --axis: #383835; --muted: #898781;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  }}
:root[data-theme="dark"] .bk{
  color-scheme: dark;
  --paper: #12100d; --page: #191612; --raise: #211d18; --sunk: #0d0b09;
  --ink: #f3eee4; --ink-2: #c9c1b2; --ink-3: #958d7e;
  --rule: #2e2922; --rule-2: #423b31;
  --accent: #f08a45; --accent-ink: #f6a56c; --accent-soft: #3a2415; --on-accent: #1a0f06;
  --moss: #6cc09a; --moss-soft: #15291f; --blue: #7db4ee; --blue-soft: #14233a;
  --gold: #e3b94a; --gold-soft: #2e2610; --red: #f08583; --red-soft: #3a1817;
  --code-bg: #0b0a08; --code-ink: #ece6da; --code-dim: #8d8577;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181;
  --grid: #2c2c2a; --axis: #383835; --muted: #898781;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
}
.bk .lede{ font-size: 21px; line-height: 1.6; color: var(--ink); padding-bottom: 1em; border-bottom: 1px solid var(--rule); margin-bottom: 1.4em; }
.bk code{ font-family: var(--mono); font-size: .82em; background: var(--sunk); border: 1px solid var(--rule); border-radius: 5px; padding: .08em .35em; overflow-wrap: anywhere; }
.bk pre{ font-family: var(--mono); font-size: 13.5px; line-height: 1.6; margin: 1.3em 0; padding: 18px 20px; border-radius: var(--r); overflow-x: auto; background: var(--code-bg); color: var(--code-ink); tab-size: 4; position: relative; }
.bk pre code{ background: none; border: 0; padding: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }
.bk pre[class]::before{ display: block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; color: var(--code-dim); }
.bk pre.calc{ background: var(--gold-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.bk pre.calc::before{ content: "The arithmetic"; color: var(--gold); }
.bk pre.diagram{ background: var(--page); color: var(--ink); border: 1px solid var(--rule-2); }
.bk pre.diagram::before{ content: "The picture"; color: var(--ink-3); }
.bk pre.chat{ background: var(--blue-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); font-family: var(--ui); font-size: 15.5px; white-space: pre-wrap; }
.bk pre.chat::before{ content: "The conversation"; color: var(--blue); }
.bk pre.out::before{ content: "Real output"; }
.bk pre:has(code.language-python)::before{ content: "Python"; }
.bk pre:has(code.language-bash)::before{ content: "Terminal"; }
.bk pre:has(code.language-json)::before{ content: "JSON"; }
.bk pre:has(code.language-sql)::before{ content: "SQL"; }
.bk pre:has(code)::before{ display: block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 10px; color: var(--code-dim); }
.bk .copy-btn{ position: absolute; top: 10px; right: 10px; font: 600 11.5px var(--ui); padding: 4px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); color: var(--code-dim); cursor: pointer; opacity: 0; transition: opacity .15s; }
.bk pre:hover .copy-btn, .bk .copy-btn:focus-visible{ opacity: 1; }
.bk .tok-k{ color: #f0a36b; }
.bk .tok-s{ color: #a5d6a0; }
.bk .tok-c{ color: #8d8577; font-style: italic; }
.bk .tok-n{ color: #8fc3f5; }
.bk .table-wrap{ overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--page); }
.bk .note{ margin: 1.7em 0; padding: 20px 22px 8px; border-radius: var(--r); border: 1px solid var(--rule); border-left-width: 4px; background: var(--page); font-size: 17.5px; line-height: 1.65; }
.bk .note.analogy{ border-left-color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); border-left-color: var(--accent); }
.bk .note.analogy h4{ color: var(--accent-ink); }
.bk .note.tip{ border-left-color: var(--moss); background: var(--moss-soft); }
.bk .note.tip h4{ color: var(--moss); }
.bk .note.warn{ border-left-color: var(--red); background: var(--red-soft); }
.bk .note.warn h4{ color: var(--red); }
.bk .note.lab{ border-left-color: var(--blue); background: var(--blue-soft); }
.bk .note.lab h4{ color: var(--blue); }
.bk .widget{ margin: 1.9em 0; font-family: var(--ui); font-size: 15px; line-height: 1.45; min-height: 60px; }
.bk .w{ border: 1px solid var(--rule-2); border-radius: 18px; background: var(--raise); box-shadow: var(--shadow); overflow: hidden; }
.bk .w-head{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 14px 20px 12px; border-bottom: 1px solid var(--rule); background: var(--page); }
.bk .w-tag{ font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 8px; border-radius: 6px; }
.bk .w-title{ font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0; }
.bk .w-sub{ flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-3); }
.bk .w-body{ padding: 18px 20px 20px; }
.bk .w-foot{ padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--page); font-size: 13.5px; color: var(--ink-2); }
.bk .w-foot b{ color: var(--ink); }
.bk .w-err{ padding: 14px 18px; border: 1px dashed var(--rule-2); border-radius: 12px; color: var(--ink-3); font-size: 14px; }
.bk .ctl-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; margin-bottom: 18px; }
.bk .ctl label{ display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.bk .ctl output{ font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk .ctl input[type=range]{ width: 100%; accent-color: var(--accent); height: 22px; margin: 0; }
.bk .ctl small{ display: block; font-size: 12px; color: var(--ink-3); }
.bk .seg{ display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--rule); }
.bk .seg button, .bk .chip{ font: 600 13.5px var(--ui); padding: 7px 12px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; }
.bk .seg button[aria-pressed=true]{ background: var(--raise); border-color: var(--rule-2); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bk .chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bk .chip{ border-color: var(--rule-2); background: var(--page); border-radius: 999px; }
.bk .chip[aria-pressed=true]{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bk .w-btn{ font: 600 14px var(--ui); padding: 9px 16px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--page); cursor: pointer; }
.bk .w-btn:hover{ border-color: var(--accent); }
.bk .w-btn.primary{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bk .w-btn:disabled{ opacity: .45; cursor: default; }
.bk .w-row{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk .tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bk .tile{ padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--page); min-width: 0; }
.bk .tile-l{ font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin: 0 0 4px; }
.bk .tile-v{ font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.6vw, 27px); line-height: 1.1; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.bk .tile-d{ font-size: 12.5px; color: var(--ink-2); margin: 5px 0 0; }
.bk .tile.hot{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.bk .tile.good{ background: var(--moss-soft); border-color: color-mix(in srgb, var(--moss) 35%, transparent); }
.bk .tile.bad{ background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.bk .w-calc{ font-family: var(--mono); font-size: 12.5px; line-height: 1.7; white-space: pre; overflow-x: auto; padding: 12px 14px; margin: 14px 0 0; border-radius: 12px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); color: var(--ink); }
.bk .w-table{ width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bk .w-table th{ text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 7px 10px; border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.bk .w-table td{ padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.bk .w-table .num{ text-align: right; font-family: var(--mono); font-size: 12.5px; }
.bk .w-table tr.in td{ background: var(--moss-soft); }
.bk .w-table tr.out td{ color: var(--ink-3); }
.bk .w-table tr.leak td{ background: var(--red-soft); }
.bk .w-scroll{ overflow-x: auto; }
.bk .badge{ display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.bk .badge.semantic, .bk .badge.keep, .bk .badge.ok{ background: var(--moss-soft); color: var(--moss); }
.bk .badge.episodic, .bk .badge.info{ background: var(--blue-soft); color: var(--blue); }
.bk .badge.procedural{ background: var(--gold-soft); color: var(--gold); }
.bk .badge.drop, .bk .badge.discard, .bk .badge.bad, .bk .badge.crash{ background: var(--red-soft); color: var(--red); }
.bk .bar{ height: 8px; border-radius: 0 4px 4px 0; background: var(--s1); min-width: 2px; }
.bk .bar.b2{ background: var(--s2); }
.bk .bar.b3{ background: var(--s3); }
.bk .bar.b4{ background: var(--s4); }
.bk .bar-track{ background: var(--sunk); border-radius: 0 4px 4px 0; overflow: hidden; }
.bk .legend{ display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 0 0 8px; }
.bk .legend i{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bk .chart{ position: relative; }
.bk .chart svg{ display: block; width: 100%; height: auto; overflow: visible; }
.bk .chart text{ font-family: var(--ui); font-size: 11.5px; fill: var(--muted); }
.bk .chart .lab{ fill: var(--ink-2); font-weight: 600; }
.bk .tip{ position: absolute; pointer-events: none; z-index: 5; min-width: 120px; max-width: 280px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow); opacity: 0; transition: opacity .1s; }
.bk .tip b{ display: block; font-size: 13px; }
.bk .tip.on{ opacity: 1; }
.bk .stack{ display: flex; height: 30px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--raise); }
.bk .stack > div{ min-width: 2px; }
.bk .line-item{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 11px; background: var(--page); margin: 0 0 7px; font-size: 14.5px; }
.bk .line-item .who{ font-size: 11.5px; font-weight: 700; color: var(--ink-3); min-width: 66px; text-transform: uppercase; letter-spacing: .04em; }
.bk .line-item .txt{ flex: 1; min-width: 0; }
.bk .line-item.is-keep{ border-color: var(--moss); background: var(--moss-soft); }
.bk .line-item.is-drop{ opacity: .6; }
.bk .line-item.is-right{ box-shadow: inset 3px 0 0 var(--good); }
.bk .line-item.is-wrong{ box-shadow: inset 3px 0 0 var(--critical); }
.bk .w-input{ width: 100%; font: 15px var(--ui); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--page); color: var(--ink); }
.bk .w-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bk .w-panel{ border: 1px solid var(--rule); border-radius: 14px; padding: 14px; background: var(--page); min-width: 0; }
.bk .w-panel h5{ margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.bk .card-row{ display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); margin-bottom: 6px; background: var(--raise); font-size: 14px; }
.bk .card-row.closed{ opacity: .6; text-decoration: line-through; text-decoration-color: var(--ink-3); }
.bk .card-row .meta{ font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.bk .steps{ display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: s; }
.bk .steps li{ counter-increment: s; font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 9px; background: var(--sunk); color: var(--ink-3); border: 1px solid transparent; cursor: pointer; }
.bk .steps li::before{ content: counter(s) " "; font-family: var(--mono); }
.bk .steps li.on{ background: var(--accent-soft); color: var(--ink); border-color: var(--accent); }
.bk .steps li.past{ color: var(--ink-2); }
.bk .mono{ font-family: var(--mono); font-size: 12.5px; }
.bk .dim{ color: var(--ink-3); }
@media (max-width: 640px){.bk .lede{ font-size: 19px; }
.bk pre{ font-size: 12.5px; padding: 14px; margin-left: -4px; margin-right: -4px; }
.bk .w-body{ padding: 14px; }
.bk .w-head{ padding: 12px 14px 10px; }
.bk .w-foot{ padding: 10px 14px; }}
@media print{.bk .copy-btn{ display: none !important; }
.bk details > *:not(summary){ display: block !important; }}
:root .bk{--accent:#6a3fa0;--accent-ink:#52307c;--accent-soft:#efe6f9}
:root[data-theme="dark"] .bk{--accent:#b89af0;--accent-ink:#cbb4f5;--accent-soft:#2a1f3d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bk{--accent:#b89af0;--accent-ink:#cbb4f5;--accent-soft:#2a1f3d}}
.bk{font-family:inherit} .bk .widget{margin:1.4em 0} .prose .bk > * + *{margin-top:1em}