.reading-map { position: fixed; z-index: 30; right: 18px; top: 16dvh; width: 52px; color: var(--ink); }
.reading-map [hidden] { display: none !important; }
.reading-map-toggle { display: none; }
.reading-map-list { max-height: 72dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.reading-map-list::-webkit-scrollbar { display: none; }
.reading-map-list ol, .reading-map-list ul { list-style: none; margin: 0; padding: 0; }
.reading-map-list li { list-style: none; margin: 0; padding: 0; }
.reading-map-list a { display: flex; align-items: center; justify-content: flex-end; height: var(--map-step, 12px); padding: 0 8px; color: inherit; text-decoration: none; }
.reading-map-list .reading-outline-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.reading-map-list a::before { content: ''; height: 2px; width: 14px; flex-shrink: 0; border-radius: 2px; background: currentColor; opacity: .22; transition: width .16s, opacity .16s; }
.reading-map-list a[data-level="2"]::before { width: 24px; }
.reading-map-list a:hover::before, .reading-map-list a:focus-visible::before { width: 32px; opacity: .7; }
.reading-map-list a[aria-current]::before { width: 36px; height: 3px; opacity: 1; background: var(--accent); }
.reading-map-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.reading-map-preview { position: fixed; right: 50px; width: min(360px, calc(100vw - 94px)); box-sizing: border-box; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 40px #0000001a; text-decoration: none; }
.reading-map-title { display: block; font-size: 16px; font-weight: 650; line-height: 1.6; }
.reading-map-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 8px; font-size: 13px; line-height: 1.7; opacity: .65; }
.reading-map-excerpt:empty { display: none; }
.reading-map-hint { display: block; margin-top: 12px; font-size: 11px; opacity: .45; }
.post-content :is(h2,h3,h4,h5,h6) { scroll-margin-top: 110px; }
@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .reading-map { top: auto; bottom: 20px; right: 16px; width: auto; }
  .reading-map-toggle { display: flex; gap: 20px; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
  .reading-map-list { display: none; position: absolute; right: 0; bottom: 54px; width: min(310px, calc(100vw - 32px)); max-height: 60dvh; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 40px #0000001a; scrollbar-width: thin; }
  .reading-map.is-open .reading-map-list { display: block; }
  .reading-map-list a { min-height: 44px; height: auto; justify-content: flex-start; gap: 12px; font-size: 13px; line-height: 1.6; }
  .reading-map-list .reading-outline-text { position: static; width: auto; height: auto; clip-path: none; overflow: visible; }
  .reading-map-list a::before { width: 12px !important; }
  .reading-map-list .reading-outline-child { padding-left: 12px; }
  .reading-map-preview { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .reading-map-list a::before { transition: none; } }