.page-outline {
  position: fixed;
  z-index: 40;
  left: 1.25rem;
  bottom: 1.25rem;
  max-width: min(29rem, calc(100vw - 2.5rem));
}

.page-outline[hidden],
.page-outline [hidden] { display: none !important; }

main h2.theme-title, main h3.theme-title { scroll-margin-top: 6rem; }
main h2.theme-title:focus,
main h3.theme-title:focus,
main h3.cyber-list__title:focus,
main [tabindex="-1"]:focus {
  outline: none;
}

/* Transition всегда на месте — иначе при снятии is-nav-focus ЧБ моргает без затухания. */
main > .theme-section,
main > .hero,
main > .updates-carousel,
main .cyber-list__item,
main .cyber-list__art,
main .card,
main .card-big,
main .theme-wrapper {
  transition: filter .5s ease, opacity .5s ease, box-shadow .5s ease;
}
html.is-nav-focus main > .theme-section:not(:has(.is-nav-spotlight)):not(.is-nav-spotlight),
html.is-nav-focus main > .hero:not(.is-nav-spotlight),
html.is-nav-focus main > .updates-carousel:not(.is-nav-spotlight),
html.is-nav-focus main .cyber-list__item:not(.is-nav-spotlight):not(:where(.is-nav-spotlight *)),
html.is-nav-focus main .cyber-list__art:not(:where(.is-nav-spotlight *)),
html.is-nav-focus main .card:not(.is-nav-spotlight):not(:where(.is-nav-spotlight *)),
html.is-nav-focus main .card-big:not(.is-nav-spotlight):not(:where(.is-nav-spotlight *)),
html.is-nav-focus main .theme-wrapper:not(.is-nav-spotlight):not(:has(.is-nav-spotlight)):not(:where(.is-nav-spotlight *)) {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.72;
}
html.is-nav-focus main .is-nav-spotlight {
  position: relative;
  z-index: 3;
  filter: none !important;
  opacity: 1 !important;
}
html.is-nav-focus main .is-nav-spotlight .theme-wrapper,
html.is-nav-focus main .is-nav-spotlight .card,
html.is-nav-focus main .is-nav-spotlight .card-big,
html.is-nav-focus main .is-nav-spotlight .cyber-list__item,
html.is-nav-focus main .is-nav-spotlight .cyber-list__art {
  filter: none;
  opacity: 1;
}
/* Big Card / cyber-card: только мягкое свечение, без верхней полосы. */
html.is-nav-focus main .card-big.is-nav-spotlight,
html.is-nav-focus main article.cyber-list__item.is-nav-spotlight {
  box-shadow: 0 0 2.2rem color-mix(in srgb, var(--card-accent, var(--item-accent, var(--section-accent, #69d9ff))) 24%, transparent);
}
/* Полоса между заголовком и текстом — absolute, цвет из --nav-underline (акцент в заголовке). */
main .theme-wrapper > .theme-title,
main .card-big.is-nav-spotlight .card-text-wrapper-big > .theme-title {
  position: relative;
}
/* Wide-заголовки на 100% ширины — сжимаем бокс под текст, иначе линия «режет» середину. */
main section.theme-section.is-nav-spotlight > .theme-wrapper--wide > .theme-title.large,
main .theme-wrapper--wide.is-nav-spotlight > .theme-title.large {
  width: max-content;
  max-width: 100%;
}
main section.theme-section.is-nav-spotlight > .theme-wrapper > .theme-title::after,
main .theme-wrapper.is-nav-spotlight > .theme-title::after,
main .card-big.is-nav-spotlight > .card-text-wrapper-big > .theme-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--nav-underline-top, calc(100% - 0.7em));
  bottom: auto;
  z-index: 1;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  transform: none;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--nav-underline, var(--card-accent, var(--section-accent, #69d9ff))) 88%, white),
    transparent
  );
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--nav-underline, var(--card-accent, var(--section-accent, #69d9ff))) 50%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
html.is-nav-focus main section.theme-section.is-nav-spotlight > .theme-wrapper > .theme-title::after,
html.is-nav-focus main .theme-wrapper.is-nav-spotlight > .theme-title::after,
html.is-nav-focus main .card-big.is-nav-spotlight > .card-text-wrapper-big > .theme-title::after {
  opacity: 1;
}
html.is-nav-focus .page-ruler {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  main > .theme-section,
  main > .hero,
  main > .updates-carousel,
  main .cyber-list__item,
  main .cyber-list__art,
  main .card,
  main .card-big,
  main .theme-wrapper,
  main section.theme-section.is-nav-spotlight > .theme-wrapper > .theme-title::after,
  main .theme-wrapper.is-nav-spotlight > .theme-title::after,
  main .card-big.is-nav-spotlight > .card-text-wrapper-big > .theme-title::after {
    transition: none;
  }
}

.page-outline .card-text {
  width: auto;
  max-width: none;
  margin: 0;
  text-align: left;
}

.page-outline-toggle {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  max-width: min(29rem, calc(100vw - 2.5rem));
  padding: .9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.25rem;
  color: var(--text);
  background: #07101f;
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .25);
  cursor: pointer;
}

.page-outline-label { color: var(--cyan); flex: none; }
.page-outline-current {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--cyan);
}
.page-outline-chevron {
  flex: none;
  margin-left: auto;
  transition: transform .2s ease;
}
.page-outline-toggle[aria-expanded="true"] .page-outline-chevron { transform: rotate(180deg); }
.page-outline-toggle:focus-visible,
.page-outline-link:focus-visible,
.page-outline-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.page-outline-panel {
  position: absolute;
  bottom: calc(100% + .75rem);
  left: 0;
  width: min(29rem, calc(100vw - 2.5rem));
  max-height: min(65vh, 34rem);
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  color: var(--text);
  background: #050c17;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .4);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.page-outline-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; padding: 0 .4rem .75rem; border-bottom: 1px solid var(--line); }
.page-outline-panel-heading > p { color: var(--muted); }
.page-outline-close { display: grid; place-items: center; padding: .4rem; border: 0; border-radius: .5rem; color: var(--muted); background: none; cursor: pointer; }
.page-outline-groups,
.page-outline-children { margin: 0; padding: 0; list-style: none; }
/* Разделы по H2: тонкая градиентная черта между группами, как на шкале. */
.page-outline-group + .page-outline-group {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(156, 169, 189, .28) 18%, rgba(156, 169, 189, .28) 82%, transparent) 1;
}
.page-outline-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
  border-radius: .65rem;
  color: var(--muted);
  text-decoration: none;
}
.page-outline-link-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-outline-index {
  flex: none;
  color: rgba(168, 188, 208, .4);
  font-size: .58rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  line-height: 1;
  user-select: none;
}
.page-outline .page-outline-topic {
  color: var(--text);
}
.page-outline .page-outline-topic .page-outline-index {
  color: rgba(188, 210, 228, .55);
  font-weight: 400;
}
.page-outline-children .page-outline-link { padding-left: 1.15rem; }
.page-outline-link:hover,
.page-outline-close:hover { color: var(--text); background: rgba(107, 208, 255, .05); }
.page-outline-link:hover .page-outline-index,
.page-outline-link[aria-current="location"] .page-outline-index {
  color: color-mix(in srgb, var(--cyan) 72%, white);
}
.page-outline-link[aria-current="location"] { color: var(--cyan); background: rgba(107, 208, 255, .09); }

@media (max-width: 680px) {
  .page-outline { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
  .page-outline .page-outline-toggle { width: 100%; max-width: none; padding: .8rem; gap: .6rem; }
  .page-outline-panel { width: 100%; max-height: 65vh; padding: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-outline-chevron { transition: none; }
  .page-outline-panel { scroll-behavior: auto; }
}

/* Desktop page navigation: a moving ruler with section labels on its left. */
.page-ruler { display: none; }
.page-ruler__help {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body:has(> .page-ruler) .page-outline { display: none; }
  /* Не паддим main — иначе справа чёрная полоса (hero/фон не дотягивается). */
  body:has(> .page-ruler) .card-big,
  body:has(> .page-ruler) .theme-wrapper--wide {
    max-width: min(72rem, calc(100vw - 7.5rem));
  }
  .page-ruler {
    position: fixed;
    z-index: 40;
    top: 50%;
    right: .25rem;
    display: block;
    width: min(21rem, 26vw);
    height: min(68vh, 38rem);
    transform: translateY(-50%);
    pointer-events: none;
    background: none;
  }

  /* Линейка всегда у края окна — не уезжает в «дырку» от старой колонки. */
  html.is-page-capped .page-ruler {
    right: .25rem;
  }
  .page-ruler__search {
    position: absolute;
    z-index: 6;
    top: -.15rem;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
    width: 100%;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-.15rem);
    transition: opacity .2s ease, transform .2s ease;
  }
  .page-ruler:hover .page-ruler__search,
  .page-ruler:focus-within .page-ruler__search,
  .page-ruler.is-searching .page-ruler__search,
  .page-ruler.is-browsing .page-ruler__search {
    opacity: 1;
    transform: none;
  }
  /* Cold только без курсора на панели — при :hover всегда все подписи. */
  .page-ruler.is-cold:not(:hover) .page-ruler__search,
  .page-ruler.is-cold:not(:hover) .page-ruler__window::before,
  .page-ruler.is-cold:not(:hover) .page-ruler__item:not(.is-active) .page-ruler__label {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }
  .page-ruler__search-input {
    box-sizing: border-box;
    width: 0;
    min-width: 0;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .2rem;
    background: rgba(2, 7, 15, .82);
    color: #e7f6ff;
    font: inherit;
    font-size: .72rem;
    letter-spacing: .01em;
    opacity: 0;
    outline: none;
    pointer-events: none;
    transition: width .22s ease, opacity .18s ease, padding .22s ease, border-color .18s ease;
  }
  .page-ruler__search-input::placeholder { color: rgba(188, 210, 228, .55); }
  .page-ruler__search-input::-webkit-search-decoration,
  .page-ruler__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .page-ruler.is-searching .page-ruler__search-input,
  .page-ruler__search:focus-within .page-ruler__search-input {
    width: min(11.5rem, calc(100% - 2.2rem));
    padding: 0 .65rem;
    border-color: rgba(214, 232, 245, .88);
    opacity: 1;
    pointer-events: auto;
  }
  .page-ruler__search-input:focus {
    border-color: #9fe4ff;
    outline: none;
    box-shadow: none;
  }
  .page-ruler__search-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0;
    padding: 0;
    border: 1.5px solid rgba(186, 210, 228, .7);
    border-radius: 50%;
    background: rgba(2, 7, 15, .72);
    color: #cfe7f7;
    cursor: pointer;
  }
  .page-ruler__search-toggle span {
    width: .55rem;
    height: .55rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: .28rem .28rem 0 -.22rem currentColor;
    transform: translate(-.06rem, -.06rem);
  }
  .page-ruler__search-toggle:hover,
  .page-ruler__search-toggle:focus-visible,
  .page-ruler.is-searching .page-ruler__search-toggle {
    color: #e7f8ff;
    border-color: #9fe4ff;
  }
  .page-ruler__search-toggle:focus,
  .page-ruler__search-toggle:focus-visible { outline: none; }
  .page-ruler__hit-text {
    color: #ffe566;
    background: none;
    font-weight: 700;
    text-shadow: 0 0 .45rem rgba(255, 214, 74, .35);
  }
  .page-ruler__item.is-miss .page-ruler__label { opacity: .34; }
  .page-ruler__item.is-match .page-ruler__label { color: #eaf7ff; }
  .page-ruler__item.is-match .page-ruler__mark { background: #ffe566; }
  .page-ruler__item.is-body-match .page-ruler__label { color: #ffe566; }
  .page-ruler.is-searching .page-ruler__label,
  .page-ruler.is-searching .page-ruler__link { opacity: 1; transform: none; pointer-events: auto; }
  .page-ruler__rail {
    position: absolute;
    inset: 1.85rem 0 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    width: 100%;
    pointer-events: none;
  }
  .page-ruler__hit {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(7.5rem, 100%);
    pointer-events: auto;
  }
  .page-ruler__jump {
    position: relative;
    z-index: 4;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.1rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8fa7bc;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .2s ease, color .2s ease;
  }
  .page-ruler__jump.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .page-ruler__jump span {
    display: block;
    width: .55rem;
    height: .55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .72;
    transition: opacity .2s ease, color .2s ease, transform .2s ease;
  }
  .page-ruler__jump--top span { transform: translateY(.12rem) rotate(-135deg); }
  .page-ruler__jump--bottom span { transform: translateY(-.12rem) rotate(45deg); }
  .page-ruler__jump:hover,
  .page-ruler__jump:focus-visible { color: #bceeff; outline: none; }
  .page-ruler__jump:hover span,
  .page-ruler__jump:focus-visible span { opacity: 1; }
  .page-ruler__jump:focus { outline: none; }
  .page-ruler__window {
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  }
  .page-ruler__window::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Лёгкая тень подписей, без чёрной плашки справа. */
    background: linear-gradient(90deg, transparent 0%, transparent 42%, rgba(2, 7, 15, .28) 100%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .page-ruler:hover .page-ruler__window::before,
  .page-ruler:focus-within .page-ruler__window::before,
  .page-ruler.is-dragging .page-ruler__window::before,
  .page-ruler.is-browsing .page-ruler__window::before { opacity: 1; }
  .page-ruler__track {
    --ruler-gutter: 1.45rem;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 var(--ruler-gutter) 0 0;
    list-style: none;
    will-change: transform;
  }
  .page-ruler__track::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--ruler-gutter);
    bottom: 0;
    width: 1px;
    background: rgba(159, 186, 209, .35);
  }
  .page-ruler__item { position: relative; height: 3rem; }
  .page-ruler__index {
    position: absolute;
    top: 50%;
    /* Справа от рельса, в gutter трека — не на рисках. */
    left: calc(100% + 0.22rem);
    right: auto;
    z-index: 1;
    transform: translateY(-50%);
    color: rgba(168, 188, 208, .55);
    font-size: .5rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    text-shadow: none;
  }
  .page-ruler__item.is-active .page-ruler__index {
    color: rgba(158, 223, 255, .78);
    font-weight: 400;
  }
  .page-ruler__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    width: 100%;
    height: 100%;
    color: #9cabbc;
    text-align: right;
    text-decoration: none;
    pointer-events: none;
    transition: color .2s ease;
  }
  .page-ruler__label {
    min-width: 0;
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(.4rem);
    text-shadow: 0 1px .35rem #02070f;
    transition: opacity .25s ease, transform .25s ease;
  }
  .page-ruler__item.is-active .page-ruler__label,
  .page-ruler:hover .page-ruler__label,
  .page-ruler:focus-within .page-ruler__label,
  .page-ruler.is-dragging .page-ruler__label,
  .page-ruler.is-browsing .page-ruler__label { opacity: 1; transform: none; }
  .page-ruler__item.is-active .page-ruler__label,
  .page-ruler:hover .page-ruler__link,
  .page-ruler:focus-within .page-ruler__link,
  .page-ruler.is-dragging .page-ruler__link,
  .page-ruler.is-browsing .page-ruler__link { pointer-events: auto; }
  .page-ruler__item:hover, .page-ruler__item:focus-within { z-index: 2; }
  .page-ruler__link:hover .page-ruler__label,
  .page-ruler__link:focus-visible .page-ruler__label { overflow: visible; white-space: normal; }
  .page-ruler__mark, .page-ruler__tick {
    display: block;
    flex: none;
    width: 1rem;
    height: 1px;
    background: #96aabe;
    transform: scaleX(var(--ruler-wave, 1));
    transform-origin: right center;
    transition: transform .12s ease, background-color .2s ease;
  }
  .page-ruler__tick {
    position: absolute;
    right: 0; /* item уже слева от gutter — рельс на правом краю контента */
    width: .48rem;
    opacity: .5;
  }
  .page-ruler__item.is-active .page-ruler__link,
  .page-ruler__link:hover,
  .page-ruler__link:focus-visible { color: #bceeff; }
  .page-ruler__item.is-active .page-ruler__mark { background: #66d4ff; }
  .page-ruler__link:focus,
  .page-ruler__link:focus-visible { outline: none; }
  .page-ruler__needle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: var(--ruler-gutter, 1.45rem);
    width: 1.45rem;
    height: 2px;
    background: #69d9ff;
    box-shadow: 0 0 .5rem #36bfff, 0 0 1.1rem rgba(54, 191, 255, .6);
    transform: translateY(-50%);
    pointer-events: none;
  }
  .page-ruler__drag {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.4rem;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
  }
  .page-ruler.is-dragging .page-ruler__drag { cursor: grabbing; }
  html.is-ruler-dragging { scroll-behavior: auto !important; user-select: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-ruler__link, .page-ruler__label, .page-ruler__mark, .page-ruler__tick, .page-ruler__window::before, .page-ruler__jump span, .page-ruler__search, .page-ruler__search-input { transition: none; }
}