@font-face {
      font-family: 'KaiDigits';
      src: local('KaiTi'), local('楷体'), local('STKaiti'), local('Kaiti SC'), local('Noto Serif SC');
      unicode-range: U+0000-002F, U+003A-10FFFF;
    }
    @font-face {
      font-family: 'KaiDigits';
      src: local('Microsoft YaHei'), local('Noto Sans SC'), local('PingFang SC'), local('Helvetica Neue'), local('Arial');
      unicode-range: U+0030-0039;
    }
    @font-face {
      font-family: 'SongDigits';
      src: local('Songti SC'), local('SimSun'), local('宋体'), local('Noto Serif SC');
      unicode-range: U+0000-002F, U+003A-10FFFF;
    }
    @font-face {
      font-family: 'SongDigits';
      src: local('Microsoft YaHei'), local('Noto Sans SC'), local('PingFang SC'), local('Helvetica Neue'), local('Arial');
      unicode-range: U+0030-0039;
    }

    :root {
      --paper: #faf9f5;
      --ink:   #141413;
      --muted: #6b6862;
      --rule:  #e5e2d7;
      --accent: #d97757;
      --accent-soft: #eb9878;
      --accent-gold: #f0b27a;

      --canvas: #f0eee6;
      --pine:   #788c5d;
      --line:   #e6e3d8;

      --faint: #aba89e;
      --sakura: #dd8aa6;

      --code-bg:    #f0eee6;
      --code-block: #f4f2ea;

      --kai:  'KaiDigits', KaiTi, 楷体, STKaiti, "Kaiti SC", "Noto Serif SC", serif;
      --song: 'SongDigits', "Songti SC", SimSun, 宋体, "Noto Serif SC", serif;
      --sans: "Noto Sans SC", "Microsoft YaHei", 微软雅黑, "PingFang SC", system-ui, sans-serif;
      --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;

      --text-xs:   1.125rem;
      --text-sm:   1.1875rem;
      --text-base: 1.25rem;
      --text-md:   1.375rem;
      --text-lg:   1.5rem;
      --text-xl:   1.75rem;
      --text-2xl:  2.125rem;
      --text-3xl:  2.5rem;

      --home-shell: 96rem;

      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.5rem;
      --space-6: 2rem;
      --space-7: 3rem;
      --space-8: 4.5rem;

      --pad-x: 1.75rem;
      --nav-h: 3.6rem;

      --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
      --dur-fast: 200ms;
      --dur-base: 320ms;
      --dur-slow: 700ms;
    }

    :root[data-theme='dark'] {
      --paper: #121211;
      --ink:   #faf9f5;
      --muted: #a5a29a;
      --rule:  #2c2a26;
      --accent: #d97757;
      --accent-soft: #ea916e;
      --accent-gold: #f5b971;

      --canvas: #181715;
      --pine:   #93a878;
      --line:   #282723;

      --code-bg:    #21201e;
      --code-block: #191817;

      --faint: #6e6961;
      --sakura: #e6a0b8;
    }

    *, *::before, *::after { box-sizing: border-box; }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-h);
      background: var(--paper);
    }

    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--song);
      font-size: var(--text-base);
      line-height: 1.85;
      text-rendering: optimizeLegibility;
      transition: none;
    }

    img, video { max-width: 100%; height: auto; }
    figure { margin: 0; }
    [hidden] { display: none !important; }
    a { color: inherit; text-decoration: none; }

    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .wrap {
      max-width: min(var(--home-shell), calc(100vw - 2rem));
      margin: 0 auto;
      padding: 0 var(--pad-x);
      transition: max-width var(--dur-base) var(--ease);
    }

    .screen {
      height: calc(100vh - var(--nav-h));
      max-height: calc(100vh - var(--nav-h));
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: clamp(0.45rem, 1.15vh, 0.85rem) 0;
      border-top: 1px solid var(--rule);
      position: relative;
      overflow: hidden;
    }

    .screen--hero { border-top: 0; }

    .screen > .wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 2;
    }

    /* ========================================================================
       需求 6：白天（平面无限 ∞）与黑夜（平面黑洞）简约平面几何元素系统
       ======================================================================== */
    .planar-icon {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .planar-icon--infinity { display: block; }
    .planar-icon--blackhole { display: none; }
    :root[data-theme='dark'] .planar-icon--infinity { display: none; }
    :root[data-theme='dark'] .planar-icon--blackhole { display: block; }

    .planar-motif-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 14px;
      color: var(--accent);
      opacity: 0.88;
      flex-shrink: 0;
    }

    /* 每个象限与子页背景中的简约平面几何水印（白天：平面双纽线无限；黑夜：平面视界与吸积环黑洞） */
    .planar-watermark {
      position: absolute;
      right: 1.5rem;
      bottom: 2.3rem;
      width: clamp(11rem, 18vw, 16rem);
      height: auto;
      color: var(--accent);
      opacity: 0.085;
      pointer-events: none;
      z-index: 1;
      transition: opacity var(--dur-base) ease, transform var(--dur-slow) var(--ease);
    }
    :root[data-theme='dark'] .planar-watermark {
      opacity: 0.11;
    }
    .planar-wm {
      width: 100%;
      height: auto;
      display: block;
    }
    .planar-wm--infinity { display: block; }
    .planar-wm--blackhole { display: none; }
    :root[data-theme='dark'] .planar-wm--infinity { display: none; }
    :root[data-theme='dark'] .planar-wm--blackhole { display: block; }

    /* 页脚上方的简约平面无限/黑洞装饰分隔带 */
    .planar-divider-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.85rem;
      margin: 0 auto 1rem;
      color: var(--accent);
      opacity: 0.72;
    }
    .planar-divider-bar::before,
    .planar-divider-bar::after {
      content: '';
      width: clamp(3.5rem, 10vw, 8rem);
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--rule), var(--accent));
    }
    .planar-divider-bar::after {
      background: linear-gradient(90deg, var(--accent), var(--rule), transparent);
    }
    .planar-divider-icon {
      width: 34px;
      height: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* ========================================================================
       需求 7：简洁页面加载动画（结合无限主题与主页无限粒子模型）
       ======================================================================== */
    /* ========================================================================
       需求 6：全新重构全屏沉浸式粒子立体无限流形加载器
       ======================================================================== */
    .infinity-loader {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: var(--paper);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1), transform 320ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms;
    }
    .infinity-loader[data-loaded="true"] {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(1.035);
      filter: blur(8px);
    }
    .loader-infinity-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      z-index: 1;
    }
    .loader-meta {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--mono);
      font-size: 0.76rem;
      letter-spacing: 0.14em;
      color: var(--muted);
      pointer-events: none;
      text-align: center;
    }
    .loader-brand-emblem {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35rem;
    }
    .loader-title-kai {
      font-family: var(--kai);
      font-size: clamp(1.8rem, 4vw, 2.4rem);
      letter-spacing: 0.22em;
      color: var(--ink);
      font-weight: normal;
      text-shadow: 0 0 28px rgba(217, 119, 87, 0.18);
    }
    #loader-status-text {
      color: var(--accent);
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      font-weight: 500;
    }
    .loader-progress-row {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      margin-top: 0.25rem;
    }
    .loader-bar-track {
      width: 16rem;
      height: 2px;
      background: color-mix(in srgb, var(--accent) 18%, var(--rule));
      overflow: hidden;
      border-radius: 2px;
      box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
    }
    .loader-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, rgba(232, 146, 110, 0.6), var(--accent));
      box-shadow: 0 0 8px var(--accent);
      transition: width 120ms cubic-bezier(0.1, 0.9, 0.2, 1);
    }
    .loader-pct-readout {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--accent);
      min-width: 2.4rem;
      text-align: right;
    }

    /* ========================================================================
       需求 6：昼夜切换全屏平滑遮盖与奇点/无限流形转换层
       ======================================================================== */
    .theme-transition-stage {
      position: fixed;
      inset: 0;
      z-index: 110;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 280ms;
    }
    .theme-transition-stage[data-active="true"] {
      opacity: 1;
      visibility: visible;
      transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    }
    .theme-transition-veil {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: var(--paper);
      opacity: 0;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: none;
    }
    .theme-transition-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 2;
    }
    .theme-transition-badge {
      position: relative;
      z-index: 3;
      margin-top: 14rem;
      padding: 0.35rem 1rem;
      border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--rule));
      background: color-mix(in srgb, var(--paper) 88%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.14em;
      color: var(--accent);
      border-radius: 3px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    /* 顶层导航栏 */
    .site-nav-bar {
      position: sticky;
      top: 0;
      z-index: 45;
      height: var(--nav-h);
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--paper) 78%, transparent) 0%,
        color-mix(in srgb, var(--paper) 66%, transparent) 100%
      );
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid color-mix(in srgb, var(--rule) 82%, var(--accent) 18%);
      box-shadow:
        0 10px 32px -18px rgba(20, 20, 19, 0.16),
        inset 0 1px 0 0 color-mix(in srgb, #ffffff 36%, transparent);
      transition: none;
    }

    :root[data-theme='dark'] .site-nav-bar {
      background: linear-gradient(
        180deg,
        rgba(20, 20, 19, 0.76) 0%,
        rgba(20, 20, 19, 0.62) 100%
      );
      box-shadow:
        0 12px 36px -16px rgba(0, 0, 0, 0.65),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    }

    .site-nav-bar .wrap {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .nav-left-cluster {
      display: flex;
      align-items: center;
      gap: 1.4rem;
      min-width: 0;
    }

    .nav-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.28rem 0.75rem 0.28rem 0.55rem;
      border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--rule));
      background: color-mix(in srgb, var(--paper) 55%, transparent);
      border-radius: 3px;
      position: relative;
      transition: none;
    }
    .nav-brand:hover {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .nav-brand-mark {
      width: 26px;
      height: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }

    .nav-brand-text {
      font-family: var(--kai);
      font-size: var(--text-base);
      letter-spacing: 0.1em;
      color: var(--ink);
      line-height: 1;
    }

    .nav-brand-coord {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      color: var(--faint);
      padding-left: 0.45rem;
      border-left: 1px solid var(--rule);
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
    }

    .site-nav-link {
      position: relative;
      display: inline-flex;
      align-items: baseline;
      gap: 0.32rem;
      padding: 0.34rem 0.78rem;
      border-radius: 3px;
      color: var(--muted);
      font-family: var(--kai);
      font-size: var(--text-base);
      letter-spacing: 0.1em;
      transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
    }

    .site-nav-link .nav-idx {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: var(--faint);
      transition: color var(--dur-fast) ease;
    }

    .site-nav-link:hover,
    .site-nav-link[aria-current="page"] {
      color: var(--ink);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .site-nav-link:hover .nav-idx,
    .site-nav-link[aria-current="page"] .nav-idx {
      color: var(--accent);
    }

    .site-nav-link[aria-current="page"]::after {
      content: '';
      position: absolute;
      left: 0.78rem;
      right: 0.78rem;
      bottom: 0.14rem;
      height: 1.5px;
      background: var(--accent);
    }

    .nav-right-cluster {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }

    .view-switch-bar {
      display: inline-flex;
      border: 1px solid color-mix(in srgb, var(--rule) 85%, var(--faint));
      border-radius: 3px;
      overflow: hidden;
      background: color-mix(in srgb, var(--paper) 65%, transparent);
      backdrop-filter: blur(8px);
    }

    .view-switch-btn {
      border: 0;
      background: transparent;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.78rem;
      letter-spacing: 0.06em;
      padding: 0.32rem 0.78rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: all var(--dur-fast) ease;
    }

    .view-switch-btn svg {
      width: 13px;
      height: 13px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.7;
    }

    .view-switch-btn + .view-switch-btn {
      border-left: 1px solid var(--rule);
    }

    .view-switch-btn[aria-pressed="true"] {
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      color: var(--accent);
      font-weight: 600;
    }

    .nav-math-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.48rem;
      padding: 0.3rem 0.82rem;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
      border-radius: 3px;
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--ink);
      cursor: pointer;
      font-family: var(--sans);
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      transition: all var(--dur-fast) ease;
    }

    .nav-math-pill:hover {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 18%, transparent);
      color: var(--accent);
    }

    .nav-math-pill svg {
      width: 14px;
      height: 14px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 1.75;
    }

    /* 象限网格系统 */
    .q-frame {
      position: relative;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 96%, var(--canvas));
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: none;
      overflow: hidden;
    }

    .q-corner {
      position: absolute;
      width: 12px;
      height: 12px;
      pointer-events: none;
      z-index: 5;
    }
    .q-corner::before,
    .q-corner::after {
      content: '';
      position: absolute;
      background: color-mix(in srgb, var(--accent) 75%, var(--faint));
    }
    .q-corner::before { width: 12px; height: 1.2px; top: 5.4px; left: 0; }
    .q-corner::after  { width: 1.2px; height: 12px; top: 0; left: 5.4px; }

    .q-corner--tl { top: -6px; left: -6px; }
    .q-corner--tr { top: -6px; right: -6px; }
    .q-corner--bl { bottom: -6px; left: -6px; }
    .q-corner--br { bottom: -6px; right: -6px; }

    .q-joint { position: relative; }
    .q-joint::after {
      content: '+';
      position: absolute;
      right: -0.45rem;
      bottom: -0.58rem;
      font-family: var(--mono);
      font-size: 0.88rem;
      line-height: 1;
      color: var(--accent);
      background: var(--paper);
      padding: 0 0.14rem;
      pointer-events: none;
      z-index: 4;
    }

    .q-topbar {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      border-bottom: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 88%, var(--canvas));
      font-family: var(--mono);
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      color: var(--faint);
      position: relative;
      z-index: 3;
    }

    .q-topbar-cell {
      padding: 0.44rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      min-width: 0;
    }

    .q-topbar-cell + .q-topbar-cell {
      border-left: 1px solid var(--rule);
    }

    .q-topbar-cell--center {
      font-family: var(--song);
      font-size: 1.02rem;
      color: var(--muted);
      letter-spacing: 0.05em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .q-topbar-cell--right {
      justify-content: flex-end;
      white-space: nowrap;
    }

    .q-sec-badge {
      font-family: var(--mono);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      color: var(--accent);
      padding: 0.1rem 0.48rem;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
      background: color-mix(in srgb, var(--accent) 8%, var(--paper));
    }

    .q-sec-title {
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-xl);
      font-weight: 400;
      letter-spacing: 0.12em;
      line-height: 1.15;
      color: var(--ink);
    }

    .q-sec-title a {
      display: inline-flex;
      align-items: baseline;
      gap: 0.4rem;
      transition: color var(--dur-fast) ease;
    }
    .q-sec-title a:hover { color: var(--accent); }

    .q-sec-arrow {
      font-family: var(--mono);
      font-size: 0.95rem;
      color: var(--faint);
      transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) ease;
    }
    .q-sec-title a:hover .q-sec-arrow {
      color: var(--accent);
      transform: translateX(4px);
    }

    .q-footbar {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-3);
      padding: 0.42rem 1.25rem;
      border-top: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 90%, var(--canvas));
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.07em;
      color: var(--faint);
      position: relative;
      z-index: 3;
    }

    .telemetry-accent { color: var(--accent); font-weight: 600; }

    /* 第一屏 HERO */
    .hero-q-body {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 3.8fr 6.2fr;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .hero-q-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-right: 1px solid var(--rule);
      min-height: 0;
      position: relative;
      overflow: hidden;
    }

    .hero-q-prose {
      padding: clamp(1.2rem, 2.6vh, 2.3rem) 2.25rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      min-height: 0;
      position: relative;
      z-index: 2;
    }

    .hero-coord {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin: 0 0 var(--space-3);
      font-family: var(--mono);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      color: var(--faint);
    }

    .hero-coord .coord-accent {
      color: var(--accent);
      font-weight: 600;
    }

    .hero-coord .coord-line {
      display: inline-block;
      width: 2rem;
      height: 1px;
      background: color-mix(in srgb, var(--accent) 65%, var(--rule));
    }

    .hero-title {
      margin: 0;
      font-family: var(--kai);
      font-size: clamp(2rem, 3.2vw, 2.65rem);
      font-weight: 400;
      letter-spacing: 0.18em;
      line-height: 1.22;
      color: var(--ink);
    }

    .hero-tagline {
      margin: 0.5rem 0 0;
      font-size: var(--text-base);
      letter-spacing: 0.12em;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .infinity-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.12rem 0.58rem;
      border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--rule));
      background: color-mix(in srgb, var(--accent) 10%, var(--paper));
      color: var(--accent);
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.08em;
      border-radius: 2px;
    }

    .hero-intro {
      margin: clamp(1rem, 2.2vh, 1.65rem) 0 0;
      padding-top: clamp(0.85rem, 1.8vh, 1.3rem);
      border-top: 1px solid var(--rule);
    }

    .hero-intro p {
      margin: 0 0 0.65rem;
      font-size: clamp(1.18rem, 1.35vw, 1.32rem);
      text-indent: 2em;
      line-height: 1.88;
    }
    .hero-intro p:last-child { margin-bottom: 0; }

    .hero-q-index {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      position: relative;
      z-index: 2;
    }

    .hero-q-index-cell {
      padding: 0.72rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
      border-right: 1px solid var(--rule);
      transition: background-color var(--dur-fast) ease;
    }
    .hero-q-index-cell:last-child { border-right: 0; }
    .hero-q-index-cell:hover {
      background: color-mix(in srgb, var(--accent) 8%, var(--paper));
    }

    .hero-index-num {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      color: var(--accent);
    }

    .hero-index-label {
      font-family: var(--kai);
      font-size: var(--text-base);
      letter-spacing: 0.08em;
      color: var(--ink);
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }

    .hero-index-meta {
      font-family: var(--sans);
      font-size: 0.74rem;
      color: var(--faint);
    }

    .hero-q-right {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 0;
      background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 78%);
    }

    .stage-subbar {
      flex-shrink: 0;
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.44rem 1.25rem;
      border-bottom: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.05em;
      color: var(--faint);
    }

    .stage-mode-switch-inline {
      display: inline-flex;
      gap: 0.4rem;
    }

    .stage-mini-btn {
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 90%, transparent);
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.75rem;
      padding: 0.18rem 0.65rem;
      border-radius: 2px;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: all var(--dur-fast) ease;
    }
    .stage-mini-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .stage-mini-btn[aria-pressed="true"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 16%, var(--paper));
      color: var(--accent);
      font-weight: 600;
    }

    .hero-canvas-holder {
      position: relative;
      flex: 1;
      width: 100%;
      min-height: 0;
    }

    .hero-stage-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      cursor: crosshair;
    }

    .reticle-mark {
      position: absolute;
      width: 14px;
      height: 14px;
      pointer-events: none;
      opacity: 0.55;
    }
    .reticle-mark--tl { top: 0.85rem; left: 0.85rem; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
    .reticle-mark--tr { top: 0.85rem; right: 0.85rem; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); }
    .reticle-mark--bl { bottom: 0.85rem; left: 0.85rem; border-bottom: 1px solid var(--accent); border-left: 1px solid var(--accent); }
    .reticle-mark--br { bottom: 0.85rem; right: 0.85rem; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

    /* ========================================================================
       第二屏 POSTS & 需求 4：文章栏封面照片 16:9 横向图片显示适配
       ======================================================================== */
    .posts-q-body {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 21rem minmax(0, 1fr);
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .posts-q-left {
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 0;
    }

    .posts-q-left-head {
      flex-shrink: 0;
      padding: 0.5rem 1.35rem;
      border-bottom: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      color: var(--faint);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .posts-recent-q {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column-reverse;
      flex: 1;
      min-height: 0;
    }

    .posts-recent-q li {
      flex: 1;
      min-height: 0;
      display: flex;
      border-bottom: 1px solid var(--rule);
    }
    .posts-recent-q li:first-child { border-bottom: 0; }

    .posts-recent-q a {
      width: 100%;
      padding: 0.6rem 1.35rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.2rem;
      transition: background-color var(--dur-fast) ease, padding-left var(--dur-fast) var(--ease);
      position: relative;
    }

    .posts-recent-q a:hover,
    .posts-recent-q a[data-active="true"] {
      background: color-mix(in srgb, var(--accent) 8%, var(--paper));
      padding-left: 1.75rem;
    }

    .posts-recent-q a[data-active="true"]::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--accent);
    }

    .post-q-item-coord {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: var(--faint);
      display: flex;
      justify-content: space-between;
    }
    .post-q-item-coord .idx { color: var(--accent); }

    .post-q-item-title {
      font-family: var(--kai);
      font-size: var(--text-base);
      letter-spacing: 0.04em;
      line-height: 1.32;
      color: var(--ink);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }

    .posts-q-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-width: 0;
      min-height: 0;
    }

    .posts-q-spot-head {
      flex-shrink: 0;
      padding: 0.85rem 2rem 0.78rem;
      border-bottom: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .spot-kicker {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 0.22rem;
    }

    .posts-spot-title {
      margin: 0;
      font-family: var(--kai);
      font-size: clamp(1.5rem, 2vw, 1.9rem);
      font-weight: 400;
      letter-spacing: 0.05em;
      line-height: 1.25;
    }
    .posts-spot-title a:hover { color: var(--accent); }

    .posts-spot-meta {
      display: flex;
      align-items: baseline;
      gap: 0.5em;
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-base);
      letter-spacing: 0.08em;
      white-space: nowrap;
    }
    .posts-spot-meta time { color: var(--accent); }
    .posts-spot-meta .dot { color: var(--faint); }
    .posts-spot-meta span { color: var(--muted); }

    .posts-q-spot-main {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 5.8fr 4.2fr;
      align-items: stretch;
    }

    /* 需求 4：严格适配 16:9 横向封面图的容器，避免任何比例拉伸或两侧裁切 */
    .posts-q-cover-cell {
      padding: 0.9rem 1.45rem;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.48rem;
      min-height: 0;
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
    }

    .posts-spot-cover-frame {
      width: 100%;
      flex: 1;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .posts-spot-cover {
      width: 100%;
      aspect-ratio: 16 / 9;
      max-height: 100%;
      display: block;
      overflow: hidden;
      border-radius: 3px;
      border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--rule));
      position: relative;
      cursor: pointer;
      background: var(--canvas);
      box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.25);
    }

    .posts-spot-cover img {
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform var(--dur-slow) var(--ease);
    }
    .posts-spot-cover:hover img { transform: scale(1.025); }

    .cover-ratio-pill {
      position: absolute;
      right: 0.55rem;
      bottom: 0.55rem;
      padding: 0.12rem 0.48rem;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      color: #faf9f5;
      background: rgba(20, 20, 19, 0.72);
      border: 1px solid rgba(217, 119, 87, 0.55);
      border-radius: 2px;
      backdrop-filter: blur(4px);
      pointer-events: none;
    }

    .cover-caption-bar {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--faint);
      letter-spacing: 0.06em;
    }

    .posts-q-excerpt-cell {
      padding: 1.15rem 1.65rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.75rem;
      min-height: 0;
    }

    .excerpt-label-bar {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: var(--faint);
      border-bottom: 1px solid var(--rule);
      padding-bottom: 0.35rem;
      display: flex;
      justify-content: space-between;
    }

    .posts-spot-text {
      margin: 0;
      font-size: 1.125rem;
      line-height: 1.82;
      text-indent: 2em;
      color: var(--muted);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      line-clamp: 5;
      overflow: hidden;
    }

    .posts-spot-action-row {
      padding-top: 0.7rem;
      border-top: 1px dashed var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .q-read-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-family: var(--kai);
      font-size: var(--text-base);
      letter-spacing: 0.08em;
      color: var(--accent);
      padding: 0.26rem 0.85rem;
      border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--rule));
      background: color-mix(in srgb, var(--accent) 8%, var(--paper));
      cursor: pointer;
      transition: all var(--dur-fast) ease;
    }
    .q-read-btn:hover {
      background: var(--accent);
      color: #fff;
    }

    /* ========================================================================
       需求 3：第三屏（02 · PHOTOS 照片展示页）
       不强制压缩或裁切照片比例，保证原有比例（适配 16:9、4:3 横向或纵向）交错排列
       ======================================================================== */
    .photos-q-meta-grid {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 20rem minmax(0, 1fr);
      border-bottom: 1px solid var(--rule);
      position: relative;
      z-index: 2;
    }

    .photos-q-wall-title-cell {
      padding: 0.54rem 1.35rem;
      border-right: 1px solid var(--rule);
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.6rem;
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
    }

    .wall-coord-tag {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      color: var(--accent);
    }

    .wall-title {
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-md);
      font-weight: 400;
      letter-spacing: 0.06em;
    }

    .photos-q-wall-note-cell {
      padding: 0.54rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .wall-note {
      margin: 0;
      font-family: var(--song);
      font-size: 1.05rem;
      line-height: 1.5;
      color: var(--muted);
    }

    .photos-q-stage {
      flex: 1;
      min-height: 0;
      padding: 0.75rem 1.25rem;
      overflow-y: auto;
      overflow-x: hidden;
      background: color-mix(in srgb, var(--paper) 94%, var(--canvas));
      position: relative;
      z-index: 2;
      scrollbar-width: thin;
      scrollbar-color: var(--rule) transparent;
    }

    /* 三列交错排列（Staggered Masonry Grid）：保留每张照片 100% 原始比例（16:9 / 4:3 横竖自适应） */
    .wall-photos-waterfall {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.95rem;
      align-items: start;
    }

    .stagger-col {
      display: flex;
      flex-direction: column;
      gap: 0.95rem;
      min-width: 0;
    }
    /* 交错偏移：偶数列与第三列形成自然的视觉交错节律 */
    .stagger-col--2 {
      padding-top: 1.15rem;
    }
    .stagger-col--3 {
      padding-top: 0.55rem;
    }

    .wf-item {
      width: 100%;
      margin: 0;
      padding: 0.35rem;
      border: 1px solid var(--rule);
      background: var(--paper);
      border-radius: 3px;
      position: relative;
      transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
    }

    /* 纵向图片（3:4 或 9:16）在列中适度内收居中，既保证原比例不压缩，又让横纵交错更协调 */
    .wf-item[data-orient^="portrait"] {
      width: 82%;
      margin-inline: auto;
    }

    .wf-item:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.28);
    }

    .photo-link {
      display: block;
      position: relative;
      cursor: zoom-in;
      overflow: hidden;
      border-radius: 2px;
      background: var(--canvas);
    }

    /* 核心保证：width: 100%; height: auto; aspect-ratio: var(--ar); 绝不强制压缩或裁切 */
    .wall-photos-waterfall img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ar);
      object-fit: contain;
      border-radius: 1px;
      transition: transform var(--dur-slow) var(--ease);
    }

    .wf-item:hover img {
      transform: scale(1.02);
    }

    .photo-idx-badge {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      z-index: 3;
      padding: 0.12rem 0.5rem;
      font-family: var(--mono);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: #faf9f5;
      background: rgba(20, 20, 19, 0.74);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(217, 119, 87, 0.65);
      border-radius: 2px;
      line-height: 1.25;
      pointer-events: none;
    }

    .photo-ratio-badge {
      position: absolute;
      bottom: 0.5rem;
      right: 0.5rem;
      z-index: 3;
      padding: 0.1rem 0.45rem;
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.06em;
      color: #faf9f5;
      background: rgba(20, 20, 19, 0.68);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 2px;
      line-height: 1.2;
      pointer-events: none;
    }

    /* 第四屏（03 · PROGRAMS） */
    .prog-workbench {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 4.3fr 5.7fr;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .prog-featured-console {
      border-right: 1px solid var(--rule);
      padding: clamp(1rem, 2.2vh, 1.65rem) 1.85rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.85rem;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--paper)) 0%, var(--paper) 65%);
      min-height: 0;
    }

    .console-header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.55rem;
      border-bottom: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 0.74rem;
      color: var(--faint);
    }

    .console-dots {
      display: inline-flex;
      gap: 0.35rem;
      align-items: center;
    }
    .console-dots span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 1px solid var(--accent);
      background: color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .console-dots span:first-child {
      background: var(--accent);
    }

    .console-title {
      margin: 0.3rem 0 0;
      font-family: var(--kai);
      font-size: clamp(1.45rem, 2vw, 1.75rem);
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--ink);
    }

    .console-desc {
      margin: 0.45rem 0 0;
      font-size: 1.08rem;
      line-height: 1.72;
      color: var(--muted);
    }

    .console-terminal-box {
      border: 1px solid var(--rule);
      background: var(--code-block);
      padding: 0.75rem 1rem;
      font-family: var(--mono);
      font-size: 0.76rem;
      line-height: 1.65;
      color: var(--ink);
      border-radius: 2px;
    }

    .console-terminal-line {
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .console-terminal-line + .console-terminal-line {
      border-top: 1px dashed var(--rule);
      padding-top: 0.32rem;
      margin-top: 0.32rem;
    }

    .prog-rack-list {
      display: grid;
      grid-template-rows: repeat(3, minmax(0, 1fr));
      min-height: 0;
    }

    .prog-rack-item {
      padding: clamp(0.75rem, 1.7vh, 1.25rem) 1.75rem;
      border-bottom: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 7.5rem minmax(0, 1fr) 11.5rem;
      align-items: center;
      gap: 1.25rem;
      transition: background-color var(--dur-fast) ease;
    }
    .prog-rack-item:last-child { border-bottom: 0; }
    .prog-rack-item:hover {
      background: color-mix(in srgb, var(--accent) 6%, var(--paper));
    }

    .rack-id-col {
      display: flex;
      flex-direction: column;
      gap: 0.24rem;
      font-family: var(--mono);
      font-size: 0.72rem;
      border-right: 1px solid var(--rule);
      padding-right: 0.85rem;
    }
    .rack-id-code {
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .rack-id-stack {
      color: var(--faint);
      font-size: 0.68rem;
    }

    .rack-main-col h3 {
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-md);
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--ink);
    }
    .prog-rack-item:hover .rack-main-col h3 { color: var(--accent); }

    .rack-main-col p {
      margin: 0.25rem 0 0;
      font-size: 1.04rem;
      line-height: 1.58;
      color: var(--muted);
    }

    .rack-metric-col {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.35rem;
      font-family: var(--mono);
      font-size: 0.72rem;
    }

    .rack-bar {
      width: 100%;
      height: 4px;
      background: var(--rule);
      overflow: hidden;
      border-radius: 2px;
    }
    .rack-bar > span {
      display: block;
      height: 100%;
      background: var(--accent);
    }

    /* ========================================================================
       需求 5：第五屏（04 · LINKS & SITE INFO 友链与站点说明页）
       去掉所有未实现/纯占位内容，改为真实的「友链 + 站点说明」双栏架构
       ======================================================================== */
    .links-topology-layout {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 3.6fr 6.4fr;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .links-protocol-panel {
      border-right: 1px solid var(--rule);
      padding: clamp(0.9rem, 2vh, 1.45rem) 1.65rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.75rem;
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      min-height: 0;
    }

    .site-identity-card {
      border: 1px solid var(--rule);
      background: var(--paper);
      padding: 0.85rem 1rem;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .site-identity-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      padding-bottom: 0.45rem;
      border-bottom: 1px solid var(--rule);
    }

    .site-identity-title {
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-md);
      font-weight: 400;
      color: var(--ink);
      letter-spacing: 0.06em;
    }

    .protocol-spec-list {
      margin: 0;
      padding: 0;
      list-style: none;
      font-family: var(--mono);
      font-size: 0.73rem;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      gap: 0.34rem;
    }
    .protocol-spec-list li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
      padding-bottom: 0.28rem;
      border-bottom: 1px dashed var(--rule);
    }
    .protocol-spec-list li:last-child { border-bottom: 0; padding-bottom: 0; }
    .protocol-spec-list strong {
      color: var(--ink);
      font-weight: 600;
      text-align: right;
    }

    .site-card-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 0.25rem;
    }

    .links-directory-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      min-height: 0;
    }

    .peer-card {
      padding: clamp(0.85rem, 1.9vh, 1.35rem) 1.6rem;
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.55rem;
      transition: background-color var(--dur-fast) ease;
    }
    .peer-card:nth-child(2n) { border-right: 0; }
    .peer-card:nth-child(n+3) { border-bottom: 0; }
    .peer-card:hover {
      background: color-mix(in srgb, var(--accent) 6%, var(--paper));
    }

    .peer-card-head {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    .peer-avatar {
      width: 2.55rem;
      height: 2.55rem;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--rule));
      background: color-mix(in srgb, var(--accent) 12%, var(--paper));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--kai);
      font-size: var(--text-md);
      color: var(--accent);
      flex-shrink: 0;
    }

    .peer-head-meta {
      min-width: 0;
      flex: 1;
    }

    .peer-name {
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-md);
      font-weight: 400;
      color: var(--ink);
      letter-spacing: 0.05em;
    }
    .peer-card:hover .peer-name { color: var(--accent); }

    .peer-domain {
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--faint);
      letter-spacing: 0.04em;
    }

    .peer-bio {
      margin: 0;
      font-size: 1.03rem;
      line-height: 1.62;
      color: var(--muted);
    }

    .peer-foot {
      padding-top: 0.42rem;
      border-top: 1px dashed var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--faint);
    }

    .peer-link-action {
      color: var(--accent);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }
    .peer-link-action:hover {
      text-decoration: underline;
    }

    /* ========================================================================
       需求 2：文章详细页重构 + 右侧《三体》三个天体运动模型画布
       ======================================================================== */
    .article-detail-view {
      padding: 1.15rem 0 3.5rem;
      min-height: calc(100vh - var(--nav-h));
    }

    .article-q-frame {
      position: relative;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 97%, var(--canvas));
      overflow: visible;
    }

    .article-hero-grid {
      display: grid;
      grid-template-columns: 6.1fr 3.9fr;
      border-bottom: 1px solid var(--rule);
      min-height: 13.5rem;
      position: relative;
      z-index: 2;
    }

    .article-hero-meta-cell {
      padding: 1.15rem 2rem;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .article-hero-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .article-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.2rem 0.68rem;
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: all var(--dur-fast) ease;
    }
    .article-back-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .article-main-title {
      margin: 0.1rem 0 0;
      font-family: var(--kai);
      font-size: clamp(1.65rem, 2.3vw, 2.15rem);
      font-weight: 400;
      letter-spacing: 0.06em;
      line-height: 1.25;
      color: var(--ink);
    }

    .article-lead-summary {
      margin: 0.32rem 0 0;
      font-size: 1.06rem;
      line-height: 1.68;
      color: var(--muted);
    }

    .article-telemetry-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--rule);
      padding-top: 0.65rem;
      gap: 0.65rem;
      font-family: var(--mono);
      font-size: 0.7rem;
    }

    .article-telemetry-item span {
      display: block;
      color: var(--faint);
      margin-bottom: 0.1rem;
    }
    .article-telemetry-item strong {
      font-family: var(--kai);
      font-size: 1.12rem;
      font-weight: 400;
      color: var(--accent);
    }

    /* 文章详细页右侧：《三体》三恒星与行星混沌引力场模型画布 */
    .article-hero-kinetic-cell {
      padding: 0.8rem 1.15rem;
      background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, color-mix(in srgb, var(--paper) 92%, var(--canvas)) 82%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.42rem;
      position: relative;
      overflow: hidden;
    }

    .article-kinetic-canvas-wrap {
      position: relative;
      flex: 1;
      min-height: 9.6rem;
      border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--rule));
      background: color-mix(in srgb, var(--paper) 78%, transparent);
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
    }

    .article-infinity-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .threebody-hud-overlay {
      position: absolute;
      top: 0.45rem;
      left: 0.55rem;
      right: 0.55rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      pointer-events: none;
      font-family: var(--mono);
      font-size: 0.66rem;
      letter-spacing: 0.06em;
      color: var(--faint);
      z-index: 2;
    }
    .threebody-era-badge {
      padding: 0.08rem 0.44rem;
      border-radius: 2px;
      border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--rule));
      background: color-mix(in srgb, var(--paper) 84%, transparent);
      color: var(--accent);
      font-weight: 600;
    }

    /* 文章详细页主工作区 */
    .article-workspace-grid {
      display: grid;
      grid-template-columns: 16.5rem minmax(0, 1fr) 19.5rem;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }

    .article-sidebar-q {
      border-right: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 93%, var(--canvas));
    }

    .article-RightRail-q {
      border-left: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 93%, var(--canvas));
    }

    .article-sidebar-sticky {
      position: sticky;
      top: calc(var(--nav-h) + 1rem);
      align-self: flex-start;
      max-height: calc(100vh - var(--nav-h) - 2rem);
      overflow-y: auto;
      scrollbar-width: thin;
      padding: 1.4rem 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .toc-box-title {
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin: 0 0 0.65rem;
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--rule);
    }

    .toc-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .toc-list a {
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
      padding: 0.3rem 0.5rem;
      border-left: 2px solid transparent;
      font-family: var(--kai);
      font-size: var(--text-base);
      color: var(--muted);
      transition: all var(--dur-fast) ease;
    }

    .toc-list a:hover,
    .toc-list a[data-active="true"] {
      border-left-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 8%, var(--paper));
      color: var(--accent);
    }

    .toc-num {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--faint);
    }

    .reading-progress-card {
      padding: 0.85rem 0.95rem;
      border: 1px solid var(--rule);
      background: var(--paper);
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--faint);
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .progress-track {
      width: 100%;
      height: 4px;
      background: var(--rule);
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      width: 0%;
      background: var(--accent);
      transition: width 150ms ease;
    }

    .article-prose-q {
      padding: 2.1rem clamp(1.75rem, 3.5vw, 3.25rem);
      width: 100%;
      min-width: 0;
    }

    .article-prose-q h2 {
      margin: 2.2rem 0 0.9rem;
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--rule);
      font-family: var(--kai);
      font-size: var(--text-xl);
      font-weight: 400;
      letter-spacing: 0.08em;
      color: var(--ink);
      display: flex;
      align-items: baseline;
      gap: 0.65rem;
    }
    .article-prose-q h2:first-child { margin-top: 0; }

    .article-prose-q h2 .sec-index {
      font-family: var(--mono);
      font-size: 0.85rem;
      color: var(--accent);
    }

    .article-prose-q p {
      margin: 0 0 1.2rem;
      font-size: var(--text-base);
      line-height: 1.98;
      text-indent: 2em;
      color: var(--ink);
    }

    .q-callout {
      margin: 1.4rem 0;
      padding: 1.05rem 1.35rem;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
      border-left: 3px solid var(--accent);
      background: color-mix(in srgb, var(--accent) 5%, var(--paper));
    }
    .q-callout-head {
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 0.35rem;
    }
    .q-callout p {
      margin: 0;
      text-indent: 0;
      font-size: 1.1rem;
      color: var(--muted);
    }

    .q-codeblock {
      margin: 1.4rem 0;
      border: 1px solid var(--rule);
      background: var(--code-block);
    }
    .q-codebar {
      padding: 0.42rem 1rem;
      border-bottom: 1px solid var(--rule);
      background: var(--code-bg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--mono);
      font-size: 0.73rem;
      color: var(--muted);
    }
    .q-copy-code-btn {
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.7rem;
      padding: 0.12rem 0.55rem;
      cursor: pointer;
    }
    .q-copy-code-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .q-codeblock pre {
      margin: 0;
      padding: 1rem 1.2rem;
      overflow-x: auto;
      font-family: var(--mono);
      font-size: 0.9rem;
      line-height: 1.68;
      color: var(--ink);
    }

    .q-spec-table {
      width: 100%;
      border-collapse: collapse;
      margin: 1.4rem 0;
      font-size: 1.04rem;
    }
    .q-spec-table th,
    .q-spec-table td {
      border: 1px solid var(--rule);
      padding: 0.6rem 0.95rem;
      text-align: left;
    }
    .q-spec-table th {
      font-family: var(--kai);
      font-size: var(--text-base);
      font-weight: 400;
      background: color-mix(in srgb, var(--paper) 88%, var(--canvas));
      color: var(--accent);
    }

    /* 文章详细页右栏伴读组件 */
    .rail-blueprint-card {
      padding: 0.9rem 1rem;
      border: 1px solid var(--rule);
      background: var(--paper);
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }

    .rail-card-kicker {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.09em;
      color: var(--accent);
      border-bottom: 1px solid var(--rule);
      padding-bottom: 0.35rem;
      display: flex;
      justify-content: space-between;
    }

    .rail-kv-list {
      margin: 0;
      padding: 0;
      list-style: none;
      font-family: var(--mono);
      font-size: 0.73rem;
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
    }
    .rail-kv-list li {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
    }
    .rail-kv-list li strong {
      color: var(--ink);
      font-weight: 600;
    }

    .rail-related-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .rail-related-list button,
    .rail-related-list a {
      width: 100%;
      text-align: left;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      padding: 0.48rem 0.68rem;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      transition: all var(--dur-fast) ease;
    }
    .rail-related-list button:hover,
    .rail-related-list a:hover {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 8%, var(--paper));
    }
    .rail-related-list .r-idx {
      font-family: var(--mono);
      font-size: 0.68rem;
      color: var(--accent);
    }
    .rail-related-list .r-tit {
      font-family: var(--kai);
      font-size: 1.08rem;
      color: var(--ink);
    }

    .article-pager-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-top: 1px solid var(--rule);
      position: relative;
      z-index: 2;
    }
    .article-pager-cell {
      padding: 1.15rem 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      cursor: pointer;
      transition: background-color var(--dur-fast) ease;
    }
    .article-pager-cell + .article-pager-cell {
      border-left: 1px solid var(--rule);
      text-align: right;
    }
    .article-pager-cell:hover {
      background: color-mix(in srgb, var(--accent) 7%, var(--paper));
    }
    .pager-kicker {
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--faint);
      letter-spacing: 0.08em;
    }
    .pager-title {
      font-family: var(--kai);
      font-size: var(--text-md);
      color: var(--ink);
    }

    /* 右侧屏幕刻度指示器 */
    .screen-ruler {
      position: fixed;
      right: 0.7rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 35;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      align-items: flex-end;
    }
    .ruler-tick {
      display: flex;
      align-items: center;
      gap: 0.38rem;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      color: var(--faint);
      cursor: pointer;
      background: none;
      border: 0;
      padding: 0.1rem 0;
    }
    .ruler-tick::after {
      content: '';
      display: block;
      width: 8px;
      height: 1px;
      background: var(--faint);
      transition: width var(--dur-fast) var(--ease), background-color var(--dur-fast) ease;
    }
    .ruler-tick[aria-current="true"] {
      color: var(--accent);
      font-weight: 600;
    }
    .ruler-tick[aria-current="true"]::after {
      width: 18px;
      height: 1.5px;
      background: var(--accent);
    }

    /* 页脚 + 世界线变动率探测仪 */
    .site-foot {
      margin: 0;
      padding: var(--space-5) 0 var(--space-6);
      border-top: 1px solid var(--rule);
      font-size: var(--text-xs);
      letter-spacing: 0.1em;
      color: var(--muted);
    }
    .site-foot-inner {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .site-foot a:hover { color: var(--accent); }

    .dm {
      --dm-size: clamp(8px, 2.5vw, 12px);
      --lit: #ffb13b;
      --glow: #ff7a00;
      --ghost: rgba(255, 110, 35, 0.2);
      display: flex;
      justify-content: center;
      padding: 1em 0 0.2em;
      font-size: var(--dm-size);
    }
    .dm--dark-only { display: none; }
    :root[data-theme='dark'] .dm--dark-only { display: flex; }

    .dm-tubes { display: inline-flex; gap: 0.5em; }
    .dm-tube {
      position: relative;
      width: 3.2em;
      height: calc(3.2em * 110 / 60);
    }
    .dm-tube svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .dm-ghost { stroke: var(--ghost); }
    .dm-ghost .g { stroke-width: 1.6; }
    .dm-ghost .c { stroke-width: 0.9; }
    .dm-lit {
      stroke: var(--lit);
      filter: drop-shadow(0 0 2px #ffd9a0) drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 12px rgba(255, 90, 0, 0.7));
    }
    .dm-lit .g { stroke-width: 2.3; }
    .dm-lit .c { stroke-width: 1.2; opacity: 0.9; }
    .dm-dot { fill: var(--lit); stroke: none; }

    /* 右下角悬浮球 */
    .fab {
      position: fixed;
      right: 1.4rem;
      bottom: 1.4rem;
      z-index: 50;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.6rem;
    }

    .fab-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.5rem;
      transform-origin: 85% calc(100% + 2.5rem);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px) scale(0.92);
      transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
    }

    .fab[data-open] .fab-actions {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      transition: opacity var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), visibility 0s;
    }

    .fab-item {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
    }

    .fab-chip-label {
      padding: 0.22rem 0.62rem;
      border-radius: 3px;
      border: 1px solid color-mix(in srgb, var(--rule) 80%, var(--accent) 20%);
      background: color-mix(in srgb, var(--paper) 82%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      color: var(--muted);
      box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.22);
      white-space: nowrap;
    }

    .fab-btn {
      width: 2.85rem;
      height: 2.85rem;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--rule) 78%, var(--accent) 22%);
      border-radius: 6px;
      background: color-mix(in srgb, var(--paper) 82%, transparent);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow:
        0 10px 26px -10px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.22);
      transition: all var(--dur-fast) var(--ease);
      position: relative;
    }

    .fab-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform var(--dur-base) var(--ease);
    }

    .fab-btn:hover {
      color: var(--accent);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .fab-btn--main {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 8px;
      color: #faf9f5;
      background: linear-gradient(135deg, var(--accent) 0%, #c26142 100%);
      border: 1px solid color-mix(in srgb, var(--accent) 80%, #ffffff 20%);
      box-shadow:
        0 12px 28px -8px rgba(217, 119, 87, 0.55),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.32);
    }
    .fab-btn--main:hover {
      color: #ffffff;
      border-color: #ffffff;
      transform: translateY(-2px) scale(1.03);
    }

    .fab-btn--main svg {
      width: 20px;
      height: 20px;
    }

    .fab[data-open] .fab-btn--main .fab-main-Cross {
      transform: rotate(45deg);
    }

    /* 左下角粒子场调校台 */
    .math-lab {
      position: fixed;
      left: 1.4rem;
      bottom: 1.4rem;
      z-index: 50;
      width: 21.5rem;
      max-width: calc(100vw - 2rem);
      background: color-mix(in srgb, var(--paper) 84%, transparent);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid var(--rule);
      border-radius: 4px;
      box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.35);
      font-family: var(--sans);
      font-size: 0.8rem;
      color: var(--ink);
    }
    .math-lab[data-collapsed="true"] .math-lab-body { display: none; }
    .math-lab[data-collapsed="true"] { width: auto; }
    .math-lab-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      padding: 0.5rem 0.85rem;
      border-bottom: 1px solid var(--rule);
      cursor: pointer;
      user-select: none;
    }
    .math-lab[data-collapsed="true"] .math-lab-head { border-bottom: 0; }
    .math-lab-title {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 600;
      letter-spacing: 0.05em;
    }
    .math-lab-symbol {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.4rem;
      height: 1.4rem;
      border-radius: 2px;
      background: var(--accent);
      color: #fff;
      font-family: var(--mono);
      font-size: 0.78rem;
    }
    .math-lab-toggle {
      border: 0;
      background: none;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 0.74rem;
      cursor: pointer;
    }
    .math-lab-body {
      padding: 0.75rem 0.85rem 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .lab-group { display: flex; flex-direction: column; gap: 0.32rem; }
    .lab-label {
      display: flex;
      justify-content: space-between;
      font-size: 0.74rem;
      color: var(--muted);
    }
    .lab-val { font-family: var(--mono); color: var(--accent); }
    .lab-seg {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.35rem;
    }
    .lab-btn {
      padding: 0.34rem 0.45rem;
      border: 1px solid var(--rule);
      border-radius: 2px;
      background: var(--paper);
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.75rem;
      cursor: pointer;
    }
    .lab-btn[aria-pressed="true"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 15%, var(--paper));
      color: var(--accent);
      font-weight: 600;
    }
    .lab-slider { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; }

    /* Toast & Lightbox */
    .toast-msg {
      position: fixed;
      top: 4.2rem;
      left: 50%;
      transform: translateX(-50%) translateY(-12px);
      z-index: 95;
      padding: 0.48rem 1.1rem;
      background: var(--ink);
      color: var(--paper);
      border-radius: 3px;
      font-family: var(--sans);
      font-size: 0.82rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
    }
    .toast-msg[data-show="true"] {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    body.lightbox-open { overflow: hidden; }
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-6) var(--space-7);
      background: rgba(18, 18, 17, 0.96);
    }
    .lightbox img { display: block; max-width: 100%; max-height: 85vh; border-radius: 2px; }
    .lightbox button {
      position: absolute;
      padding: var(--space-3);
      border: 0;
      background: none;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.78);
      font-size: 1.75rem;
    }
    .lightbox-close { top: var(--space-2); right: var(--space-3); }
    .lightbox-nav[data-dir="prev"] { left: var(--space-2); top: 50%; transform: translateY(-50%); }
    .lightbox-nav[data-dir="next"] { right: var(--space-2); top: 50%; transform: translateY(-50%); }
    .lightbox-note {
      position: absolute;
      bottom: var(--space-4);
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      display: flex;
      gap: var(--space-5);
      color: rgba(255, 255, 255, 0.72);
      font-family: var(--mono);
      font-size: 0.85rem;
    }

    @media (max-width: 72rem), (max-height: 42rem) {
      .screen {
        height: auto;
        max-height: none;
        min-height: calc(100vh - var(--nav-h));
        overflow: visible;
        padding: 1.25rem 0;
      }
      .hero-q-body,
      .posts-q-body,
      .photos-q-meta-grid,
      .posts-q-spot-main,
      .prog-workbench,
      .links-topology-layout,
      .article-hero-grid,
      .article-workspace-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .hero-q-left,
      .posts-q-left,
      .photos-q-wall-title-cell,
      .posts-q-cover-cell,
      .prog-featured-console,
      .links-protocol-panel,
      .article-hero-meta-cell,
      .article-sidebar-q {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
      }
      .article-RightRail-q {
        border-left: 0;
        border-top: 1px solid var(--rule);
      }
      .hero-canvas-holder { min-height: 24rem; }
      .wall-photos-waterfall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .screen-ruler { display: none; }
    }
    @media (max-width: 44rem) {
      .wall-photos-waterfall { grid-template-columns: minmax(0, 1fr); }
      .stagger-col--2, .stagger-col--3 { padding-top: 0; }
      .links-directory-grid { grid-template-columns: minmax(0, 1fr); }
    }

    /* ========================================================================
       覆盖与新增样式（需求 1 ~ 8 全面升级）
       ======================================================================== */

    /* 需求 4：主页照片栏 —— 最新一组照片横向原比例陈列，超出栏宽右边界自动隐藏 */
    .photos-q-stage {
      flex: 1;
      min-height: 0;
      padding: 0.85rem 1.35rem;
      overflow: hidden;
      background: color-mix(in srgb, var(--paper) 94%, var(--canvas));
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wall-photos-strip {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 1.05rem;
      overflow: hidden;
    }

    .wall-photos-strip .wf-item {
      flex: 0 0 auto;
      width: auto;
      margin: 0;
      padding: 0.38rem;
      border: 1px solid var(--rule);
      background: var(--paper);
      border-radius: 3px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.34rem;
      transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
    }
    .wall-photos-strip .wf-item:nth-child(odd) {
      transform: translateY(-0.35rem);
    }
    .wall-photos-strip .wf-item:nth-child(even) {
      transform: translateY(0.35rem);
    }
    .wall-photos-strip .wf-item:hover {
      transform: translateY(-0.55rem);
      border-color: var(--accent);
      box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.28);
    }
    .wall-photos-strip .photo-link {
      display: block;
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      background: var(--canvas);
    }
    .wall-photos-strip img {
      display: block;
      width: auto;
      height: clamp(12.5rem, 36vh, 19.5rem);
      aspect-ratio: var(--ar);
      object-fit: contain;
      border-radius: 1px;
      transition: transform var(--dur-slow) var(--ease);
    }
    .wall-photos-strip .wf-item:hover img {
      transform: scale(1.02);
    }
    .wf-item-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding: 0.1rem 0.2rem 0.05rem;
      font-family: var(--mono);
      font-size: 0.72rem;
      color: var(--muted);
    }
    .wf-item-title {
      font-family: var(--kai);
      font-size: 1.05rem;
      color: var(--ink);
      letter-spacing: 0.04em;
    }
    .wf-info-trigger {
      border: 0;
      background: none;
      padding: 0;
      font-family: var(--mono);
      font-size: 0.7rem;
      color: var(--accent);
      cursor: pointer;
    }
    .wf-info-trigger:hover {
      text-decoration: underline;
    }

    /* 需求 5：第五屏「友链」板块重构 —— 左栏（关于我 + 关于站点与互换名片） + 右栏（3×2 邻人友链矩阵） */
    .links-topology-layout {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 3.7fr 6.3fr;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }
    .links-protocol-panel {
      border-right: 1px solid var(--rule);
      padding: clamp(0.75rem, 1.6vh, 1.15rem) 1.45rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.65rem;
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      min-height: 0;
    }
    .author-head-cluster {
      display: flex;
      align-items: center;
      gap: 0.72rem;
    }
    .author-monogram {
      width: 2.4rem;
      height: 2.4rem;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--rule));
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--paper)), var(--paper));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--kai);
      font-size: var(--text-md);
      color: var(--accent);
      flex-shrink: 0;
    }
    .author-sub-coord {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      color: var(--faint);
    }
    .author-bio-text {
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.58;
      color: var(--muted);
    }
    .author-tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      padding-top: 0.2rem;
    }
    .author-chip {
      padding: 0.1rem 0.48rem;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 88%, var(--canvas));
      font-family: var(--mono);
      font-size: 0.68rem;
      color: var(--muted);
      border-radius: 2px;
    }
    .links-peers-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
    }
    .links-peers-head {
      flex-shrink: 0;
      padding: 0.45rem 1.35rem;
      border-bottom: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      color: var(--faint);
    }
    .links-directory-grid {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }
    .links-directory-grid .peer-card {
      padding: clamp(0.65rem, 1.5vh, 1.05rem) 1.15rem;
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.4rem;
    }
    .links-directory-grid .peer-card:nth-child(2n) {
      border-right: 1px solid var(--rule);
    }
    .links-directory-grid .peer-card:nth-child(3n) {
      border-right: 0;
    }
    .links-directory-grid .peer-card:nth-child(n+3) {
      border-bottom: 1px solid var(--rule);
    }
    .links-directory-grid .peer-card:nth-child(n+4) {
      border-bottom: 0;
    }
    .peer-title-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.4rem;
    }
    .peer-tag {
      font-family: var(--mono);
      font-size: 0.65rem;
      padding: 0.06rem 0.38rem;
      border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule));
      color: var(--accent);
      border-radius: 2px;
      white-space: nowrap;
    }
    .links-directory-grid .peer-bio {
      margin-top: 0.38rem;
      font-size: 0.96rem;
      line-height: 1.55;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      overflow: hidden;
    }

    /* 需求 8：文章详细页与照片信息页共用归档筛选条 */
    .detail-archive-bar {
      padding: 0.55rem 1.35rem;
      border-bottom: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.65rem;
      position: relative;
      z-index: 2;
    }
    .detail-archive-tags,
    .detail-archive-pills {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.38rem;
    }
    .archive-bar-label {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      color: var(--faint);
      margin-right: 0.2rem;
    }
    .archive-tag-chip {
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--muted);
      font-family: var(--sans);
      font-size: 0.74rem;
      padding: 0.16rem 0.58rem;
      border-radius: 2px;
      cursor: pointer;
      transition: all var(--dur-fast) ease;
    }
    .archive-tag-chip:hover,
    .archive-tag-chip[aria-pressed="true"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, var(--paper));
      color: var(--accent);
      font-weight: 600;
    }
    .archive-entry-pill {
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 88%, var(--canvas));
      color: var(--ink);
      font-family: var(--kai);
      font-size: 1.05rem;
      padding: 0.14rem 0.62rem;
      border-radius: 2px;
      cursor: pointer;
      transition: all var(--dur-fast) ease;
    }
    .archive-entry-pill:hover,
    .archive-entry-pill[aria-current="true"] {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff;
    }

    /* 需求 8：照片信息详细页（#photos-view）完整象限蓝图样式 */
    .photos-detail-view {
      padding: 1.15rem 0 3.5rem;
      min-height: calc(100vh - var(--nav-h));
    }
    .photos-inspector-grid {
      display: grid;
      grid-template-columns: 5.6fr 4.4fr;
      border-bottom: 1px solid var(--rule);
      position: relative;
      z-index: 2;
    }
    .photos-inspector-stage-cell {
      padding: 1.1rem 1.65rem;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.65rem;
      background: color-mix(in srgb, var(--paper) 94%, var(--canvas));
    }
    .inspector-stage-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.65rem;
      flex-wrap: wrap;
    }
    .inspector-nav-btns {
      display: inline-flex;
      gap: 0.38rem;
      flex-wrap: wrap;
    }
    .inspector-viewport {
      position: relative;
      min-height: 20rem;
      max-height: 25rem;
      padding: 1rem;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
      background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, var(--paper) 85%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .inspector-img-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      max-height: 22.5rem;
      cursor: zoom-in;
    }
    .inspector-img-link img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 22rem;
      object-fit: contain;
      border-radius: 2px;
      box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.35);
    }
    .photos-inspector-info-cell {
      padding: 1.25rem 1.85rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.9rem;
    }
    .photos-insp-title {
      margin: 0.45rem 0 0;
      font-family: var(--kai);
      font-size: clamp(1.5rem, 2.1vw, 1.9rem);
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--ink);
    }
    .photos-insp-story {
      margin: 0.4rem 0 0;
      font-size: 1.04rem;
      line-height: 1.72;
      color: var(--muted);
    }
    .photo-exif-spec-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.55rem 1rem;
      padding: 0.75rem 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 0.7rem;
    }
    .exif-cell span {
      display: block;
      color: var(--faint);
      margin-bottom: 0.1rem;
    }
    .exif-cell strong {
      font-family: var(--sans);
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--ink);
    }
    .photo-histogram-box {
      padding: 0.65rem 0.85rem;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      display: flex;
      flex-direction: column;
      gap: 0.42rem;
    }
    .histogram-head {
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      color: var(--faint);
    }
    .histogram-bars {
      height: 2.2rem;
      display: grid;
      grid-template-columns: repeat(16, 1fr);
      align-items: end;
      gap: 3px;
      padding-top: 0.2rem;
    }
    .histogram-bars span {
      display: block;
      width: 100%;
      background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--rule)));
      border-radius: 1px 1px 0 0;
      transition: height var(--dur-base) var(--ease);
    }

    .photos-detail-archive-grid {
      padding: 1.35rem;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.15rem;
      align-items: start;
      position: relative;
      z-index: 2;
    }
    .photo-detail-card {
      border: 1px solid var(--rule);
      background: var(--paper);
      border-radius: 3px;
      padding: 0.45rem;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      cursor: pointer;
      transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
    }
    .photo-detail-card:hover,
    .photo-detail-card[data-active="true"] {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.28);
    }
    .photo-detail-card[data-active="true"] {
      background: color-mix(in srgb, var(--accent) 5%, var(--paper));
    }
    .photo-detail-img-wrap {
      position: relative;
      width: 100%;
      border-radius: 2px;
      overflow: hidden;
      background: var(--canvas);
    }
    .photo-detail-img-wrap img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ar);
      object-fit: contain;
    }
    .photo-detail-card-body {
      padding: 0.2rem 0.4rem 0.35rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }
    .photo-detail-card-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .photo-detail-card-top h3 {
      margin: 0;
      font-family: var(--kai);
      font-size: var(--text-base);
      font-weight: 400;
      color: var(--ink);
    }
    .photo-detail-date {
      font-family: var(--kai);
      font-size: 1.05rem;
      color: var(--accent);
    }
    .photo-detail-card-body p {
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.58;
      color: var(--muted);
    }
    .photo-detail-exif-line {
      padding-top: 0.35rem;
      border-top: 1px dashed var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--mono);
      font-size: 0.68rem;
      color: var(--faint);
    }

    @media (max-width: 72rem) {
      .photos-inspector-grid {
        grid-template-columns: minmax(0, 1fr);
      }
      .photos-inspector-stage-cell {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
      }
      .photos-detail-archive-grid,
      .links-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 44rem) {
      .photos-detail-archive-grid,
      .links-directory-grid,
      .photo-exif-spec-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* ========================================================================
       新增升级 1：文章子页面（#posts-view）三层架构与时间轴（Timeline）设计语言
       ======================================================================== */
    .posts-subpage-view {
      padding: 1.15rem 0 3.5rem;
      min-height: calc(100vh - var(--nav-h));
    }
    .posts-subpage-hero {
      display: grid;
      grid-template-columns: 5.8fr 4.2fr;
      border-bottom: 1px solid var(--rule);
      position: relative;
      z-index: 2;
    }
    .posts-subpage-hero-left {
      padding: 1.25rem 2rem;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.65rem;
    }
    .posts-subpage-title {
      margin: 0.1rem 0 0;
      font-family: var(--kai);
      font-size: clamp(1.7rem, 2.4vw, 2.2rem);
      font-weight: 400;
      letter-spacing: 0.08em;
      color: var(--ink);
    }
    .posts-subpage-lead {
      margin: 0;
      font-size: 1.05rem;
      line-height: 1.72;
      color: var(--muted);
    }
    .posts-subpage-hero-right {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(0, 1fr));
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
    }
    .posts-stat-card {
      padding: 0.85rem 1.2rem;
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.18rem;
    }
    .posts-stat-card:nth-child(2n) { border-right: 0; }
    .posts-stat-card:nth-child(n+3) { border-bottom: 0; }
    .posts-stat-card span {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      color: var(--faint);
    }
    .posts-stat-card strong {
      font-family: var(--kai);
      font-size: 1.28rem;
      font-weight: 400;
      color: var(--accent);
    }
    .posts-stat-card small {
      font-family: var(--sans);
      font-size: 0.75rem;
      color: var(--muted);
    }

    .posts-tl-controls {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: wrap;
    }
    .tl-search-input {
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 0.78rem;
      padding: 0.22rem 0.68rem;
      border-radius: 2px;
      width: 13.5rem;
      transition: border-color var(--dur-fast) ease;
    }
    .tl-search-input:focus {
      outline: none;
      border-color: var(--accent);
    }

    .posts-timeline-workspace {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20.5rem;
      align-items: stretch;
      position: relative;
      z-index: 2;
    }
    .posts-timeline-main {
      padding: 1.75rem clamp(1.5rem, 3vw, 2.75rem) 2.25rem;
      min-width: 0;
    }
    .posts-timeline-rail {
      border-left: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 93%, var(--canvas));
    }

    /* 时间轴（Timeline）核心几何结构与折叠动效 */
    .tl {
      position: relative;
      margin-left: 0.65rem;
      padding-left: 2.1rem;
    }
    .tl::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.4rem;
      bottom: 0.5rem;
      width: 1.5px;
      background: linear-gradient(180deg, var(--accent) 0%, var(--rule) 18%, var(--rule) 88%, var(--accent) 100%);
    }
    .tl-now-cap {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 1.35rem;
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: var(--accent);
    }
    .tl-now-dot {
      position: absolute;
      left: calc(-2.1rem - 4.5px);
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .tl-year + .tl-year {
      margin-top: 2.4rem;
    }
    .tl-month + .tl-month {
      margin-top: 1.45rem;
    }

    .tl-year-head,
    .tl-month-head {
      position: relative;
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      width: 100%;
      margin: 0;
      padding: 0.32rem 0.65rem 0.32rem 0;
      border: 0;
      border-bottom: 1px dashed color-mix(in srgb, var(--rule) 80%, transparent);
      background: none;
      font: inherit;
      text-align: left;
      color: inherit;
      cursor: pointer;
      transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
    }
    .tl-year-head:hover,
    .tl-month-head:hover {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    /* 钉在时间轴线上的年份与月份几何节点 */
    .tl-year-head::before,
    .tl-month-head::before {
      content: '';
      position: absolute;
      top: 50%;
      left: calc(-2.1rem - 3.5px);
      width: 8px;
      height: 8px;
      margin-top: -4px;
      border-radius: 50%;
      background: var(--paper);
      border: 2px solid var(--muted);
      transition: all var(--dur-fast) var(--ease);
    }
    .tl-year-head::before {
      left: calc(-2.1rem - 5.5px);
      width: 12px;
      height: 12px;
      margin-top: -6px;
      background: var(--accent);
      border: 2px solid var(--paper);
      box-shadow: 0 0 0 1.5px var(--accent);
    }
    .tl-year-head:hover::before,
    .tl-month-head:hover::before {
      background: var(--accent);
      border-color: var(--accent);
      transform: scale(1.22);
    }

    .tl-year-label {
      font-family: var(--kai);
      font-size: var(--text-xl);
      letter-spacing: 0.14em;
      color: var(--ink);
    }
    .tl-year-code {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: var(--accent);
      padding: 0.08rem 0.45rem;
      border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--rule));
      border-radius: 2px;
    }
    .tl-month-label {
      font-family: var(--kai);
      font-size: var(--text-lg);
      letter-spacing: 0.12em;
      color: var(--ink);
    }
    .tl-month-code {
      font-family: var(--mono);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      color: var(--faint);
    }
    .tl-count {
      font-family: var(--mono);
      font-size: 0.74rem;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-left: auto;
    }
    .tl-chevron {
      font-family: var(--mono);
      font-size: 0.85rem;
      color: var(--accent);
      transition: transform 320ms var(--ease);
    }
    .tl-year-head[aria-expanded="false"] .tl-chevron,
    .tl-month-head[aria-expanded="false"] .tl-chevron {
      transform: rotate(-90deg);
    }

    /* 0fr -> 1fr 无缝高度折叠过渡 */
    .tl-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 400ms cubic-bezier(0.22, 1.12, 0.32, 1);
    }
    .tl-panel[data-open] {
      grid-template-rows: 1fr;
    }
    .tl-body {
      padding-left: calc(2.1rem + 8px);
      margin-left: calc(-2.1rem - 8px);
      padding-top: 0.85rem;
    }
    .tl-body,
    .tl-items {
      overflow: hidden;
      visibility: hidden;
      transition: visibility 0s linear 420ms;
    }
    .tl-panel[data-open] > .tl-body,
    .tl-panel[data-open] > .tl-items {
      visibility: visible;
      transition: visibility 0s;
    }
    .tl-items {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      padding-top: 0.75rem;
      padding-bottom: 0.25rem;
    }

    .tl-body > *,
    .tl-items > * {
      opacity: 0;
      transform: translateY(-0.45rem);
      transition: opacity 220ms ease, transform 320ms cubic-bezier(0.34, 1.3, 0.5, 1);
    }
    .tl-panel[data-open] > .tl-body > *,
    .tl-panel[data-open] > .tl-items > * {
      opacity: 1;
      transform: none;
    }

    /* 时间轴文章条目卡片（融合象限蓝图、日戳刻度与 16:9 缩略图） */
    .tl-post-card {
      position: relative;
      display: grid;
      grid-template-columns: 6.2rem minmax(0, 1fr) 11.5rem;
      align-items: center;
      gap: 1.15rem;
      padding: 0.95rem 1.2rem;
      border: 1px solid var(--rule);
      background: var(--paper);
      border-radius: 3px;
      transition: border-color var(--dur-fast) ease, transform var(--dur-base) var(--ease), box-shadow var(--dur-base) ease;
    }
    /* 连接左侧时间轴主线的水平刻度线 */
    .tl-post-card::before {
      content: '';
      position: absolute;
      left: -2.1rem;
      top: 50%;
      width: 2.1rem;
      height: 1px;
      background: linear-gradient(90deg, var(--accent), var(--rule));
      opacity: 0.65;
      pointer-events: none;
    }
    .tl-post-card:hover {
      border-color: var(--accent);
      transform: translateX(4px);
      box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.24);
    }

    .tl-item-date-col {
      display: flex;
      flex-direction: column;
      gap: 0.18rem;
      border-right: 1px solid var(--rule);
      padding-right: 0.85rem;
    }
    .tl-day-kai {
      font-family: var(--kai);
      font-size: 1.35rem;
      color: var(--accent);
      letter-spacing: 0.06em;
      line-height: 1.2;
    }
    .tl-day-mono {
      font-family: var(--mono);
      font-size: 0.68rem;
      color: var(--faint);
      letter-spacing: 0.06em;
    }

    .tl-item-content-col {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.32rem;
    }
    .tl-card-meta-row {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      flex-wrap: wrap;
      font-family: var(--mono);
      font-size: 0.68rem;
    }
    .tl-entry-badge {
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .tl-tag-Inline {
      padding: 0.06rem 0.42rem;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 90%, var(--canvas));
      color: var(--muted);
      border-radius: 2px;
    }
    .tl-word-meta {
      color: var(--faint);
      margin-left: auto;
    }
    .tl-card-title {
      margin: 0;
      font-family: var(--kai);
      font-size: 1.32rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--ink);
    }
    .tl-card-title a:hover {
      color: var(--accent);
    }
    .tl-card-excerpt {
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.62;
      color: var(--muted);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    .tl-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      padding-top: 0.3rem;
      border-top: 1px dashed var(--rule);
    }
    .tl-slug-code {
      font-family: var(--mono);
      font-size: 0.68rem;
      color: var(--faint);
    }
    .tl-read-btn {
      padding: 0.14rem 0.62rem;
      font-size: 0.92rem;
    }

    .tl-card-thumb {
      display: block;
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
      border-radius: 2px;
      overflow: hidden;
      background: var(--canvas);
    }
    .tl-card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--dur-slow) var(--ease);
    }
    .tl-post-card:hover .tl-card-thumb img {
      transform: scale(1.04);
    }

    .tl-start {
      position: relative;
      margin-top: 2rem;
      padding-top: 0.1rem;
      display: flex;
      align-items: center;
    }
    .tl-start::before {
      content: '';
      position: absolute;
      top: 50%;
      left: calc(-2.1rem - 6px);
      transform: translateY(-50%);
      width: 13px;
      height: 13px;
      border: 2px solid var(--accent);
      background: var(--paper);
      border-radius: 50%;
    }
    .tl-start::after {
      content: '';
      position: absolute;
      top: 50%;
      left: calc(-2.1rem - 2px);
      transform: translateY(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent);
    }
    .tl-origin-caption {
      font-family: var(--mono);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      color: var(--faint);
    }

    .tl-empty-state {
      padding: 2.5rem 1.5rem;
      border: 1px dashed var(--rule);
      text-align: center;
      color: var(--muted);
    }

    /* ========================================================================
       新增升级 2：照片子页（#photos-view）上方展示模块正好一屏大小 + 横竖双模态平滑伸缩适配
       ======================================================================== */
    .photos-detail-view {
      padding: 0 0 3.5rem;
      min-height: calc(100vh - var(--nav-h));
    }
    .photos-showcase-screen {
      height: calc(100vh - var(--nav-h));
      max-height: calc(100vh - var(--nav-h));
      min-height: 36rem;
      padding: clamp(0.42rem, 1vh, 0.75rem) 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .photos-showcase-screen > .wrap {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .photos-showcase-frame {
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
    }

    /* 核心：使用 Flexbox + CSS 变量 --insp-stage-w 实现左右两栏在横向框（67%/33%）与竖向框（44%/56%）之间丝滑过渡 */
    .photos-inspector-grid {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      align-items: stretch;
      border-bottom: 1px solid var(--rule);
      position: relative;
      z-index: 2;
      overflow: hidden;
      --insp-stage-w: 67%;
    }
    .photos-inspector-grid[data-orient-mode="portrait"] {
      --insp-stage-w: 44%;
    }

    .photos-inspector-stage-cell {
      flex: 0 0 var(--insp-stage-w);
      width: var(--insp-stage-w);
      max-width: var(--insp-stage-w);
      min-width: 0;
      min-height: 0;
      padding: 0.75rem 1.25rem;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.45rem;
      background: color-mix(in srgb, var(--paper) 94%, var(--canvas));
      transition:
        flex-basis 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        width 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        max-width 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        padding 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .insp-orient-chip {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.06em;
      padding: 0.1rem 0.48rem;
      border-radius: 2px;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
      background: color-mix(in srgb, var(--accent) 10%, var(--paper));
      color: var(--accent);
    }

    .inspector-viewport {
      position: relative;
      flex: 1;
      min-height: 0;
      max-height: none;
      width: 100%;
      padding: 0.45rem;
      border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--rule));
      background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, var(--paper) 86%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* 自适应横/竖画框容器：宽高由 JS 根据容器可用空间与图片真实宽高比计算，并通过 CSS transition 平滑变形 */
    .inspector-frame-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: calc(100% - 6px);
      max-height: calc(100% - 6px);
      padding: 0.38rem;
      border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--rule));
      background: var(--paper);
      border-radius: 3px;
      box-shadow: 0 18px 42px -18px rgba(0, 0, 0, 0.34);
      transition:
        width 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        height 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 340ms ease,
        box-shadow 420ms ease;
    }
    .inspector-frame-box[data-frame-orient="portrait"] {
      border-color: var(--accent);
      box-shadow: 0 20px 46px -16px rgba(217, 119, 87, 0.28);
    }

    .inspector-img-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      cursor: zoom-in;
      background: var(--canvas);
    }
    .inspector-img-link img {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 2px;
      box-shadow: none;
      transition:
        opacity 340ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .inspector-img-link img.is-switching {
      opacity: 0.22;
      transform: scale(0.962);
    }

    /* 右侧信息面板：随左侧画框自动伸缩宽度，并在竖向框模式（56% 宽）下同步放大内部排版尺度 */
    .photos-inspector-info-cell {
      flex: 1 1 0%;
      min-width: 0;
      min-height: 0;
      padding: 0.9rem 1.4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.55rem;
      overflow-y: auto;
      transition:
        padding 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        gap 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background-color 360ms ease;
    }
    .photos-inspector-grid[data-orient-mode="portrait"] .photos-inspector-info-cell {
      padding: 1.15rem 2.15rem;
      background: color-mix(in srgb, var(--accent) 3%, var(--paper));
    }

    .insp-layout-badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-top: 0.32rem;
      font-family: var(--mono);
      font-size: 0.68rem;
    }
    .insp-panel-scale-tag {
      color: var(--accent);
      padding: 0.08rem 0.45rem;
      border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule));
      border-radius: 2px;
    }
    .insp-ar-num {
      color: var(--faint);
    }

    .photos-insp-title {
      margin: 0.28rem 0 0;
      font-family: var(--kai);
      font-size: clamp(1.38rem, 1.85vw, 1.72rem);
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--ink);
      transition: font-size 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .photos-inspector-grid[data-orient-mode="portrait"] .photos-insp-title {
      font-size: clamp(1.58rem, 2.2vw, 2.02rem);
    }

    .photos-insp-story {
      margin: 0.28rem 0 0;
      font-size: 0.96rem;
      line-height: 1.62;
      color: var(--muted);
      transition: font-size 480ms cubic-bezier(0.22, 0.61, 0.36, 1), line-height 480ms ease;
    }
    .photos-inspector-grid[data-orient-mode="portrait"] .photos-insp-story {
      font-size: 1.05rem;
      line-height: 1.74;
    }

    .photo-exif-spec-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.42rem 0.85rem;
      padding: 0.55rem 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      font-family: var(--mono);
      font-size: 0.68rem;
      transition: gap 480ms cubic-bezier(0.22, 0.61, 0.36, 1), padding 480ms ease;
    }
    .photos-inspector-grid[data-orient-mode="portrait"] .photo-exif-spec-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.55rem 0.9rem;
      padding: 0.72rem 0;
    }
    .exif-cell {
      padding: 0.26rem 0.48rem;
      border: 1px solid color-mix(in srgb, var(--rule) 75%, transparent);
      background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
      border-radius: 2px;
      transition: padding 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .photos-inspector-grid[data-orient-mode="portrait"] .exif-cell {
      padding: 0.42rem 0.62rem;
    }

    /* 快速胶片切换条 */
    .insp-filmstrip-box {
      padding: 0.45rem 0.68rem;
      border: 1px solid var(--rule);
      background: color-mix(in srgb, var(--paper) 94%, var(--canvas));
      display: flex;
      flex-direction: column;
      gap: 0.32rem;
    }
    .insp-filmstrip-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0.32rem;
    }
    .filmstrip-thumb {
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--muted);
      padding: 0.22rem 0.25rem;
      border-radius: 2px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.06rem;
      font-family: var(--mono);
      font-size: 0.68rem;
      transition: all var(--dur-fast) ease;
    }
    .filmstrip-thumb small {
      font-size: 0.6rem;
      color: var(--faint);
    }
    .filmstrip-thumb:hover,
    .filmstrip-thumb[data-active="true"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, var(--paper));
      color: var(--accent);
      font-weight: 600;
    }
    .filmstrip-thumb[data-active="true"] small {
      color: var(--accent);
    }

    .photos-archive-section {
      margin-top: 1.5rem;
    }

    @media (max-width: 72rem) {
      .posts-subpage-hero,
      .posts-timeline-workspace {
        grid-template-columns: minmax(0, 1fr);
      }
      .posts-subpage-hero-left {
        border-right: 0;
        border-bottom: 1px solid var(--rule);
      }
      .posts-timeline-rail {
        border-left: 0;
        border-top: 1px solid var(--rule);
      }
      .tl-post-card {
        grid-template-columns: 5.5rem minmax(0, 1fr);
      }
      .tl-card-thumb {
        grid-column: 1 / -1;
        max-width: 18rem;
      }
      .photos-showcase-screen {
        height: auto;
        max-height: none;
      }
      .photos-inspector-grid {
        flex-direction: column;
      }
      .photos-inspector-stage-cell {
        flex: none;
        width: 100%;
        max-width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
      }
      .inspector-viewport {
        min-height: 22rem;
      }
    }

/* ==========================================================================
   2026-10-18 用户侧细节微调
   只做覆盖，不改生成器切出来的原始规则；追加在 artifact.css 末尾。
   ========================================================================== */

/* 1. 首屏左栏：介绍整体上移、左对齐；下方留白处放 ∞ / 黑洞平面图标 */
.hero-q-prose {
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: clamp(1.6rem, 5.5vh, 3.4rem);
}
.hero-planar-motif {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 9vh, 5rem);
  color: color-mix(in srgb, var(--accent) 78%, var(--ink));
  opacity: 0.52;
  pointer-events: none;
}
.hero-planar-motif svg {
  display: block;
}
.hero-motif-infinity {
  width: 5.6rem;
  height: 2.8rem;
}
.hero-motif-blackhole {
  width: 2.8rem;
  height: 2.8rem;
}
.hero-motif-rule {
  width: 1px;
  height: 2.2rem;
  background: var(--rule);
}

/* 2. 删掉 hero / 导航的主题切换按钮后，方程行不再两端撑开 */
.stage-subbar {
  justify-content: flex-start;
}

/* 5. 页脚：快捷链接行删除后，信息左对齐；分隔线 logo 放到所有信息最底部 */
.site-foot-inner {
  justify-content: flex-start;
}
.site-foot .planar-divider-bar {
  margin: 1.15rem auto 0;
}

/* 6. 文章归档页：删掉返回按钮后，左栏内容改为上对齐 */
.posts-subpage-hero-left {
  justify-content: flex-start;
  padding-top: 1.55rem;
  padding-bottom: 1.55rem;
}

/* 7. 文章详细页：删掉两个返回按钮后，kicker 行左对齐 */
.article-hero-top-row {
  justify-content: flex-start;
}

/* 小屏：首屏变成单列，留白变小，图标不要占太高 */
@media (max-width: 72rem), (max-height: 42rem) {
  .hero-q-prose {
    padding-top: 1.25rem;
  }
  .hero-planar-motif {
    margin-top: 2rem;
  }
}

/* 8. 照片页缺失摄影参数的艺术化模糊乱码（REDACTED // TELEMETRY CIPHER） */
.exif-val-cipher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  cursor: help;
  user-select: none;
}
.exif-cipher-blur {
  display: inline-block;
  filter: blur(1.65px);
  opacity: 0.72;
  letter-spacing: 0.06em;
  text-shadow: -1.5px 0 rgba(217, 119, 87, 0.55), 1.5px 0 rgba(120, 140, 93, 0.45);
  transition: filter 260ms var(--ease), opacity 260ms ease;
}
.exif-val-cipher:hover .exif-cipher-blur {
  filter: blur(0.65px);
  opacity: 0.92;
}
.exif-cipher-mask {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 0.05rem 0.34rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--rule));
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  color: var(--accent);
  border-radius: 2px;
  white-space: nowrap;
}

.math-lab {
  display: none !important;
}

html[data-theme-switching="true"],
html[data-theme-switching="true"] body,
html[data-theme-switching="true"] *:not(.theme-transition-stage):not(.theme-transition-veil):not(.theme-transition-canvas):not(.infinity-loader):not(.loader-infinity-canvas),
html[data-theme-switching="true"] *::before,
html[data-theme-switching="true"] *::after {
  transition: none !important;
}

.spot-blank-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 10.5rem;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.spot-blank-logo-link[hidden] {
  display: none !important;
}

.cover-theme-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--accent);
  opacity: 0.86;
  transition: transform 260ms var(--ease), opacity 260ms ease;
}
.spot-blank-logo-link:hover .cover-theme-fallback {
  transform: scale(1.04);
  opacity: 1;
}
.cover-theme-fallback[hidden] {
  display: none !important;
}
.cover-theme-fallback .cover-fallback-svg {
  width: min(15.5rem, 72%);
  height: auto;
  display: none;
}
.cover-theme-fallback .planar-wm--infinity { display: block; }
.cover-theme-fallback .planar-wm--blackhole { display: none; }
:root[data-theme="dark"] .cover-theme-fallback .planar-wm--infinity { display: none; }
:root[data-theme="dark"] .cover-theme-fallback .planar-wm--blackhole { display: block; }

/* 文章归档子页：无封面的文章去掉右侧封面列，文字梗概栏横向拉伸到右侧 */
.tl-post-card.tl-post-card--no-cover,
.tl-post-card:not(:has(.tl-card-thumb)) {
  grid-template-columns: 6.2rem minmax(0, 1fr);
}
@media (max-width: 72rem) {
  .tl-post-card.tl-post-card--no-cover,
  .tl-post-card:not(:has(.tl-card-thumb)) {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
}

/* ==========================================================================
   2026-10-20 细节打磨与功能增强（需求 1 ~ 9 全量样式）
   ========================================================================== */

/* --- 需求 2：昼夜主题切换动画同步（大背景 veil 与下方文字框 badge 同速同帧变换） --- */
.theme-transition-stage {
  transition: none !important;
}
.theme-transition-stage[data-active="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}
.theme-transition-veil,
.theme-transition-badge {
  transition: none !important;
  will-change: opacity, background-color;
}

/* --- 需求 3：主页 01 文章栏 16:9 / 4:3 横竖封面自适应 + 未解锁故障特效 + 梗概底栏 --- */
.posts-q-spot-main {
  flex: 1;
  min-height: 0;
  display: flex !important;
  align-items: stretch;
  --spot-cover-w: 56%;
  --spot-ar: 16 / 9;
}
.posts-q-spot-main[data-cover-mode="16:9"] {
  --spot-cover-w: 57%;
  --spot-ar: 16 / 9;
}
.posts-q-spot-main[data-cover-mode="4:3"] {
  --spot-cover-w: 49%;
  --spot-ar: 4 / 3;
}
.posts-q-spot-main[data-cover-mode="3:4"] {
  --spot-cover-w: 37%;
  --spot-ar: 3 / 4;
}
.posts-q-spot-main[data-cover-mode="9:16"] {
  --spot-cover-w: 31%;
  --spot-ar: 9 / 16;
}
.posts-q-spot-main[data-cover-mode="locked"] {
  --spot-cover-w: 46%;
  --spot-ar: 16 / 9;
}

.posts-q-cover-cell {
  flex: 0 0 var(--spot-cover-w);
  width: var(--spot-cover-w);
  max-width: var(--spot-cover-w);
  min-width: 0;
  min-height: 0;
  padding: 0.85rem 1.35rem;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.48rem;
  background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
  transition:
    flex-basis 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    max-width 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.posts-spot-cover-frame {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.posts-spot-cover {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--spot-ar, 16 / 9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--rule));
  position: relative;
  cursor: pointer;
  background: var(--canvas);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.25);
  transition:
    width 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    height 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 280ms ease;
}

.posts-spot-cover img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--spot-ar, 16 / 9);
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}

.posts-q-excerpt-cell {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  padding: 1.05rem 1.55rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  transition: padding 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.posts-q-excerpt-top {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
  flex: 1;
}

.posts-spot-text {
  margin: 0 !important;
  font-size: 1.125rem;
  line-height: 1.84;
  text-indent: 2em;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}

.posts-spot-bottom-deck {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  flex-shrink: 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule);
}

.spot-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.spot-telemetry-item {
  padding: 0.32rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
  background: color-mix(in srgb, var(--paper) 92%, var(--canvas));
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.68rem;
  min-width: 0;
}
.spot-telemetry-item span {
  display: block;
  color: var(--faint);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.08rem;
}
.spot-telemetry-item strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.posts-spot-action-row {
  padding-top: 0.45rem !important;
  border-top: 1px dashed var(--rule) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.spot-action-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  min-width: 0;
}

/* 无封面文章：该内容未解锁 + 低频故障特效 + 底部昼夜主题动态 SVG 图案 */
.cover-locked-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 11.5rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--rule));
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 72%),
    color-mix(in srgb, var(--paper) 94%, var(--canvas));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 1.25rem;
  overflow: hidden;
}

.cover-locked-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--rule) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--rule) 55%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.45;
  pointer-events: none;
}

.cover-locked-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.38rem;
  width: 100%;
}

.cover-locked-kicker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  padding: 0.08rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
}

.cover-locked-glitch-wrap {
  position: relative;
  padding: 0.15rem 0.4rem;
}

.cover-locked-glitch {
  position: relative;
  display: inline-block;
  font-family: var(--kai);
  font-size: clamp(1.45rem, 2vw, 1.82rem);
  letter-spacing: 0.16em;
  color: var(--ink);
  animation: cover-glitch-main 7.2s infinite;
}

.cover-locked-glitch::before,
.cover-locked-glitch::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.cover-locked-glitch::before {
  color: var(--accent);
  z-index: -1;
  animation: cover-glitch-before 7.2s infinite;
}

.cover-locked-glitch::after {
  color: var(--pine);
  z-index: -2;
  animation: cover-glitch-after 7.2s infinite;
}

/* 低频故障关键帧：90% 时间保持静止，仅在末尾约 0.5s 内触发轻量错位切片 */
@keyframes cover-glitch-main {
  0%, 90%, 100% { transform: none; opacity: 1; }
  91% { transform: translate(-1.5px, 0.5px) skewX(-2deg); }
  92% { transform: translate(1.5px, -0.5px) skewX(1.5deg); }
  93% { transform: none; }
  95% { transform: translate(-1px, 0); }
  96% { transform: none; }
}

@keyframes cover-glitch-before {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  91% { opacity: 0.82; transform: translate(-3px, -1px); clip-path: inset(12% 0 58% 0); }
  92% { opacity: 0.75; transform: translate(2.5px, 1px); clip-path: inset(62% 0 10% 0); }
  93%, 94% { opacity: 0; }
  95% { opacity: 0.7; transform: translate(-2px, 0); clip-path: inset(38% 0 36% 0); }
  96% { opacity: 0; }
}

@keyframes cover-glitch-after {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
  91% { opacity: 0.75; transform: translate(3px, 1px); clip-path: inset(55% 0 14% 0); }
  92% { opacity: 0.7; transform: translate(-2.5px, -1px); clip-path: inset(18% 0 52% 0); }
  93%, 94% { opacity: 0; }
  95% { opacity: 0.65; transform: translate(2px, 0); clip-path: inset(25% 0 45% 0); }
  96% { opacity: 0; }
}

.cover-locked-sub {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  opacity: 0.78;
}

.cover-locked-motif {
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--rule));
  width: min(13.5rem, 84%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.cover-motif-svg {
  width: 100%;
  height: auto;
  max-height: 3.6rem;
  display: block;
}
.cover-motif-svg--day { display: block; }
.cover-motif-svg--night { display: none; }
:root[data-theme="dark"] .cover-motif-svg--day { display: none; }
:root[data-theme="dark"] .cover-motif-svg--night { display: block; }

/* --- 需求 4：相册子页照片墙自由紧凑排列（等间距 + 最小化空间面积浪费） --- */
.photos-detail-archive-grid[data-masonry-ready="true"] {
  display: block !important;
  position: relative !important;
}
.photos-detail-archive-grid[data-masonry-ready="true"] .photo-detail-card {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
}

/* --- 需求 5：照片子页展示竖向照片时右侧信息栏未知参数溢出修复 --- */
.photos-inspector-info-cell {
  overflow-x: hidden !important;
}
.photos-inspector-grid[data-orient-mode="portrait"] .photos-inspector-info-cell {
  padding: 0.95rem 1.35rem !important;
}
.photos-inspector-grid[data-orient-mode="portrait"] .photo-exif-spec-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.45rem 0.65rem !important;
  padding: 0.55rem 0 !important;
}
.exif-cell {
  min-width: 0 !important;
  overflow: hidden !important;
}
.exif-cell strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exif-val-cipher {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 0.22rem 0.38rem !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.exif-cipher-blur {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
}
.exif-cipher-mask {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 需求 6 & 7：文章详细页左侧章节坐标栏高度限制、无滚动条上下滑动、H2/H3 二级默认折叠 --- */
.article-sidebar-sticky {
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.article-sidebar-sticky::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#article-toc-list,
.ed-toc-preview .toc-list {
  max-height: clamp(13.5rem, calc(100vh - var(--nav-h) - 22rem), 23.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-right: 0.15rem;
}
#article-toc-list::-webkit-scrollbar,
.ed-toc-preview .toc-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.toc-item {
  display: flex;
  flex-direction: column;
}

.toc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-width: 0;
}

.toc-row > a {
  flex: 1;
  min-width: 0;
}

.toc-row .toc-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toc-fold-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.14rem 0.36rem;
  border: 1px solid color-mix(in srgb, var(--rule) 85%, transparent);
  background: color-mix(in srgb, var(--paper) 90%, var(--canvas));
  color: var(--faint);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.64rem;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.toc-fold-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.toc-fold-chevron {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.toc-item[data-collapsed="false"] .toc-fold-chevron,
.toc-fold-btn[aria-expanded="true"] .toc-fold-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

.toc-sublist-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.toc-item[data-collapsed="false"] > .toc-sublist-wrap {
  grid-template-rows: 1fr;
}

.toc-sublist {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.85rem;
  border-left: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--rule));
  margin-left: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.toc-item[data-collapsed="false"] > .toc-sublist-wrap > .toc-sublist {
  padding-top: 0.25rem;
  padding-bottom: 0.2rem;
}

.toc-subitem a.toc-link--h3 {
  padding: 0.22rem 0.45rem !important;
  font-family: var(--song) !important;
  font-size: 1.02rem !important;
  line-height: 1.45;
  color: var(--muted);
}
.toc-subitem a.toc-link--h3 .toc-num {
  font-size: 0.66rem;
}

.stage-mini-btn--accent {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--rule)) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--paper)) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.stage-mini-btn--accent:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

.links-peers-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.peer-apply-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--rule));
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.peer-apply-trigger-btn:hover {
  background: var(--accent);
  color: #fff;
}

.link-apply-backdrop {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(20, 20, 19, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 260ms;
}
.link-apply-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s;
}

.link-apply-dialog {
  position: relative;
  width: min(40rem, 100%);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--rule));
  border-radius: 4px;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.42);
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-apply-backdrop[data-open="true"] .link-apply-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.link-apply-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 90%, var(--canvas));
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.link-apply-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.link-apply-close {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 0.16rem 0.58rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}
.link-apply-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.link-apply-form {
  padding: 1.3rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}
.link-apply-head h3 {
  margin: 0;
  font-family: var(--kai);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.link-apply-head p {
  margin: 0.28rem 0 0;
  font-size: 0.94rem;
  line-height: 1.62;
  color: var(--muted);
}
.link-apply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
}
.link-apply-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.link-apply-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.link-apply-label em {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--accent);
}
.link-apply-field input,
.link-apply-field textarea {
  width: 100%;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 96%, var(--canvas));
  color: var(--ink);
  font-family: var(--song);
  font-size: 0.96rem;
  line-height: 1.5;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.link-apply-field input:focus,
.link-apply-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
.link-apply-status {
  font-size: 0.86rem;
  min-height: 1.25rem;
  color: var(--muted);
}
.link-apply-status[data-type="error"] { color: #d9534f; }
.link-apply-status[data-type="ok"] { color: var(--pine); font-weight: 600; }
.link-apply-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--rule);
}

.rail-music-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 68%),
    var(--paper);
}

.rail-music-status-badge {
  color: var(--accent);
  font-weight: 600;
}

.rail-music-stage {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.rail-music-disc-wrap {
  position: relative;
  width: 3.35rem;
  height: 3.35rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--rule));
  background: color-mix(in srgb, var(--paper) 88%, var(--canvas));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.25);
}

.rail-music-disc-svg,
.rail-music-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: rail-disc-spin 14s linear infinite;
  animation-play-state: paused;
}

.rail-music-card[data-playing="true"] .rail-music-disc-svg,
.rail-music-card[data-playing="true"] .rail-music-cover-img {
  animation-play-state: running;
}

@keyframes rail-disc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rail-music-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.rail-music-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-width: 0;
}

.rail-music-title {
  font-family: var(--kai);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.rail-music-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}
.rail-music-eq i {
  display: block;
  width: 2px;
  height: 3px;
  background: var(--accent);
  border-radius: 1px;
  transition: height 180ms ease;
}
.rail-music-card[data-playing="true"] .rail-music-eq i:nth-child(1) { animation: rail-eq-bar 0.75s ease-in-out infinite alternate; }
.rail-music-card[data-playing="true"] .rail-music-eq i:nth-child(2) { animation: rail-eq-bar 0.55s ease-in-out 0.15s infinite alternate; }
.rail-music-card[data-playing="true"] .rail-music-eq i:nth-child(3) { animation: rail-eq-bar 0.68s ease-in-out 0.3s infinite alternate; }
.rail-music-card[data-playing="true"] .rail-music-eq i:nth-child(4) { animation: rail-eq-bar 0.6s ease-in-out 0.1s infinite alternate; }

@keyframes rail-eq-bar {
  0% { height: 3px; opacity: 0.55; }
  100% { height: 12px; opacity: 1; }
}

.rail-music-artist {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-music-time-row {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 0.22rem;
}
.rail-music-time-row [data-music-cur] {
  color: var(--accent);
  font-weight: 600;
}

.rail-music-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.48rem;
  border-top: 1px dashed var(--rule);
}

.rail-music-play-btn {
  width: 1.95rem;
  height: 1.95rem;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--rule));
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-fast) ease;
}
.rail-music-play-btn:hover {
  background: var(--accent);
  color: #fff;
}
.rail-music-play-btn .icon-pause { display: none; }
.rail-music-card[data-playing="true"] .rail-music-play-btn .icon-play { display: none; }
.rail-music-card[data-playing="true"] .rail-music-play-btn .icon-pause { display: block; }

.rail-music-bar-wrap {
  position: relative;
  flex: 1;
  height: 1.2rem;
  display: flex;
  align-items: center;
  min-width: 0;
}

.rail-music-bar-track {
  width: 100%;
  height: 4px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

.rail-music-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 80ms linear;
}

.rail-music-seek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.rail-music-aux-btn {
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--dur-fast) ease;
}
.rail-music-aux-btn:hover,
.rail-music-aux-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}

.rail-music-audio {
  display: none;
}

.rail-music-empty-hint {
  padding: 0.4rem 0.55rem;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  text-align: center;
}

@media (max-width: 72rem) {
  .posts-q-spot-main {
    flex-direction: column !important;
  }
  .posts-q-cover-cell {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}

/* ==========================================================================
   2026-10-20 Round 2 专项打磨与交互升级（需求 3 / 4 / 5 / 6）
   ========================================================================== */

/* --- 需求 4b：主页 01 文章栏右侧三个基本信息栏（字数 / 预计阅读 / 象限归档）字体加大 --- */
.spot-telemetry-grid {
  gap: 0.58rem !important;
}
.spot-telemetry-item {
  padding: 0.48rem 0.72rem !important;
  font-size: 0.88rem !important;
}
.spot-telemetry-item span {
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.16rem !important;
  color: var(--muted) !important;
}
.spot-telemetry-item strong {
  font-size: 0.98rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

.cover-locked-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}
.locked-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: locked-dot-pulse 3.2s ease-in-out infinite;
}
@keyframes locked-dot-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.15); }
}

.cover-locked-title-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.28rem 0.85rem;
  margin: 0.1rem 0;
}

.locked-bracket {
  font-family: var(--kai);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  color: var(--accent);
  opacity: 0.72;
  user-select: none;
  transition: transform 420ms var(--ease), opacity 420ms ease;
}

/* 移除旧版电子闪烁切片特效，改用契合博客纸墨与流形美学的双版本特效 */
.cover-locked-glitch {
  position: relative;
  display: inline-block;
  font-family: var(--kai);
  font-size: clamp(1.52rem, 2.15vw, 1.92rem);
  letter-spacing: 0.16em;
  color: var(--ink);
  animation: none !important;
}
.cover-locked-glitch::before,
.cover-locked-glitch::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.locked-char-layer {
  position: relative;
  z-index: 1;
  display: inline-block;
}

@keyframes unlock-v1-ink-breathe {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
    transform: translateY(0);
  }
  50% {
    text-shadow: 0 2px 18px color-mix(in srgb, var(--accent) 28%, transparent);
    transform: translateY(-1px);
  }
}
@keyframes unlock-v1-shimmer {
  0%, 15% { background-position: 135% 50%; opacity: 0; }
  30% { opacity: 0.95; }
  65% { background-position: -35% 50%; opacity: 0.95; }
  80%, 100% { background-position: -35% 50%; opacity: 0; }
}
@keyframes unlock-v1-bracket-l {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(-3px); opacity: 0.95; }
}
@keyframes unlock-v1-bracket-r {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50% { transform: translateX(3px); opacity: 0.95; }
}

@keyframes unlock-v2-aperture-focus {
  0%, 100% {
    filter: blur(0px);
    letter-spacing: 0.16em;
    opacity: 0.98;
    text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  42% {
    filter: blur(0px);
    letter-spacing: 0.18em;
    opacity: 1;
  }
  58% {
    filter: blur(1.35px);
    letter-spacing: 0.25em;
    opacity: 0.68;
    color: var(--accent);
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  76% {
    filter: blur(0px);
    letter-spacing: 0.16em;
    opacity: 0.98;
  }
}
@keyframes unlock-v2-horizon-scan {
  0%, 28%, 82%, 100% { top: 12%; opacity: 0; transform: scaleX(0.72); }
  42% { top: 18%; opacity: 0.85; transform: scaleX(1); }
  66% { top: 84%; opacity: 0.85; transform: scaleX(1); }
  78% { top: 90%; opacity: 0; transform: scaleX(0.72); }
}
@keyframes unlock-v2-bracket-l {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.65; }
  58% { transform: translateX(-6px) scale(1.06); opacity: 1; }
}
@keyframes unlock-v2-bracket-r {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.65; }
  58% { transform: translateX(6px) scale(1.06); opacity: 1; }
}

/* --- 需求 5：主页 02 照片栏图片墙紧凑排布（消除上下交错偏移、缩小间隔、提升照片占空比） --- */
.photos-q-stage {
  padding: 0.48rem 0.68rem !important;
}
.wall-photos-strip {
  gap: 0.58rem !important;
  align-items: center !important;
  justify-content: center !important;
}
.wall-photos-strip .wf-item {
  padding: 0.28rem !important;
  gap: 0.24rem !important;
  transform: none !important;
}
.wall-photos-strip .wf-item:nth-child(odd),
.wall-photos-strip .wf-item:nth-child(even) {
  transform: none !important;
}
.wall-photos-strip .wf-item:hover {
  transform: translateY(-0.24rem) !important;
}
.wall-photos-strip img {
  height: clamp(14.5rem, 42vh, 23.5rem);
  object-fit: cover !important;
}

/* --- 需求 6：页脚内容全面居中 + 白天状态下三套页脚动效 --- */
.site-foot .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.site-foot-inner {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  flex-direction: column;
  gap: 0.35rem !important;
  width: 100%;
}
.site-foot-inner > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.site-foot .planar-divider-bar {
  margin: 0.85rem auto 0.2rem !important;
  max-width: 24rem;
}

/* 白天页脚动效容器（仅在白天模式显示；夜间模式展示世界线变动率探测仪 .dm--dark-only） */
.foot-day-kinetic {
  margin: 0.72rem auto 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
:root[data-theme="dark"] .foot-day-kinetic {
  display: none !important;
}

.foot-day-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.36rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 90%, var(--canvas));
  box-shadow: 0 6px 18px -12px rgba(20, 20, 19, 0.14);
  color: var(--muted);
}

.foot-day-tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--faint);
  white-space: nowrap;
}

/* 白天页脚方案三 (v3)：纸墨律动 · 谐振波谱 */
.foot-v3-wave-box {
  position: relative;
  width: 11.5rem;
  height: 1.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foot-v3-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  z-index: 2;
}
.foot-v3-bars i {
  display: inline-block;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.78;
  animation: foot-v3-bar-wave 2.4s ease-in-out infinite;
  animation-delay: calc(var(--b, 0) * -0.14s);
}
.foot-v3-sine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.foot-v3-path-a {
  stroke-dasharray: 60 20;
  animation: foot-v3-sine-flow 3.6s linear infinite;
}
.foot-v3-path-b {
  animation: foot-v3-sine-flow 4.8s linear infinite reverse;
}
@keyframes foot-v3-bar-wave {
  0%, 100% { height: 5px; opacity: 0.38; }
  50% { height: 20px; opacity: 0.95; }
}
@keyframes foot-v3-sine-flow {
  0% { stroke-dashoffset: 160; }
  100% { stroke-dashoffset: 0; }
}

@media (max-width: 48rem) {
  .foot-day-tag { display: none; }
}

/* --- 全站无限符号 Logo 三版变形切换（同步自方案四） --- */
.inf-logo-v1,
.inf-logo-v2,
.inf-logo-v3 {
  display: none;
}
:root:not([data-inf-logo]) .inf-logo-v1,
:root[data-inf-logo="v1"] .inf-logo-v1 {
  display: inline;
}
:root[data-inf-logo="v2"] .inf-logo-v2 {
  display: inline;
}
:root[data-inf-logo="v3"] .inf-logo-v3 {
  display: inline;
}


/* ==========================================================================
   2026-10-23 前台移动端（Mobile UI）自适应与流畅交互专版
   遵循 PC 主页「纸墨 + 航天器象限蓝图 HUD」设计语言与楷体 ≥ 20px 硬规则
   ========================================================================== */

.mobile-post-preview-btn,
.mobile-toc-toggle-chip,
.fab-item--mobile-only {
  display: none;
}

/* 确保全站楷体元素严格 ≥ 20px (1.25rem) */
.article-telemetry-item strong,
.rail-related-list .r-tit,
.wf-item-title,
.archive-entry-pill,
.photo-detail-date {
  font-size: 1.25rem;
}

@media (max-width: 48rem) {
  :root {
    --pad-x: 0.75rem;
    --nav-h: 5.15rem;
  }

  html,
  body {
    overflow-x: hidden;
  }

  .wrap {
    max-width: 100%;
    padding: 0 var(--pad-x);
  }

  .screen {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0.6rem 0 !important;
    overflow: visible !important;
  }

  .screen > .wrap,
  .q-frame {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .planar-watermark {
    width: 8rem;
    right: 0.65rem;
    bottom: 1.4rem;
    opacity: 0.055;
  }

  /* ---------- 1. 移动端双层蓝图顶栏（品牌行 + 五象限等宽直达栏） ---------- */
  .site-nav-bar {
    height: auto;
    min-height: var(--nav-h);
  }

  .site-nav-bar .wrap {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    max-width: 100%;
  }

  .nav-left-cluster {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-brand {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 85%, var(--accent) 15%);
    border-radius: 0;
    padding: 0.44rem 0.85rem;
    background: color-mix(in srgb, var(--paper) 84%, transparent);
  }

  .nav-brand-text {
    font-size: 1.25rem; /* 严格 20px 楷体 */
  }

  .nav-brand-coord {
    margin-left: auto;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding-left: 0.5rem;
  }

  .site-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background: color-mix(in srgb, var(--paper) 94%, var(--canvas));
  }

  .site-nav-link {
    justify-content: center;
    align-items: baseline;
    gap: 0.16rem;
    padding: 0.42rem 0.1rem;
    border-radius: 0;
    border-right: 1px solid color-mix(in srgb, var(--rule) 65%, transparent);
    font-family: var(--kai);
    font-size: 1.25rem; /* 严格 20px 楷体 */
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
  }

  .site-nav-link:last-child {
    border-right: 0;
  }

  .site-nav-link .nav-idx {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
  }

  .site-nav-link[aria-current="page"]::after {
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0;
    height: 2px;
  }

  /* ---------- 2. 象限框顶栏与底栏精简（消除移动端横向挤压） ---------- */
  .q-topbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .q-topbar-cell {
    padding: 0.44rem 0.85rem;
    flex-wrap: wrap;
    gap: 0.42rem;
  }

  .q-topbar-cell + .q-topbar-cell {
    border-left: 0;
    border-top: 1px dashed var(--rule);
  }

  .q-topbar-cell--center {
    font-size: 0.92rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
  }

  .q-topbar-cell--right {
    display: none !important;
  }

  .q-sec-title {
    font-size: 1.375rem; /* 22px 楷体 */
  }

  .q-footbar {
    padding: 0.42rem 0.85rem;
    gap: 0.3rem 0.65rem;
    font-size: 0.66rem;
  }

  .q-footbar > span:nth-child(2):not(:last-child) {
    display: none;
  }

  /* ---------- 3. 主页 00 / HERO 移动端布局 ---------- */
  .hero-q-prose {
    padding: 1.05rem 0.95rem 0.95rem;
  }

  .hero-coord {
    font-size: 0.7rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
  }

  .hero-title {
    font-size: 1.75rem; /* 28px 楷体 */
    letter-spacing: 0.12em;
  }

  .hero-tagline {
    font-size: 1.25rem;
    margin-top: 0.35rem;
  }

  .hero-intro {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
  }

  .hero-intro p {
    font-size: 1.05rem;
    line-height: 1.82;
    margin-bottom: 0.45rem;
  }

  .hero-planar-motif {
    margin-top: 0.85rem;
    gap: 0.65rem;
  }

  .hero-motif-infinity {
    width: 4.2rem;
    height: 2.1rem;
  }

  .hero-motif-blackhole {
    width: 2.1rem;
    height: 2.1rem;
  }

  .hero-motif-rule {
    height: 1.65rem;
  }

  .hero-q-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-q-index-cell {
    padding: 0.62rem 0.85rem;
    border-bottom: 1px solid var(--rule);
  }

  .hero-q-index-cell:nth-child(2n) {
    border-right: 0;
  }

  .hero-q-index-cell:nth-child(n+3) {
    border-bottom: 0;
  }

  /* 1. 移动端不渲染主页下方的构成公式 L3 : x = a·cos(t)... */
  .stage-subbar,
  #telemetry-equation {
    display: none !important;
  }

  .hero-canvas-holder {
    min-height: 13.5rem !important;
    height: 13.5rem !important;
    touch-action: pan-y;
  }

  /* ---------- 4. 主页 01 / POSTS 移动端布局（焦点文章置顶 + 近期序列在下） ---------- */
  .posts-q-body {
    display: flex !important;
    flex-direction: column !important;
  }

  .posts-q-right {
    order: 1;
    border-bottom: 1px solid var(--rule);
  }

  .posts-q-left {
    order: 2;
    border-right: 0;
    border-bottom: 0;
  }

  .posts-q-spot-head {
    padding: 0.8rem 0.95rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .posts-spot-title {
    font-size: 1.4rem; /* 22.4px 楷体 */
    line-height: 1.3;
  }

  .posts-spot-meta {
    font-size: 1.25rem; /* 20px 楷体 */
    flex-wrap: wrap;
    white-space: normal;
  }

  .posts-q-cover-cell {
    padding: 0.75rem 0.95rem !important;
  }

  .cover-locked-stage {
    min-height: 9rem;
    padding: 0.85rem 1rem;
  }

  .posts-q-excerpt-cell {
    padding: 0.85rem 0.95rem !important;
  }

  .posts-spot-text {
    font-size: 1.04rem;
    line-height: 1.78;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .spot-telemetry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem !important;
  }

  .spot-telemetry-item {
    padding: 0.36rem 0.45rem !important;
  }

  .spot-telemetry-item span {
    font-size: 0.62rem !important;
  }

  .spot-telemetry-item strong {
    font-size: 0.84rem !important;
  }

  .posts-spot-action-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .spot-action-status {
    font-size: 0.64rem;
  }

  .posts-spot-action-row .q-read-btn {
    width: 100%;
    justify-content: center;
    padding: 0.42rem 0.85rem;
  }

  .posts-q-left-head {
    padding: 0.48rem 0.95rem;
    background: color-mix(in srgb, var(--paper) 90%, var(--canvas));
  }

  .posts-recent-q {
    flex-direction: column !important;
  }

  .posts-recent-q li {
    border-bottom: 1px solid var(--rule) !important;
  }

  .posts-recent-q li:last-child {
    border-bottom: 0 !important;
  }

  .posts-recent-q a {
    padding: 0.68rem 0.95rem !important;
  }

  .mobile-post-preview-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.06rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--rule));
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 10%, var(--paper));
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.62rem;
    margin-left: 0.4rem;
  }

  /* ---------- 5. 主页 02 / PHOTOS 移动端双列蓝图网格 ---------- */
  .photos-q-wall-title-cell,
  .photos-q-wall-note-cell {
    padding: 0.58rem 0.95rem;
  }

  .wall-note {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .photos-q-stage {
    padding: 0.68rem 0.75rem !important;
    overflow: visible !important;
  }

  .wall-photos-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
    height: auto !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  .wall-photos-strip .wf-item {
    width: 100% !important;
    padding: 0.28rem !important;
    justify-content: space-between;
  }

  .wall-photos-strip img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    max-height: 10.5rem;
  }

  .wf-item-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.15rem 0.15rem 0.05rem;
  }

  .wf-item-title {
    font-size: 1.25rem; /* 严格 20px 楷体 */
  }

  /* ---------- 6. 主页 03 / PROGRAMS 移动端三段式模块卡 ---------- */
  .prog-featured-console {
    padding: 0.9rem 0.95rem;
  }

  .console-title {
    font-size: 1.38rem; /* 22px 楷体 */
  }

  .console-desc {
    font-size: 0.98rem;
  }

  .prog-rack-list {
    display: flex;
    flex-direction: column;
  }

  .prog-rack-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.48rem;
    padding: 0.8rem 0.95rem;
    align-items: stretch;
  }

  .rack-id-col {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px dashed var(--rule);
    padding-right: 0;
    padding-bottom: 0.32rem;
  }

  .rack-main-col h3 {
    font-size: 1.32rem; /* 21px 楷体 */
  }

  .rack-main-col p {
    font-size: 0.96rem;
  }

  .rack-metric-col {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }

  .rack-bar {
    width: 100%;
    order: -1;
  }

  /* ---------- 7. 主页 04 / LINKS 移动端单列排布（友链列表排前面，自我介绍排后面） ---------- */
  .links-topology-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .links-peers-panel {
    order: 1;
    border-bottom: 1px solid var(--rule);
  }

  .links-protocol-panel {
    order: 2;
    padding: 0.8rem 0.95rem;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .site-identity-card {
    padding: 0.75rem 0.85rem;
  }

  .site-card-actions {
    flex-direction: column;
    gap: 0.42rem;
  }

  .site-card-actions .stage-mini-btn {
    width: 100%;
    padding: 0.44rem 0.75rem;
    font-size: 0.8rem;
    text-align: center;
  }

  .links-peers-head {
    padding: 0.52rem 0.95rem;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .links-directory-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
  }

  .links-directory-grid .peer-card {
    padding: 0.85rem 0.95rem;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }

  .links-directory-grid .peer-card:last-child {
    border-bottom: 0 !important;
  }

  /* ---------- 8. 文章归档子页（/posts/）时间轴移动端适配 ---------- */
  .posts-subpage-view {
    padding: 0.65rem 0 2.5rem;
  }

  .posts-subpage-hero-left {
    padding: 0.95rem;
  }

  .posts-subpage-title {
    font-size: 1.55rem; /* 24.8px 楷体 */
  }

  .posts-subpage-lead {
    font-size: 0.98rem;
  }

  .posts-stat-card {
    padding: 0.65rem 0.85rem;
  }

  .posts-stat-card strong {
    font-size: 1.25rem; /* 严格 20px 楷体 */
  }

  .detail-archive-bar {
    padding: 0.58rem 0.85rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .detail-archive-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.18rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .detail-archive-tags::-webkit-scrollbar {
    display: none;
  }

  .archive-tag-chip {
    flex-shrink: 0;
    padding: 0.24rem 0.65rem;
    font-size: 0.76rem;
  }

  .posts-tl-controls {
    width: 100%;
    display: flex;
    gap: 0.35rem;
  }

  .tl-search-input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0.32rem 0.6rem;
    font-size: 0.82rem;
  }

  .posts-timeline-main {
    padding: 0.95rem 0.75rem 1.35rem;
  }

  .tl {
    margin-left: 0.25rem;
    padding-left: 1.15rem;
  }

  .tl-now-dot {
    left: calc(-1.15rem - 4.5px);
  }

  .tl-year-head::before {
    left: calc(-1.15rem - 5.5px);
  }

  .tl-month-head::before {
    left: calc(-1.15rem - 3.5px);
  }

  .tl-start::before {
    left: calc(-1.15rem - 6px);
  }

  .tl-start::after {
    left: calc(-1.15rem - 2px);
  }

  .tl-body {
    padding-left: calc(1.15rem + 8px);
    margin-left: calc(-1.15rem - 8px);
  }

  .tl-post-card,
  .tl-post-card.tl-post-card--no-cover,
  .tl-post-card:not(:has(.tl-card-thumb)) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.58rem;
    padding: 0.8rem 0.85rem;
  }

  .tl-post-card::before {
    left: -1.15rem;
    width: 1.15rem;
    top: 1.45rem;
  }

  .tl-item-date-col {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    border-right: 0;
    border-bottom: 1px dashed var(--rule);
    padding-right: 0;
    padding-bottom: 0.32rem;
  }

  .tl-day-kai {
    font-size: 1.25rem; /* 严格 20px 楷体 */
  }

  .tl-card-title {
    font-size: 1.3rem; /* 20.8px 楷体 */
  }

  .tl-card-thumb {
    max-width: 100% !important;
    order: -1;
  }

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

  .tl-slug-code {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- 9. 文章详情页（/posts/[...slug]/）移动端深度阅读与目录折叠 ---------- */
  .article-detail-view {
    padding: 0.65rem 0 2.5rem;
  }

  .article-hero-meta-cell {
    padding: 0.95rem;
  }

  .article-main-title {
    font-size: 1.55rem; /* 24.8px 楷体 */
  }

  .article-lead-summary {
    font-size: 0.98rem;
  }

  .article-telemetry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem 0.7rem;
  }

  .article-telemetry-item strong {
    font-size: 1.25rem; /* 严格 20px 楷体 */
  }

  .article-hero-kinetic-cell {
    padding: 0.65rem 0.85rem;
  }

  .article-kinetic-canvas-wrap {
    min-height: 8.2rem;
    max-height: 9.8rem;
    touch-action: pan-y;
  }

  .article-sidebar-sticky {
    position: static;
    max-height: none;
    padding: 0.75rem 0.95rem;
    gap: 0.65rem;
  }

  .toc-box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    cursor: pointer;
    user-select: none;
  }

  .mobile-toc-toggle-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
    border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 10%, var(--paper));
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.66rem;
  }

  .article-sidebar-q[data-mobile-toc-collapsed="true"] #article-toc-list,
  .article-sidebar-q[data-mobile-toc-collapsed="true"] .toc-empty {
    display: none !important;
  }

  .article-sidebar-q[data-mobile-toc-collapsed="true"] .toc-box-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .article-prose-q {
    padding: 1.15rem 0.95rem;
  }

  .article-prose-q p {
    font-size: 1.125rem;
    line-height: 1.9;
  }

  .article-prose-q h2 {
    font-size: 1.45rem; /* 23.2px 楷体 */
    margin: 1.65rem 0 0.75rem;
  }

  .article-prose-q h3 {
    font-size: 1.32rem; /* 21.1px 楷体 */
  }

  .article-prose-q h4 {
    font-size: 1.25rem; /* 20px 楷体 */
  }

  .article-prose-q pre {
    padding: 0.75rem 0.85rem;
    font-size: 0.82rem;
  }

  .article-prose-q table,
  .q-spec-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.92rem;
  }

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

  .article-pager-cell {
    padding: 0.85rem 0.95rem;
  }

  .article-pager-cell + .article-pager-cell {
    border-left: 0;
    border-top: 1px solid var(--rule);
    text-align: left;
  }

  .pager-title {
    font-size: 1.25rem; /* 严格 20px 楷体 */
  }

  .fab-item--mobile-only {
    display: inline-flex;
  }

  /* ---------- 10. 照片子页（/photos/）检视台与胶片条移动端适配 ---------- */
  .photos-showcase-screen {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.65rem 0;
  }

  .photos-inspector-stage-cell {
    padding: 0.75rem 0.85rem;
  }

  .inspector-stage-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .inspector-nav-btns {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .inspector-nav-btns .stage-mini-btn {
    padding: 0.36rem 0.5rem;
    text-align: center;
    font-size: 0.78rem;
  }

  .inspector-viewport {
    min-height: 12.5rem;
    padding: 0.35rem;
    touch-action: pan-y;
  }

  .photos-inspector-info-cell {
    padding: 0.85rem 0.95rem !important;
  }

  .photos-insp-title {
    font-size: 1.4rem !important; /* 22.4px 楷体 */
  }

  .photo-exif-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.38rem 0.5rem !important;
  }

  .insp-filmstrip-row {
    display: flex !important;
    overflow-x: auto;
    gap: 0.38rem;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .insp-filmstrip-row::-webkit-scrollbar {
    display: none;
  }

  .filmstrip-thumb {
    flex: 0 0 4.5rem;
    padding: 0.28rem 0.3rem;
  }

  .photos-detail-archive-grid {
    padding: 0.85rem;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.85rem;
  }

  /* ---------- 11. 悬浮球、友链弹窗与全屏灯箱移动端适配 ---------- */
  .fab {
    right: 0.85rem;
    bottom: 0.95rem;
  }

  .link-apply-backdrop {
    padding: 0.65rem;
    align-items: flex-end;
  }

  .link-apply-dialog {
    max-height: calc(100dvh - 1.3rem);
    overflow-y: auto;
  }

  .link-apply-form {
    padding: 1rem;
  }

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

  .lightbox {
    padding: 2.8rem 0.65rem 3.5rem;
  }

  .lightbox-note {
    width: calc(100% - 1.5rem);
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
    font-size: 0.76rem;
    bottom: 0.75rem;
  }

  /* ---------- 12. 移动端白天页脚彩蛋缩小并自动适配当前页面等宽 ---------- */
  .foot-day-kinetic {
    width: 100%;
    max-width: 100%;
    margin: 0.45rem 0 0.15rem;
  }

  .foot-day-stage {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.65rem;
  }

  .foot-day-tag {
    display: inline-block;
    font-size: 0.52rem;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }

  .foot-v3-wave-box {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 1.25rem;
  }

  .foot-v3-bars {
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }

  .foot-v3-bars i {
    width: 1.5px;
    height: 4px;
  }

  @keyframes foot-v3-bar-wave {
    0%, 100% { height: 3px; opacity: 0.38; }
    50% { height: 12px; opacity: 0.95; }
  }
}

@media (max-width: 24rem) {
  .site-nav-link .nav-idx {
    display: none;
  }
  .wall-photos-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}