* { 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}
 :root { --bg:#fff; --text:rgb(55,53,47); --muted:rgb(120,119,116); --faint:rgba(55,53,47,.09); --soft:#f7f6f3; --hover:rgba(55,53,47,.06); --padding:96px; --link:#4A6F8F; --link-hover:#355A78}
[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:#8FB3D0; --link-hover:#B2CCE0; }
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:cover; 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:36px 0 0; padding:3px 2px; overflow-wrap:anywhere}
.properties { margin-top:0; padding-bottom:24px; border-bottom:1px solid var(--faint)}
.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-row:not(:last-child) { padding-bottom:4px }
[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(--muted)}
.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:14px; 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 summary { font-size:14px; line-height:28px; cursor:pointer; user-select:none; list-style:none; display:flex; gap:8px; align-items:center}
.category-label { padding:0 6px; border-radius:3px; line-height:1.2; background:var(--category-bg); color:var(--category-text)}
.category-group[data-category="as 음악인"] { --category-bg:rgb(227,242,251); --category-text:rgb(24,51,71)}
.category-group[data-category="as S/W 엔지니어"] { --category-bg:rgb(231,243,230); --category-text:rgb(28,56,41)}
.category-group[data-category="예술/인문 소감"] { --category-bg:rgb(255,232,231); --category-text:rgb(93,23,21)}
.category-group[data-category="自省(Introspection) / 세상살이"] { --category-bg:rgb(246,237,251); --category-text:rgb(65,36,84)}
.category-group[data-category="프로젝트s"] { --category-bg:rgb(241,240,239); --category-text:rgb(50,48,44)}
.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:16px; line-height:1.3}
.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:first-child { margin-top:40px}
.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 p.notion-empty-paragraph { min-height:30px }
.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:var(--soft); padding:32px 16px 32px; margin:0; border-radius:3px; 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; color:var(--muted); margin:4px 0 16px; padding:2px}
.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:4px 14px}
.post-body table { display:block; max-width:100%; overflow:auto; border-collapse:collapse; margin:12px 0}
.post-body td,.post-body th { border:1px solid var(--faint); padding:8px 12px; text-align:left}
.post-body th { background:var(--soft)}
.post-body iframe,.post-body video { max-width:100%; border:0}
.missing-image { font-size:14px; color:var(--muted)}
.mermaid { overflow:auto; text-align:center; background:var(--bg); padding:16px}
.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,.hljs-literal { color:#07a}
.hljs-string,.hljs-attr { color:#690}
.hljs-number,.hljs-title { color:#905}
.hljs-comment { color:#708090}
.hljs-built_in { color:#dd4a68}
[data-theme=dark] .hljs-keyword,[data-theme=dark] .hljs-selector-tag { color:#cc99cd}
[data-theme=dark] .hljs-string,[data-theme=dark] .hljs-attr { color:#7ec699}
[data-theme=dark] .hljs-number { color:#f08d49}

@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; }
}

.code-block pre { padding:32px; }
@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:10px; background:#f1f1ef; border:0; border-radius:4px; padding:16px 16px 16px 12px}
.callout-icon { flex:none; width:24px; text-align:center; line-height:24px}
.callout-content { min-width:0; padding:0 2px; flex:1}
.callout-content p { margin:0; padding:0}
[data-theme=dark] .post-body blockquote.callout { background:rgba(255,255,235,.1)}

.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 figcaption { font-size:14px; color:var(--muted); padding:4px 2px 0 }
.post-body figcaption .caption { margin:0; padding:0; line-height:1.5 }
.post-body figcaption .caption + .caption { margin-top:1em }
.post-body .callout-content > * + * { margin-top:12px }
.post-body .callout-content > blockquote { padding:4px 14px }
.post-body .callout-title { font-weight:600; margin-bottom:8px }
.post-body details.callout { margin:8px 0; padding:12px 16px; border-radius:4px; background:var(--soft) }
.post-body details.callout > summary { cursor:pointer; display:flex; align-items:center; gap:8px }
.post-body details.callout > summary .callout-title { margin:0 }
.post-body details.callout > .callout-content { margin-top:12px; padding-left:32px }
.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 figcaption { padding:6px 0 6px 2px }
.post-body .notion-column figcaption .caption { line-height:1.4 }
.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,[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:8px; overflow:hidden; display:flex; align-items:center; justify-content:center }
.diagram-preview .mermaid:not([data-processed=true]) { visibility:hidden }
.diagram-preview .mermaid>svg { width:100%; height:100%; max-width:none!important }

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

.post-body .bookmark-card { flex-direction:row; height:110px; min-height:100px; margin:12px 0; border:1px solid var(--faint); text-decoration:none }
.post-body .bookmark-card>div { flex:1; width:auto; height:auto }
.post-body .bookmark-card .bookmark-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.post-body .bookmark-card small { color:var(--muted) }
.post-body .bookmark-card>img { width:33%; max-width:220px; height:100%; margin:0; object-fit:cover; border-radius:0 }

.post-body .bookmark-card .bookmark-description { font-size:12px; line-height:16px; max-height:32px; margin-top:4px; color:var(--muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.post-body .bookmark-card .bookmark-icon { display:inline-block; width:14px; height:14px; margin:0 6px 0 0; vertical-align:middle; object-fit:contain; border-radius:0 }

.post-body a:not(.bookmark):not(.tag) { color:var(--link); border-bottom-color:currentColor }
.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) }