/* kvist garden theme: nav pane, list pane, content */
:root {
  --accent: #3f7d4e;
  --bg: #ffffff;
  --pane: #f8f9fa;
  --hover: #eef0f2;
  --fg: #16181d;
  --muted: #6b7079;
  --border: #e4e6ea;
  --sel-bg: #1d2128;
  --sel-fg: #f5f6f8;
  --sel-muted: #b9bec7;
  --mark: #f6e7a6;
  --code-bg: #f3f4f6;
  --radius: 8px;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-w: 15.5rem;
  --list-w: 22rem;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121417;
  --pane: #181a1e;
  --hover: #23262b;
  --fg: #e6e8eb;
  --muted: #989ea8;
  --border: #2b2e34;
  --sel-bg: #e6e8eb;
  --sel-fg: #15171a;
  --sel-muted: #4d535c;
  --mark: #5a4f1c;
  --code-bg: #1c1f23;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417;
    --pane: #181a1e;
    --hover: #23262b;
    --fg: #e6e8eb;
    --muted: #989ea8;
    --border: #2b2e34;
    --sel-bg: #e6e8eb;
    --sel-fg: #15171a;
    --sel-muted: #4d535c;
    --mark: #5a4f1c;
    --code-bg: #1c1f23;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 var(--font);
}
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, video, iframe { max-width: 100%; }
img { height: auto; border-radius: 6px; }
img.align-center { display: block; margin: 1rem auto; }
img.align-left { float: left; margin: .3rem 1.4rem .8rem 0; max-width: 50%; }
img.align-right { float: right; margin: .3rem 0 .8rem 1.4rem; max-width: 50%; }
.content::after { content: ""; display: block; clear: both; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--bg); padding: .5rem 1rem; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main:focus { outline: none; }
/* instant navigation: a bar along the top while a page loads */
.nav-progress {
  position: fixed; top: 0; left: 0; z-index: 30; height: 2px; width: 100%; background: var(--accent);
  transform-origin: left; animation: nav-progress 2s ease-out forwards;
}
@keyframes nav-progress { from { transform: scaleX(.05); } to { transform: scaleX(.85); } }
.icon { flex: none; }
/* A folder's emoji icon, in the same 16px box as a drawn one. */
.icon-text { display: inline-block; width: 16px; font-size: 14px; line-height: 16px; text-align: center; }
.icon-button {
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
  border-radius: 7px; width: 2rem; height: 2rem; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0;
}
.icon-button:hover { background: var(--hover); }
.link-button { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.section-label, .backlinks h2, .toc h2, .local-graph h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin: 0 0 .8rem; }

/* three panes: nav | list | page */
.shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
.has-list .shell { grid-template-columns: var(--nav-w) var(--list-w) minmax(0, 1fr); }
.nav-pane, .list-pane {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--border);
}
main { min-width: 0; }

/* nav pane */
.nav-pane { background: var(--pane); display: flex; flex-direction: column; padding: 1.1rem .8rem 1rem; }
.nav-head { display: flex; align-items: flex-start; gap: .5rem; padding: 0 .45rem; }
.site-title { flex: 1; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.menu-toggle { display: none; }
.nav-body { margin-top: 1.6rem; }
.nav-section {
  font-size: .78rem; font-weight: 500; color: var(--muted); margin: 1.3rem .45rem .35rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--border);
}
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-list a, .nav-list button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .42rem .55rem; border-radius: 7px; border: 0; background: none;
  color: var(--fg); font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer;
}
.nav-list .icon { color: var(--muted); }
.nav-list a:hover, .nav-list button:hover { background: var(--hover); }
.nav-list [aria-current] { background: var(--hover); font-weight: 600; }
.nav-list [aria-current] .icon { color: var(--fg); }
.nav-list kbd { margin-left: auto; font: .72rem var(--font-mono); color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 .35rem; }
.nav-external { justify-content: space-between; }
.nav-main .nav-external { justify-content: flex-start; }
.nav-main .nav-external .icon:last-child { margin-left: auto; }
/* The folder tree: a chevron opens a folder, its name goes to it. */
.nav-tree .nav-list { margin-left: 1.05rem; padding-left: .35rem; border-left: 1px solid var(--border); }
.tree-folder > summary { display: flex; align-items: center; list-style: none; cursor: pointer; border-radius: 7px; }
.tree-folder > summary::-webkit-details-marker { display: none; }
.tree-folder > summary:hover { background: var(--hover); }
.tree-folder > summary > a { padding-left: .15rem; }
.tree-folder > summary > a:hover { background: none; }
.tree-toggle { flex: none; width: 1.1rem; height: 1.6rem; display: grid; place-items: center; color: var(--muted); }
.tree-toggle::before { content: ""; width: .38rem; height: .38rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; }
.tree-folder[open] > summary > .tree-toggle::before { transform: rotate(45deg); }
.tree-folder > summary:focus-visible { outline: 2px solid var(--accent); }
.nav-tree a.tree-leaf { padding-left: 1.25rem; }
.nav-tree [aria-current="true"] { background: none; }
.nav-tree > li > a:not(.tree-leaf), .nav-tree .nav-list > li > a:not(.tree-leaf) { padding-left: 1.25rem; }
.nav-list .count { margin-left: auto; font-size: .76rem; }
.nav-list [aria-current] .count { color: var(--fg); }
.nav-foot { margin-top: auto; padding: 1.5rem .45rem 0; font-size: .8rem; color: var(--muted); }
.nav-foot p { margin: .3rem 0 0; }
.nav-foot a { color: inherit; }
.footer-text p { margin: 0 0 .3rem; }

/* profile */
.profile { margin: 0 .45rem 1.3rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.profile-avatar { display: block; width: 4rem; height: 4rem; object-fit: cover; border-radius: 50%; margin-bottom: .7rem; }
.profile-name { margin: 0; font-weight: 650; font-size: .95rem; }
.profile-bio { margin-top: .25rem; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.profile-bio p { margin: 0 0 .3rem; }
.profile-links { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.profile-links a {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px;
  background: var(--hover); color: var(--fg); font-size: .78rem; text-decoration: none;
}
.profile-links a:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.profile-links .icon { width: 14px; height: 14px; color: var(--muted); }

/* list pane */
.list-pane { background: var(--bg); padding-bottom: 2rem; }
.list-head {
  position: sticky; top: 0; z-index: 1; background: var(--bg);
  padding: 1.1rem 1rem .8rem; border-bottom: 1px solid var(--border);
}
.list-head h2 { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.35; }
.list-head h2 a { color: inherit; text-decoration: none; }
.list-head h2 a:hover { color: var(--accent); }
.list-filter {
  width: 100%; margin-top: .8rem; padding: .45rem .7rem;
  font: inherit; font-size: .9rem; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px; outline: none;
}
.list-filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.list-items { list-style: none; margin: 0; padding: 0; }
.list-items > li { border-bottom: 1px solid var(--border); }
.list-note a { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1rem 1.05rem; color: var(--fg); text-decoration: none; }
.list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
/* On the right, so titles line up whether or not a note has a picture. */
.list-thumb { flex: none; width: 44px; height: 44px; margin-top: .1rem; border-radius: 6px; object-fit: cover; background: var(--hover); }
.list-note a:hover { background: var(--hover); }
.list-title { font-weight: 600; line-height: 1.35; }
.list-desc { color: var(--muted); font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-meta { display: flex; gap: .6rem; align-items: center; color: var(--muted); font-size: .76rem; }
.list-note a[aria-current] { background: var(--sel-bg); color: var(--sel-fg); }
.list-note a[aria-current] .list-desc, .list-note a[aria-current] .list-meta { color: var(--sel-muted); }
.list-note a[aria-current] .stage { color: inherit; border-color: color-mix(in srgb, var(--sel-muted) 50%, transparent); }
.list-folder a { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; color: var(--fg); font-size: .9rem; font-weight: 500; text-decoration: none; }
.list-folder a:hover { background: var(--hover); }
.list-folder .icon { color: var(--muted); }
.list-folder .count, .list-up { margin-left: auto; color: var(--muted); font-size: .78rem; font-weight: 400; }
.list-more a { display: block; padding: .8rem 1rem; color: var(--muted); font-size: .88rem; }
.list-empty { padding: 1rem; margin: 0; color: var(--muted); font-size: .88rem; }

/* page */
.page { max-width: 46rem; margin: 0 auto; padding: 4rem 2.5rem 6rem; }
.page-aside:empty { display: none; }
.page-aside { margin-top: 3rem; font-size: .9rem; }
@media (min-width: 1500px) {
  .page:has(.page-aside:not(:empty)) {
    max-width: 66rem; display: grid; grid-template-columns: minmax(0, 46rem) 15rem; gap: 3.5rem;
  }
  .page-aside { margin-top: 0; }
  .page-aside > * { position: sticky; top: 2rem; }
}

/* reader mode: only the page; the button stays in the corner */
.reader-toggle { position: fixed; top: .9rem; right: .9rem; z-index: 4; color: var(--muted); }
.reader-toggle:hover, .reader-toggle[aria-pressed="true"] { color: var(--fg); }
@media (min-width: 821px) {
  :root[data-reader] .nav-pane, :root[data-reader] .list-pane, :root[data-reader] .page-aside { display: none; }
  :root[data-reader] .shell { display: block; }
  :root[data-reader] .page { display: block; max-width: 46rem; }
}

/* stacked pages (added by garden.js): the page and the notes opened from
   it side by side; each slides over the last, leaving its spine */
:root { --stack-w: 40rem; --spine: 2.5rem; }
.stack-pane { position: relative; max-width: 46rem; margin: 0 auto; padding: 3rem 2.5rem 6rem; border-top: 1px solid var(--border); }
.stack-close { position: absolute; top: .9rem; right: .9rem; z-index: 2; font-size: 1.2rem; line-height: 1; color: var(--muted); }
.stack-close:hover { color: var(--fg); }
.stack-spine { display: none; }
@media (min-width: 821px) {
  .stacking main {
    position: sticky; top: 0; height: 100vh; display: flex; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  .stacking main > .page, .stacking main > .stack-pane {
    flex: 0 0 min(var(--stack-w), 100%); display: block; max-width: none; height: 100vh; margin: 0;
    overflow-y: auto; overscroll-behavior: contain; position: sticky; padding: 3.5rem 2.5rem 5rem;
    background: var(--bg); border: 0; border-right: 1px solid var(--border);
  }
  .stacking main > .page { left: 0; }
  .stacking main > .stack-pane { box-shadow: -8px 0 18px -10px rgba(0, 0, 0, .18); }
  .stacking main > .stack-pane:nth-of-type(1) { left: calc(1 * var(--spine)); }
  .stacking main > .stack-pane:nth-of-type(2) { left: calc(2 * var(--spine)); }
  .stacking main > .stack-pane:nth-of-type(3) { left: calc(3 * var(--spine)); }
  .stacking main > .stack-pane:nth-of-type(4) { left: calc(4 * var(--spine)); }
  .stacking main > .stack-pane:nth-of-type(5) { left: calc(5 * var(--spine)); }
  .stacking main > .stack-pane:nth-of-type(6) { left: calc(6 * var(--spine)); }
  .stacking main > .stack-pane:nth-of-type(n+7) { left: calc(7 * var(--spine)); }
  .stacking .page-aside { display: none; }
  .stacking .note-header h1 { font-size: 2.1rem; }
  .stacking main > .stack-pane:last-child .stack-close { right: 3.4rem; } /* beside the reader mode button */
  /* A zero-size float that sticks to the pane's top left corner, so the
     label beside it stays in place as the pane scrolls. */
  .stacking .stack-spine {
    display: block; position: sticky; top: 0; float: left; width: 0; height: 0; z-index: 1;
    margin: -3.5rem 0 0 -2.5rem; padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity .15s;
  }
  .stack-spine > span {
    display: block; width: var(--spine); height: 100vh; padding: 1.2rem 0; background: var(--bg); color: var(--muted);
    font: 600 .85rem/var(--spine) var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    writing-mode: vertical-rl; text-align: start;
  }
  .stacking .covered > .stack-spine { opacity: 1; pointer-events: auto; }
  .stacking .stack-spine:hover > span { color: var(--accent); }
}

/* notes */
.note-header h1, .intro h1, .listing h1 {
  font-size: 2.6rem; line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin: .3rem 0 .7rem;
}
.meta { color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; }
.tags { margin: .7rem 0 0; }
.tag {
  display: inline-block; font-size: .82em; text-decoration: none; color: var(--fg);
  background: var(--hover); border-radius: 999px; padding: .05em .65em; margin: 0 .1em .25em 0;
}
.tag:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tag-hidden { display: none; }
.stage {
  display: inline-block; font-size: .74rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .55rem; text-transform: capitalize;
}
.properties { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.2rem; margin: 1rem 0 0; font-size: .88rem; }
.properties > div { display: contents; }
.properties dt { color: var(--muted); }
.properties dd { margin: 0; overflow-wrap: anywhere; }
.content { font-size: 1.06rem; line-height: 1.7; margin-top: 2.2rem; }
.content h1, .content h2, .content h3, .content h4 { line-height: 1.3; letter-spacing: -.01em; margin: 2.2rem 0 .6rem; }
.content h2 { font-size: 1.45rem; }
.content h3 { font-size: 1.18rem; }
.content :target { scroll-margin-top: 5rem; background: color-mix(in srgb, var(--mark) 50%, transparent); }
.content blockquote { margin: 1rem 0; padding: .1rem 1.1rem; border-left: 3px solid var(--border); color: var(--muted); }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.content table { border-collapse: collapse; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--border); padding: .35rem .7rem; }
.content th { background: var(--pane); }
.content li.task-list-item, .content li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.3rem; }
mark { background: var(--mark); color: inherit; padding: 0 .15em; border-radius: 3px; }
code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); padding: .1em .35em; border-radius: 5px; }
pre { font-family: var(--font-mono); font-size: .86rem; line-height: 1.5; background: var(--code-bg); padding: 1rem; border-radius: var(--radius); overflow-x: auto; }
pre code { background: none; padding: 0; font-size: inherit; }
.code-block { position: relative; margin: 1rem 0; }
.code-block > pre { margin: 0; }
.code-title {
  font: 500 .78rem var(--font-mono); color: var(--muted); padding: .45rem 1rem;
  background: var(--code-bg); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
}
.code-title + pre { border-top-left-radius: 0; border-top-right-radius: 0; }
.code-title ~ .code-copy { top: .2rem; }
pre .line.hl { margin: 0 -1rem; padding: 0 1rem; box-shadow: inset 3px 0 var(--accent); }
.code-copy {
  position: absolute; top: .45rem; right: .45rem; padding: .15rem .55rem;
  font: 500 .74rem var(--font); color: var(--muted); cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  opacity: 0; transition: opacity .15s;
}
.code-block:hover .code-copy, .code-copy:focus-visible, .code-copy.copied { opacity: 1; }
.code-copy:hover { color: var(--fg); }
.code-copy.copied { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .code-copy { opacity: 1; } }

/* heading anchors (added by garden.js) */
.heading-anchor {
  position: relative; margin-left: .35em; padding: 0 .15em; color: var(--muted); font-weight: 400;
  text-decoration: none; opacity: 0; transition: opacity .15s;
}
:is(h1, h2, h3, h4, h5, h6):hover > .heading-anchor, .heading-anchor:focus-visible, .heading-anchor.copied { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }
.heading-anchor.copied::after {
  content: attr(data-label); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: .4rem;
  white-space: nowrap; font-size: .75rem; font-weight: 500; letter-spacing: 0; color: var(--bg); background: var(--fg);
  padding: .15rem .5rem; border-radius: 5px;
}
@media (hover: none) { .heading-anchor { opacity: .45; } }

/* link previews (added by garden.js) */
.link-preview {
  position: fixed; z-index: 20; width: min(26rem, calc(100vw - 1rem)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .18); padding: .8rem 1rem .9rem;
}
.link-preview-title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--fg); text-decoration: none; }
.link-preview-title:hover { color: var(--accent); }
.content.link-preview-body { margin-top: .5rem; font-size: .9rem; line-height: 1.6; }
.link-preview-body > :first-child { margin-top: 0; }
.link-preview-body h1, .link-preview-body h2, .link-preview-body h3, .link-preview-body h4 { margin: 1rem 0 .4rem; font-size: 1rem; }
.link-preview-body img { max-height: 12rem; width: auto; }
.link-preview-open { display: block; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); font-weight: 600; text-decoration: none; }

/* links that point nowhere public: plain text, no hint whether private or missing */
.link-unpublished { color: var(--muted); text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
a.internal-link { text-decoration-style: solid; }
a.external-link::after { content: "↗"; font-size: .75em; margin-left: .1em; }

/* embeds */
.embed { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: .4rem 1.1rem; margin: 1.2rem 0; background: var(--pane); }
.embed-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.embed-title a { text-decoration: none; }
.embed-content > :first-child { margin-top: .4rem; }
iframe.embed-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); background: var(--code-bg); margin: 1rem 0; }
iframe.embed-pdf { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); }

/* canvases: a board of absolutely placed cards, scrolled when wider than the page */
.canvas { overflow: auto; max-height: 80vh; margin: 1.2rem 0; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--pane); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; -webkit-overflow-scrolling: touch; }
.embed .canvas { max-height: 28rem; margin: .6rem 0; }
.canvas-board { position: relative; font-size: .92rem; line-height: 1.5; }
.canvas-node { position: absolute; --c: var(--canvas-color, var(--border)); border: 2px solid var(--c); border-radius: var(--radius); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
.canvas-node-content { flex: 1; overflow: auto; padding: .5rem .9rem; }
.canvas-node-content > :first-child { margin-top: 0; }
.canvas-node-content > :last-child { margin-bottom: 0; }
.canvas-node-content h1, .canvas-node-content h2, .canvas-node-content h3 { margin: .6rem 0 .3rem; font-size: 1.1rem; }
.canvas-node-content img { display: block; margin: 0 auto; max-height: 100%; }
.canvas-file-title { padding: .3rem .9rem; border-bottom: 1px solid var(--border); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.canvas-file-title a { text-decoration: none; }
.canvas-group { background: color-mix(in srgb, var(--canvas-color, var(--muted)) 7%, transparent); border-style: solid; border-width: 2px; overflow: visible; }
.canvas-group-label { position: absolute; bottom: 100%; left: 0; margin-bottom: .3rem; font-weight: 600; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.canvas-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.canvas-edge { --e: var(--canvas-color, var(--muted)); }
.canvas-edge > path { fill: none; stroke: var(--e); stroke-width: 2; }
.canvas-edge > path.canvas-arrow { fill: var(--e); stroke: none; }
.canvas-edge-label { position: absolute; transform: translate(-50%, -50%); padding: .05rem .45rem; border-radius: 4px; background: var(--bg); color: var(--muted); font-size: .8rem; white-space: nowrap; }
.canvas-color-1 { --canvas-color: #e93147; }
.canvas-color-2 { --canvas-color: #ec7500; }
.canvas-color-3 { --canvas-color: #e0ac00; }
.canvas-color-4 { --canvas-color: #08b94e; }
.canvas-color-5 { --canvas-color: #00bfbc; }
.canvas-color-6 { --canvas-color: #a882ff; }

/* callouts */
.callout { --c: 70, 120, 200; border-radius: var(--radius); margin: 1.2rem 0; padding: .7rem 1rem; background: rgba(var(--c), .1); border-left: 4px solid rgb(var(--c)); }
.callout-title { font-weight: 600; color: rgb(var(--c)); }
summary.callout-title { cursor: pointer; }
.callout-content > :first-child { margin-top: .3rem; }
.callout-content > :last-child { margin-bottom: 0; }
.callout[data-callout="tip"], .callout[data-callout="hint"], .callout[data-callout="important"] { --c: 0, 150, 136; }
.callout[data-callout="success"], .callout[data-callout="check"], .callout[data-callout="done"] { --c: 46, 160, 67; }
.callout[data-callout="question"], .callout[data-callout="help"], .callout[data-callout="faq"] { --c: 220, 150, 20; }
.callout[data-callout="warning"], .callout[data-callout="caution"], .callout[data-callout="attention"] { --c: 230, 126, 34; }
.callout[data-callout="failure"], .callout[data-callout="fail"], .callout[data-callout="missing"],
.callout[data-callout="danger"], .callout[data-callout="error"], .callout[data-callout="bug"] { --c: 220, 60, 60; }
.callout[data-callout="example"] { --c: 130, 90, 210; }
.callout[data-callout="quote"], .callout[data-callout="cite"] { --c: 120, 120, 120; }
.callout[data-callout="abstract"], .callout[data-callout="summary"], .callout[data-callout="tldr"] { --c: 0, 170, 200; }
.callout[data-callout="todo"] { --c: 70, 120, 200; }

/* math & diagrams render in the browser; until then show the source plainly */
.math { font-family: var(--font-mono); font-size: .92em; }
.math-display { display: block; overflow-x: auto; text-align: center; margin: 1rem 0; }
pre.mermaid { background: none; text-align: center; }

/* search */
.search-dialog, .graph-dialog {
  border: 1px solid var(--border); border-radius: 14px; padding: 0;
  background: var(--bg); color: var(--fg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
.search-dialog::backdrop, .graph-dialog::backdrop { background: rgba(20, 22, 18, .45); backdrop-filter: blur(2px); }
.search-dialog { width: min(40rem, calc(100vw - 2rem)); margin-top: 12vh; }
.search-dialog form { margin: 0; }
.search-dialog input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit;
  font: inherit; font-size: 1.1rem; padding: 1rem 1.2rem; outline: none;
}
.search-results { list-style: none; margin: 0; padding: .4rem; max-height: 55vh; overflow: auto; }
.search-results a { display: block; padding: .6rem .8rem; border-radius: 8px; text-decoration: none; color: var(--fg); }
.search-results [aria-selected="true"] a, .search-results a:hover { background: var(--hover); }
.search-title { display: block; font-weight: 600; }
.search-snippet { display: block; color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-tags { display: block; margin-top: .2rem; color: var(--accent); font-size: .78rem; }
.search-empty { padding: .8rem; color: var(--muted); }
.search-hint { margin: 0; padding: .5rem 1.2rem .8rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--border); }

/* graph */
.local-graph .graph-canvas { height: 15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--pane); margin-bottom: 1.5rem; overflow: hidden; }
.graph-canvas canvas { display: block; cursor: grab; touch-action: none; }
.graph-dialog { width: min(70rem, calc(100vw - 2rem)); height: min(48rem, calc(100vh - 3rem)); }
.graph-dialog .graph-canvas { width: 100%; height: 100%; }
.graph-close { position: absolute; top: .7rem; right: .7rem; font-size: 1.3rem; line-height: 1; }

/* lightbox */
.content img:not(a img) { cursor: zoom-in; }
.lightbox {
  max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 1.5rem;
  border: 0; background: transparent; cursor: zoom-out;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
}
.lightbox[open] { display: flex; animation: lightbox-in .18s ease-out; }
.lightbox::backdrop { background: rgba(10, 11, 9, .88); backdrop-filter: blur(4px); }
.lightbox img {
  max-width: 100%; max-height: calc(100dvh - 6rem); min-height: 0; object-fit: contain;
  border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-caption { margin: 0; max-width: 46rem; color: #e6e8eb; font-size: .9rem; text-align: center; }
.lightbox-close { position: fixed; top: .8rem; right: .8rem; font-size: 1.5rem; line-height: 1; color: #e6e8eb; background: rgba(0, 0, 0, .35); border-color: transparent; }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

/* math once KaTeX has rendered it */
.math .katex { font-family: KaTeX_Main, "Times New Roman", serif; font-size: 1.08em; }
.math-inline:has(.katex) { font-family: inherit; }

/* backlinks & toc */
.backlinks { margin-top: 3.5rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.backlinks + .related { margin-top: 2rem; }
.backlinks ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.backlinks li { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; }
.backlinks li a { font-weight: 600; text-decoration: none; color: var(--fg); }
.backlinks li a:hover { color: var(--accent); }
.backlinks .context { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.toc ul { list-style: none; padding-left: .8rem; margin: 0; }
.toc > ul { padding-left: 0; border-left: 1px solid var(--border); }
.toc > ul > li { padding-left: .8rem; }
.toc li { margin: .3rem 0; line-height: 1.4; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* home & listings */
.lead { font-size: 1.15rem; color: var(--muted); margin-top: 0; }
.explore, .recent { margin-top: 3rem; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .9rem; }
.card-link {
  display: flex; flex-direction: column; gap: .35rem; height: 100%;
  border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem;
  text-decoration: none; color: var(--fg); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.card-link:hover { border-color: var(--fg); }
.card-cover {
  display: block; width: calc(100% + 2.2rem); max-width: none; height: auto; aspect-ratio: 16 / 9;
  margin: -1rem -1.1rem .45rem; border-radius: 9px 9px 0 0; object-fit: cover; background: var(--hover);
}
/* Generated covers: one of eight hues (.art-0 to .art-7, picked from the
   card's URL) at the same lightness and chroma, so they look like one set.
   Yellow and orange are left out: at these lightnesses they turn brown.
   --x and --y move the light spot. */
.card-art {
  --art-l: .83; --art-c: .065; --h: 160;
  display: block; flex: none; width: calc(100% + 2.2rem); aspect-ratio: 16 / 9;
  margin: -1rem -1.1rem .45rem; border-radius: 9px 9px 0 0;
  background:
    radial-gradient(ellipse 75% 110% at calc(var(--x) * 20% + 10%) calc(var(--y) * 25%), oklch(calc(var(--art-l) + .07) calc(var(--art-c) * .7) calc(var(--h) + 25)), transparent 70%),
    linear-gradient(160deg, oklch(var(--art-l) var(--art-c) var(--h)), oklch(calc(var(--art-l) - .05) var(--art-c) calc(var(--h) - 20)));
}
.card-art-band { aspect-ratio: auto; height: 3.25rem; }
.art-0 { --h: 20; }  .art-1 { --h: 150; } .art-2 { --h: 180; }
.art-3 { --h: 215; } .art-4 { --h: 250; } .art-5 { --h: 280; }
.art-6 { --h: 310; } .art-7 { --h: 345; }
:root[data-theme="dark"] .card-art { --art-l: .52; --art-c: .075; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-art { --art-l: .52; --art-c: .075; }
}
.card-title { font-size: 1.02rem; font-weight: 650; line-height: 1.35; }
.card-desc { color: var(--muted); font-size: .9rem; }
.card-meta { margin-top: auto; display: flex; gap: .6rem; align-items: center; color: var(--muted); font-size: .8rem; }
.folders { padding-left: 1.2rem; }

/* tag index and tag pages */
.kind-tags .page { max-width: 68rem; }
.index-head { margin-bottom: 1.8rem; }
.index-head .lead { margin: 0; }
.hash { color: var(--accent); font-weight: 500; margin-right: .05em; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.sub-tags { margin-top: .9rem; }
.tag .count { color: inherit; opacity: .6; font-size: .9em; margin-left: .15em; }

.tag-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.tag-filter {
  flex: 1 1 14rem; max-width: 22rem; padding: .5rem .75rem; font: inherit; font-size: .92rem; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.tag-filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.segmented { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; background: var(--hover); border-radius: 9px; }
.segmented button {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 500;
  padding: .3rem .8rem; border-radius: 7px; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

.tag-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.tag-card {
  display: flex; flex-direction: column; gap: .75rem; min-width: 0; margin: 0; padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); transition: border-color .15s;
}
.tag-card:hover { border-color: color-mix(in srgb, var(--fg) 35%, var(--border)); }
.tag-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; color: var(--fg); text-decoration: none; }
.tag-card-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tag-card-head:hover .tag-card-name { color: var(--accent); }
.tag-card-count { flex: none; color: var(--muted); font-size: .8rem; }
.tag-meter { display: block; height: 4px; border-radius: 4px; background: var(--hover); overflow: hidden; }
.tag-meter::after {
  content: ""; display: block; height: 100%; border-radius: inherit; background: var(--accent); opacity: .75;
  width: calc(var(--n) / var(--max) * 100%);
}
.tag-card-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; }
.tag-card-notes li { display: flex; align-items: baseline; gap: .6rem; margin: 0; padding: .2rem 0; font-size: .92rem; }
.tag-card-notes a { flex: 1; min-width: 0; color: var(--fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-card-notes a:hover { color: var(--accent); }
.tag-card-notes time { flex: none; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--border); }
.tag-card-foot .tag { margin: 0; }
.tag-card-more { margin-left: auto; font-size: .82rem; font-weight: 500; text-decoration: none; }
.tag-empty { margin-top: 1.5rem; }
.empty-state { border: 1px dashed var(--border); border-radius: 12px; padding: 1.5rem 1.6rem; }
.empty-state p { margin: .3rem 0; }
.count { color: var(--muted); font-size: .8rem; }
.note-list li { margin: .3rem 0; }
.not-found { padding-top: 10vh; }

/* medium screens: a note gets the room, the list stays on list pages */
@media (max-width: 1180px) {
  :root { --nav-w: 13.5rem; --list-w: 19rem; }
  .kind-note.has-list .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
  .kind-note .list-pane { display: none; }
  .page { padding: 3rem 2rem 5rem; }
}
/* small screens: the nav becomes a top bar, the list follows the page */
@media (max-width: 820px) {
  .shell, .has-list .shell { display: flex; flex-direction: column; }
  .nav-pane { position: sticky; z-index: 5; height: auto; padding: .7rem 1rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav-head { align-items: center; padding: 0; }
  .menu-toggle:not([hidden]) { display: inline-grid; }
  .reader-toggle { display: none; }
  .nav-body, .nav-foot { display: none; }
  .nav-open .nav-pane { max-height: 100vh; overflow-y: auto; }
  .nav-open .nav-body { display: block; margin-top: .8rem; }
  .nav-open .nav-foot { display: block; padding-top: 1rem; }
  .list-pane { position: static; height: auto; overflow: visible; border-right: 0; order: 2; border-top: 1px solid var(--border); }
  .list-head { position: static; }
  .kind-note .list-pane { display: block; }
  .kind-folder .list-pane, .kind-tag .list-pane { display: none; }
  main { order: 1; }
  .page { padding: 2rem 1rem 3rem; }
  .note-header h1, .intro h1, .listing h1 { font-size: 2rem; }
  img.align-left, img.align-right { float: none; display: block; max-width: 100%; margin: 1rem auto; }
}

/* print: only the note, in light colors */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    --bg: #fff; --pane: #fff; --hover: #f1f2f4; --fg: #000; --muted: #555; --border: #ccc;
    --mark: #f6e7a6; --code-bg: #f5f5f5; color-scheme: light;
  }
  body { font-size: 11pt; }
  .shell, .has-list .shell { display: block; min-height: 0; }
  .nav-pane, .list-pane, .page-aside, .skip, .backlinks, .icon-button,
  .search-dialog, .graph-dialog, .lightbox, .heading-anchor, .code-copy, .link-preview, iframe.embed-video { display: none !important; }
  .page { max-width: none; padding: 0; }
  .note-header h1, .intro h1, .listing h1 { font-size: 22pt; }
  .content { margin-top: 1.2rem; font-size: 11pt; }
  a { color: inherit; }
  a.external-link::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--muted); overflow-wrap: anywhere; }
  .content h1, .content h2, .content h3, .content h4 { break-after: avoid; }
  pre, blockquote, table, img, figure, .callout, .embed { break-inside: avoid; }
  pre { white-space: pre-wrap; }
  .tag { border: 1px solid var(--border); }
}