/* 静室 CSS：02-base.css。职责边界见 governance/CSS_ARCHITECTURE_AND_TOKENS_20260814.md。 */
@layer base {
  html {
    /* 锚点应立即抵达；阅读不以程序化平滑滚动制造运动。 */
    scroll-behavior:auto;
    background:var(--surface-canvas)
  }
  body {
    min-width:320px;
    margin:0;
    background:var(--surface-canvas);
    color:var(--text-primary);
    font:400 var(--font-size-0)/1.55 var(--font-ui);
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    transition:background-color var(--motion-disclosure) var(--motion-easing),color var(--motion-disclosure) var(--motion-easing)
  }
  .site-header,.site-footer,.page-shell,.reading-progress {
    transition:background-color var(--motion-disclosure) var(--motion-easing),color var(--motion-disclosure) var(--motion-easing),border-color var(--motion-disclosure) var(--motion-easing)
  }
  .page-shell { animation:page-enter var(--motion-disclosure) var(--motion-easing) both; }
  @keyframes page-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
  a {
    color:inherit;
    text-decoration:none;
    transition:color var(--motion-state) var(--motion-easing),background-color var(--motion-state) var(--motion-easing),border-color var(--motion-state) var(--motion-easing),text-decoration-color var(--motion-state) var(--motion-easing),opacity var(--motion-state) var(--motion-easing)
  }
  a:hover {
    color:var(--action-primary)
  }
  a:active,button:active,summary:active {
    opacity:.78
  }
  button,input,textarea,select,summary {
    font:inherit;
    transition:color var(--motion-state) var(--motion-easing),background-color var(--motion-state) var(--motion-easing),border-color var(--motion-state) var(--motion-easing),opacity var(--motion-state) var(--motion-easing)
  }
  button {
    color:inherit
  }
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:var(--stroke-focus) solid var(--focus-ring);
    outline-offset:4px
  }
  .skip-link {
    position:absolute;
    z-index:var(--z-skip-link);
    top:-60px;
    left:18px;
    padding:.65rem .8rem;
    background:var(--text-primary);
    color:var(--surface-canvas);
    font-size:.8rem
  }
  .skip-link:focus {
    top:12px
  }
  .reading-progress {
    position:fixed;
    z-index:var(--z-reading-progress);
    top:0;
    left:0;
    width:100%;
    height:2px;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--motion-state) var(--motion-easing)
  }
  html[data-reading-progress="ready"] .reading-progress {
    opacity:1
  }
  .reading-progress span {
    display:block;
    width:100%;
    height:100%;
    background:var(--action-primary);
    transform:scaleX(var(--reading-progress-scale,0));
    transform-origin:left center;
    /* 唯一 transform 过渡：连续阅读位置的视觉标记。 */
    transition:transform var(--motion-progress) linear
  }
  @media (prefers-reduced-motion:reduce) {
    html {
      scroll-behavior:auto
    }
    *,*::before,*::after {
      animation-duration:.01ms!important;
      animation-delay:0ms!important;
      animation-iteration-count:1!important;
      scroll-behavior:auto!important;
      transition-delay:0ms!important;
      transition-duration:.01ms!important
    }
  }
}