.legal-bar {
  padding-right: calc(var(--s-6) + 66px);
}


@media (max-width: 1279px) {

  .topbar__inner {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
  }
}


@media (max-width: 1023px) {

  :root {
    --h-topbar: 56px;
  }

  .topbar {
    background: rgba(5, 6, 14, .97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topbar__inner {
    gap: var(--s-3);
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }

  .topbar__actions {
    gap: 6px;
  }

  .theme-switch__btn {
    width: 40px;
    height: 40px;
  }

  .rail-scrim {
    background: rgba(2, 3, 8, .8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .shell,
  .shell--no-toc,
  .shell--no-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'main';
    gap: 0;
    z-index: auto;
  }

  .shell {
    padding: var(--s-4) var(--s-4) 0;
  }

  body {
    padding-bottom: calc(var(--s-9) + var(--s-6) + env(safe-area-inset-bottom));
  }

  .shell__rail {
    visibility: hidden;
    max-height: 100dvh;
    padding: var(--s-5) var(--s-4) calc(var(--s-7) + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    transition: transform var(--dur-slow) var(--e-mech), visibility var(--dur-slow);
  }

  .shell__rail.is-open {
    visibility: visible;
  }

  .rail__link,
  .rail__sub,
  .rail__group-title,
  .rail__link--top {
    min-height: 44px;
  }

  .dock {
    right: var(--s-4);
    bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  }

  .cmdk {
    padding: var(--s-4);
    background: rgba(2, 3, 8, .9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .dock__btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .cmdk__panel {
    width: 100%;
    max-height: 82dvh;
  }

  .credit {
    flex: 1 1 100%;
  }
}


@media (max-width: 900px) {

  body::before {
    animation: none;
    opacity: .92;
  }

  body::after {
    background-size: 100% 100%, 84px 84px, 84px 84px;
    opacity: .42;
  }

  .hero__rings,
  .hero__glow,
  .hero__scan,
  .hero__title,
  .hero__logo {
    animation: none;
  }

  .hero__title {
    background-position: 42% 0;
  }

  .hero__glow {
    filter: none;
    opacity: .75;
  }

  .hero__scan {
    display: none;
  }

  .dock__pulse {
    animation: none;
    opacity: 0;
  }
}


@media (max-width: 720px) {

  .brand {
    gap: var(--s-2);
    font-size: .95rem;
  }

  .brand__mark {
    width: 26px;
    height: 26px;
  }

  .brand__text {
    max-width: 8.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cmdk-trigger {
    padding: 7px 9px;
  }

  .lang-switch__btn {
    padding: 6px 9px;
  }

  .lang-switch__caret {
    display: none;
  }

  .hero {
    padding: var(--s-6) var(--s-4) var(--s-5);
  }

  .hero__inner {
    max-width: 100%;
  }

  .hero__status {
    gap: 8px;
    margin-bottom: var(--s-4);
    padding: 6px 12px;
    font-size: .62rem;
  }

  .hero__logo {
    width: min(330px, 74vw);
    margin-bottom: var(--s-3);
  }

  .hero__title {
    font-size: clamp(1.5rem, 7.4vw, 1.95rem);
  }

  .hero__desc {
    font-size: .94rem;
    line-height: 1.8;
    margin-bottom: var(--s-4);
  }

  .home-wrap {
    padding: 0 var(--s-4) var(--s-6);
  }

  .nav-row {
    padding: 13px 14px;
    gap: 12px;
  }

  .nav-row__desc {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .legal-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 0;
    padding: var(--s-4) var(--s-4) var(--s-5);
  }

  .legal-bar__note {
    min-width: 0;
  }

  .page-head {
    padding: var(--s-4) 0 var(--s-3);
    margin-bottom: var(--s-4);
  }

  .index-hero {
    padding: var(--s-6) 0 var(--s-4);
    margin-bottom: var(--s-4);
  }

  .index-hero h1 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .spec-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .spec-list>dt {
    padding-bottom: 2px;
  }

  .spec-list>dd {
    padding-top: 2px;
    padding-bottom: var(--s-3);
  }

  .related {
    margin-top: var(--s-6);
  }

  .callout-path {
    word-break: break-all;
  }

  .timeline {
    padding-left: var(--s-4);
  }

  .timeline::before {
    left: 4px;
  }

  .tl-version {
    padding: var(--s-4);
    margin-bottom: var(--s-4);
  }

  .tl-version::before {
    left: calc(var(--s-4) * -1 - 1px);
    top: 22px;
    width: 12px;
    height: 12px;
  }

  .tl-version__num {
    font-size: 1.28rem;
  }

  .tl-version__stats {
    margin-left: 0;
    width: 100%;
  }

  .tl-item {
    padding: 8px var(--s-2);
    font-size: .84rem;
  }

  .card,
  .gcard__body {
    padding: var(--s-4);
  }

  .term__body,
  pre {
    font-size: .8rem;
  }

  .cmdk__input,
  .rail__filter input {
    font-size: 1rem;
  }
}


@media (max-width: 640px) {

  .nav-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .shell__rail {
    width: min(300px, 88vw);
  }

  .card-grid,
  .gallery,
  .related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dock__btn {
    width: 44px;
    height: 44px;
  }

  .chip {
    padding: 6px 10px;
  }
}


@media (max-width: 400px) {

  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .brand__text {
    max-width: 6em;
  }
}


@media (max-height: 460px) and (orientation: landscape) {

  .hero {
    padding: var(--s-5) var(--s-4);
  }

  .hero__logo {
    width: min(240px, 40vw);
  }

  .shell__rail {
    max-height: 100dvh;
  }
}

.tl-version {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

.legal-bar {
  contain: layout paint;
}


/* ===== 低配设备自动降级（由 shell.js 依据硬件信息给 <html> 加 data-lowfx） ===== */
/* 无限循环动画与 backdrop-filter 是常驻 CPU / GPU 占用的主要来源。
   这里只停止"无限重复"：动画仍按原时长播完最后一轮后停在终点，
   过渡效果保留，因此不会有跳变，但持续开销归零。 */

html[data-lowfx] *,
html[data-lowfx] *::before,
html[data-lowfx] *::after {
  animation-iteration-count: 1 !important;
}

html[data-lowfx] body::before {
  animation: none !important;
}

html[data-lowfx] .topbar {
  background: rgba(4, 6, 13, .97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-lowfx] .hero__glow {
  filter: none !important;
}

html[data-lowfx] .dock__btn,
html[data-lowfx] .cmdk,
html[data-lowfx] .rail-scrim,
html[data-lowfx] .lang-switch__menu,
html[data-lowfx] .hero__status {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-lowfx] .dock__pulse,
html[data-lowfx] .dock__ring-fg {
  display: none !important;
}


@media (hover: none) and (pointer: coarse) {

  a,
  button,
  summary,
  .chip,
  .nav-row,
  .rail__link,
  .rail__sub,
  .topnav__link,
  .icon-btn,
  .card,
  .gcard,
  .credit,
  .toc__link,
  .cmdk__item,
  .lang-switch__btn,
  .lang-switch__item,
  .dock__btn,
  .acc>summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-row:hover .nav-row__go,
  .tl-item:hover,
  .card:hover,
  .gcard:hover,
  .credit:hover,
  .related__card:hover,
  .pager__item:hover,
  .rail__link:hover,
  .toc__link:hover {
    transform: none;
  }

  .card:hover,
  .gcard:hover,
  .credit:hover,
  .related__card:hover {
    box-shadow: var(--sh-1);
  }
}