#page-navigation { display: none; }
.page-nav-dialog { border: 1px solid var(--line); color: var(--ink); background: var(--surface); border-radius: 22px; padding: 18px; width: min(420px, calc(100% - 28px)); max-height: 78dvh; box-sizing: border-box; }
.page-nav-dialog::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(5px); }
.page-nav-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.page-nav-dialog-head h2 { font-size: 18px; margin: 0; }
.page-nav-close { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; width: 44px; height: 44px; font-size: 25px; cursor: pointer; }
.page-nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.page-nav-links a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 13px; line-height: 1.4; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.page-nav-links a[aria-current="location"] { color: var(--accent-deep); border-color: var(--accent); background: var(--tint); }
.page-nav-links a:focus-visible, .page-nav-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 600px) {
  #page-navigation:not([hidden]) { display: grid; position: fixed; z-index: 40; inset-inline-start: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100% - 128px); max-width: 340px; box-sizing: border-box; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(16px); border-radius: 17px; box-shadow: 0 8px 30px rgb(0 0 0 / .15); padding: 0 10px; }
  .page-nav-section { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 2px 0; background: transparent; border: 0; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; width: 100%; text-align: start; }
  .page-nav-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
  .page-nav-percent { margin-inline-start: auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
  .page-nav-range { direction: ltr; display: block; width: 100%; height: 28px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; touch-action: none; }
  .page-nav-range::-webkit-slider-runnable-track { height: 3px; border-radius: 9px; background: linear-gradient(to right, var(--accent) var(--page-progress,0%), var(--line) var(--page-progress,0%)); }
  .page-nav-range::-webkit-slider-thumb { appearance: none; height: 12px; width: 12px; border-radius: 50%; background: var(--accent); margin-top: -4.5px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
  .page-nav-range::-moz-range-track { height: 3px; background: var(--line); }
  .page-nav-range::-moz-range-progress { height: 3px; background: var(--accent); }
  .page-nav-range::-moz-range-thumb { height: 10px; width: 10px; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); }
  .page-nav-section:focus-visible, .page-nav-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 9px; }
  .page-nav-dialog { margin: auto auto max(14px, env(safe-area-inset-bottom)); }
  body:has(#page-navigation) .motion-controls { right: auto; left: auto; inset-inline-end: 12px; }
  body:has(#page-navigation) footer { padding-bottom: 110px; }
}
@media (max-width: 360px) { #page-navigation:not([hidden]) { width: calc(100% - 136px); } .page-nav-links { grid-template-columns: 1fr; } }
@media print { #page-navigation, .page-nav-dialog { display: none !important; } }