* { box-sizing:border-box}
html { scroll-behavior:smooth; scroll-padding-top:100px}
body { margin:0; background:var(--bg); color:var(--text); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif,"Segoe UI Emoji","Segoe UI Symbol"; font-size:16px; line-height:1.5}
/* Notion links use 70% opacity; underline alpha includes that opacity. */
 :root { --bg:#fff; --text:#2c2c2b; --muted:#7d7a75; --faint:#e6e5e3; --soft:#f7f6f3; --hover:rgba(55,53,47,.06); --padding:96px; --link:rgba(44,44,43,.7); --link-hover:var(--link); --link-underline:rgba(55,53,47,.28)}
[data-theme=dark] { color-scheme:dark; --bg:#191919; --text:#f0efed; --muted:#ada9a3; --faint:#383836; --soft:#202020; --hover:rgba(255,255,255,.055); --popup:#252525; --card:rgba(255,255,255,.055); --link:rgba(240,239,237,.7); --link-hover:var(--link); --link-underline:rgba(255,255,255,.1974); }
a { color:inherit; text-decoration:none}
button { font:inherit; color:inherit; cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,.post-body [role=button]:focus-visible { outline:2px solid #2eaadc; outline-offset:3px}
button { border:0; background:none; border-radius:3px}
button:hover:not(.tag-filter),a.category-row:hover { background:var(--hover)}
[hidden] { display:none!important}
.site-header svg,.property-label>svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0}
.site-header { height:47px; position:sticky; top:0; z-index:20; background:var(--bg); display:flex; align-items:center; justify-content:space-between; padding:0 12px 0 20px; gap:16px; font-size:14px}
.breadcrumbs { min-width:0; display:flex; align-items:center; gap:12px; white-space:nowrap; overflow:hidden}
.site-logo,.post-crumb { min-width:0; display:flex; align-items:center; gap:6px; padding:3px 0}
.site-logo span,.post-crumb span { overflow:hidden; text-overflow:ellipsis}
.site-logo { flex-shrink:0}
.post-crumb { flex:1}
.crumb-divider { color:#aaa}
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0}
.search-button,.share-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:4px; font-size:14px; line-height:20px}
.share-button svg { fill:currentColor; stroke-width:1}
.theme-toggle { height:24px; width:48px; border-radius:20px; background:#e8e8e8; position:relative; padding:0}
.theme-knob { position:absolute; top:4px; left:4px; background:white; width:16px; height:16px; border-radius:50%; transition:left .15s}
.theme-symbol { position:absolute; right:5px; top:0; color:#37352f; font-size:19px; line-height:24px}
[data-theme=dark] .theme-toggle { background:#444}
[data-theme=dark] .theme-knob { left:28px}
[data-theme=dark] .theme-symbol { left:4px; right:auto; color:#ddd}
.reading-progress { position:absolute; left:0; bottom:0; height:2px; width:0; background:#f4e875}
.page-cover { height:30vh; overflow:hidden}
.page-cover img { width:100%; height:100%; object-fit:none; display:block}
.empty-cover { height:150px; min-height:150px}
.page-width { max-width:900px; padding-left:var(--padding); padding-right:var(--padding); margin:auto}
.page-icon { width:78px; height:78px; font-size:78px; line-height:1.1; margin-top:-42px; margin-left:3px; position:relative; z-index:1; user-select:none}
.page-title { font-size:40px; font-weight:700; line-height:1.2; margin:9px 0 0; padding:0 2px; overflow-wrap:anywhere}
.properties { margin-top:12px; padding-bottom:24px}
.property-row { display:grid; grid-template-columns:164px minmax(0,1fr); min-height:34px; font-size:14px}
.property-label { display:flex; align-items:center; height:34px; gap:8px; padding:0 6px; color:rgba(55,53,47,.6); line-height:1.2; white-space:nowrap}
.property-label>span { width:16px; text-align:center; color:#aaa; font-size:18px; line-height:18px}
.property-label>svg { width:16px; height:16px; color:rgba(55,53,47,.45)}
.property-empty { color:var(--muted); font-weight:400 }
[data-theme=dark] .property-label { color:var(--muted) }
[data-theme=dark] .property-label>svg { color:#7d7a75 }
.property-value { padding:8px 8px 2px; display:flex; align-items:flex-start; flex-wrap:wrap; min-width:0}
.date-property { padding-bottom:8px; line-height:18px}
.tag { display:inline-block; vertical-align:middle; max-width:100%; font-size:14px; line-height:18px; border-radius:3px; padding:0 6px; margin:0 6px 6px 0; background:var(--tag-bg,#f1f0ef); color:var(--text); overflow-wrap:anywhere}
[data-theme=dark] .tag { background:color-mix(in srgb,var(--tag-bg,#888) 24%,transparent); color:#eee}
.page-layout { position:relative; padding-bottom:100px}
.content { padding-top:5px; min-width:0}
.toc { position:fixed; left:calc(50% + 386px); width:220px; z-index:5; max-height:calc(100vh - 80px); overflow:auto; color:var(--muted); font-size:14px; line-height:1.3}
.toc a { display:block; padding:6px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:3px}
.toc a:hover { background:var(--hover)}
.toc a[aria-current=true] { color:var(--text)}
.toc .toc-level-3 { padding-left:14px}
.toc .toc-level-4 { padding-left:26px}
.content h2 { font-size:30px; line-height:1.3; font-weight:600; padding:3px 2px; margin:32px 0 4px; scroll-margin-top:0}
.content h3 { font-size:24px; line-height:1.3; font-weight:600; padding:3px 2px; margin:24px 0 4px; scroll-margin-top:0}
.content h4 { font-size:20px; line-height:1.3; font-weight:600; padding:3px 2px; margin:20px 0 4px; scroll-margin-top:0}
.content p { margin:4px 0; padding:3px 2px; overflow-wrap:anywhere}
.profile-columns { display:flex; gap:28px; margin-top:16px; min-height:96px}
.profile-links { width:37.5%; flex-shrink:0; margin:0; padding:0 0 0 28px}
.profile-links li { padding:4px 0; line-height:24px}
.profile-links a,.post-body a { border-bottom:1px solid rgba(55,53,47,.2)}
.profile-links a { color:var(--link); border-bottom-color:var(--link-underline)}
.profile-links img { display:inline-block; width:16px; height:16px; vertical-align:-2px; object-fit:contain }
.profile-links code { font-size:14px; white-space:nowrap; color:#eb5757; background:var(--soft); padding:2px 5px; border-radius:3px}
.bookmark { display:flex; flex:1; border:1px solid var(--faint); height:auto; min-width:0; align-self:stretch; border-radius:3px; overflow:hidden}
.bookmark>div { width:54%; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:10px 12px; font-size:14px}
.bookmark small { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:8px}
.bookmark img { width:46%; object-fit:cover}
.recent>h2 { margin-top:44px}
.card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px}
.card { position:relative; border-radius:4px; overflow:hidden; min-width:0; box-shadow:0 0 0 1px rgba(15,15,15,.1),0 2px 4px rgba(15,15,15,.1); display:flex; flex-direction:column}
.card-link::after { content:""; position:absolute; inset:0; z-index:1 }
.card-tags .tag-filter { position:relative; z-index:2 }
.tag-filter { text-align:left }
.tag-filter:hover { text-decoration:underline }
.card:hover { background:var(--hover)}
.card-preview { aspect-ratio:16/9; flex-shrink:0; overflow:hidden; background:var(--bg)}
.card-preview>img { width:100%; height:100%; object-fit:cover; display:block}
.text-preview { padding:0; font-size:12px; line-height:18px; pointer-events:none}
.text-preview h2 { font-size:22.5px; line-height:29.25px; margin:30px 6px 12px; padding:2px}
.text-preview h3 { font-size:18px; margin:24px 6px 12px; padding:2px; line-height:1.3}
.text-preview p { margin:0 6px 12px; padding:2px}
.text-preview img,.text-preview .mermaid { display:none}
.card-body { padding:8px 10px 10px}
.content .card-title { font-size:15px; font-weight:500; line-height:21px; margin:0 0 6px; padding:0; overflow-wrap:anywhere}
.card-title>span { font-size:14px}
.card-category,.card-tags { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; min-height:24px; margin:0 0 2px; padding:0 1px}
.card .tag { font-size:12px; line-height:18px; padding:0 6px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card time { font-size:12px; display:flex; align-items:center; min-height:24px; line-height:14.4px; margin:0 0 2px; padding:0 1px}
.load-more { display:flex; align-items:center; width:100%; height:30px; padding:0 0 2px 8px; margin:0; color:var(--text); font-size:14px; font-weight:400; line-height:20px; text-align:left}
.load-more span { opacity:.4}
.load-more svg { width:14px; height:14px; margin:0 6px 0 -1px; fill:currentColor; opacity:.3; flex-shrink:0}
.category-section>h2 { margin-top:40px; margin-bottom:16px}
.category-group { margin-bottom:22px}
.category-group .category-heading { margin:0; padding:0; font-size:14px; font-weight:400; line-height:28px; display:flex; gap:8px; align-items:center}
.category-label { padding:0 6px; border-radius:3px; line-height:1.2; background:var(--tag-bg); color:var(--tag-fg)}
[data-theme=dark] .category-label { background:var(--tag-dark-bg); color:var(--tag-dark-fg)}
.category-count { font-size:12px; color:var(--muted)}
.category-row { display:flex; gap:8px; align-items:center; min-height:30px; padding:3px 4px; border-radius:3px; font-size:14px; line-height:1.5}
.row-title { font-weight:500; min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.category-row time { font-size:12px; white-space:nowrap}
.post-body h2 { margin:30px 0 6px; padding:2px }
.post-body h3 { margin:26px 0 6px; padding:2px }
.post-body h4 { margin:22px 0 6px; padding:2px }
.post-body p { margin:0; padding:8px 2px }
.post-body>p:first-child,.post-body>.block-anchor:first-child+p { margin-top:10px }
.post-body ul,.post-body ol { padding-left:30px; margin:4px 0}
.post-body li { padding:3px 2px}
.post-body li>p { padding:0}
.post-body strong { font-weight:600}
.post-body code { font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; font-size:85%; padding:3px 5px; border-radius:3px; background:var(--soft); color:#eb5757}
.code-block { position:relative; margin:8px 0}
.code-block pre { background:rgba(66,35,3,.03); padding:36px 22px; margin:0; border-radius:10px; overflow:auto; line-height:1.5}
.code-block code { display:block; min-width:max-content; color:var(--text); background:none; padding:0; font-size:13.6px; font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
.copy-code { position:absolute; right:10px; top:8px; color:var(--muted); font-size:12px; opacity:0}
.code-block:hover .copy-code,.copy-code:focus-visible { opacity:1}
.code-language { position:absolute; right:12px; bottom:6px; font-size:12px; color:var(--muted)}
.post-body img { max-width:100%; height:auto; display:block; margin:auto; border-radius:1px}
.post-body p:has(>img) { margin:16px 0 4px; padding:0}
.post-body .caption { font-size:14px; font-style:normal; color:var(--muted); line-height:1.4; margin:4px 0 20px; padding:0 2px; text-align:left }
.post-body .caption > p { font-size:inherit; line-height:inherit; margin:0; padding:0 }
.post-body .caption code { font-size:inherit }
.post-body .caption > p + p { margin-top:8px }
.post-body figure:has(>figcaption) { margin-bottom:20px }
.post-body figure > .caption { margin-bottom:0 }
.post-body :is(figure:has(>figcaption),.caption) + p { padding-top:0 }
.post-body figure > :has(+figcaption) { margin-bottom:0; padding-bottom:0 }
.post-body blockquote,.post-body aside { margin:8px 0; padding:16px; background:var(--soft); border-radius:3px}
.post-body blockquote { border-left:3px solid var(--text); background:none; padding:0 22px; margin:8px 2px }
.post-body blockquote:not(.callout)>p { padding:0 }
.post-body blockquote:not(.callout)>p+p { margin-top:16px }
.post-body table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; margin:16px 0 32px; font-size:14px; line-height:20px }
.post-body td,.post-body th { border:1px solid var(--faint); padding:7px 9px; text-align:left; vertical-align:top }
.post-body th { background:var(--soft); font-weight:500 }
.post-body iframe,.post-body video { max-width:100%; border:0}
.missing-image { font-size:14px; color:var(--muted)}
.mermaid { line-height:normal; overflow:auto; text-align:center; background:var(--bg); padding:16px}
.mermaid foreignObject p { margin:0; padding:0 }
.back-to-top { position:fixed; right:18px; bottom:18px; z-index:12; display:flex; gap:7px; align-items:center; background:var(--bg); box-shadow:0 2px 8px #0001; padding:7px 10px; font-size:12px}
.toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:8px 14px; border-radius:4px; opacity:0; pointer-events:none; font-size:14px}
.toast.show { opacity:1}
.hljs-keyword,.hljs-selector-tag,.language-yaml .hljs-attr { color:#07a }
.hljs-string,.hljs-attr,.hljs-built_in { color:#690 }
.hljs-number,.hljs-literal,.hljs-attribute { color:#905 }
.hljs-title { color:#dd4a68 }
.hljs-comment { color:#708090 }
.hljs-bullet { color:#999 }
.hljs-variable { color:#e90 }
[data-theme=dark] .hljs-keyword,[data-theme=dark] .hljs-selector-tag,[data-theme=dark] .language-yaml .hljs-attr { color:#66a2cc }
[data-theme=dark] .hljs-string,[data-theme=dark] .hljs-attr,[data-theme=dark] .hljs-built_in { color:#bde052 }
[data-theme=dark] .hljs-number,[data-theme=dark] .hljs-literal,[data-theme=dark] .hljs-attribute { color:#d1949e }
[data-theme=dark] .hljs-title { color:#ecec93 }
[data-theme=dark] .hljs-comment { color:#998066 }
[data-theme=dark] .hljs-variable { color:#f5b83d }

@media(max-width:1199px) { .toc { display:none}
}
@media(max-width:900px) { :root { --padding:48px}
}
@media(max-width:600px) { :root { --padding:24px}
.site-header { padding:0 12px; gap:8px}
.breadcrumbs { gap:8px}
.site-logo { flex-shrink:1; max-width:150px}
.post-crumb { max-width:150px}
.header-actions { gap:8px}
.header-actions .search-button span,.header-actions .share-button span { display:none}
.header-actions .search-button,.header-actions .share-button { padding:3px}
.empty-cover { height:120px; min-height:120px}
.page-title { font-size:32px; margin-top:20px}
.property-row { grid-template-columns:124px minmax(0,1fr)}
.content h2 { font-size:24px; line-height:1.3}
.content h3 { font-size:20px}
.content h4 { font-size:18px}
.profile-columns { flex-direction:column; gap:16px}
.profile-links { width:100%}
.bookmark { width:100%; flex:none}
.card-grid { grid-template-columns:1fr}
.profile-links code { white-space:normal}
.back-to-top { right:10px; bottom:10px}
.category-row time { font-size:11px}
.text-preview h2 { font-size:22.5px}
}

@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto}
* { transition:none!important}
}


.theme-symbol { font-family:Arial,sans-serif; font-variant-emoji:text; }
.inline-emoji { font-size:14px; }

.post-body { overflow-wrap:anywhere; }
.post-body pre { overflow-wrap:normal; }

.tag { color:var(--tag-fg,var(--text)); }
[data-theme=dark] .tag { background:var(--tag-dark-bg); color:var(--tag-dark-fg); }
.theme-toggle { background:#d2d2d2; }
.theme-knob { width:15px; height:15px; top:4.5px; left:4.5px; }
.theme-symbol { width:16px; height:16px; top:4px; right:6.75px; }
[data-theme=dark] .theme-toggle { background:#f1c945; }
[data-theme=dark] .theme-knob { left:28.5px; }
[data-theme=dark] .theme-symbol { left:6.75px; right:auto; }
@media(max-width:600px) {
  .site-header { padding:0 10px 0 18px; gap:16px; }
  .header-actions { gap:12px; }
  .header-actions .search-button,.header-actions .share-button { padding:4px; }
  .site-logo { max-width:none; }
  .breadcrumbs:has(.post-crumb) .site-logo { width:76px; max-width:76px; flex-shrink:0; }
  .post-crumb { max-width:none; }
}

.post-body > p:first-child:has(>img) { margin-top:12px; }
.inline-emoji { line-height:1; }

.bookmark>div { padding:12px 14px 14px; }
.bookmark>div>span { line-height:20px; }
.bookmark small { line-height:16px; margin-top:10px; }
@media(max-width:600px) {
  .profile-columns { gap:24px; }
  .bookmark { height:228px; flex-direction:column-reverse; }
  .bookmark>div { width:100%; height:72px; flex:none; }
  .bookmark img { width:100%; height:154px; flex:none; }
  .recent>h2 { margin-top:49px; }
}


@keyframes anchor-flash { from { background:rgba(46,170,220,.2); } to { background:transparent; } }
.post-body h2:target,.post-body h3:target,.post-body h4:target { animation:anchor-flash 2s ease-out; }
@media(prefers-reduced-motion:reduce) { .post-body :target { animation:none; } }

.post-body li + li { margin-top:2px; }

.post-body blockquote.callout { display:flex; align-items:flex-start; gap:0; background:#f9f8f7; border:1px solid transparent; border-radius:10px; padding:12px; margin:8px 2px }
.callout-icon { flex:none; width:24px; text-align:center; line-height:24px; margin-top:7.5px }
.callout-content { min-width:0; padding:0 8px; flex:1 }
.callout-content p { margin:0; padding:8px 0 }
[data-theme=dark] .post-body blockquote.callout { background:var(--soft) }

.visual-icon { display:inline-block; width:1em; height:1em; object-fit:contain; flex-shrink:0; vertical-align:-.12em}
.page-icon .visual-icon { width:78px; height:78px; display:block}
.card-title .visual-icon { width:16.2px; height:16.2px; float:left; margin:2px 4px 0 -2px}
.category-row > .visual-icon { width:18px; height:18px}
.bookmark small .visual-icon { width:14px; height:14px; margin-right:4px}

.breadcrumbs .visual-icon { width:20px; height:20px; padding:1px}
.breadcrumbs .visual-icon-text { width:20px; font-size:18px; line-height:20px; text-align:center; flex-shrink:0}

.post-body a.page-mention { border:0; vertical-align:top}
.page-mention-icon { display:inline-block; width:1.2em; margin-left:.1em; margin-right:.5em; white-space:nowrap; position:relative}
.page-mention-icon img { display:inline; width:1.2em; height:1.2em; margin:0; object-fit:contain; border-radius:0}
.page-mention-title { border-bottom:.05em solid rgba(55,53,47,.25); font-weight:500}
[data-theme=dark] .page-mention-title { border-bottom-color:var(--faint)}

/* Native Obsidian figures, nested callouts and equations. */
.post-body figure { margin:16px auto; padding:0; max-width:100% }
.post-body figure > img { width:100%; margin:0 auto }
.post-body .callout-content > * + * { margin-top:12px }
.post-body .callout-content > blockquote { padding:0 22px }
.post-body .callout-title { font-weight:600; margin:0; padding:8px 0 }
.post-body details.callout { margin:0; padding:6px 2px 1px; border-radius:0; background:none }
.post-body details.callout > summary { cursor:pointer; display:flex; align-items:center; gap:6px; min-height:28px }
.post-body details.callout > summary .callout-icon { margin:0; height:24px }
.post-body details.callout > summary .callout-title { margin:0; padding:2px 0 }
.post-body details.callout > .callout-content { margin-top:0; padding:0 0 0 24px }
.post-body .katex-display { overflow-x:auto; overflow-y:hidden; padding:8px 0; max-width:100% }
.block-anchor { display:block; scroll-margin-top:70px; height:0 }
.post-body iframe { max-width:100%; display:block }

/* Original Notion columns retain their widths and reading order. */
.post-body .notion-columns { display:flex; gap:46px; align-items:flex-start; padding:12px 0 }
.post-body .notion-column { flex:var(--column-ratio,1) 1 0; min-width:0 }
.post-body .notion-column > figure { margin:4px auto }
.post-body .notion-column > :first-child { margin-top:4px }
.post-body .notion-column > :last-child:not(figure) { margin-bottom:0 }
@media(max-width:600px) {
  .post-body .notion-columns { flex-direction:column; gap:0; padding:0 }
  .post-body .notion-column { flex:1 1 auto; width:100%; padding:12px 0 }
}

.search-dialog { width:min(640px,calc(100% - 32px)); max-height:80vh; margin:10vh auto 0; padding:24px; border:1px solid var(--faint); border-radius:8px; background:var(--bg); color:var(--text); box-shadow:0 16px 48px rgba(0,0,0,.22) }
.search-dialog[open] { display:flex; flex-direction:column; gap:12px }
.search-dialog::backdrop { background:rgba(15,15,15,.4) }
.search-heading { display:flex; justify-content:space-between; align-items:center; gap:16px }
.search-heading h2 { font-size:20px; margin:0; font-weight:600 }
.search-close { font-size:20px; width:32px; height:32px; flex-shrink:0 }
.search-label { font-size:14px; color:var(--muted) }
.search-input { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--faint); border-radius:4px; font:inherit; color:var(--text); background:var(--soft) }
.search-input:focus { outline:2px solid #2eaadc; outline-offset:1px }
.search-filter { align-self:flex-start; max-width:100%; padding:4px 8px; border-radius:4px; background:var(--soft); font-size:14px; overflow-wrap:anywhere; text-align:left }
.search-status { margin:0; font-size:14px; color:var(--muted); overflow-wrap:anywhere }
.search-results-scroll { min-height:0; overflow:auto; overscroll-behavior:contain }
.search-results { list-style:none; margin:0; padding:0 }
.search-results li + li { border-top:1px solid var(--faint) }
.search-results a { display:block; padding:12px 8px; border-radius:4px }
.search-results a:hover { background:var(--hover) }
.search-results h3 { margin:0 0 6px; font-size:16px; font-weight:600; line-height:1.5; overflow-wrap:anywhere }
.search-results p { margin:0; font-size:14px; color:var(--muted); line-height:1.5; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden }
.search-more { display:block; width:100%; margin-top:8px; padding:10px; font-size:14px }
.search-help { margin:0; color:var(--muted); font-size:12px }
@media(max-width:600px) { .search-dialog { width:calc(100% - 20px); margin-top:5vh; max-height:90vh; padding:16px } }

.share-menu { inset:auto; margin:0; border:0; border-radius:3px; padding:8px 12px; color:var(--text); background:var(--bg); box-shadow:0 0 0 1px rgba(15,15,15,.05),0 3px 6px rgba(15,15,15,.1),0 9px 24px rgba(15,15,15,.2) }
.share-menu:popover-open { display:flex; align-items:center; gap:8px }
.share-option { display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; overflow:hidden; color:inherit; background:none; cursor:pointer; opacity:.6 }
.share-option:hover,.share-option:focus-visible { opacity:1 }
.share-option:focus-visible { outline:2px solid #2383e2; outline-offset:2px }
.share-option img { display:block; width:30px; height:30px }
.share-copy { box-shadow:0 0 4px 2px rgba(0,0,0,.15) }
.share-copy svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
[data-theme="dark"] .share-menu { background:var(--popup); box-shadow:0 0 0 1px rgba(15,15,15,.1),0 3px 6px rgba(15,15,15,.2),0 9px 24px rgba(15,15,15,.4) }
[data-theme="dark"] .share-copy { background:var(--soft); box-shadow:none }

[data-theme=dark] .card { background:var(--card) }
[data-theme=dark] .card:hover { background:linear-gradient(var(--hover),var(--hover)),var(--card) }
[data-theme=dark] .code-block pre { background:rgba(252,252,252,.03) }
[data-theme=dark] .profile-links code,[data-theme=dark] .post-body :not(pre)>code { background:rgba(255,255,255,.055) }
[data-theme=dark] .search-dialog { background:var(--popup) }
[data-theme=dark] .profile-links a { border-bottom-color:var(--link-underline) }
[data-theme=dark] .post-body a { border-bottom-color:var(--faint) }
[data-theme=dark] .crumb-divider { color:var(--muted) }

.post-body img[role=button],.post-body .mermaid[role=button] { cursor:zoom-in }
html:has(.image-viewer[open]) { overflow:hidden }
.image-viewer { width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; margin:0; border:0; padding:48px 24px 24px; background:transparent; color:white }
.image-viewer[open] { display:flex; align-items:center; justify-content:center }
.image-viewer::backdrop { background:rgba(0,0,0,.86) }
.image-viewer img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; cursor:zoom-out }
.image-viewer-close { position:absolute; top:8px; right:12px; min-width:44px; min-height:44px; padding:6px 10px; font-size:24px; color:white }

.image-viewer>svg { width:100%; height:100%; max-width:none!important; background:var(--bg); cursor:zoom-out }

.diagram-preview .mermaid { width:100%; height:100%; margin:0; padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center }
.diagram-preview .mermaid:not([data-processed=true]) { visibility:hidden }
.diagram-preview .mermaid>svg { flex:none; max-width:none!important }

.post-body table code { white-space:pre-wrap }

/* Compact Notion bookmarks, also used at the site's mobile breakpoint. */
.bookmark.bookmark-card { display:flex; flex-flow:row wrap-reverse; position:relative; width:calc(100% - 4px); height:auto; min-height:0; margin:12px 2px; border:1px solid rgba(28,19,1,.11); border-radius:10px; color:#2c2c2b; text-decoration:none }
.bookmark.bookmark-card:hover { background:rgba(33,27,23,.05) }
.bookmark-card>.bookmark-content { position:relative; flex:4 1 180px; width:auto; height:auto; padding:12px 14px 14px; display:flex; flex-direction:column; justify-content:flex-start; gap:6px; min-width:0 }
.bookmark-card .bookmark-main { display:flex; flex-direction:column; gap:2px; min-width:0 }
.bookmark-card .bookmark-title { display:block; font-size:14px; font-weight:400; line-height:20px; min-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bookmark-card .bookmark-description { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:32px; max-height:32px; overflow:hidden; font-size:12px; font-weight:400; line-height:16px; color:#7d7a75 }
.bookmark-card .bookmark-url { display:flex; align-items:center; gap:6px; width:100%; margin:0; font-size:12px; font-weight:400; line-height:16px; color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bookmark-card .bookmark-url-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bookmark-card .bookmark-icon { flex-shrink:0; display:inline-block; width:16px; height:16px; margin:0; vertical-align:middle; object-fit:contain; border-radius:0 }
.bookmark-card>.bookmark-media { flex:1 1 180px; display:block; position:relative; width:auto; height:auto; min-width:0; padding:0; overflow:hidden }
.bookmark-card .bookmark-media>img { position:absolute; inset:0; width:100%; height:100%; max-width:none; margin:0; object-fit:cover; border-radius:0 }
[data-theme=dark] .bookmark.bookmark-card { color:var(--text); border-color:rgba(255,255,235,.1) }
[data-theme=dark] .bookmark.bookmark-card:hover { background:var(--hover) }
[data-theme=dark] .bookmark-card .bookmark-description { color:var(--muted) }
@media(min-width:601px) {
 .bookmark.bookmark-card:not(.youtube-bookmark) { flex-flow:row wrap; border-color:#e6e5e3 }
 .bookmark-card:not(.youtube-bookmark)>.bookmark-content { padding:18px 24px 14px; justify-content:space-between; gap:8px }
 .bookmark-card:not(.youtube-bookmark) .bookmark-main { gap:3px }
 .bookmark-card:not(.youtube-bookmark):has(.bookmark-icon) .bookmark-main { padding-top:26.312px }
 .bookmark-card:not(.youtube-bookmark) .bookmark-title { font-size:17px; font-weight:500; line-height:22px; min-height:0 }
 .bookmark.bookmark-card:not(.youtube-bookmark) .bookmark-description { height:auto; max-height:36px; font-size:13px; line-height:18px; color:inherit }
 .bookmark-card:not(.youtube-bookmark) .bookmark-description:empty { display:none }
 .bookmark-card:not(.youtube-bookmark) .bookmark-url { font-size:13px; line-height:18px; color:#7d7a75 }
 .bookmark-card:not(.youtube-bookmark) .bookmark-icon { position:absolute; top:19px; left:25px; width:21.312px; height:21.312px; margin:0; border-radius:4px }
 .bookmark-card:not(.youtube-bookmark)>.bookmark-media { order:-1; flex-basis:100px; height:154px }
 [data-theme=dark] .bookmark.bookmark-card:not(.youtube-bookmark) { border-color:var(--faint) }
 [data-theme=dark] .bookmark-card:not(.youtube-bookmark) .bookmark-url { color:var(--muted) }
}

.post-body figure>.bookmark-card:has(+figcaption) { margin-bottom:0 }
.post-body a:not(.bookmark):not(.tag) { color:var(--link); border-bottom-color:var(--link-underline) }
.post-body a:not(.bookmark):not(.tag):hover { color:var(--link-hover) }
.post-body details.callout>summary { list-style:none }
.post-body details.callout>summary::-webkit-details-marker { display:none }
.callout-toggle::before { content:""; display:inline-block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:7px solid currentColor; vertical-align:middle; opacity:.65 }
.post-body details.callout[open]>summary .callout-toggle::before { transform:rotate(90deg) }

[data-theme=dark] .mermaid,[data-theme=dark] .image-viewer>svg { background:var(--soft) }

@media(min-width:601px) {
  .profile-columns>.bookmark { position:relative }
  .profile-columns>.bookmark>img { position:absolute; right:0; top:0; width:46%; height:100% }
}