.myblog-od-library {
  --od-accent: #6846e8;
  --od-accent-strong: #5131c8;
  --od-accent-soft: #eee9ff;
  --od-border: #d9dce4;
  --od-muted: #626a78;
  --od-overlay: rgba(15, 18, 28, .48);
  --od-shadow: 0 18px 55px rgba(20, 24, 36, .09);
  --od-surface: #fff;
  --od-surface-muted: #f5f6f9;
  --od-text: #1d2028;
  box-sizing: border-box;
  color: var(--od-text);
  color-scheme: light;
  font-size: 16px;
  left: 50%;
  margin: 2rem 0 4rem !important;
  max-width: none !important;
  position: relative;
  transform: translateX(-50%);
  width: min(1540px, calc(100vw - 48px));
}
.myblog-od-library *, .myblog-od-library *::before, .myblog-od-library *::after { box-sizing: border-box; }
html.myblog-od-no-scroll { overflow: hidden; }
.myblog-od-library button, .myblog-od-library a, .myblog-od-library input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.myblog-od-toolbar { align-items: center; display: flex; gap: .75rem; margin: 0 0 1rem; }
.myblog-od-toolbar input { background: var(--od-surface); border: 1px solid var(--od-border); border-radius: 999px; color: var(--od-text); flex: 1; font: inherit; min-height: 48px; padding: .75rem 1.1rem; }
.myblog-od-toolbar input::placeholder { color: var(--od-muted); opacity: .9; }
.myblog-od-toolbar input:focus { border-color: var(--od-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-accent) 18%, transparent); outline: 0; }
.myblog-od-tree-toggle, .myblog-od-tree-close, .myblog-od-back { align-items: center; background: var(--od-surface); border: 1px solid var(--od-border); color: var(--od-text); cursor: pointer; font: inherit; justify-content: center; }
.myblog-od-tree-toggle { border-radius: 999px; display: none; font-weight: 650; gap: .35rem; min-height: 44px; padding: .65rem 1rem; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease; }
.myblog-od-tree-toggle::before { content: '☰'; font-size: 1.05em; }
.myblog-od-tree-toggle:active, .myblog-od-tree-close:active, .myblog-od-back:active, .myblog-od-tree-open:active { background: var(--od-accent-soft); border-color: color-mix(in srgb, var(--od-accent) 45%, var(--od-border)); color: var(--od-accent-strong); transform: scale(.97); }
.myblog-od-tree-close { border-radius: 9px; display: none; font-size: 1.25rem; height: 40px; line-height: 1; padding: 0; width: 40px; }
.myblog-od-tree-backdrop { display: none; }
.myblog-od-layout { align-items: start; display: grid; gap: clamp(1rem, 2vw, 2rem); grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); min-height: 620px; }
.myblog-od-tree { background: var(--od-surface); border: 1px solid var(--od-border); border-radius: 14px; box-shadow: none; color: var(--od-text); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; padding: .85rem; position: sticky; top: 24px; }
.myblog-od-tree-head { align-items: center; display: flex; justify-content: space-between; margin: 0 0 .25rem; padding: .15rem .25rem; }
.myblog-od-tree h2 { color: var(--od-text); font-size: 1rem; margin: 0; }
.myblog-od-tree-hint { color: var(--od-muted); font-size: .74rem; line-height: 1.45; margin: 0 .25rem .7rem; }
.myblog-od-tree ul { list-style: none; margin: 0; padding: 0; }
.myblog-od-tree li { margin: .12rem 0; }
.myblog-od-tree-node { align-items: center; display: flex; gap: .3rem; min-width: 0; }
.myblog-od-tree-expand { align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--od-text); cursor: pointer; display: flex; flex: 1; font: inherit; font-size: .92rem; gap: .38rem; line-height: 1.35; min-height: 42px; min-width: 0; padding: .48rem .45rem; text-align: left; transition: background-color .15s ease, color .15s ease; }
.myblog-od-tree-chevron { color: var(--od-muted); display: inline-block; flex: 0 0 auto; font-size: 1.25rem; line-height: .8; transform: rotate(0deg); transition: transform .18s ease; }
.myblog-od-tree-expand[aria-expanded="true"] .myblog-od-tree-chevron { transform: rotate(90deg); }
.myblog-od-tree-expand.is-loading .myblog-od-tree-chevron { animation: myblog-od-spin .7s linear infinite; }
.myblog-od-tree-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myblog-od-tree-open { background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--od-muted); cursor: pointer; flex: 0 0 auto; font: inherit; font-size: .72rem; min-height: 34px; padding: .3rem .55rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.myblog-od-tree-expand:hover, .myblog-od-tree-expand:focus-visible { background: var(--od-accent-soft); color: var(--od-accent-strong); }
.myblog-od-tree-open:hover, .myblog-od-tree-open:focus-visible, .myblog-od-tree-open.is-active { background: var(--od-accent-soft); border-color: color-mix(in srgb, var(--od-accent) 25%, transparent); color: var(--od-accent-strong); }
.myblog-od-tree-children { border-left: 1px solid var(--od-border); margin-left: .9rem; padding-left: .45rem; }
.myblog-od-tree-loading, .myblog-od-tree-empty { color: var(--od-muted); font-size: .74rem; padding: .45rem .65rem; }
.myblog-od-main { min-width: 0; outline: 0; }
.myblog-od-breadcrumb { align-items: center; color: var(--od-muted); display: flex; flex-wrap: wrap; font-size: .82rem; gap: .65rem; margin: .2rem 0 .7rem; min-height: 36px; overflow-wrap: anywhere; }
.myblog-od-back { border-radius: 999px; display: inline-flex; flex: 0 0 auto; font-size: .82rem; gap: .3rem; min-height: 36px; padding: .4rem .72rem; transition: background-color .15s ease, color .15s ease, transform .12s ease; }
.myblog-od-breadcrumb-label { min-width: 0; }
.myblog-od-list { background: var(--od-surface); border: 1px solid var(--od-border); border-radius: 14px; overflow: hidden; }
.myblog-od-row { align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--od-border); color: var(--od-text); cursor: pointer; display: grid; font: inherit; gap: .85rem; grid-template-columns: 2rem minmax(0, 1fr) auto; min-height: 68px; padding: .8rem 1rem; text-align: left; transition: background-color .15s ease, transform .12s ease; width: 100%; }
.myblog-od-row:last-child { border-bottom: 0; }
.myblog-od-row:hover, .myblog-od-row:focus-visible { background: var(--od-accent-soft); }
.myblog-od-row:active { background: color-mix(in srgb, var(--od-accent) 15%, var(--od-surface)); transform: scale(.995); }
.myblog-od-row-icon { font-size: 1.3rem; }
.myblog-od-row-name { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.myblog-od-row-name small { color: var(--od-muted); display: block; font-size: .72rem; font-weight: 400; margin-top: .12rem; }
.myblog-od-row-meta { color: var(--od-muted); font-size: .78rem; white-space: nowrap; }
.myblog-od-empty, .myblog-od-error, .myblog-od-loading, .myblog-od-download-card { background: var(--od-surface); border: 1px solid var(--od-border); border-radius: 14px; color: var(--od-text); padding: 2.5rem; text-align: center; }
.myblog-od-error { border-color: #c84646; }
.myblog-od-library.is-reading .myblog-od-main { background: var(--od-surface); border: 1px solid var(--od-border); border-radius: 16px; box-shadow: var(--od-shadow); min-height: 70vh; padding: clamp(1.2rem, 3vw, 3.25rem); }
.myblog-od-library.is-reading .myblog-od-breadcrumb { margin-left: auto; margin-right: auto; max-width: 940px; }
.myblog-od-detail-head { border-bottom: 1px solid var(--od-border); margin: 0 auto 2rem; max-width: 940px; padding-bottom: 1.15rem; }
.myblog-od-detail-head h2 { color: var(--od-text); font-size: clamp(1.55rem, 2.2vw, 2.15rem); letter-spacing: -.025em; line-height: 1.2; margin: 0 0 .45rem; overflow-wrap: anywhere; }
.myblog-od-detail-head p { color: var(--od-muted); font-size: .82rem; margin: 0; }
.myblog-od-document { color: var(--od-text); font-size: 1.02rem; line-height: 1.82; margin: 0 auto; max-width: 940px; overflow-wrap: anywhere; }
.myblog-od-document > :first-child { margin-top: 0; }
.myblog-od-document > :last-child { margin-bottom: 0; }
.myblog-od-document p { margin: 1em 0; }
.myblog-od-document h1, .myblog-od-document h2, .myblog-od-document h3, .myblog-od-document h4, .myblog-od-document h5, .myblog-od-document h6 { color: var(--od-text); font-weight: 720; letter-spacing: -.018em; line-height: 1.3; margin: 1.8em 0 .65em; scroll-margin-top: 2rem; }
.myblog-od-document h1 { border-bottom: 1px solid var(--od-border); font-size: 2rem; padding-bottom: .35em; }
.myblog-od-document h2 { border-bottom: 1px solid var(--od-border); font-size: 1.55rem; padding-bottom: .28em; }
.myblog-od-document h3 { font-size: 1.28rem; }
.myblog-od-document a { color: var(--od-accent-strong); text-decoration-thickness: .08em; text-underline-offset: .16em; }
.myblog-od-document mark { background: #fde68a; border-radius: 3px; color: #422006; padding: .05em .2em; }
.myblog-od-document :not(pre) > code { background: var(--od-surface-muted); border: 1px solid var(--od-border); border-radius: 5px; color: var(--od-text); font-size: .88em; padding: .12em .35em; }
.myblog-od-document pre { background: #111827; border: 1px solid #2e394c; border-radius: 10px; color: #e7edf7; line-height: 1.6; margin: 1.35rem 0; overflow: auto; padding: 1rem 1.15rem; tab-size: 4; }
.myblog-od-document pre code { background: transparent; border: 0; color: inherit; font-size: .88rem; padding: 0; }
.myblog-od-document img, .myblog-od-media img, .myblog-od-media video { border-radius: 10px; height: auto; max-width: 100%; }
.myblog-od-document img { box-shadow: 0 8px 28px rgba(15,23,42,.12); display: block; margin: 1.4rem auto; }
.myblog-od-document blockquote { background: var(--od-surface-muted); border-left: 4px solid color-mix(in srgb, var(--od-text) 38%, transparent); margin: 1.2rem 0; padding: .45rem 1rem; }
.myblog-od-document blockquote > :first-child { margin-top: 0; }
.myblog-od-document blockquote > :last-child { margin-bottom: 0; }
.myblog-od-document table { border-collapse: collapse; display: block; margin: 1.35rem 0; max-width: 100%; overflow-x: auto; width: max-content; }
.myblog-od-document th, .myblog-od-document td { border: 1px solid var(--od-border); min-width: 110px; padding: .55rem .75rem; text-align: left; vertical-align: top; }
.myblog-od-document th { background: var(--od-surface-muted); font-weight: 700; }
.myblog-od-document tr:nth-child(even) td { background: color-mix(in srgb, var(--od-surface-muted) 55%, transparent); }
.myblog-od-document ul, .myblog-od-document ol { margin: .9rem 0; padding-left: 1.65rem; }
.myblog-od-document li { margin: .3rem 0; }
.myblog-od-document .contains-task-list { list-style: none; padding-left: .25rem; }
.myblog-od-document .task-list-item { align-items: flex-start; display: flex; gap: .55rem; }
.myblog-od-document .task-list-item input { accent-color: var(--od-accent); flex: 0 0 auto; margin: .42em 0 0; }
.myblog-od-callout { --callout-color: #3b82f6; background: color-mix(in srgb, var(--callout-color) 11%, var(--od-surface)); border: 1px solid color-mix(in srgb, var(--callout-color) 36%, var(--od-border)); border-left: 4px solid var(--callout-color); border-radius: 9px; margin: 1.25rem 0; overflow: hidden; padding: .85rem 1rem; }
.myblog-od-callout-title, .myblog-od-callout summary { color: color-mix(in srgb, var(--callout-color) 78%, var(--od-text)); font-weight: 720; list-style: none; }
.myblog-od-callout summary { cursor: pointer; }
.myblog-od-callout summary::-webkit-details-marker { display: none; }
.myblog-od-callout-content > :first-child { margin-top: .55rem; }
.myblog-od-callout-content > :last-child { margin-bottom: 0; }
.myblog-od-callout-tip, .myblog-od-callout-success, .myblog-od-callout-check, .myblog-od-callout-done { --callout-color: #16a34a; }
.myblog-od-callout-warning, .myblog-od-callout-caution, .myblog-od-callout-attention, .myblog-od-callout-question { --callout-color: #d97706; }
.myblog-od-callout-danger, .myblog-od-callout-error, .myblog-od-callout-bug, .myblog-od-callout-failure { --callout-color: #dc2626; }
.myblog-od-callout-example { --callout-color: #7c3aed; }
.myblog-od-callout-quote, .myblog-od-callout-cite { --callout-color: #64748b; }
.myblog-od-unavailable { color: var(--od-muted); text-decoration: line-through; }
.myblog-od-pdf, .myblog-od-embed-pdf { background: var(--od-surface); border: 1px solid var(--od-border); border-radius: 10px; height: min(80vh, 980px); width: 100%; }
.myblog-od-media { margin: 0 auto; max-width: 1100px; text-align: center; }
.myblog-od-media audio { width: min(100%, 760px); }
.myblog-od-detail-actions { margin: 2rem auto 0; max-width: 940px; }

.myblog-od-library.is-dark-mode {
  --od-accent: #a696ff;
  --od-accent-strong: #c4b9ff;
  --od-accent-soft: #2e2948;
  --od-border: #3d4250;
  --od-muted: #aeb5c2;
  --od-overlay: rgba(0, 0, 0, .68);
  --od-shadow: 0 20px 60px rgba(0, 0, 0, .38);
  --od-surface: #1b1e26;
  --od-surface-muted: #252934;
  --od-text: #eef0f5;
  color-scheme: dark;
}
.myblog-od-library.is-dark-mode .myblog-od-document mark { background: #7a5b08; color: #fff3bf; }
.myblog-od-library.is-dark-mode .myblog-od-document pre { background: #0d1119; border-color: #353c4d; }

@media (max-width: 980px) {
  .myblog-od-library { left: calc(50% - 50vw + 12px); margin-left: 0 !important; margin-right: 0 !important; transform: none; width: calc(100vw - 24px); }
  .myblog-od-tree-toggle, .myblog-od-tree-close { display: inline-flex; }
  .myblog-od-layout { display: block; min-height: 520px; }
  .myblog-od-tree-backdrop { background: var(--od-overlay); border: 0; display: block; inset: 0; opacity: 0; padding: 0; pointer-events: none; position: fixed; transition: opacity .22s ease, visibility .22s ease; visibility: hidden; z-index: 9998; }
  .myblog-od-tree { border: 0; border-radius: 0 18px 18px 0; bottom: 0; box-shadow: 18px 0 60px rgba(0,0,0,.28); display: block; left: 0; max-height: none; opacity: 0; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); pointer-events: none; position: fixed; top: 0; transform: translateX(calc(-100% - 24px)); transition: opacity .2s ease, transform .26s cubic-bezier(.22,.75,.18,1), visibility .26s ease; visibility: hidden; width: min(88vw, 370px); z-index: 9999; }
  .myblog-od-tree.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); visibility: visible; }
  .myblog-od-library.is-tree-open .myblog-od-tree-backdrop { opacity: 1; pointer-events: auto; visibility: visible; }
  .myblog-od-tree-expand { min-height: 48px; }
  .myblog-od-tree-open { min-height: 40px; padding-left: .65rem; padding-right: .65rem; }
  .myblog-od-library.is-reading .myblog-od-main { padding: clamp(1rem, 4vw, 2rem); }
}
@media (max-width: 600px) {
  .myblog-od-library { font-size: 15px; left: calc(50% - 50vw + 8px); margin-bottom: 2rem; width: calc(100vw - 16px); }
  .myblog-od-toolbar { align-items: stretch; }
  .myblog-od-toolbar input { min-width: 0; }
  .myblog-od-breadcrumb { align-items: flex-start; flex-direction: column; }
  .myblog-od-breadcrumb-label { font-size: .75rem; }
  .myblog-od-row { grid-template-columns: 1.7rem minmax(0, 1fr); min-height: 62px; padding: .75rem; }
  .myblog-od-row-meta, .myblog-od-row-name small { display: none; }
  .myblog-od-empty, .myblog-od-error, .myblog-od-loading, .myblog-od-download-card { padding: 1.8rem 1rem; }
  .myblog-od-detail-head h2 { font-size: 1.45rem; }
  .myblog-od-document { font-size: 1rem; line-height: 1.75; }
  .myblog-od-document h1 { font-size: 1.65rem; }
  .myblog-od-document h2 { font-size: 1.38rem; }
}
@media (prefers-reduced-motion: reduce) {
  .myblog-od-library *, .myblog-od-library *::before, .myblog-od-library *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
@keyframes myblog-od-spin { to { transform: rotate(360deg); } }
@media print {
  .myblog-od-toolbar, .myblog-od-tree, .myblog-od-tree-backdrop, .myblog-od-breadcrumb, .myblog-od-detail-actions { display: none !important; }
  .myblog-od-library { left: auto; margin: 0 !important; transform: none; width: 100%; }
  .myblog-od-layout { display: block; }
  .myblog-od-library.is-reading .myblog-od-main { border: 0; box-shadow: none; padding: 0; }
}