:root {
      /* BEGIN JW_COPYRIGHT_CSS */
      --copyright-owner: "王俊辉 Jason Wong";
      --copyright-work-id: "ERR-JW-20261018-A001";
      --copyright-work-name: "Earth Rotation & Revolution";
      --copyright-year: "2026";
      --copyright-version: "v3.8.0";
      --copyright-license-id: "ERR-JW-20261018-A001-ONLINE";
      /* © 2026 王俊辉 Jason Wong. All rights reserved. | Earth Rotation & Revolution | ERR-JW-20261018-A001 */
      /* END JW_COPYRIGHT_CSS */

      /* 主配色令牌：页面背景、导航栏、玻璃面板、按钮和正文颜色从这里统一调。 */
      --redesign-ui-scale: 1;
      --redesign-metrics-scale: 1;
      --redesign-sidebar-rendered-width: 208px;
      --redesign-sidebar-layout-height: calc(100vh - 202px);
      --redesign-ui-inline-offset: 24px;
      --primary: #00d2ff;
      --secondary: #8ff6d0;
      --tertiary: #fff4c9;
      --primary-gradient: linear-gradient(135deg, #00d2ff 0%, #00c3ed 52%, #41ebff 100%);
      --bg-gradient: radial-gradient(circle at 16% 14%, rgba(255, 244, 201, 0.1), transparent 22%),
        radial-gradient(circle at 82% 18%, rgba(0, 210, 255, 0.13), transparent 24%),
        radial-gradient(circle at 66% 78%, rgba(143, 246, 208, 0.1), transparent 26%),
        linear-gradient(180deg, #060a13 0%, #090e19 48%, #0e1625 100%);
      --bg-gradient-card: linear-gradient(145deg, rgba(21, 31, 49, 0.86) 0%, rgba(17, 24, 37, 0.78) 100%);
      --glass-bg: rgba(19, 26, 40, 0.72);
      --glass-border: rgba(231, 234, 251, 0.11);
      --glass-shadow: 0 26px 58px rgba(4, 8, 20, 0.34);
      --text-primary: #e7eafb;
      --text-secondary: #b7c2d9;
      --text-muted: #7f8ba8;
      --nav-bg: rgba(9, 14, 25, 0.82);
      --nav-border: rgba(0, 210, 255, 0.12);
      --btn-primary: var(--primary-gradient);
      --btn-primary-hover: linear-gradient(135deg, #41ebff 0%, #00d2ff 100%);
      --btn-secondary: rgba(255, 255, 255, 0.045);
      --sidebar-width: 17%;
      --sidebar-min-width: 220px;
      --page-bg: #090e19;
      --top-nav-height: 62px;
      --top-nav-pad-x: 16px;
      --top-nav-pad-y: 0px;
      --sidebar-padding: 8px;
      /* 左侧栏整块底板透明度：0 为完全露出 3D 主画面，0.98 接近原来的深色底。 */
      --sidebar-bg-alpha: 0;
      --panel-opacity: 0.76;
      --panel-radius: 8px;
      --panel-blur: 18px;
      --btn-pad-y: 7px;
      --btn-pad-x: 10px;
      --btn-radius: 8px;
      --btn-font-size: 12px;
      --pill-pad-y: 5px;
      --pill-pad-x: 7px;
      --pill-radius: 6px;
      --pill-font-size: 10.8px;
      --toggle-width: 46px;
      --toggle-height: 26px;
      --toggle-thumb-size: 18px;
      --hover-lift: 1px;
      --metrics-chip-top: 12px;
      --metrics-chip-left: 12px;
      --metrics-chip-width: 226px;
      --hint-chip-top: 12px;
      --hint-chip-right: 12px;
      --hint-chip-width: 250px;
      --quiz-right: 13px;
      --quiz-bottom: 13px;
      --quiz-width: 420px;
      --quiz-max-height: 620px;
      --toast-top: 72px;
      --toast-right: 13px;
      --toast-width: 340px;
      --nav-scale: 1;
      --nav-inverse-scale: 1;
      --nav-base-height: 62px;
      --nav-visible-height: 62px;
      --sidebar-scale: 1;
      --sidebar-inverse-scale: 1;
      --sidebar-content-width: 232px;
      --sidebar-visible-width: 232px;
      --hud-scale: 1;
      --inset-base-width: 227px;
      --inset-base-height: 224px;
      /* 字体回退是逐字符发生的：某个字形在前一个字体里找不到，才轮到下一个。
         所以每条字体栈都必须自带中文黑体，否则中文会一路落到通用族——
         在中文 Windows 上 sans-serif 未必是雅黑，而 monospace 就是宋体。
         思源黑体/Noto 面向装了它们的机器，PingFang SC 覆盖 macOS，
         Microsoft YaHei 覆盖 Windows，最后才是通用族兜底。四个模型保持同一顺序。
         每个中文字体紧跟一个中文别名：部分系统只按中文名注册字族，
         只写英文名会漏配。Noto Sans CJK SC 无独立中文名，故不重复。 */
      --font-display: "Inter", "Source Han Sans SC", "思源黑体", "Noto Sans CJK SC", "PingFang SC", "苹方-简", "Microsoft YaHei", "微软雅黑", sans-serif;
      --font-body: "Inter", "Source Han Sans SC", "思源黑体", "Noto Sans CJK SC", "PingFang SC", "苹方-简", "Microsoft YaHei", "微软雅黑", sans-serif;
      /* 等宽栈同样要带中文黑体：拉丁字母与数字仍走等宽，中文改走黑体。
         少了这一段，「地球中心视角」这类用 .pill 的按钮在中文 Windows 上会显示成宋体。 */
      --font-mono: "JetBrains Mono", "Source Code Pro", ui-monospace, "Source Han Sans SC", "思源黑体", "Noto Sans CJK SC", "PingFang SC", "苹方-简", "Microsoft YaHei", "微软雅黑", monospace;
    }

    /* 标题/小标题字号速查：
       - 顶部主标题：.brand-title 的 font-size / font-weight
       - 顶部英文副标题：.subtitle 的 font-size / font-weight
       - 顶部菜单标题：.top-options-menu-title 的 font-size / font-weight
       - 左侧面板分区标题：.section-title 的 font-size / font-weight
       - 控制面板小标题：.control-title、.motion-title、.control-item label
       - HUD 卡片标题：.hud-heading；小标签见 .formula-kicker / .card-kicker / .hud-kicker / .small-muted
       - 测验/弹窗标题：通用 .text-2xl / .font-semibold / .font-bold，以及 .about-content h2/h3
       - 编辑器标题：.editor-panel-title / .editor-panel-subtitle / .editor-group-title
       - 3D 场景与 SVG HUD 浮动标签：脚本中 labelSelection、seasonHud、daylightHud、obliquityReadout 的 attr("font-size") / attr("font-weight") */

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      min-height: 100%;
      background: var(--page-bg);
      color: var(--text-primary);
      font-family: var(--font-body);
      overflow: hidden;
      overscroll-behavior: none;
      touch-action: none;
    }

    /* 页面底色：编辑器的“页面背景颜色”写入 --page-bg；3D 场景背景由 --scene-bg-gradient 完整控制。 */
    body {
      position: fixed;
      inset: 0;
      background-color: var(--page-bg);
      background-image: var(--scene-bg-gradient, var(--bg-gradient));
    }

    /* 玻璃质感通用层：控制面板和可复用深色容器共用这组背景、描边与阴影。 */
    .glass {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(var(--panel-blur));
    }

    /* 左侧信息卡配色：深蓝黑渐变承载正文内容，边框保持低对比度避免抢 3D 主舞台。 */
    .panel-card {
      background: linear-gradient(180deg, rgba(24, 33, 49, 0.9) 0%, rgba(14, 19, 31, 0.92) 100%);
      border: 1px solid rgba(231, 234, 251, 0.06);
      border-radius: var(--panel-radius);
      padding: 0.95rem;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(var(--panel-blur));
      -webkit-backdrop-filter: blur(var(--panel-blur));
    }

    .app-shell {
      position: fixed;
      left: var(--app-left, 0px);
      top: var(--app-top, 0px);
      width: var(--app-layout-width, 100vw);
      height: var(--app-layout-height, 100vh);
      display: flex;
      flex-direction: column;
      transform: scale(var(--app-scale, 1));
      transform-origin: left top;
      will-change: transform;
    }

    .portrait-lock {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      place-items: center;
      padding: 2rem;
      text-align: center;
      color: #e7f6ff;
      background:
        radial-gradient(circle at 50% 25%, rgba(34, 211, 238, 0.18), transparent 32%),
        linear-gradient(180deg, #020617 0%, #07111f 100%);
      touch-action: none;
    }

    body.portrait-locked .portrait-lock {
      display: grid;
    }

    .portrait-lock-card {
      display: grid;
      gap: 0.9rem;
      max-width: 460px;
    }

    .portrait-lock-icon {
      width: 82px;
      height: 82px;
      margin: 0 auto;
      border: 1px solid rgba(143, 246, 208, 0.28);
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: var(--tertiary);
      font-size: 2.4rem;
      transform: rotate(90deg);
      box-shadow: 0 0 36px rgba(34, 211, 238, 0.18);
    }

    /* 横屏提示主标题：字号和字重在 font 简写里，当前为 800 / 1.35rem。 */
    .portrait-lock-title {
      margin: 0;
      font: 800 1.35rem/1.25 var(--font-display);
      letter-spacing: 0;
    }

    /* 横屏提示说明文字：小标题/说明字号在 font-size。 */
    .portrait-lock-copy {
      margin: 0;
      color: #a9bbd1;
      line-height: 1.7;
      font-size: 0.95rem;
    }

    .top-nav-reveal-zone {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 16px;
      z-index: 36;
      display: none;
      background: linear-gradient(180deg, rgba(34, 211, 238, 0.12), transparent);
    }

    .top-nav {
      min-height: var(--top-nav-height);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--top-nav-pad-y) var(--top-nav-pad-x);
      background: var(--nav-bg);
      border-bottom: 1px solid var(--nav-border);
      backdrop-filter: blur(20px);
      position: relative;
      z-index: 30;
    }

    /* 顶部导航高光线：青蓝到薄荷绿，是全站主强调色的横向提示。 */
    .top-nav::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(0, 210, 255, 0.3) 18%, rgba(143, 246, 208, 0.2) 54%, transparent 100%);
      pointer-events: none;
    }

    .top-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.9rem;
      width: 100%;
    }

    /* 顶部栏主标题：模型名称的字号和字重在这里。 */
    .brand-title {
      font-size: clamp(0.9rem, 1.45vw, 1.24rem);
      font-weight: 500;
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-family: var(--font-display);
    }

    .brand-badge {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 30% 30%, rgba(255, 244, 201, 0.86), rgba(0, 210, 255, 0.28) 36%, rgba(0, 210, 255, 0.12) 68%, rgba(255, 255, 255, 0.04) 100%);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(0, 210, 255, 0.22);
      font-size: 1.05rem;
    }

    /* 顶部栏副标题：英文副标题/标语的字号和字重在这里。 */
    .subtitle {
      display: block;
      font-size: 0.68rem;
      font-weight: 500;
      color: var(--text-muted);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-top: 0.1rem;
      font-family: var(--font-mono);
    }

    .nav-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      position: relative;
    }

    .top-options {
      position: relative;
      display: inline-flex;
    }

    .top-options-menu {
      position: fixed;
      top: calc(var(--nav-visible-height, 62px) + 10px);
      right: clamp(12px, 2vw, 24px);
      z-index: 70;
      width: min(300px, calc(100vw - 24px));
      display: none;
      padding: 0.68rem;
      border-radius: 8px;
      background: rgba(12, 18, 31, 0.96);
      border: 1px solid rgba(231, 234, 251, 0.1);
      box-shadow: 0 18px 38px rgba(2, 6, 23, 0.42);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .top-options-menu.open {
      display: block;
    }

    .top-options-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.46rem;
      gap: 0.5rem;
    }

    /* 顶部“显示内容”等弹出菜单标题。 */
    .top-options-menu-title {
      color: #dbeafe;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0;
    }

    .top-options-close {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      border: 1px solid rgba(231, 234, 251, 0.1);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.04);
      color: #dbeafe;
      cursor: pointer;
      font-size: 0.9rem;
      line-height: 1;
    }

    .top-options-close:hover {
      border-color: rgba(34, 211, 238, 0.4);
      color: var(--primary);
    }

    .top-options-menu-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.32rem;
    }

    .top-options-menu .reference-layer-check {
      min-height: 28px;
      font-size: 0.68rem;
    }

    .btn {
      border: 0;
      color: var(--text-primary);
      border-radius: var(--btn-radius);
      padding: var(--btn-pad-y) var(--btn-pad-x);
      font-size: var(--btn-font-size);
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, opacity 0.22s ease;
      white-space: nowrap;
      font-family: var(--font-body);
    }

    .btn:hover {
      transform: translateY(calc(-1 * var(--hover-lift)));
      box-shadow: 0 12px 28px rgba(34, 211, 238, 0.16);
    }

    body.hover-disabled .btn:hover,
    body.hover-disabled .pill:hover {
      transform: none;
      box-shadow: none;
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-primary {
      background: var(--btn-primary);
    }

    .btn-primary:hover {
      background: var(--btn-primary-hover);
    }

    .btn-secondary {
      background: var(--btn-secondary);
      border: 1px solid rgba(231, 234, 251, 0.12);
      color: #d9e7fb;
    }

    .workspace {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(var(--sidebar-min-width), var(--sidebar-width)) minmax(0, 1fr);
      overflow: hidden;
      position: relative;
    }

    .sidebar-scale-wrap {
      width: 100%;
      min-height: 100%;
      height: auto;
    }

    .sidebar-inner {
      width: 100%;
    }

    /* 左侧导航/控制侧栏底色：透明度由 --sidebar-bg-alpha 控制，具体调节位置见 :root。 */
    .sidebar {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: var(--sidebar-padding);
      background: linear-gradient(180deg, rgba(14, 19, 31, var(--sidebar-bg-alpha)) 0%, rgba(10, 15, 26, var(--sidebar-bg-alpha)) 100%);
      border-right: 1px solid rgba(255, 255, 255, 0.03);
    }

    /*
     * 永久隐藏左侧“图层与标注”面板的原生滚动条。
     * .sidebar 用于基础布局，.sidebar-scale-wrap 是 ui-redesign 的实际滚动容器。
     * 保留 overflow 与滚轮 / 触控板 / 触摸滚动能力。
     */
    .sidebar,
    .sidebar-scale-wrap {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .sidebar::-webkit-scrollbar,
    .sidebar-scale-wrap::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .sidebar-drawer-handle {
      position: absolute;
      left: var(--sidebar-handle-left, 320px);
      top: 50%;
      z-index: 25;
      width: 26px;
      height: 74px;
      padding: 0;
      display: grid;
      place-items: center;
      border: 1px solid rgba(231, 234, 251, 0.12);
      border-left: 0;
      border-radius: 0 14px 14px 0;
      color: #8fe6d0;
      background:
        linear-gradient(180deg, rgba(30, 40, 58, 0.96), rgba(12, 18, 31, 0.92)),
        radial-gradient(circle at 10% 50%, rgba(0, 210, 255, 0.16), transparent 58%);
      box-shadow:
        0 12px 26px rgba(2, 6, 23, 0.42),
        0 0 18px rgba(0, 210, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(var(--panel-blur));
      -webkit-backdrop-filter: blur(var(--panel-blur));
      transform: translate(-50%, -50%);
      cursor: pointer;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    }

    .sidebar-drawer-handle:hover {
      border-color: rgba(143, 246, 208, 0.28);
      box-shadow:
        0 14px 30px rgba(2, 6, 23, 0.48),
        0 0 22px rgba(0, 210, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      color: #c9fff0;
    }

    .sidebar-drawer-handle:active {
      transform: translate(-50%, -50%) scale(0.98);
    }

    .sidebar-drawer-icon {
      font-size: 1.4rem;
      font-weight: 800;
      line-height: 1;
      text-shadow: 0 0 10px rgba(0, 210, 255, 0.16);
      user-select: none;
    }

    body.adaptive-layout.sidebar-hidden .sidebar-drawer-handle {
      left: 12px;
      border-left: 1px solid rgba(231, 234, 251, 0.12);
      border-radius: 14px;
    }

    .sidebar h2, .sidebar h3 {
      margin: 0;
    }

    /* 左侧侧栏每个分区标题，例如“学习目标”“核心公式”。 */
    .section-title {
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: 0.65rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-family: var(--font-display);
    }

    .goal-item {
      display: flex;
      align-items: flex-start;
      gap: 0.68rem;
      margin-bottom: 0.58rem;
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .goal-item input {
      margin-top: 0.2rem;
      accent-color: #22d3ee;
      width: 1rem;
      height: 1rem;
    }

    .concept-list {
      display: grid;
      gap: 0.58rem;
      color: var(--text-secondary);
      line-height: 1.55;
      font-size: 0.9rem;
    }

    /* 左侧“核心公式 / Concepts”里每一行公式卡片的样式定义在这里。
       1. 背景色：background
       2. 单条公式卡片的视觉高度：这里没有写死固定 height，主要由 padding + 公式内容高度撑开。 */
    .katex-block {
      padding: 0.5rem 0.45rem;
      border-radius: 8px;
      background: rgba(2, 6, 17, 0.9);
      border: 1px solid rgba(231, 234, 251, 0.06);
      overflow: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    .katex-block .katex-display {
      margin: 0;
      text-align: left;
      transform: scale(var(--formula-scale, 1));
      transform-origin: left center;
    }

    .katex-block .katex {
      font-size: 0.92em;
      line-height: 1.25;
    }

    .katex-block .base {
      margin-block: 0.04em;
    }

    .resource-links a {
      color: var(--primary);
      text-decoration: none;
    }

    .resource-links a:hover {
      text-decoration: underline;
    }

    /* 主 3D 舞台背景：旧版 cyan/amber/mint 渐变已移除，星空改由 Three.js 天球贴图渲染。 */
    .canvas-stage {
      position: relative;
      min-width: 0;
      min-height: 0;
      background: var(--stage-bg-gradient, #000);
      overflow: hidden;
    }

    #canvas-container {
      position: absolute;
      inset: 0;
    }

    #canvas-container canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    #svg-overlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: visible;
    }

    #svg-overlay text {
      paint-order: stroke fill;
      stroke: rgba(2, 6, 23, 0.96);
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    .copyright-note {
      position: fixed;
      left: 50%;
      bottom: max(6px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      width: min(880px, calc(100vw - 24px));
      padding: 0 10px;
      font-size: 9px;
      line-height: 1.45;
      color: rgba(226, 232, 240, 0.3);
      text-align: center;
      letter-spacing: 0.01em;
      z-index: 6;
      pointer-events: none;
      user-select: none;
      text-shadow: 0 1px 8px rgba(2, 6, 23, 0.5);
    }

    .canvas-stage .hud-chip,
    .canvas-stage .hud-chip *,
    .canvas-stage .season-tag {
      text-shadow:
        -1px -1px 0 rgba(2, 6, 23, 0.92),
        1px -1px 0 rgba(2, 6, 23, 0.92),
        -1px 1px 0 rgba(2, 6, 23, 0.92),
        1px 1px 0 rgba(2, 6, 23, 0.92),
        0 0 10px rgba(2, 6, 23, 0.38);
    }

    .canvas-stage.text-hidden #svg-overlay g.node-label,
    .canvas-stage.text-hidden #svg-overlay g.compare-observer-label,
    .canvas-stage.text-hidden #svg-overlay g.motion-direction-label,
    .canvas-stage.text-hidden #svg-overlay g.observer-day-night-label,
    .canvas-stage.text-hidden #svg-overlay g.geographic-coordinate-label,
    .canvas-stage.text-hidden #svg-overlay g.season-marker-label,
    .canvas-stage.text-hidden #svg-overlay g.earth-zone-label,
    .canvas-stage.text-hidden #svg-overlay g.time-zone-label,
    .canvas-stage.text-hidden #svg-overlay g.hemisphere-label {
      opacity: 0;
      pointer-events: none;
    }

    /* HUD 浮层卡片：观察点读数、交互提示和知识热点都使用这组深色半透明面板色。 */
    .hud-chip {
      position: absolute;
      z-index: 5;
      padding: 0.55rem 0.7rem;
      border-radius: var(--panel-radius);
      background: rgba(19, 26, 40, 0.74);
      border: 1px solid rgba(231, 234, 251, 0.08);
      backdrop-filter: blur(var(--panel-blur));
      -webkit-backdrop-filter: blur(var(--panel-blur));
    }

    .metrics-chip {
      top: var(--metrics-chip-top);
      left: var(--metrics-chip-left);
      width: min(var(--metrics-chip-width), calc(100% - 1.4rem));
    }

    .hint-chip {
      top: calc(var(--metrics-chip-top) + 164px + var(--hint-chip-top));
      left: var(--metrics-chip-left);
      right: auto;
      width: min(var(--hint-chip-width), calc(100% - 1.4rem));
      transform-origin: top left;
      transition: opacity 0.45s ease, transform 0.22s ease;
    }

    .hint-chip.fading-out {
      opacity: 0;
      pointer-events: none;
    }

    .knowledge-hotspot-card {
      top: calc(var(--top-nav-height) + 15rem);
      right: var(--toast-right);
      left: auto;
      width: min(var(--toast-width), calc(100% - 1.4rem));
      max-height: min(38vh, 280px);
      z-index: 11;
      display: grid;
      gap: 0.28rem;
      transform-origin: top right;
    }

    .knowledge-hotspot-card[hidden] {
      display: none;
    }

    .knowledge-hotspot-body {
      white-space: pre-line;
      overflow: auto;
      max-height: min(24vh, 170px);
      padding-right: 0.1rem;
      color: var(--text-secondary);
      font-size: 0.76rem;
      line-height: 1.55;
    }

    .knowledge-hotspot-source {
      color: var(--text-muted);
      font-size: 0.68rem;
      line-height: 1.45;
      word-break: break-word;
    }

    .hud-chip-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.7rem;
      margin-bottom: 0.18rem;
    }

    .hud-chip-header.has-close {
      margin-bottom: 0.45rem;
    }

    .hud-chip-title {
      min-width: 0;
    }

    .hud-close-btn {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(231, 234, 251, 0.12);
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-primary);
      font-size: 0.95rem;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
    }

    .hud-close-btn:hover {
      transform: translateY(calc(-1 * var(--hover-lift)));
      background: rgba(255, 255, 255, 0.14);
    }

    .inset-window {
      position: absolute;
      z-index: 14;
      width: min(calc(var(--inset-base-width) * var(--hud-scale)), calc(100% - 1.6rem));
      height: calc(var(--inset-base-height) * var(--hud-scale));
      border-radius: 8px;
      overflow: visible;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      touch-action: none;
      cursor: grab;
    }

    .inset-window:active {
      cursor: grabbing;
    }

    .inset-window-header {
      display: none;
    }

    .inset-window-header:active {
      cursor: grabbing;
    }

    .inset-window-body {
      width: 100%;
      height: 100%;
      padding: 0;
    }

    .inset-grip {
      width: 46px;
      height: 5px;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(103, 232, 249, 0.5), rgba(191, 219, 254, 0.94), rgba(103, 232, 249, 0.5));
      box-shadow: 0 0 18px rgba(103, 232, 249, 0.14);
    }

    .inset-viewport {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      border: 1px solid rgba(103, 232, 249, 0.18);
      background:
        radial-gradient(circle at 50% 22%, rgba(34, 211, 238, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(10, 24, 43, 0.88), rgba(4, 11, 25, 0.92));
      overflow: hidden;
      box-shadow: 0 16px 34px rgba(2, 6, 23, 0.34);
    }

    .inset-viewport canvas {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      display: block;
      pointer-events: none;
    }

    .metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
      margin-top: 0.55rem;
    }

    .metric {
      border-radius: var(--panel-radius);
      padding: 0.55rem 0.65rem;
      background: rgba(2, 6, 17, 0.76);
      border: 1px solid rgba(231, 234, 251, 0.06);
    }

    .metric small {
      display: block;
      color: var(--text-muted);
      margin-bottom: 0.18rem;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      font-family: var(--font-mono);
    }

    .metric strong {
      font-size: 0.92rem;
      color: var(--text-primary);
      font-family: var(--font-display);
    }

    .metric strong:not(#observer-state) {
      font-size: 1.16rem;
      color: var(--primary);
      letter-spacing: 0.01em;
    }

    .metric-wide {
      grid-column: 1 / -1;
    }

    #observer-location-readout {
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      min-width: 0;
      cursor: text;
      border-radius: 6px;
      transition: box-shadow 0.18s ease, background 0.18s ease;
    }

    #observer-location-readout:hover,
    #observer-location-readout:focus-visible {
      background: rgba(0, 210, 255, 0.08);
      box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.18);
      outline: none;
    }

    #observer-location-readout.is-editing {
      width: 100%;
      padding: 0.1rem 0.16rem;
      background: rgba(2, 6, 17, 0.92);
      box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.34), 0 0 18px rgba(0, 210, 255, 0.12);
    }

    .observer-location-editor {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.28rem;
      min-width: 0;
      color: var(--primary);
      font-family: var(--font-display);
      font-size: 1rem;
      line-height: 1.2;
      letter-spacing: 0;
    }

    .observer-location-editor-group {
      display: inline-flex;
      align-items: center;
      gap: 0.08rem;
      min-width: 0;
      white-space: nowrap;
    }

    .observer-location-editor input {
      width: 2.9em;
      min-width: 0;
      border: 0;
      border-bottom: 1px solid rgba(0, 210, 255, 0.36);
      outline: none;
      background: transparent;
      color: #cffafe;
      font: inherit;
      text-align: right;
      line-height: 1.15;
      -moz-appearance: textfield;
    }

    .observer-location-editor input.deg {
      width: 3.25em;
    }

    .observer-location-editor input::-webkit-outer-spin-button,
    .observer-location-editor input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .observer-location-editor .unit {
      color: rgba(203, 213, 225, 0.82);
      font-size: 0.86em;
    }

    .observer-location-editor .hemi-btn {
      border: 1px solid rgba(0, 210, 255, 0.22);
      border-radius: 5px;
      padding: 0.02rem 0.24rem;
      background: rgba(0, 210, 255, 0.12);
      color: #cffafe;
      font: inherit;
      line-height: 1.2;
      cursor: pointer;
    }

    .observer-location-editor .hemi-btn:hover {
      background: rgba(0, 210, 255, 0.2);
    }

    /* 左侧实验控制面板：深色半透明背景配低亮边框，内部按钮用主色渐变表示可操作状态。 */
    .control-panel {
      position: relative;
      display: grid;
      gap: 0.45rem;
      padding: 0.55rem;
      border-radius: var(--panel-radius);
      background: rgba(12, 18, 31, 0.78);
      border: 1px solid rgba(231, 234, 251, 0.06);
      box-shadow: none;
      backdrop-filter: blur(10px);
      margin-bottom: 0.55rem;
      overflow: hidden;
    }

    .control-panel::before {
      display: none;
    }

    .control-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.38rem;
    }

    .control-item.control-span-full {
      grid-column: 1 / -1;
    }

    .vis-btn {
      font-size: 0.64rem;
      padding: 0.32rem 0.38rem;
      min-height: 28px;
      flex-shrink: 0;
      opacity: 1;
      transition: opacity 0.18s ease, background 0.18s ease;
      line-height: 1.35;
    }

    .reference-layer-panel {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.28rem;
      margin-top: 0;
    }

    .reference-layer-panel.open {
      display: grid;
    }

    .reference-layer-check {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      min-height: 26px;
      padding: 0.26rem 0.32rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.05);
      color: #dbe7f4;
      font-size: 0.64rem;
      font-weight: 700;
      line-height: 1.25;
      white-space: normal;
      cursor: pointer;
      user-select: none;
    }

    .reference-layer-panel .reference-layer-check {
      font-size: 0.72rem;
    }

    .reference-layer-check-all {
      background: rgba(34, 211, 238, 0.1);
      border-color: rgba(34, 211, 238, 0.22);
      color: #e0faff;
    }

    .reference-layer-check-all + .reference-layer-check {
      grid-column: auto;
    }

    .reference-layer-check input {
      width: 0.74rem;
      height: 0.74rem;
      flex: 0 0 auto;
      accent-color: var(--primary);
      cursor: pointer;
    }

    .vis-btn:not(.active) {
      opacity: 0.72;
      background: rgba(255, 255, 255, 0.035);
      color: var(--text-muted);
    }

    .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.7rem;
      padding: 0.55rem 0.7rem;
      border-radius: var(--panel-radius);
      background: rgba(15, 23, 42, calc(var(--panel-opacity) * 0.58));
      border: 1px solid rgba(148, 163, 184, 0.1);
    }

    .toggle-row strong {
      font-size: 0.84rem;
      color: #e2e8f0;
    }

    .toggle-row span {
      display: block;
      margin-top: 0.14rem;
      font-size: 0.73rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .toggle-switch {
      position: relative;
      width: var(--toggle-width);
      height: var(--toggle-height);
      display: inline-block;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      border-radius: 8px;
      background: rgba(148, 163, 184, 0.34);
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: background 0.22s ease;
      cursor: pointer;
    }

    .toggle-slider::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: var(--toggle-thumb-size);
      height: var(--toggle-thumb-size);
      border-radius: 50%;
      background: white;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
      transition: transform 0.22s ease;
    }

    .toggle-switch input:checked + .toggle-slider {
      background: linear-gradient(135deg, rgba(20, 184, 166, 0.95), rgba(34, 211, 238, 0.95));
    }

    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - 8px));
    }

    .control-item {
      background: rgba(2, 6, 17, 0.5);
      border-radius: 6px;
      padding: 0.42rem 0.44rem 0.4rem;
      border: 1px solid rgba(231, 234, 251, 0.05);
    }

    /* 控制项标签标题，例如“日期”“纬度”：字号/字重在这里。 */
    .control-item label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.62rem;
      font-weight: 400;
      color: #e2e8f0;
      margin-bottom: 0.32rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-family: var(--font-mono);
    }

    /* 控制项右侧数值读数：跟标题同列出现，字号单独在这里。 */
    .control-item span {
      color: var(--primary);
      font-variant-numeric: tabular-nums;
      font-family: var(--font-display);
      font-size: 0.68rem;
    }

    .motion-control {
      display: grid;
      gap: 0.34rem;
    }

    .motion-control-head {
      display: grid;
      grid-template-columns: 38px 1fr auto;
      align-items: center;
      gap: 0.38rem;
    }

    .motion-toggle-btn {
      position: relative;
      width: 34px;
      height: 34px;
      min-height: 34px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fbbf24;
      font-size: 0;
      background: transparent;
      border-color: rgba(251, 191, 36, 0.46);
      box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.1);
    }

    .motion-toggle-btn.active,
    .motion-toggle-btn.active:hover {
      color: #fbbf24;
    }

    .motion-toggle-btn::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      margin-left: 2px;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 11px solid #fbbf24;
    }

    .motion-toggle-btn.active::before {
      width: 12px;
      height: 15px;
      margin-left: 0;
      border: 0;
      background: linear-gradient(90deg, #fbbf24 0 34%, transparent 34% 66%, #fbbf24 66% 100%);
    }

    .motion-toggle-btn:hover {
      background: rgba(251, 191, 36, 0.08);
      border-color: rgba(251, 191, 36, 0.72);
      color: #fbbf24;
    }

    .motion-toggle-btn:active {
      transform: translateY(1px) scale(0.94);
    }

    /* 播放/速度控制的小标题。 */
    .motion-title {
      color: #e2e8f0;
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0;
    }

    .motion-speed-step {
      min-width: 74px;
      min-height: 28px;
      padding-inline: 0.4rem;
      white-space: nowrap;
    }

    input[type="range"] {
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      border-radius: 8px;
      outline: none;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 210, 255, 0.22) 100%);
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.82);
      background: linear-gradient(135deg, #41ebff 0%, #00d2ff 100%);
      box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.11), 0 0 10px rgba(0, 210, 255, 0.18);
      cursor: pointer;
    }

    input[type="range"]::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border: 0;
      border-radius: 50%;
      background: linear-gradient(135deg, #41ebff 0%, #00d2ff 100%);
      cursor: pointer;
    }

    .transport {
      display: grid;
      gap: 0.36rem;
    }

    .transport-group, .engine-condition-group {
      display: grid;
      gap: 0.32rem;
    }

    .transport-group {
      grid-template-columns: 1fr;
    }

    .engine-condition-group {
      grid-template-columns: 1fr;
    }

    .pill {
      border: 1px solid rgba(231, 234, 251, 0.12);
      background: rgba(255, 255, 255, 0.045);
      padding: var(--pill-pad-y) var(--pill-pad-x);
      border-radius: var(--pill-radius);
      color: var(--text-primary);
      font-weight: 700;
      cursor: pointer;
      line-height: 1.2;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
      font-size: var(--pill-font-size);
      font-family: var(--font-mono);
      letter-spacing: 0.03em;
    }

    .pill.motion-speed-step {
      background: var(--primary-gradient);
      border-color: transparent;
      color: #03111c;
      box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 10px 24px rgba(0, 210, 255, 0.15);
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease, transform 0.12s ease, filter 0.12s ease;
    }

    .pill.motion-speed-step:active {
      transform: translateY(1px) scale(0.97);
      filter: brightness(1.06);
    }

    .pill.active:not(.motion-toggle-btn), .pill:hover:not(.motion-toggle-btn) {
      background: var(--primary-gradient);
      border-color: transparent;
      color: #03111c;
      box-shadow: none;
    }

    .control-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      margin-bottom: 0;
    }

    .control-head .small-muted {
      font-size: 0.76rem;
    }

    .view-mode-group {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.32rem;
    }

    .pill.view-pill {
      padding-inline: 0.34rem;
      min-height: 28px;
      text-align: center;
      white-space: nowrap;
      letter-spacing: 0;
    }

    .view-mode-group .view-pill:last-child {
      grid-column: auto;
    }

    .axis-tilt-notice {
      position: absolute;
      top: 64px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 18;
      padding: 0.58rem 1rem;
      border-radius: 8px;
      background: rgba(255, 244, 201, 0.12);
      border: 1px solid rgba(255, 244, 201, 0.22);
      color: var(--tertiary);
      font-family: var(--font-mono);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 8px 20px rgba(2, 6, 23, 0.25);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .axis-tilt-notice.visible {
      opacity: 1;
    }

    .control-kicker-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }

    .control-kicker,
    .section-label,
    .card-kicker,
    .formula-kicker,
    .hud-kicker {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }

    .control-status {
      display: inline-flex;
      align-items: center;
      gap: 0.36rem;
      padding: 0.32rem 0.56rem;
      border-radius: 8px;
      background: rgba(143, 246, 208, 0.1);
      border: 1px solid rgba(143, 246, 208, 0.18);
      color: var(--secondary);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-family: var(--font-mono);
      white-space: nowrap;
    }

    .control-status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
    }

    .control-intro {
      display: grid;
      gap: 0.35rem;
    }

    /* 右侧控制面板顶部小标题。 */
    .control-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--text-primary);
    }

    .control-summary {
      margin: 0;
      color: var(--text-secondary);
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .control-section {
      display: grid;
      gap: 0.42rem;
      padding: 0.48rem 0 0.54rem;
      border-radius: 0;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(0, 210, 255, 0.12);
    }

    .control-section + .control-section {
      margin-top: 0;
    }

    .control-section:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .season-jump-group {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.32rem;
    }

    .season-jump-btn,
    .view-pill {
      min-width: 0;
    }

    .season-jump-btn {
      min-height: 28px;
      line-height: 1.3;
      border-radius: 6px;
    }

    .obliquity-check {
      cursor: pointer;
    }

    .obliquity-check.is-disabled,
    .reference-layer-check.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .obliquity-check.is-disabled input,
    .reference-layer-check.is-disabled input {
      cursor: not-allowed;
    }

    .formula-kicker {
      margin-bottom: 0.45rem;
      color: var(--secondary);
    }

    .card-kicker {
      margin-bottom: 0.4rem;
      color: rgba(143, 246, 208, 0.8);
    }

    .small-muted {
      color: var(--text-muted);
      font-size: 0.76rem;
      line-height: 1.5;
    }

    .hud-kicker {
      color: rgba(0, 210, 255, 0.78);
    }

    /* HUD 信息卡主标题，例如观察点、昼长等卡片标题。 */
    .hud-heading {
      font-family: var(--font-display);
      font-size: 0.98rem;
      font-weight: 500;
      color: var(--text-primary);
      margin-top: 0.18rem;
    }

    .mono-text {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }

    .flex {
      display: flex;
    }

    .grid {
      display: grid;
    }

    .items-start {
      align-items: flex-start;
    }

    .justify-between {
      justify-content: space-between;
    }

    .gap-3 {
      gap: 0.75rem;
    }

    .gap-4 {
      gap: 1rem;
    }

    .mb-1 {
      margin-bottom: 0.25rem;
    }

    .mb-4 {
      margin-bottom: 1rem;
    }

    .mt-1 {
      margin-top: 0.25rem;
    }

    .text-xs {
      font-size: 0.75rem;
    }

    .text-sm {
      font-size: 0.875rem;
    }

    .text-base {
      font-size: 1rem;
    }

    /* 弹窗/测验面板里复用的大标题工具类。 */
    .text-2xl {
      font-size: 1.5rem;
      line-height: 1.2;
      font-family: var(--font-display);
    }

    /* 通用半粗标题字重工具类。 */
    .font-semibold {
      font-weight: 600;
    }

    /* 通用粗标题字重工具类。 */
    .font-bold {
      font-weight: 700;
    }

    .text-cyan-100 {
      color: #cffafe;
    }

    .text-cyan-200 {
      color: #a5f3fc;
    }

    .text-amber-200 {
      color: #fde68a;
    }

    /* 测验浮层：沿用 HUD 的深蓝黑玻璃风格；正确/错误反馈分别使用绿色和红色半透明底。 */
    .quiz-panel {
      position: absolute;
      right: var(--quiz-right);
      bottom: var(--quiz-bottom);
      z-index: 24;
      width: min(var(--quiz-width), calc(100% - 1.6rem));
      max-height: min(var(--quiz-max-height), calc(100% - 1.6rem));
      display: flex;
      flex-direction: column;
      border-radius: var(--panel-radius);
      overflow: hidden;
      background: rgba(19, 26, 40, 0.82);
      border: 1px solid rgba(231, 234, 251, 0.08);
      box-shadow: 0 20px 40px rgba(2, 6, 23, 0.5);
      backdrop-filter: blur(20px);
      transition: all 0.3s ease;
    }

    .quiz-panel.hidden {
      opacity: 0;
      transform: translateY(16px) scale(0.9);
      pointer-events: none;
    }

    .quiz-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      padding: 0.75rem 0.85rem 0.68rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .quiz-content {
      padding: 0.7rem 0.85rem 0.85rem;
      overflow-y: auto;
      min-height: 0;
      display: grid;
      gap: 0.6rem;
    }

    .question-card {
      padding: 0.72rem;
      border-radius: 8px;
      background: rgba(2, 6, 17, 0.72);
      border: 1px solid rgba(231, 234, 251, 0.06);
    }

    .choice-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0.55rem;
      margin-top: 0.7rem;
    }

    .choice-btn {
      padding: 0.42rem 0.62rem;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.08);
      color: white;
      cursor: pointer;
      font-size: 0.8rem;
      line-height: 1.35;
      text-align: left;
      white-space: normal;
      transition: all 0.2s ease;
    }

    .choice-btn.correct {
      background: rgba(34, 197, 94, 0.22);
      border-color: rgba(34, 197, 94, 0.36);
    }

    .choice-btn.wrong {
      background: rgba(239, 68, 68, 0.18);
      border-color: rgba(239, 68, 68, 0.34);
    }

    .quiz-result {
      margin-top: 0.6rem;
      font-size: 0.83rem;
      color: #cbd5e1;
      line-height: 1.55;
      min-height: 2.4em;
    }

    .quiz-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.45rem;
      color: #94a3b8;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .quiz-nav {
      display: flex;
      justify-content: space-between;
      gap: 0.55rem;
    }

    .quiz-nav .pill {
      flex: 1;
      min-width: 0;
      text-align: center;
      white-space: normal;
      line-height: 1.25;
    }

    .pill:disabled,
    .choice-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }

    .quiz-fab {
      position: absolute;
      right: 0.8rem;
      bottom: 0.8rem;
      z-index: 23;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      border: 1px solid rgba(231, 234, 251, 0.14);
      display: grid;
      place-items: center;
      color: var(--primary);
      background:
        radial-gradient(circle at 32% 22%, rgba(0, 210, 255, 0.2), transparent 42%),
        linear-gradient(145deg, rgba(31, 38, 54, 0.84), rgba(9, 14, 25, 0.78));
      box-shadow:
        0 18px 38px rgba(2, 6, 23, 0.42),
        0 0 24px rgba(0, 210, 255, 0.12),
        inset 0 1px 0 rgba(231, 234, 251, 0.16);
      backdrop-filter: blur(14px);
      cursor: pointer;
      transform: scale(0);
      opacity: 0;
      transition: all 0.3s ease;
    }

    .quiz-fab svg {
      width: 32px;
      height: 32px;
      filter: drop-shadow(0 0 9px rgba(0, 210, 255, 0.28));
    }

    .quiz-fab:hover {
      border-color: rgba(0, 210, 255, 0.32);
      box-shadow:
        0 20px 42px rgba(2, 6, 23, 0.48),
        0 0 30px rgba(0, 210, 255, 0.2),
        inset 0 1px 0 rgba(231, 234, 251, 0.2);
    }

    .quiz-fab.visible {
      opacity: 1;
      transform: scale(1);
    }

    body.adaptive-layout {
      overflow: hidden;
    }

    body.adaptive-layout .app-shell {
      min-height: 0;
    }

    body.adaptive-layout .top-nav {
      display: block;
      min-height: 0;
      height: var(--nav-visible-height);
      padding: 0;
      overflow: hidden;
      transition: height 0.22s ease, opacity 0.22s ease, border-color 0.22s ease;
    }

    body.adaptive-layout .top-nav-inner {
      width: calc(100% * var(--nav-inverse-scale));
      min-height: var(--nav-base-height);
      padding: var(--top-nav-pad-y) var(--top-nav-pad-x);
      transform: scale(var(--nav-scale));
      transform-origin: left top;
      flex-wrap: nowrap;
    }

    body.adaptive-layout .brand-title,
    body.adaptive-layout .nav-actions {
      flex-wrap: nowrap;
      flex-shrink: 0;
    }

    body.adaptive-layout.nav-hidden:not(.nav-reveal-active) .top-nav {
      height: 0;
      opacity: 0;
      pointer-events: none;
      border-bottom-color: transparent;
    }

    body.adaptive-layout.nav-hidden .top-nav-reveal-zone {
      display: block;
    }

    body.adaptive-layout .workspace {
      display: grid !important;
      grid-template-columns: var(--sidebar-visible-width) minmax(0, 1fr);
      min-height: 0;
      overflow: hidden;
      position: relative;
    }

    body.adaptive-layout .canvas-stage {
      min-height: 0;
    }

    body.adaptive-layout .sidebar {
      width: var(--sidebar-visible-width);
      min-width: 0;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(14, 19, 31, var(--sidebar-bg-alpha)) 0%, rgba(10, 15, 26, var(--sidebar-bg-alpha)) 100%);
      border-right: 1px solid rgba(255, 255, 255, 0.03);
      transition: width 0.24s ease, opacity 0.24s ease, transform 0.24s ease;
    }

    body.adaptive-layout .sidebar-scale-wrap {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    body.adaptive-layout .sidebar-inner {
      width: var(--sidebar-content-width);
      min-height: calc(100% * var(--sidebar-inverse-scale));
      padding: var(--sidebar-padding);
      transform: scale(var(--sidebar-scale));
      transform-origin: top left;
    }

    body.adaptive-layout.sidebar-floating .workspace,
    body.adaptive-layout.sidebar-hidden .workspace {
      grid-template-columns: minmax(0, 1fr);
    }

    body.adaptive-layout.sidebar-floating .sidebar,
    body.adaptive-layout.sidebar-hidden .sidebar {
      position: absolute;
      left: 12px;
      top: 12px;
      bottom: 12px;
      z-index: 24;
      width: min(var(--sidebar-visible-width), calc(100% - 24px));
      max-width: calc(100% - 24px);
      border: 1px solid rgba(231, 234, 251, 0.08);
      border-radius: var(--panel-radius);
      box-shadow: 0 20px 44px rgba(2, 6, 23, 0.48);
      backdrop-filter: blur(var(--panel-blur));
      -webkit-backdrop-filter: blur(var(--panel-blur));
    }

    body.adaptive-layout.sidebar-floating:not(.sidebar-overlay-open) .sidebar,
    body.adaptive-layout.sidebar-hidden:not(.sidebar-overlay-open) .sidebar {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-18px);
    }

    body.adaptive-layout .metrics-chip,
    body.adaptive-layout .hint-chip,
    body.adaptive-layout .toast-stack {
      transform: scale(var(--hud-scale));
      transition: transform 0.22s ease, opacity 0.22s ease;
    }

    body.adaptive-layout .metrics-chip {
      top: var(--metrics-chip-top);
      left: var(--metrics-chip-left);
      width: min(var(--metrics-chip-width), calc(100% - 1.4rem));
      transform-origin: top left;
    }

    body.adaptive-layout .hint-chip {
      top: calc(var(--metrics-chip-top) + 164px + var(--hint-chip-top));
      left: var(--metrics-chip-left);
      right: auto;
      bottom: auto;
      width: min(var(--hint-chip-width), calc(100% - 1.4rem));
      transform-origin: top left;
    }

    body.adaptive-layout .toast-stack {
      transform-origin: top right;
    }

    body.adaptive-layout .quiz-panel {
      right: var(--quiz-right);
      bottom: var(--quiz-bottom);
      width: min(var(--quiz-width), calc(100% - 1.6rem));
      max-height: min(var(--quiz-max-height), calc(100% - 1.6rem));
      transform-origin: bottom right;
      transform: scale(var(--hud-scale));
    }

    body.adaptive-layout .quiz-panel.hidden {
      transform: translateY(calc(16px * var(--hud-scale))) scale(calc(0.9 * var(--hud-scale)));
    }

    body.adaptive-layout .quiz-fab {
      transform-origin: bottom right;
    }

    body.adaptive-layout .quiz-fab,
    body.adaptive-layout .quiz-fab.visible {
      right: 0.8rem;
      bottom: 0.8rem;
    }

    body.adaptive-layout .quiz-fab.visible {
      transform: scale(var(--hud-scale));
    }

    body.adaptive-layout .copyright-note {
      transform: translateX(-50%) scale(var(--hud-scale));
      transform-origin: center bottom;
    }

    .toast-stack {
      position: absolute;
      top: var(--toast-top);
      right: var(--toast-right);
      z-index: 40;
      display: grid;
      gap: 0.65rem;
      width: min(var(--toast-width), calc(100vw - 2rem));
    }

    .toast {
      padding: 0.75rem 0.85rem;
      border-radius: 8px;
      color: white;
      background: rgba(19, 26, 40, 0.88);
      border: 1px solid rgba(231, 234, 251, 0.08);
      box-shadow: var(--glass-shadow);
      animation: toastIn 0.3s ease both;
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(-10px) scale(0.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, 0.72);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 60;
      padding: 1rem;
      backdrop-filter: blur(14px);
    }

    .modal.open {
      display: flex;
    }

    .modal-card {
      width: min(720px, 100%);
      max-height: min(82vh, 920px);
      border-radius: var(--panel-radius);
      background: linear-gradient(180deg, rgba(14, 19, 31, 0.98), rgba(19, 26, 40, 0.96));
      border: 1px solid rgba(231, 234, 251, 0.08);
      box-shadow: var(--glass-shadow);
      padding: 1.2rem;
      overflow: auto;
    }

    .about-content {
      display: grid;
      gap: 0.95rem;
      color: #e2e8f0;
      line-height: 1.78;
    }

    .about-content h2,
    .about-content h3,
    .about-content p,
    .about-content ul {
      margin: 0;
    }

    /* 关于/用户协议弹窗的一级标题。 */
    .about-content h2 {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--primary);
      padding-top: 0.35rem;
      border-top: 1px solid rgba(231, 234, 251, 0.08);
      font-family: var(--font-display);
    }

    /* 关于/用户协议弹窗的小标题。 */
    .about-content h3 {
      font-size: 0.96rem;
      font-weight: 800;
      color: #f8fafc;
      margin-top: 0.2rem;
      font-family: var(--font-display);
    }

    .about-content p,
    .about-content li {
      font-size: 0.93rem;
      color: #dbe7f4;
    }

    .about-content a {
      color: #8ff6d0;
      text-decoration: underline;
      text-underline-offset: 0.18em;
    }

    .about-content ul {
      padding-left: 1.2rem;
      display: grid;
      gap: 0.35rem;
    }

    .about-section-card {
      padding: 1rem 1.05rem;
      border-radius: 1rem;
      border: 1px solid rgba(148, 190, 255, 0.13);
      background: linear-gradient(155deg, rgba(122, 174, 245, 0.10), rgba(8, 13, 26, 0.20));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .about-section-card h2 {
      padding-top: 0;
      border-top: 0;
      color: #dff3ff;
    }

    .about-section-card .section-kicker {
      margin-bottom: 0.2rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(143, 246, 208, 0.72);
    }

    .about-section-card .section-summary {
      color: rgba(219, 231, 244, 0.82);
    }

    .about-wechat-contact {
      display: grid;
      justify-items: center;
      gap: 0.35rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(231, 234, 251, 0.09);
      text-align: center;
    }

    .about-wechat-contact img {
      display: block;
      width: min(180px, 70vw);
      height: auto;
      border-radius: 0.85rem;
      background: #fff;
      box-shadow: 0 14px 30px rgba(0, 6, 20, 0.30);
    }

    .about-wechat-contact strong {
      margin-top: 0.25rem;
      color: #f1f8ff;
    }

    .about-wechat-contact p {
      max-width: 34rem;
      text-align: center;
    }

    .about-wechat-id {
      font-family: var(--font-mono);
      color: #8ff6d0 !important;
    }

    .about-entry-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.65rem;
    }

    .about-entry-link {
      display: grid;
      gap: 0.22rem;
      padding: 0.78rem 0.85rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(143, 246, 208, 0.18);
      background: rgba(143, 246, 208, 0.07);
      color: #e7f7ff;
      text-decoration: none;
    }

    .about-entry-link small {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(143, 246, 208, 0.72);
    }

    @media (max-width: 720px) {
      .about-entry-grid {
        grid-template-columns: 1fr;
      }
    }

    .season-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.22rem 0.5rem;
      border-radius: 8px;
      font-size: 0.72rem;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      font-family: var(--font-mono);
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    .editor-only {
      display: none;
    }

    body.editor-mode .editor-only {
      display: block;
    }

    /* 编辑器面板：编辑态改用浅色界面，和正式模型深色教学界面明确区分。 */
    .editor-floating-panel {
      position: fixed;
      z-index: 72;
      width: min(420px, calc(100vw - 1.2rem));
      max-height: min(78vh, 900px);
      display: none;
      background: rgba(244, 247, 250, 0.96);
      color: #0f172a;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
      overflow: hidden;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .editor-floating-panel[data-panel="camera"] {
      width: min(320px, calc(100vw - 1.2rem));
    }

    body.editor-mode .editor-floating-panel {
      display: flex;
      flex-direction: column;
    }

    .editor-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      padding: 0.8rem 0.95rem;
      background: linear-gradient(180deg, rgba(226, 232, 240, 0.95), rgba(241, 245, 249, 0.9));
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      cursor: move;
      user-select: none;
    }

    /* 编辑模式浮动面板主标题。 */
    .editor-panel-title {
      font-size: 0.92rem;
      font-weight: 800;
      color: #0f172a;
    }

    /* 编辑模式浮动面板副标题。 */
    .editor-panel-subtitle {
      font-size: 0.72rem;
      color: #475569;
      margin-top: 0.15rem;
    }

    .editor-panel-body {
      padding: 0.85rem;
      overflow: auto;
      display: grid;
      gap: 0.75rem;
      background: rgba(248, 250, 252, 0.98);
    }

    .editor-panel-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .editor-season-jump-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.55rem;
    }

    .season-jump-group {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.5rem;
    }

    .editor-action-btn {
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 8px;
      padding: 0.62rem 0.72rem;
      font-size: 0.8rem;
      font-weight: 800;
      cursor: pointer;
      background: white;
      color: #0f172a;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .editor-action-btn:hover {
      transform: translateY(-1px);
      background: #f8fafc;
    }

    .editor-action-btn.primary {
      background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
      border-color: transparent;
      color: white;
    }

    .editor-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
    }

    .editor-group {
      display: grid;
      gap: 0.6rem;
      padding: 0.72rem;
      border-radius: 8px;
      background: white;
      border: 1px solid rgba(148, 163, 184, 0.22);
    }

    .editor-group.full-width {
      grid-column: 1 / -1;
    }

    /* 编辑模式每组参数的小标题。 */
    .editor-group-title {
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #0f766e;
    }

    .editor-field {
      display: grid;
      gap: 0.34rem;
    }

    .editor-field label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      font-size: 0.78rem;
      font-weight: 700;
      color: #0f172a;
    }

    .editor-field-output {
      color: #0f766e;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
    }

    .editor-field input[type="color"] {
      width: 100%;
      height: 2.2rem;
      border: 1px solid rgba(148, 163, 184, 0.28);
      border-radius: 8px;
      background: white;
      padding: 0.18rem;
    }

    .editor-field select {
      width: 100%;
      height: 2.2rem;
      border: 1px solid rgba(148, 163, 184, 0.28);
      border-radius: 8px;
      background: white;
      padding: 0 0.7rem;
      font-size: 0.8rem;
      color: #0f172a;
    }

    .editor-checkbox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      padding: 0.52rem 0.62rem;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.2);
      background: rgba(248, 250, 252, 0.95);
      font-size: 0.78rem;
      color: #0f172a;
    }

    .editor-checkbox input {
      width: 1rem;
      height: 1rem;
      accent-color: #0f766e;
    }

    .camera-readout {
      display: grid;
      gap: 0.55rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.76rem;
      color: #0f172a;
    }

    .camera-readout-row {
      display: grid;
      gap: 0.2rem;
      padding: 0.58rem 0.65rem;
      border-radius: 8px;
      background: white;
      border: 1px solid rgba(148, 163, 184, 0.22);
    }

    .camera-readout-label {
      color: #475569;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 0.68rem;
    }

    .editor-mode-indicator {
      display: none;
      align-items: center;
      gap: 0.42rem;
      padding: 0.38rem 0.64rem;
      border-radius: 8px;
      background: rgba(248, 250, 252, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #cffafe;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    body.editor-mode .editor-mode-indicator {
      display: inline-flex;
    }

    /* Redesign shell: Claude reference-inspired glass cockpit around the unchanged Three.js stage. */
    body.ui-redesign {
      --redesign-sidebar-width: 208px;
      --redesign-metrics-width: 248px;
      --redesign-info-panel-width: 250px;
      --redesign-side-panel-gap: 30px;
      --redesign-panel-top: 70px;
      --redesign-inset-gap: 12px;
      --redesign-hint-gap: 12px;
      --inset-base-width: 224px;
      --inset-base-height: 224px;
      --redesign-card-bg: rgba(12, 18, 32, 0.86);
      --redesign-card-border: rgba(255, 255, 255, 0.12);
      --redesign-card-shadow: 0 24px 54px rgba(2, 6, 18, 0.5);
      --redesign-card-blur: 24px;
      background: #04070f;
      overflow: hidden;
      color: rgba(238, 245, 255, 0.95);
      letter-spacing: 0;
    }

    body.ui-redesign .app-shell {
      position: fixed;
      inset: 0;
      min-height: 0;
      overflow: hidden;
      background:
        radial-gradient(1150px 720px at 62% 38%, rgba(58, 102, 185, 0.13), transparent 70%),
        radial-gradient(850px 700px at 14% 80%, rgba(110, 86, 190, 0.07), transparent 70%),
        radial-gradient(700px 500px at 88% 78%, rgba(190, 140, 70, 0.06), transparent 70%),
        #04070f;
    }

    body.ui-redesign .top-nav-reveal-zone {
      display: none;
    }

    body.ui-redesign .workspace,
    body.ui-redesign.adaptive-layout .workspace {
      position: absolute;
      inset: 0;
      display: block !important;
      min-height: 0;
      overflow: hidden;
    }

    body.ui-redesign .canvas-stage,
    body.ui-redesign.adaptive-layout .canvas-stage {
      position: absolute;
      inset: 0;
      min-height: 0;
      overflow: hidden;
      background: transparent;
    }

    body.ui-redesign .canvas-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      /* 保持 NASA 星空贴图的原始亮度，不再叠加全画面暗角。 */
      background: transparent;
    }

    body.ui-redesign #canvas-container,
    body.ui-redesign #svg-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    body.ui-redesign #canvas-container {
      z-index: 0;
    }

    body.ui-redesign #svg-overlay {
      z-index: 4;
      pointer-events: none;
    }

    body.ui-redesign .top-nav,
    body.ui-redesign.adaptive-layout .top-nav {
      position: absolute;
      left: 24px;
      right: 24px;
      top: 0;
      z-index: 28;
      width: auto;
      height: 62px;
      min-height: 62px;
      margin-top: 2px;
      padding: 0;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transform: none;
    }

    body.ui-redesign .top-nav::after,
    body.ui-redesign.adaptive-layout .top-nav::after {
      display: none;
    }

    body.ui-redesign .top-nav-inner,
    body.ui-redesign.adaptive-layout .top-nav-inner {
      width: 100%;
      min-height: 60px;
      height: 60px;
      margin-top: 2px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transform: none;
      gap: 18px;
    }

    body.ui-redesign .brand-title {
      display: flex;
      align-items: center;
      gap: 14px;
      width: max-content;
      min-width: 0;
      height: 48px;
      margin-left: 0;
      padding: 7px 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.12), rgba(120, 150, 200, 0.05)),
        rgba(8, 13, 26, 0.52);
      box-shadow: 0 18px 42px rgba(2, 6, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(24px) saturate(140%);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
      font-size: 17px;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: rgba(240, 246, 255, 0.96);
      white-space: nowrap;
    }

    body.ui-redesign .brand-badge {
      width: 32px;
      height: 32px;
      display: block;
      border-radius: 50%;
      font-size: 0;
      background: radial-gradient(circle at 34% 30%, #9cc4ec 0%, #4d84c6 45%, #11315e 100%);
      box-shadow: 0 0 16px rgba(100, 170, 255, 0.45), inset -4px -4px 10px rgba(2, 8, 20, 0.5);
      flex: 0 0 auto;
    }

    body.ui-redesign .brand-title .subtitle {
      display: block;
      margin-top: 3px;
      font-family: var(--font-mono);
      font-size: 8.5px;
      font-weight: 500;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      color: rgba(150, 172, 205, 0.55);
    }

    body.ui-redesign .nav-view-tabs {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      height: 42px;
      padding: 3px;
      border-radius: 999px;
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.12), rgba(120, 150, 200, 0.05)),
        rgba(8, 13, 26, 0.52);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 18px 42px rgba(2, 6, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(24px) saturate(140%);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
    }

    /* 「地球中心视角」的参考系子选项：浮在视角药丸正下方、居中对齐，
       用更小的药丸表示它从属于上面那组，而不是与之平级的第三种视角。 */
    .nav-view-frame-options {
      position: absolute;
      left: 50%;
      top: 58px;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      padding: 3px;
      border-radius: 999px;
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.10), rgba(120, 150, 200, 0.04)),
        rgba(8, 13, 26, 0.46);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: 0 10px 26px rgba(2, 6, 18, 0.30);
      backdrop-filter: blur(18px) saturate(140%);
      -webkit-backdrop-filter: blur(18px) saturate(140%);
      white-space: nowrap;
    }

    .nav-view-frame-options[hidden] {
      display: none;
    }



    /* 鼠标操作提示：顶栏里、右上角按钮药丸左侧的一行纯文字，没有底色和边框。
       手势词略亮、动作词偏暗，两组之间用间距而不是分隔线区分，保持顶栏的呼吸感。只读不可点。 */
    .nav-gesture-hint {
      display: flex;
      align-items: center;
      margin-left: auto;
      margin-right: 22px;
      font-family: var(--font-body);
      font-size: 12px;
      line-height: 1;
      letter-spacing: 0.06em;
      color: rgba(150, 170, 200, 0.55);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }

    /* 提示已经用 margin-left:auto 把自己和按钮组一起推到右边，按钮组不再需要自己推。 */
    .nav-gesture-hint + .nav-actions,
    body.ui-redesign .nav-gesture-hint + .nav-actions {
      margin-left: 0;
    }

    .nav-gesture-hint .gesture-item {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
    }

    .nav-gesture-hint .gesture-item + .gesture-item {
      margin-left: 18px;
    }

    .nav-gesture-hint .gesture-item[hidden] {
      display: none;
    }

    .nav-gesture-hint b {
      font-weight: 500;
      color: rgba(215, 228, 248, 0.82);
    }

    /* 视口不够宽时提示会顶到居中的视角切换药丸，直接隐藏，让按钮组优先。 */
    @media (max-width: 1400px) {
      .nav-gesture-hint {
        display: none;
      }
    }

    .view-frame-option {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      padding: 0 10px;
      border-radius: 999px;
      color: rgba(206, 221, 244, 0.72);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      transition: background 0.18s ease, color 0.18s ease;
    }

    .view-frame-option:hover {
      background: rgba(255, 255, 255, 0.07);
      color: rgba(236, 245, 255, 0.95);
    }

    /* 与间隔药丸同理：单选框只做视觉隐藏，保留在无障碍树和 Tab 序列里。 */
    .view-frame-option input[type="radio"] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      opacity: 0;
      pointer-events: none;
    }

    .view-frame-option:has(input[type="radio"]:checked) {
      background: var(--primary-gradient);
      color: #03111c;
    }

    .view-frame-option:has(input[type="radio"]:focus-visible) {
      outline: 2px solid #6ec1ff;
      outline-offset: 2px;
    }

    body.ui-redesign .nav-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      width: max-content;
      height: 42px;
      padding: 3px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.12), rgba(120, 150, 200, 0.05)),
        rgba(8, 13, 26, 0.52);
      box-shadow: 0 18px 42px rgba(2, 6, 18, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(24px) saturate(140%);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
    }

    body.ui-redesign .btn,
    body.ui-redesign .pill {
      min-height: 34px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      background: rgba(255, 255, 255, 0.05);
      color: rgba(215, 228, 248, 0.86);
      font-weight: 500;
      font-size: 12.5px;
      letter-spacing: 0;
      box-shadow: none;
    }

    body.ui-redesign .btn:hover,
    body.ui-redesign .pill:hover {
      background: rgba(255, 255, 255, 0.10);
      border-color: rgba(255, 255, 255, 0.18);
      color: rgba(235, 243, 255, 0.98);
      transform: none;
    }

    body.ui-redesign .view-pill {
      min-height: 34px;
      padding: 8px 20px;
      border-radius: 999px;
      border-color: transparent;
      background: transparent;
      color: rgba(185, 200, 225, 0.62);
      white-space: nowrap;
    }

    body.ui-redesign .view-pill.active {
      color: rgba(225, 240, 255, 0.96);
      background: linear-gradient(150deg, rgba(120, 190, 255, 0.22), rgba(90, 150, 235, 0.14));
      border-color: rgba(150, 205, 255, 0.35);
      box-shadow: 0 0 18px rgba(100, 180, 255, 0.18);
    }

    body.ui-redesign .top-options-menu {
      top: 74px;
      right: var(--redesign-ui-inline-offset);
      width: min(310px, calc(100vw - 48px));
      padding: 18px 20px 14px;
      border-radius: 20px;
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.12), rgba(120, 150, 200, 0.05)),
        rgba(8, 13, 26, 0.62);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 30px 70px rgba(2, 6, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(28px) saturate(140%);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
      transform: scale(var(--redesign-ui-scale));
      transform-origin: top right;
    }

    body.ui-redesign .top-options-menu-header {
      margin-bottom: 8px;
    }

    body.ui-redesign .top-options-menu-title {
      display: grid;
      gap: 3px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0;
      color: rgba(238, 245, 255, 0.95);
    }

    body.ui-redesign .top-options-close {
      width: 26px;
      height: 26px;
      border-radius: 9px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      background: rgba(255, 255, 255, 0.05);
      color: rgba(215, 228, 248, 0.86);
      font-size: 14px;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    body.ui-redesign .top-options-close:hover {
      background: rgba(255, 255, 255, 0.10);
      border-color: rgba(255, 255, 255, 0.18);
      color: rgba(235, 243, 255, 0.98);
    }

    body.ui-redesign .top-options-menu-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 22px;
      row-gap: 0;
    }

    body.ui-redesign .top-options-menu .reference-layer-check {
      min-height: 36px;
      font-size: 13px;
    }

    body.ui-redesign .glass-panel,
    body.ui-redesign .sidebar,
    body.ui-redesign .hud-chip,
    body.ui-redesign .control-dock,
    body.ui-redesign .inset-window {
      background: linear-gradient(155deg, rgba(148, 180, 225, 0.10), rgba(120, 150, 200, 0.04));
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 30px 70px rgba(2, 6, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(28px) saturate(140%);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
    }

    body.ui-redesign .sidebar,
    body.ui-redesign.adaptive-layout .sidebar {
      position: absolute;
      left: 24px;
      top: var(--redesign-panel-top);
      bottom: auto;
      z-index: 22;
      width: var(--redesign-sidebar-width);
      height: auto;
      max-height: var(--redesign-sidebar-layout-height);
      max-width: var(--redesign-sidebar-width);
      min-width: 0;
      padding: 0;
      border-radius: 22px;
      overflow: hidden;
      opacity: 1;
      transform: scale(var(--redesign-ui-scale)) !important;
      transform-origin: top left;
      transition: left 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
      pointer-events: auto;
    }

    body.ui-redesign .sidebar-scale-wrap,
    body.ui-redesign.adaptive-layout .sidebar-scale-wrap {
      width: 100%;
      height: auto;
      max-height: var(--redesign-sidebar-layout-height);
      overflow: auto;
      overscroll-behavior: contain;
    }

    body.ui-redesign .sidebar-inner,
    body.ui-redesign.adaptive-layout .sidebar-inner {
      width: auto;
      min-height: 0;
      padding: 16px;
      transform: none;
    }

    body.ui-redesign .control-panel {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    body.ui-redesign .panel-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    body.ui-redesign .panel-title {
      display: grid;
      gap: 3px;
      font-size: 15px;
      font-weight: 500;
      color: rgba(238, 245, 255, 0.95);
    }

    body.ui-redesign .panel-kicker {
      font-family: var(--font-mono);
      font-size: 8.5px;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(150, 172, 205, 0.5);
    }

    body.ui-redesign .layer-section {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
      margin-bottom: 0;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.24em;
      color: rgba(148, 170, 205, 0.55);
    }

    body.ui-redesign .layer-section::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
    }

    /* ── 侧边栏分组折叠 ── */
    /* 总览固定在侧边栏顶部；滚动后加底色和阴影，同时充当「上面还有内容」的提示。 */
    body.ui-redesign .layer-overview {
      position: sticky;
      top: 0;
      z-index: 3;
      margin: 0 -16px;
      padding: 0 16px 2px;
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    body.ui-redesign .layer-overview.is-stuck {
      background: rgba(20, 28, 44, 0.9);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 10px 16px -12px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    body.ui-redesign .layer-overview .layer-section {
      padding-top: 6px;
    }

    /* 分组标题：沿用原来的小标题样式，整行可点；右侧是计数和箭头。 */
    body.ui-redesign .layer-group-toggle {
      width: 100%;
      margin-top: 4px;
      padding: 7px 0 5px;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
      transition: color 0.16s ease;
    }

    body.ui-redesign .layer-group-toggle:hover,
    body.ui-redesign .layer-group-toggle:focus-visible {
      color: rgba(196, 214, 240, 0.9);
      outline: none;
    }

    body.ui-redesign .layer-group-toggle:focus-visible .layer-group-title {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    body.ui-redesign .layer-group-title {
      order: 0;
    }

    body.ui-redesign .layer-group-summary {
      display: none;
    }

    /* 收起的分组：一张轻卡片——正文字号的标题 + 一行组内选项预览，右侧计数胶囊和箭头。
       与展开状态的小标题区分开，一眼看得出「这里可以点开」。 */
    body.ui-redesign .layer-group.is-collapsed .layer-group-toggle {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 8px;
      row-gap: 2px;
      margin-top: 6px;
      padding: 8px 10px 8px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
      font-family: var(--font-body);
      font-size: 13px;
      letter-spacing: 0.02em;
      color: rgba(228, 237, 252, 0.92);
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-toggle::after {
      display: none;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-toggle:hover,
    body.ui-redesign .layer-group.is-collapsed .layer-group-toggle:focus-visible {
      border-color: rgba(150, 205, 255, 0.3);
      background: linear-gradient(180deg, rgba(150, 205, 255, 0.12), rgba(150, 205, 255, 0.05));
      color: #f1f6ff;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-title {
      grid-column: 1;
      grid-row: 1;
      font-weight: 500;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-summary {
      display: block;
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      letter-spacing: 0;
      color: rgba(165, 184, 212, 0.62);
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-count {
      grid-column: 2;
      grid-row: 1 / span 2;
      min-width: 0;
      padding: 1px 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      font-family: var(--font-mono);
      font-size: 10.5px;
      line-height: 1.5;
    }

    body.ui-redesign .layer-group.is-collapsed.has-active .layer-group-count {
      background: rgba(125, 211, 252, 0.14);
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-chevron {
      grid-column: 3;
      grid-row: 1 / span 2;
      color: rgba(190, 210, 240, 0.75);
    }

    body.ui-redesign .layer-group-toggle::after {
      order: 1;
    }

    body.ui-redesign .layer-group-count {
      order: 2;
      min-width: 22px;
      font-size: 10px;
      letter-spacing: 0.04em;
      text-align: right;
      color: rgba(148, 170, 205, 0.5);
    }

    body.ui-redesign .layer-group.has-active .layer-group-count {
      color: rgba(125, 211, 252, 0.85);
    }

    body.ui-redesign .layer-group-chevron {
      order: 3;
      width: 6px;
      height: 6px;
      margin: 0 3px 3px 2px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      transition: transform 0.2s ease, margin 0.2s ease;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-chevron {
      margin: 0 4px 0 1px;
      transform: rotate(-45deg);
    }

    /* 折叠动画：grid 行高 1fr ↔ 0fr；过渡期间和收起时才裁剪溢出。 */
    body.ui-redesign .layer-group-body {
      display: grid;
      grid-template-rows: 1fr;
    }

    /* 页面打开时按记录直接收起，不播放动画；之后老师点开 / 收起才有过渡。 */
    body.ui-redesign.layer-groups-ready .layer-group-body {
      transition: grid-template-rows 0.22s ease;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-body {
      grid-template-rows: 0fr;
    }

    body.ui-redesign .layer-group-inner {
      min-height: 0;
    }

    body.ui-redesign .layer-group.is-collapsed .layer-group-inner,
    body.ui-redesign .layer-group.is-animating .layer-group-inner {
      overflow: hidden;
    }

    /* 底部「更多选项」：渐隐遮罩 + 小胶囊，点一下往下滚；滚到底自动消失。 */
    body.ui-redesign .sidebar-scroll-hint {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      height: 64px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
      border-radius: 0 0 22px 22px;
      background: linear-gradient(180deg, rgba(12, 18, 30, 0), rgba(12, 18, 30, 0.88) 72%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    body.ui-redesign .sidebar-scroll-hint.is-visible {
      opacity: 1;
    }

    body.ui-redesign .sidebar-scroll-more {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 12px 4px 13px;
      border-radius: 999px;
      border: 1px solid rgba(150, 205, 255, 0.28);
      background: rgba(30, 44, 68, 0.92);
      color: rgba(219, 234, 254, 0.95);
      font-family: var(--font-body);
      font-size: 12px;
      line-height: 1.3;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
      cursor: pointer;
      pointer-events: none;
    }

    body.ui-redesign .sidebar-scroll-hint.is-visible .sidebar-scroll-more {
      pointer-events: auto;
    }

    body.ui-redesign .sidebar-scroll-more:hover {
      background: rgba(40, 58, 88, 0.95);
    }

    body.ui-redesign .sidebar-scroll-more-icon {
      display: inline-block;
      font-size: 13px;
      line-height: 1;
      transform: translateY(-2px);
      animation: sidebar-more-bob 1.8s ease-in-out infinite;
    }

    @keyframes sidebar-more-bob {
      0%, 100% { transform: translateY(-2px); }
      50% { transform: translateY(1px); }
    }

    @media (prefers-reduced-motion: reduce) {
      body.ui-redesign .sidebar-scroll-more-icon {
        animation: none;
      }

      body.ui-redesign .layer-group-body,
      body.ui-redesign .layer-group-chevron {
        transition: none;
      }
    }

    body.ui-redesign .reference-layer-panel {
      position: static;
      display: block;
      max-height: none;
      opacity: 1;
      pointer-events: auto;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    body.ui-redesign .reference-layer-panel .reference-layer-check,
    body.ui-redesign .top-options-menu .reference-layer-check {
      min-height: 37px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(228, 237, 252, 0.9);
      font-size: 13.5px;
      font-weight: 400;
      cursor: pointer;
    }

    body.ui-redesign #reference-layer-panel .reference-layer-check {
      min-height: 28px;
      gap: 10px;
      font-size: 13px;
      line-height: 1.15;
    }

    body.ui-redesign #reference-layer-panel .reference-layer-check input[type="checkbox"] {
      width: 32px;
      height: 18px;
    }

    body.ui-redesign #reference-layer-panel .reference-layer-check input[type="checkbox"]::after {
      width: 13px;
      height: 13px;
    }

    body.ui-redesign #reference-layer-panel .reference-layer-check input[type="checkbox"]:checked::after {
      left: 15.5px;
    }

    body.ui-redesign .reference-layer-check input[type="checkbox"],
    body.ui-redesign .obliquity-check input[type="checkbox"] {
      order: 2;
      width: 34px;
      height: 20px;
      flex: 0 0 auto;
      appearance: none;
      -webkit-appearance: none;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.10);
      position: relative;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    }

    body.ui-redesign .reference-layer-check input[type="checkbox"]::after,
    body.ui-redesign .obliquity-check input[type="checkbox"]::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2.5px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: rgba(214, 228, 250, 0.58);
      transition: left 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    body.ui-redesign .reference-layer-check input[type="checkbox"]:checked,
    body.ui-redesign .obliquity-check input[type="checkbox"]:checked {
      border-color: transparent;
      background: linear-gradient(90deg, rgba(80, 160, 235, 0.85), rgba(130, 205, 255, 0.95));
      box-shadow: 0 0 14px rgba(110, 190, 255, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    body.ui-redesign .reference-layer-check input[type="checkbox"]:checked::after,
    body.ui-redesign .obliquity-check input[type="checkbox"]:checked::after {
      left: 16.5px;
      background: #f4faff;
      box-shadow: 0 1px 3px rgba(0, 10, 30, 0.4);
    }

    /* 正交投影窗口下的三个视角子选项 */
    .inset-view-options {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin: 1px 0 6px;
      padding-left: 11px;
      border-left: 1px solid rgba(120, 170, 235, 0.28);
    }

    .inset-view-options[hidden] {
      display: none;
    }

    /* 图层子选项（观察点下的昼夜弧、太阳光线下的平行光线箭头）：
       缩进并加一条左边线表示从属；父图层关闭时隐藏。 */
    .observer-sub-options,
    .sunlight-sub-options {
      margin: 1px 0 4px;
      padding-left: 11px;
      border-left: 1px solid rgba(120, 170, 235, 0.28);
    }

    .observer-sub-options[hidden],
    .sunlight-sub-options[hidden] {
      display: none;
    }

    /* 纬线 / 经线的间隔选择：横排分段药丸，沿用顶部视角切换的药丸视觉语言。
       只写数值不写“间隔”二字——父图层名 + 即时重绘已经说明了含义，
       语义说明放在容器的 aria-label 里（会被 i18n 一并翻译）。 */
    .layer-interval-options {
      display: flex;
      gap: 4px;
      margin: 2px 0 6px;
      padding-left: 11px;
      border-left: 1px solid rgba(120, 170, 235, 0.28);
    }

    .layer-interval-options[hidden] {
      display: none;
    }

    .layer-interval-option {
      position: relative;
      flex: 1 1 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      border: 1px solid rgba(231, 234, 251, 0.12);
      border-radius: var(--pill-radius);
      background: rgba(255, 255, 255, 0.045);
      color: rgba(206, 221, 244, 0.78);
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .layer-interval-option:hover {
      background: rgba(255, 255, 255, 0.09);
      color: rgba(236, 245, 255, 0.95);
    }

    /* 单选框只做视觉隐藏，不能用 display:none / visibility:hidden——
       那会把它移出无障碍树，键盘与读屏就无法再按 radiogroup 操作这组药丸。 */
    .layer-interval-option input[type="radio"] {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      opacity: 0;
      pointer-events: none;
    }

    .layer-interval-option:has(input[type="radio"]:checked) {
      background: var(--primary-gradient);
      border-color: transparent;
      color: #03111c;
    }

    /* 药丸化之后原生焦点环没了，必须自己补，否则键盘用户完全失去位置感。 */
    .layer-interval-option:has(input[type="radio"]:focus-visible) {
      outline: 2px solid #6ec1ff;
      outline-offset: 2px;
    }

    .inset-view-option {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 26px;
      padding: 2px 5px;
      border-radius: 6px;
      color: rgba(206, 221, 244, 0.78);
      font-size: 12.5px;
      cursor: pointer;
      user-select: none;
      transition: color 0.16s ease, background 0.16s ease;
    }

    .inset-view-option:hover {
      background: rgba(255, 255, 255, 0.04);
      color: rgba(236, 245, 255, 0.95);
    }

    .inset-view-option input[type="radio"] {
      width: 13px;
      height: 13px;
      flex: 0 0 auto;
      accent-color: #6ec1ff;
      cursor: pointer;
    }

    .inset-view-option:has(input[type="radio"]:checked) {
      color: #eaf4ff;
      font-weight: 600;
    }

    body.ui-redesign .sidebar-drawer-handle {
      display: grid;
      place-items: center;
      left: calc(24px + var(--redesign-sidebar-rendered-width) - 1px);
      top: 50%;
      /* 与侧边栏同一层（.sidebar 也是 22）：浮在侧边栏上方的面板（如放大的「太阳与影子」）会同时盖住两者。
         手柄在 DOM 里排在侧边栏后面，同层时仍画在侧边栏边缘之上，照常可点。 */
      z-index: 22;
      width: 24px;
      height: 78px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-left: 0;
      border-radius: 0 14px 14px 0;
      color: rgba(196, 218, 246, 0.78);
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.14), rgba(120, 150, 200, 0.06)),
        rgba(8, 13, 26, 0.5);
      box-shadow:
        14px 22px 48px rgba(2, 6, 18, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
      transform: translate(0, -50%) scale(var(--redesign-ui-scale));
      transform-origin: left center;
      backdrop-filter: blur(28px) saturate(140%);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
      cursor: pointer;
      transition:
        left 0.22s ease, width 0.18s ease, color 0.18s ease,
        border-color 0.18s ease, background 0.18s ease,
        box-shadow 0.18s ease, border-radius 0.22s ease;
    }

    /* 扩大点击热区，手柄视觉保持纤细 */
    body.ui-redesign .sidebar-drawer-handle::after {
      content: "";
      position: absolute;
      inset: -10px -12px;
    }

    body.ui-redesign .sidebar-drawer-handle:hover {
      width: 27px;
      color: rgba(235, 245, 255, 1);
      border-color: rgba(150, 205, 255, 0.38);
      box-shadow:
        14px 22px 48px rgba(2, 6, 18, 0.46),
        0 0 22px rgba(110, 190, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    body.ui-redesign .sidebar-drawer-handle:focus-visible {
      outline: 2px solid rgba(140, 205, 255, 0.65);
      outline-offset: 2px;
    }

    body.ui-redesign .sidebar-drawer-handle:active {
      transform: translate(0, -50%) scale(var(--redesign-ui-scale)) scale(0.96);
    }

    body.ui-redesign .sidebar-drawer-icon {
      font-size: 15px;
      font-weight: 700;
      line-height: 1;
      color: currentColor;
      text-shadow: none;
      transition: transform 0.18s ease;
    }

    body.ui-redesign .sidebar-drawer-handle:hover .sidebar-drawer-icon {
      transform: translateX(-1.5px);
    }

    body.ui-redesign.sidebar-hidden .sidebar,
    body.ui-redesign.adaptive-layout.sidebar-hidden .sidebar {
      opacity: 0;
      pointer-events: none;
      transform: translateX(calc(-1 * (var(--redesign-sidebar-width) + 28px))) scale(var(--redesign-ui-scale)) !important;
    }

    /* 收起后：手柄变成屏幕左缘的胶囊，带蓝色提示光晕 */
    body.ui-redesign.sidebar-hidden .sidebar-drawer-handle {
      left: 24px;
      width: 26px;
      border-left: 1px solid rgba(150, 205, 255, 0.30);
      border-color: rgba(150, 205, 255, 0.30);
      border-radius: 14px;
      color: rgba(176, 216, 255, 0.95);
      box-shadow:
        0 18px 44px rgba(2, 6, 18, 0.5),
        0 0 20px rgba(110, 190, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transform: translate(-50%, -50%) scale(var(--redesign-ui-scale));
      transform-origin: center;
    }

    body.ui-redesign.sidebar-hidden .sidebar-drawer-handle:hover {
      width: 28px;
      color: rgba(235, 245, 255, 1);
      border-color: rgba(160, 212, 255, 0.5);
    }

    body.ui-redesign.sidebar-hidden .sidebar-drawer-handle:hover .sidebar-drawer-icon {
      transform: translateX(1.5px);
    }

    body.ui-redesign.sidebar-hidden .sidebar-drawer-handle:active {
      transform: translate(-50%, -50%) scale(var(--redesign-ui-scale)) scale(0.96);
    }

    body.ui-redesign .metrics-chip,
    body.ui-redesign.adaptive-layout .metrics-chip {
      position: absolute;
      right: 24px;
      left: auto;
      top: var(--redesign-panel-top);
      z-index: 20;
      width: var(--redesign-metrics-width);
      padding: 14px 16px 10px;
      border-radius: 20px;
      transform: scale(var(--redesign-metrics-scale)) !important;
      transform-origin: top right;
      transition: right 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
    }

    body.ui-redesign .hud-chip-header {
      align-items: flex-start;
      gap: 8px;
    }

    body.ui-redesign .hud-heading {
      font-size: 14px;
      font-weight: 500;
      color: rgba(238, 245, 255, 0.95);
    }

    body.ui-redesign .season-tag {
      margin-right: 0;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(255, 214, 150, 0.10);
      border: 1px solid rgba(255, 214, 150, 0.28);
      color: rgba(255, 228, 184, 0.95);
      font-size: 11px;
      font-weight: 500;
      flex: 0 0 auto;
    }

    body.ui-redesign .observer-location-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 36px;
      padding: 7px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }

    body.ui-redesign .observer-location-row #observer-location-readout {
      flex: 1;
      min-width: 0;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: rgba(214, 228, 248, 0.9);
      cursor: text;
    }

    body.ui-redesign .observer-location-edit {
      flex: 0 0 auto;
      border: 0;
      padding: 2px 2px;
      background: transparent;
      font-size: 11.5px;
      font-weight: 500;
      color: rgba(140, 195, 255, 0.8);
      cursor: pointer;
      transition: color 0.18s ease;
    }

    body.ui-redesign .observer-location-edit:hover {
      color: rgba(185, 222, 255, 1);
    }

    body.ui-redesign .observer-location-row:has(#observer-location-readout.is-editing) .observer-location-edit {
      display: none;
    }

    body.ui-redesign .observer-location-row #observer-location-readout:hover,
    body.ui-redesign .observer-location-row #observer-location-readout:focus-visible {
      background: rgba(120, 190, 255, 0.10);
      box-shadow: 0 0 0 1px rgba(150, 205, 255, 0.25);
    }

    body.ui-redesign .observer-location-row #observer-location-readout.is-editing {
      width: 100%;
      padding: 2px 0;
      background: transparent;
      box-shadow: none;
    }

    body.ui-redesign .observer-location-editor {
      gap: 3px;
      font-size: 20px;
      color: rgba(170, 216, 255, 0.95);
    }

    body.ui-redesign .observer-location-editor input {
      border-bottom-color: rgba(150, 205, 255, 0.40);
      color: #eaf4ff;
    }

    body.ui-redesign .observer-location-editor .unit {
      color: rgba(190, 206, 232, 0.8);
    }

    body.ui-redesign .observer-location-editor .hemi-btn {
      border-color: rgba(150, 205, 255, 0.30);
      border-radius: 6px;
      background: rgba(120, 190, 255, 0.14);
      color: #eaf4ff;
    }

    body.ui-redesign .observer-location-editor .hemi-btn:hover {
      background: rgba(120, 190, 255, 0.24);
    }

    body.ui-redesign .metrics-grid {
      margin-top: 6px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: stretch;
      column-gap: 0;
      row-gap: 0;
    }

    body.ui-redesign .metric,
    body.ui-redesign .metric:nth-child(even) {
      padding: 10px 6px 11px 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.ui-redesign .metric:nth-child(1),
    body.ui-redesign .metric:nth-child(2) {
      border-top: 0;
    }

    body.ui-redesign .metric:nth-child(even) {
      padding-left: 14px;
      padding-right: 2px;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.ui-redesign .metric small {
      color: rgba(165, 184, 212, 0.68);
      font-size: 10px;
      letter-spacing: 0.05em;
      text-transform: none;
      font-family: var(--font-body);
      margin-bottom: 0;
    }

    body.ui-redesign .metric strong,
    body.ui-redesign .metric strong:not(#observer-state) {
      display: block;
      margin-top: 5px;
      font-family: var(--font-display);
      font-size: 21px;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: rgba(244, 249, 255, 0.97);
      line-height: 1.08;
    }

    body.ui-redesign .control-dock {
      position: absolute;
      left: 50%;
      bottom: 18px;
      z-index: 24;
      width: min(1200px, calc(100% - 48px));
      min-width: 0;
      height: 76px;
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.15vw, 20px);
      padding: 0 clamp(14px, 1.6vw, 22px);
      border-radius: 22px;
      overflow: hidden;
    }

    body.ui-redesign .control-dock {
      transform: translateX(-50%) scale(var(--redesign-ui-scale));
      transform-origin: bottom center;
    }

    /* 观察点「太阳高度变化」图表卡。两种摆位由用户手动切换（右侧放不下或观察点对比打开时暂放底部，见 refreshFloatingLayout）：
       .is-right 是右下角竖卡（两图上下、宽度固定为读数卡的 1.8 倍）；
       默认是播放控制条正上方的横条（两图并排，标题与数值放到图表左侧，尽量压低高度）。 */
    body.ui-redesign .sun-altitude-strip {
      position: absolute;
      left: 50%;
      bottom: calc(18px + 76px * var(--redesign-ui-scale) + 10px);
      z-index: 23;
      /* 横条水平居中；窄屏上两端都要让开侧边栏（左右各留「侧边栏宽 + 36px」），不压到侧边栏底部。 */
      width: min(
        1000px,
        calc(100% - 48px),
        calc((100% - 2 * (36px + var(--redesign-sidebar-rendered-width))) / var(--redesign-ui-scale))
      );
      box-sizing: border-box;
      padding: 6px 46px 6px 10px;
      border-radius: 14px;
      background: rgba(19, 26, 40, 0.9);
      transform: translateX(-50%) scale(var(--redesign-ui-scale));
      transform-origin: bottom center;
    }

    body.ui-redesign .sun-altitude-strip[hidden] {
      display: none !important;
    }

    /* 图表被暂时放到底部时，「移到右侧」按钮停用。 */
    body.ui-redesign .sun-altitude-action:disabled {
      opacity: 0.35;
      cursor: default;
      transform: none;
    }

    body.ui-redesign .sun-altitude-charts {
      display: flex;
      align-items: stretch;
      gap: 14px;
    }

    body.ui-redesign .sun-altitude-chart {
      flex: 1 1 0;
      min-width: 0;
    }

    body.ui-redesign .sun-altitude-chart-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding: 0 2px 1px;
    }

    body.ui-redesign .sun-altitude-chart-title {
      font-family: var(--font-body);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: rgba(165, 184, 212, 0.82);
      white-space: nowrap;
    }

    body.ui-redesign .sun-altitude-chart-value {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 600;
      color: var(--tertiary);
      font-variant-numeric: tabular-nums;
    }

    body.ui-redesign .sun-altitude-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    body.ui-redesign .sun-altitude-svg text {
      font-family: var(--font-body);
      font-size: 10px;
      fill: rgba(165, 184, 212, 0.72);
    }

    body.ui-redesign .sun-altitude-svg .grid {
      stroke: rgba(231, 234, 251, 0.08);
      stroke-width: 1;
    }

    body.ui-redesign .sun-altitude-svg .horizon {
      stroke: rgba(231, 234, 251, 0.38);
      stroke-width: 1.2;
    }

    body.ui-redesign .sun-altitude-svg .season-line {
      stroke: rgba(255, 244, 201, 0.3);
      stroke-width: 1;
      stroke-dasharray: 3 3;
    }

    body.ui-redesign .sun-altitude-svg .event-label {
      fill: rgba(255, 244, 201, 0.8);
      font-size: 9px;
    }

    body.ui-redesign .sun-altitude-svg .day-fill {
      fill: rgba(251, 191, 36, 0.14);
    }

    body.ui-redesign .sun-altitude-svg .curve {
      fill: none;
      stroke: var(--primary);
      stroke-width: 2;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    body.ui-redesign .sun-altitude-svg .cursor-line {
      stroke: rgba(255, 244, 201, 0.6);
      stroke-width: 1;
    }

    body.ui-redesign .sun-altitude-svg .cursor-dot {
      fill: var(--tertiary);
      stroke: #0b1220;
      stroke-width: 1.5;
    }

    /* 切换摆位 / 关闭：竖卡里贴右上角，横条里贴右侧竖排。 */
    body.ui-redesign .sun-altitude-actions {
      position: absolute;
      display: flex;
      gap: 6px;
    }

    body.ui-redesign .sun-altitude-action {
      width: 24px;
      height: 24px;
      font-size: 0.9rem;
      padding: 0;
    }

    /* ── 横条模式 ── 卡头整块去掉；每张图的标题与数值改放到图表左侧，只占宽度不占高度。 */
    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-header {
      display: none;
    }

    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-chart {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 10px;
    }

    /* 左侧标签列：标题贴顶，数值在剩余空间里上下左右居中、放大，像一块小仪表。 */
    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-chart-header {
      flex: 0 0 88px;
      width: 88px;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      padding: 3px 0 2px;
    }

    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-chart-title {
      white-space: normal;
      text-align: center;
      line-height: 1.3;
    }

    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-chart-value {
      margin: auto 0;
      font-size: 19px;
      line-height: 1;
      letter-spacing: -0.01em;
    }

    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-svg {
      flex: 1 1 0;
      min-width: 0;
      aspect-ratio: 400 / 100;
    }

    body.ui-redesign .sun-altitude-strip:not(.is-right) .sun-altitude-actions {
      top: 50%;
      right: 10px;
      flex-direction: column;
      transform: translateY(-50%);
    }

    /* ── 右下角竖卡 ── 宽度固定为读数卡的 1.8 倍，贴右边缘、坐在控制条上沿。 */
    body.ui-redesign .sun-altitude-strip.is-right {
      left: auto;
      right: 24px;
      z-index: 20;
      width: calc(var(--redesign-metrics-width) * 1.8);
      padding: 10px 12px 8px;
      border-radius: 20px;
      transform: scale(var(--redesign-metrics-scale));
      transform-origin: bottom right;
      /* 不做过渡：横条 ↔ 竖卡切换时不该看到卡片从屏幕中央滑过去。 */
      transition: none;
    }

    body.ui-redesign .sun-altitude-strip.is-right .sun-altitude-header {
      margin-bottom: 6px;
      padding-right: 56px;
    }

    body.ui-redesign .sun-altitude-strip.is-right .sun-altitude-charts {
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

    body.ui-redesign .sun-altitude-strip.is-right .sun-altitude-svg {
      aspect-ratio: 394 / 120;
    }

    /* 竖卡里标题靠左，数值放大后对齐到图表绘图区的中线：
       画幅 394 宽、左留白 36、右留白 14，绘图区中点在 (36 + 380) / 2 = 208，即 52.8%，
       正好是日变化图 12:00 那条竖线的位置。 */
    body.ui-redesign .sun-altitude-strip.is-right .sun-altitude-chart-header {
      position: relative;
      justify-content: flex-start;
      align-items: baseline;
      min-height: 18px;
      padding: 0 2px 3px;
    }

    body.ui-redesign .sun-altitude-strip.is-right .sun-altitude-chart-value {
      position: absolute;
      left: 52.8%;
      bottom: 3px;
      transform: translateX(-50%);
      font-size: 18px;
      line-height: 1;
      letter-spacing: -0.01em;
    }

    body.ui-redesign .sun-altitude-strip.is-right .sun-altitude-actions {
      top: 10px;
      right: 12px;
    }

    @media (max-width: 1000px) {
      body.ui-redesign .sun-altitude-strip:not(.is-right) {
        width: calc(100% - 24px);
      }
    }

    /* ── 放大模式 ── 课堂投影用：坐在控制条上沿、宽 75%、高为屏幕高度的 1/3，两图并排。
       不做 scale，SVG 画幅由脚本按实际像素尺寸设定，所以这里的字号就是屏幕上的真实像素。 */
    /* 层级：遮罩 23 压住侧边栏(22)和读数卡，但低于控制条(24)，放大时仍能点播放；
       面板 29 压过侧边栏抽屉把手(28)，低于顶栏(30)。 */
    body.ui-redesign .sun-altitude-backdrop {
      position: absolute;
      inset: 0;
      z-index: 23;
      background: rgba(2, 6, 18, 0.42);
    }

    body.ui-redesign .sun-altitude-backdrop[hidden] {
      display: none !important;
    }

    /* 放大面板坐在控制条上沿：和横条模式一样留 10px 间距，控制条按界面缩放，所以间距里要乘同一个系数。 */
    body.ui-redesign .sun-altitude-strip.is-enlarged {
      left: 50%;
      right: auto;
      top: auto;
      bottom: calc(18px + 76px * var(--redesign-ui-scale) + 10px);
      z-index: 29;
      width: min(75%, 1800px);
      height: calc(100vh / 3);
      display: flex;
      flex-direction: column;
      padding: 14px 18px 12px;
      border-radius: 22px;
      background: rgba(15, 22, 36, 0.94);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
      transform: translateX(-50%);
      transition: none;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-header {
      display: flex;
      flex: 0 0 auto;
      margin-bottom: 10px;
      padding-right: 84px;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-header .hud-heading {
      font-size: 18px;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-charts {
      flex: 1 1 auto;
      min-height: 0;
      flex-direction: row;
      align-items: stretch;
      gap: 32px;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-chart {
      display: flex;
      flex-direction: column;
      min-height: 0;
      gap: 0;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-chart-header {
      position: static;
      flex: 0 0 auto;
      width: auto;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      padding: 0 4px 6px;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-chart-title {
      font-size: 17px;
      line-height: 1.2;
      white-space: nowrap;
      text-align: left;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-chart-value {
      position: static;
      margin: 0;
      font-size: 32px;
      line-height: 1;
      transform: none;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-svg {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-svg text {
      font-size: 15px;
      fill: rgba(190, 206, 228, 0.86);
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-svg .event-label {
      font-size: 15px;
      fill: rgba(255, 244, 201, 0.9);
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-svg .curve {
      stroke-width: 3.2;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-svg .cursor-line {
      stroke-width: 1.6;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-svg .cursor-dot {
      r: 7px;
      stroke-width: 2;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-actions {
      top: 14px;
      right: 16px;
      flex-direction: row;
      transform: none;
      gap: 8px;
    }

    body.ui-redesign .sun-altitude-strip.is-enlarged .sun-altitude-action {
      width: 34px;
      height: 34px;
      font-size: 1.1rem;
    }

    /* ── 观察点「太阳高度与影子」面板 ── 默认浮在侧边栏右侧，可拖动；放大后坐在控制条上沿。 */
    body.ui-redesign .horizon-view {
      position: absolute;
      left: calc(24px + var(--redesign-sidebar-rendered-width) + 18px);
      top: var(--redesign-panel-top);
      z-index: 21;
      width: 360px;
      box-sizing: border-box;
      padding: 10px 12px 12px;
      border-radius: 20px;
      background: rgba(19, 26, 40, 0.9);
      transform: scale(var(--redesign-metrics-scale));
      transform-origin: top left;
    }

    body.ui-redesign .horizon-view[hidden] {
      display: none !important;
    }

    body.ui-redesign .horizon-view-header {
      padding-right: 60px;
      margin-bottom: 4px;
      cursor: grab;
      user-select: none;
      touch-action: none;
    }

    body.ui-redesign .horizon-view-header:active {
      cursor: grabbing;
    }

    body.ui-redesign .horizon-view-actions {
      position: absolute;
      top: 10px;
      right: 12px;
      display: flex;
      gap: 6px;
    }

    body.ui-redesign .horizon-view-action {
      width: 24px;
      height: 24px;
      padding: 0;
      font-size: 0.9rem;
    }

    body.ui-redesign .horizon-view-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    body.ui-redesign .horizon-view-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px 12px;
      margin-top: 6px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.ui-redesign .horizon-metric small {
      display: block;
      font-family: var(--font-body);
      font-size: 10px;
      color: rgba(165, 184, 212, 0.72);
    }

    body.ui-redesign .horizon-metric strong {
      display: block;
      margin-top: 2px;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 600;
      color: var(--tertiary);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    body.ui-redesign .horizon-view-svg text {
      font-family: var(--font-body);
      font-size: 11px;
      fill: rgba(190, 206, 228, 0.82);
    }

    body.ui-redesign .horizon-view-svg .hv-dome {
      fill: rgba(56, 120, 200, 0.07);
      stroke: rgba(148, 197, 255, 0.32);
      stroke-width: 1.2;
    }

    body.ui-redesign .horizon-view-svg .hv-arc {
      fill: none;
      stroke: rgba(148, 197, 255, 0.18);
      stroke-width: 1;
      stroke-dasharray: 3 4;
    }

    body.ui-redesign .horizon-view-svg .hv-ground {
      fill: rgba(52, 211, 153, 0.1);
      stroke: rgba(167, 243, 208, 0.5);
      stroke-width: 1.3;
    }

    body.ui-redesign .horizon-view-svg .hv-grid {
      stroke: rgba(226, 232, 240, 0.2);
      stroke-width: 1;
      stroke-dasharray: 3 3;
    }

    body.ui-redesign .horizon-view-svg .hv-sunpath {
      fill: none;
      stroke: #fbbf24;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 地平线以下的太阳轨迹：同色、更淡的虚线，与淡紫色的影端轨迹虚线区分开。 */
    body.ui-redesign .horizon-view-svg .hv-sunpath-below {
      fill: none;
      stroke: rgba(251, 191, 36, 0.55);
      stroke-width: 1.6;
      stroke-dasharray: 5 4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body.ui-redesign .horizon-view-svg .hv-sun-below {
      fill: rgba(251, 191, 36, 0.45);
      stroke: rgba(251, 191, 36, 0.75);
      stroke-width: 1.2;
    }

    body.ui-redesign .horizon-view-svg .hv-trace {
      fill: none;
      stroke: #c4b5fd;
      stroke-width: 1.6;
      stroke-dasharray: 4 3;
      stroke-linecap: round;
    }

    body.ui-redesign .horizon-view-svg .hv-pole {
      stroke: #f8fafc;
      stroke-width: 3;
      stroke-linecap: round;
    }

    body.ui-redesign .horizon-view-svg .hv-shadow {
      stroke: #94a3b8;
      stroke-width: 4;
      stroke-linecap: round;
    }

    body.ui-redesign .horizon-view-svg .hv-tip {
      fill: #c4b5fd;
      stroke: #0b1220;
      stroke-width: 1.2;
    }

    body.ui-redesign .horizon-view-svg .hv-ray {
      fill: none;
      stroke: rgba(253, 224, 71, 0.8);
      stroke-width: 1.2;
      stroke-dasharray: 5 3;
    }

    body.ui-redesign .horizon-view-svg .hv-angle {
      fill: none;
      stroke: #fde68a;
      stroke-width: 1.4;
    }

    body.ui-redesign .horizon-view-svg .hv-angle-label {
      fill: #fde68a;
      font-style: italic;
      font-weight: 600;
    }

    body.ui-redesign .horizon-view-svg .hv-sun {
      fill: #fde68a;
      stroke: #f59e0b;
      stroke-width: 1.6;
    }

    body.ui-redesign .horizon-view-svg .hv-sun-glow {
      fill: rgba(253, 224, 71, 0.22);
    }

    body.ui-redesign .horizon-view-svg .hv-event-dot,
    body.ui-redesign .horizon-view-svg .hv-noon-dot {
      fill: #fff4c9;
    }

    body.ui-redesign .horizon-view-svg .hv-event {
      font-size: 10px;
      fill: rgba(255, 244, 201, 0.88);
    }

    body.ui-redesign .horizon-view-svg .hv-dir {
      font-size: 13px;
      font-weight: 600;
      fill: rgba(226, 236, 255, 0.9);
    }

    body.ui-redesign .horizon-view-svg .hv-dir-back {
      fill: rgba(226, 236, 255, 0.55);
    }

    body.ui-redesign .horizon-view-svg .hv-zenith,
    body.ui-redesign .horizon-view-svg .hv-legend {
      font-size: 10px;
      fill: rgba(165, 184, 212, 0.8);
    }

    body.ui-redesign .horizon-view-svg .hv-note {
      font-size: 12px;
      fill: rgba(255, 244, 201, 0.9);
    }

    /* 放大：原地放大，宽度 ×1.2（图里的字随 SVG 一起变大）；画面向下延伸由 simulation.ts 改 viewBox。
       读数文字放大到与「观察点对比」放大后相当（小字约 13px、数值约 19px），标题和按钮不放大。 */
    body.ui-redesign .horizon-view.is-enlarged {
      width: 432px;
      z-index: 24;
    }

    body.ui-redesign .horizon-view.is-enlarged .horizon-metric small {
      font-size: 13px;
    }

    body.ui-redesign .horizon-view.is-enlarged .horizon-metric strong {
      margin-top: 3px;
      font-size: 19px;
    }

    /* 放大时摆位切换没有意义，先藏起来。 */
    body.ui-redesign .sun-altitude-strip.is-enlarged #sun-altitude-placement-btn {
      display: none;
    }

    body.ui-redesign .dock-divider {
      width: 1px;
      height: 38px;
      flex: 0 0 auto;
      background: rgba(255, 255, 255, 0.10);
    }

    body.ui-redesign .dock-motion {
      display: flex;
      align-items: center;
      gap: 13px;
      flex: 0 0 auto;
    }

    body.ui-redesign .motion-toggle-btn {
      width: 40px;
      height: 40px;
      min-height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.20);
      background: rgba(255, 255, 255, 0.07);
      display: grid;
      place-items: center;
      padding: 0;
    }

    body.ui-redesign .motion-toggle-btn.active {
      background: linear-gradient(135deg, rgba(120, 195, 255, 0.95), rgba(70, 140, 230, 0.95));
      border-color: transparent;
      box-shadow: 0 6px 24px rgba(90, 170, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    body.ui-redesign .motion-toggle-btn::before {
      border-left-color: rgba(232, 241, 255, 0.92);
    }

    body.ui-redesign .motion-toggle-btn.active::before {
      background: linear-gradient(90deg, rgba(8, 22, 42, 0.9) 0 34%, transparent 34% 66%, rgba(8, 22, 42, 0.9) 66% 100%);
    }

    body.ui-redesign .motion-title {
      font-size: 13.5px;
      font-weight: 500;
      color: rgba(235, 243, 255, 0.95);
    }

    body.ui-redesign .motion-kicker {
      display: block;
      margin-top: 3px;
      font-family: var(--font-mono);
      font-size: 8.5px;
      letter-spacing: 0.20em;
      color: rgba(150, 172, 205, 0.55);
    }

    body.ui-redesign .speed-stepper {
      display: flex;
      align-items: center;
      height: 30px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
      flex: 0 0 auto;
    }

    body.ui-redesign .speed-step-btn {
      width: 27px;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      display: grid;
      place-items: center;
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 400;
      line-height: 1;
      color: rgba(190, 206, 232, 0.7);
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
    }

    body.ui-redesign .speed-step-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: rgba(235, 243, 255, 1);
    }

    body.ui-redesign .speed-step-btn:active {
      background: rgba(255, 255, 255, 0.12);
    }

    body.ui-redesign .pill.motion-speed-step {
      min-width: 46px;
      min-height: 30px;
      height: 30px;
      padding: 0 5px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-family: var(--font-display);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: rgba(170, 216, 255, 0.95);
    }

    body.ui-redesign .pill.motion-speed-step:hover,
    body.ui-redesign .pill.motion-speed-step:active {
      background: rgba(255, 255, 255, 0.07);
      border: 0;
      color: rgba(200, 230, 255, 1);
      box-shadow: none;
      transform: none;
      filter: none;
    }

    body.ui-redesign .dock-timeline {
      --timeline-pos: 0%;
      --timeline-thumb-size: 16px;
      --timeline-thumb-radius: calc(var(--timeline-thumb-size) / 2);
      --timeline-thumb-x: var(--timeline-pos);
      position: relative;
      flex: 1 1 300px;
      min-width: clamp(200px, 22vw, 240px);
      height: 52px;
      align-self: center;
      display: block;
      margin-top: 4px;
    }

    body.ui-redesign .timeline-date {
      position: absolute;
      left: clamp(30px, var(--timeline-thumb-x), calc(100% - 30px));
      top: -7px;
      transform: translateX(-50%);
      z-index: 5;
      padding: 2px 9px;
      border-radius: 8px;
      background: rgba(120, 190, 255, 0.16);
      border: 1px solid rgba(150, 205, 255, 0.35);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 500;
      color: rgba(200, 230, 255, 0.96);
      white-space: nowrap;
      pointer-events: none;
    }

    body.ui-redesign .timeline-rail {
      position: absolute;
      left: 0;
      right: 0;
      top: 25px;
      z-index: 1;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      overflow: visible;
      pointer-events: none;
    }

    body.ui-redesign .timeline-rail-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: var(--timeline-pos);
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(80, 160, 235, 0.9), rgba(140, 210, 255, 1));
      box-shadow: 0 0 12px rgba(110, 190, 255, 0.5);
    }

    body.ui-redesign #season-progress {
      position: absolute;
      left: 0;
      right: 0;
      top: 19px;
      z-index: 4;
      width: 100%;
      height: 16px;
      margin: 0;
      background: transparent;
      cursor: pointer;
    }

    body.ui-redesign #season-progress::-webkit-slider-thumb {
      width: var(--timeline-thumb-size);
      height: var(--timeline-thumb-size);
      border: 0;
      border-radius: 50%;
      background: #f4faff;
      box-shadow: 0 0 0 4px rgba(140, 210, 255, 0.25), 0 0 16px rgba(140, 210, 255, 0.7);
      transition: box-shadow 0.18s ease;
    }

    body.ui-redesign #season-progress::-moz-range-thumb {
      width: var(--timeline-thumb-size);
      height: var(--timeline-thumb-size);
      border: 0;
      border-radius: 50%;
      background: #f4faff;
      box-shadow: 0 0 0 4px rgba(140, 210, 255, 0.25), 0 0 16px rgba(140, 210, 255, 0.7);
    }

    body.ui-redesign #season-progress:hover::-webkit-slider-thumb,
    body.ui-redesign #season-progress:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 5px rgba(140, 210, 255, 0.35), 0 0 20px rgba(140, 210, 255, 0.9);
    }

    body.ui-redesign .dock-timeline .season-jump-group {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: block;
      pointer-events: none;
      gap: 0;
    }

    /* 二分二至：原来是无边框的暗淡文字，读起来像刻度标签，用户不知道能点。
       改成常驻的药丸外观（描边 + 底色 + 提亮文字），并补上按下与键盘焦点反馈。
       尺寸只比原来高 2px（靠 1px 描边），不挤压时间轴下方的版权行。 */
    body.ui-redesign .dock-timeline .season-jump-btn {
      position: absolute;
      top: 35px;
      left: var(--mark-x, clamp(var(--timeline-thumb-radius), var(--mark-pos, 50%), calc(100% - var(--timeline-thumb-radius))));
      transform: translateX(-50%);
      pointer-events: auto;
      min-height: 0;
      white-space: nowrap;
      padding: 2px 9px;
      border: 1px solid rgba(150, 190, 240, 0.32);
      border-radius: 999px;
      background: rgba(120, 165, 225, 0.14);
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.25;
      color: rgba(210, 226, 247, 0.9);
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(2, 8, 20, 0.3);
      transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    }

    /* 轨道上的定位圆点。按钮加了 1px 描边后内边框下移 1px，这里同步补偿，
       让圆点仍旧贴在时间轴上。 */
    body.ui-redesign .dock-timeline .season-jump-btn::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -12px;
      width: 6px;
      height: 6px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(200, 216, 240, 0.55);
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    body.ui-redesign .dock-timeline .season-jump-btn:hover {
      background: rgba(150, 200, 255, 0.26);
      border-color: rgba(170, 210, 255, 0.6);
      color: rgba(236, 246, 255, 0.98);
      transform: translateX(-50%) translateY(-1px);
      box-shadow: 0 3px 10px rgba(2, 8, 20, 0.42);
    }

    body.ui-redesign .dock-timeline .season-jump-btn:hover::before {
      background: rgba(160, 210, 255, 0.9);
      box-shadow: 0 0 8px rgba(140, 205, 255, 0.7);
    }

    body.ui-redesign .dock-timeline .season-jump-btn:active {
      background: rgba(120, 175, 235, 0.34);
      transform: translateX(-50%) translateY(0);
      box-shadow: 0 1px 2px rgba(2, 8, 20, 0.5);
    }

    body.ui-redesign .dock-timeline .season-jump-btn:focus-visible {
      outline: 2px solid #6ec1ff;
      outline-offset: 2px;
    }

    body.ui-redesign .dock-timeline .season-jump-btn.is-current {
      background: rgba(255, 205, 120, 0.2);
      border-color: rgba(255, 205, 120, 0.62);
      color: rgba(255, 232, 190, 0.98);
      font-weight: 600;
    }

    body.ui-redesign .dock-timeline .season-jump-btn.is-current::before {
      background: rgba(255, 210, 130, 0.95);
      box-shadow: 0 0 8px rgba(255, 200, 120, 0.8);
    }

    body.ui-redesign .dock-tilt {
      width: 196px;
      min-width: 0;
      display: grid;
      gap: 4px;
      flex: 0 1 196px;
      overflow: hidden;
      box-sizing: border-box;
      padding-inline: 2px;
    }

    body.ui-redesign .tilt-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
    }

    body.ui-redesign #axis-tilt-btn {
      justify-content: flex-start;
      width: 100%;
      display: flex;
      align-items: baseline;
      padding: 0;
      min-height: auto;
      border: 0;
      background: transparent;
      color: rgba(235, 243, 255, 0.95);
      box-shadow: none;
      font-size: 13.5px;
      font-weight: 500;
    }

    body.ui-redesign #axis-tilt-btn:hover {
      background: transparent;
      border: 0;
      color: rgba(245, 250, 255, 1);
    }

    body.ui-redesign #axis-tilt-btn::after {
      content: attr(data-angle);
      margin-left: auto;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 500;
      color: rgba(160, 178, 206, 0.6);
      transition: color 0.25s ease;
    }

    body.ui-redesign #axis-tilt-btn.active::after {
      color: rgba(170, 216, 255, 0.96);
    }

    body.ui-redesign .tilt-track {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 14px;
      display: flex;
      align-items: center;
      cursor: ew-resize;
    }

    body.ui-redesign .tilt-track::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 4px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
    }

    body.ui-redesign .tilt-fill {
      position: absolute;
      left: 0;
      width: var(--tilt-progress, 100%);
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(80, 160, 235, 0.9), rgba(140, 210, 255, 1));
      box-shadow: 0 0 12px rgba(110, 190, 255, 0.5);
      pointer-events: none;
    }

    body.ui-redesign .tilt-thumb {
      position: absolute;
      left: clamp(8px, var(--tilt-progress, 100%), calc(100% - 8px));
      width: 16px;
      height: 16px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: #f4faff;
      box-shadow: 0 0 0 4px rgba(140, 210, 255, 0.25), 0 1px 4px rgba(0, 10, 30, 0.45);
      transition: box-shadow 0.18s ease;
      pointer-events: none;
    }

    body.ui-redesign .tilt-track:hover .tilt-thumb {
      box-shadow: 0 0 0 5px rgba(140, 210, 255, 0.35), 0 1px 4px rgba(0, 10, 30, 0.45);
    }

    body.ui-redesign #axis-tilt-range {
      position: absolute;
      inset: -7px 0;
      z-index: 2;
      width: 100%;
      height: 30px;
      margin: 0;
      opacity: 0;
      cursor: ew-resize;
    }

    body.ui-redesign .tilt-scale {
      display: flex;
      width: 100%;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: 8.5px;
      letter-spacing: 0.04em;
      color: rgba(150, 172, 205, 0.5);
      white-space: nowrap;
    }

    body.ui-redesign input[type="range"] {
      height: 4px;
      background: rgba(255, 255, 255, 0.12);
    }

    body.ui-redesign input[type="range"]::-webkit-slider-thumb {
      width: 16px;
      height: 16px;
      background: #f4faff;
      border: 0;
      box-shadow: 0 0 0 4px rgba(140, 210, 255, 0.25), 0 1px 4px rgba(0, 10, 30, 0.45);
    }

    /* 右栏放不下时交互提示暂时收起（见 updateHintChipPosition）。 */
    body.ui-redesign .hint-chip.is-crowded {
      display: none !important;
    }

    body.ui-redesign .hint-chip {
      left: auto;
      right: 24px;
      width: var(--redesign-metrics-width);
      z-index: 18;
      transform: scale(var(--redesign-ui-scale));
      transform-origin: top right;
    }

    body.ui-redesign .knowledge-hotspot-card {
      right: 370px;
      top: 122px;
      left: auto;
      width: min(360px, calc(100% - 740px));
      z-index: 25;
      transform: scale(var(--redesign-ui-scale));
      transform-origin: top right;
    }

    body.ui-redesign .inset-window {
      z-index: 18;
      width: calc(var(--redesign-metrics-width) * var(--redesign-metrics-scale));
      height: calc(var(--redesign-metrics-width) * var(--redesign-metrics-scale));
      border-radius: 20px;
      overflow: hidden;
    }

    body.ui-redesign .inset-viewport {
      border-radius: 20px;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    /* 「观察点实时读数」⇄「观察点对比」切换按钮。读数卡里放在季节标签下面，不占宽度。 */
    body.ui-redesign .observer-readout-header-side {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      flex: 0 0 auto;
    }

    body.ui-redesign .observer-panel-switch {
      padding: 3px 9px;
      border-radius: 999px;
      border: 1px solid rgba(103, 232, 249, 0.38);
      background: rgba(34, 211, 238, 0.12);
      color: #cffafe;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.3;
      white-space: nowrap;
      cursor: pointer;
    }

    body.ui-redesign .observer-panel-switch:hover {
      background: rgba(34, 211, 238, 0.22);
    }

    body.ui-redesign .observer-compare-actions .observer-panel-switch {
      height: 24px;
      padding: 0 10px;
    }

    /* ── 观察点对比面板 ── */
    body.ui-redesign .observer-compare[hidden] {
      display: none !important;
    }

    /* 默认占用「观察点实时读数」的位置（右栏顶部），两者只显示一个；宽度为读数卡的 1.36 倍。
       材质（玻璃底、边框、阴影、模糊）沿用 body.ui-redesign .hud-chip，与读数卡完全一致，这里不另设背景。 */
    body.ui-redesign .observer-compare {
      position: absolute;
      right: 24px;
      left: auto;
      top: var(--redesign-panel-top);
      z-index: 21;
      width: calc(var(--redesign-metrics-width) * 1.36);
      box-sizing: border-box;
      padding: 14px 12px 10px;
      border-radius: 20px;
      transform: scale(var(--redesign-metrics-scale));
      transform-origin: top right;
    }

    /* 英文地名、季节、表头都更长，面板略宽一些。 */
    body.model-locale-en.ui-redesign .observer-compare {
      width: calc(var(--redesign-metrics-width) * 1.5);
    }

    body.ui-redesign .observer-compare-header {
      padding-right: 110px;
      margin-bottom: 6px;
      user-select: none;
    }

    body.ui-redesign .observer-compare-actions {
      position: absolute;
      top: 10px;
      right: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    body.ui-redesign .observer-compare-action {
      width: 24px;
      height: 24px;
      padding: 0;
      font-size: 0.9rem;
    }

    body.ui-redesign .observer-compare-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }

    body.ui-redesign .observer-compare-toolbar-label {
      font-family: var(--font-body);
      font-size: 11px;
      color: rgba(165, 184, 212, 0.72);
      margin-right: 2px;
    }

    body.ui-redesign .observer-compare-combos {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    body.ui-redesign .observer-compare-combo,
    body.ui-redesign .observer-compare-tool,
    body.ui-redesign .observer-compare-tabs button,
    body.ui-redesign .observer-compare-place {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
      color: rgba(226, 232, 240, 0.86);
      font-family: var(--font-body);
      font-size: 12px;
      line-height: 1.25;
      cursor: pointer;
      white-space: nowrap;
    }

    body.ui-redesign .observer-compare-combo:hover,
    body.ui-redesign .observer-compare-tool:hover:not(:disabled),
    body.ui-redesign .observer-compare-tabs button:hover,
    body.ui-redesign .observer-compare-place:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.12);
    }

    body.ui-redesign .observer-compare-combo[aria-pressed="true"],
    body.ui-redesign .observer-compare-tool[aria-pressed="true"],
    body.ui-redesign .observer-compare-tool[aria-expanded="true"],
    body.ui-redesign .observer-compare-tabs button[aria-selected="true"] {
      border-color: rgba(103, 232, 249, 0.55);
      background: rgba(34, 211, 238, 0.18);
      color: #e0f7ff;
    }

    body.ui-redesign .observer-compare-tool:disabled,
    body.ui-redesign .observer-compare-place:disabled {
      opacity: 0.38;
      cursor: default;
    }

    body.ui-redesign .observer-compare-picker {
      margin-bottom: 8px;
      padding: 8px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.ui-redesign .observer-compare-picker[hidden] {
      display: none;
    }

    body.ui-redesign .observer-compare-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
    }

    body.ui-redesign .observer-compare-places {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    body.ui-redesign .observer-compare-coords {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      padding: 4px 2px;
      font-size: 17px;
    }

    body.ui-redesign .observer-compare-coords .observer-compare-coords-add {
      font-size: 13px;
    }

    body.ui-redesign .observer-compare-picker-note {
      flex-basis: 100%;
      font-family: var(--font-body);
      font-size: 11px;
      color: rgba(165, 184, 212, 0.72);
    }

    /* ── 对比卡片：像一块数据显示屏。每个地点一张卡，左侧色条对应地球上的图钉颜色。 ── */
    body.ui-redesign .observer-compare-list {
      display: grid;
      gap: 6px;
      font-family: var(--font-body);
      font-variant-numeric: tabular-nums;
      color: rgba(226, 232, 240, 0.94);
    }

    body.ui-redesign .oc-card {
      position: relative;
      padding: 8px 6px 8px 13px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
      overflow: hidden;
    }

    body.ui-redesign .oc-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--oc-color);
      box-shadow: 0 0 10px var(--oc-color);
    }

    body.ui-redesign .oc-card.is-primary {
      background: rgba(251, 113, 133, 0.08);
      border-color: rgba(251, 113, 133, 0.26);
    }

    body.ui-redesign .oc-card.is-compare {
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease;
    }

    body.ui-redesign .oc-card.is-compare:hover,
    body.ui-redesign .oc-card.is-compare:focus-visible {
      background: rgba(255, 255, 255, 0.09);
      border-color: rgba(255, 255, 255, 0.16);
      outline: none;
    }

    /* 卡片内部用网格对齐：地点列固定宽度，地方时紧跟在地点后面，太阳高度靠右。 */
    body.ui-redesign .oc-card {
      display: grid;
      grid-template-columns: var(--oc-name-width, 6em) auto auto minmax(0, 1fr) 16px;
      column-gap: 7px;
      align-items: center;
    }

    body.model-locale-en.ui-redesign .oc-card {
      --oc-name-width: 7.4em;
    }

    body.ui-redesign .oc-line {
      display: contents;
    }

    /* ① 地点 · 地方时 · 状态 ··· 太阳高度 × */
    body.ui-redesign .oc-name {
      grid-column: 1;
      min-width: 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.25;
      color: #f8fafc;
      overflow-wrap: anywhere;
    }

    body.ui-redesign .oc-tag {
      display: inline-block;
      margin-left: 5px;
      padding: 0 5px;
      border-radius: 6px;
      background: rgba(251, 113, 133, 0.24);
      color: #fecdd3;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
      vertical-align: 2px;
    }

    body.ui-redesign .oc-time {
      grid-column: 2;
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #f8fafc;
    }

    body.ui-redesign .oc-status {
      grid-column: 3;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 700;
    }

    body.ui-redesign .oc-status-icon {
      display: inline-flex;
      width: 18px;
      height: 18px;
    }

    body.ui-redesign .oc-status-icon svg {
      width: 100%;
      height: 100%;
    }

    body.ui-redesign .oc-status.is-day,
    body.ui-redesign .oc-status.is-polarDay {
      color: #fcd34d;
      filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.45));
    }

    body.ui-redesign .oc-status.is-night,
    body.ui-redesign .oc-status.is-polarNight {
      color: #a5b4fc;
    }

    body.ui-redesign .oc-status.is-sunrise,
    body.ui-redesign .oc-status.is-sunset {
      color: #fdba74;
      filter: drop-shadow(0 0 4px rgba(253, 186, 116, 0.4));
    }

    body.ui-redesign .oc-altitude {
      grid-column: 4;
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      justify-self: end;
      white-space: nowrap;
    }

    body.ui-redesign .oc-altitude-value {
      font-size: 16px;
      font-weight: 700;
      color: #f8fafc;
    }

    body.ui-redesign .oc-remove-spacer,
    body.ui-redesign .oc-card .observer-compare-remove {
      grid-column: 5;
    }

    body.ui-redesign .oc-card .observer-compare-remove {
      width: 16px;
      height: 18px;
      font-size: 14px;
    }

    /* ② 经纬度 · 区时（与上一行的地点、地方时对齐） */
    body.ui-redesign .oc-coords,
    body.ui-redesign .oc-zone {
      margin-top: 2px;
      font-size: 12px;
      color: rgba(165, 184, 212, 0.8);
      white-space: nowrap;
    }

    body.ui-redesign .oc-coords {
      grid-column: 1;
    }

    body.ui-redesign .oc-zone {
      grid-column: 2 / span 3;
    }

    /* ③ 季节 │ 昼长 │ 高度 │ 正午：排不下时自动折到下一行。 */
    body.ui-redesign .oc-stats {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      margin-top: 5px;
      padding-top: 5px;
      border-top: 1px dashed rgba(255, 255, 255, 0.08);
    }

    body.ui-redesign .oc-stat {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      white-space: nowrap;
    }

    body.ui-redesign .oc-stat-label {
      font-size: 11px;
      color: rgba(165, 184, 212, 0.7);
    }

    body.ui-redesign .oc-stat-value {
      font-size: 14px;
      font-weight: 600;
      color: rgba(241, 245, 249, 0.95);
    }

    body.ui-redesign .oc-season {
      align-items: center;
    }

    /* 日出、日落、极昼、极夜：第三行的醒目小标签。 */
    body.ui-redesign .oc-event {
      align-self: center;
      padding: 0 7px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.6;
    }

    body.ui-redesign .oc-event:empty {
      display: none;
    }

    body.ui-redesign .oc-event.is-sunrise,
    body.ui-redesign .oc-event.is-sunset {
      background: rgba(253, 186, 116, 0.16);
      color: #fdba74;
    }

    body.ui-redesign .oc-event.is-polarDay {
      background: rgba(252, 211, 77, 0.16);
      color: #fcd34d;
    }

    body.ui-redesign .oc-event.is-polarNight {
      background: rgba(165, 180, 252, 0.16);
      color: #c7d2fe;
    }

    body.ui-redesign .oc-season-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    body.ui-redesign .observer-compare-remove {
      width: 20px;
      height: 20px;
      padding: 0;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: rgba(203, 213, 225, 0.6);
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
    }

    body.ui-redesign .observer-compare-remove:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #f8fafc;
    }

    body.ui-redesign .observer-compare-empty,
    body.ui-redesign .observer-compare-note {
      margin-top: 6px;
      font-family: var(--font-body);
      font-size: 10.5px;
      color: rgba(165, 184, 212, 0.68);
    }

    body.ui-redesign .observer-compare-empty {
      font-size: 12px;
      color: rgba(226, 232, 240, 0.78);
    }

    body.ui-redesign .observer-compare-empty[hidden] {
      display: none;
    }

    /* 放大：仍固定在右上角，标题、组合、按钮保持原大小；只把地点卡片放大 20%，面板随之加宽 20%。 */
    body.ui-redesign .observer-compare.is-enlarged {
      width: calc(var(--redesign-metrics-width) * 1.36 * 1.2);
    }

    body.model-locale-en.ui-redesign .observer-compare.is-enlarged {
      width: calc(var(--redesign-metrics-width) * 1.5 * 1.2);
    }

    body.ui-redesign .observer-compare.is-enlarged .observer-compare-list {
      zoom: 1.2;
    }

    /* 「在地球上点选」模式：画布显示十字光标。 */
    .canvas-stage.is-picking-observer #canvas-container {
      cursor: crosshair;
    }

    /* 右上角放大按钮：平时半透明，悬停窗口时显出来（触屏上也始终可点）。 */
    body.ui-redesign .inset-window-enlarge {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 26px;
      height: 26px;
      padding: 0;
      font-size: 0.9rem;
      opacity: 0.55;
      cursor: pointer;
    }

    body.ui-redesign .inset-window:hover .inset-window-enlarge,
    body.ui-redesign .inset-window-enlarge:focus-visible,
    body.ui-redesign .inset-window.is-enlarged .inset-window-enlarge {
      opacity: 1;
    }

    /* 窗口内视角切换：只在放大时出现，平时用侧边栏的单选。 */
    body.ui-redesign .inset-window-views {
      display: none;
    }

    body.ui-redesign .inset-window.is-enlarged .inset-window-views {
      position: absolute;
      top: 12px;
      left: 14px;
      z-index: 2;
      display: flex;
      gap: 6px;
    }

    body.ui-redesign .inset-window-view {
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
      color: rgba(226, 232, 240, 0.82);
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.2;
      cursor: pointer;
    }

    body.ui-redesign .inset-window-view:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    body.ui-redesign .inset-window-view[aria-pressed="true"] {
      border-color: rgba(103, 232, 249, 0.55);
      background: rgba(34, 211, 238, 0.18);
      color: #e0f7ff;
    }

    /* 放大：宽高各为平时的 2 倍，默认在右下角、控制条上方；屏幕太矮时按可用高度收小。
       不压暗背景，放大时仍可拖动：拖动后的位置由 simulation.ts 写进 --inset-enlarged-left/top。 */
    body.ui-redesign .inset-window.is-enlarged {
      --inset-enlarged-size: min(
        calc(var(--redesign-metrics-width) * var(--redesign-metrics-scale) * 2),
        calc(100vh - 76px * var(--redesign-ui-scale) - 18px - 10px - 24px)
      );
      left: var(--inset-enlarged-left, auto) !important;
      top: var(--inset-enlarged-top, auto) !important;
      right: var(--inset-enlarged-right, 24px) !important;
      bottom: var(--inset-enlarged-bottom, calc(18px + 76px * var(--redesign-ui-scale) + 10px)) !important;
      z-index: 29;
      width: var(--inset-enlarged-size);
      height: var(--inset-enlarged-size);
      border-radius: 24px;
      background: rgba(15, 22, 36, 0.95);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
      transform: none !important;
      cursor: grab;
    }

    body.ui-redesign .inset-window.is-enlarged:active {
      cursor: grabbing;
    }

    body.ui-redesign .utility-info-panels {
      position: fixed;
      left: calc(24px + var(--redesign-sidebar-rendered-width) + var(--redesign-side-panel-gap));
      right: auto;
      top: var(--redesign-panel-top);
      z-index: 21;
      width: var(--redesign-info-panel-width);
      max-height: calc(100vh - 220px);
      display: grid;
      gap: 14px;
      overflow: auto;
      overscroll-behavior: contain;
      pointer-events: none;
      transition: left 0.24s ease, opacity 0.22s ease, transform 0.22s ease;
      transform: scale(var(--redesign-ui-scale));
      transform-origin: top left;
    }

    body.ui-redesign.sidebar-hidden .utility-info-panels {
      left: 54px;
    }

    body.ui-redesign .utility-info-panels .panel-card,
    /* 隐藏态必须重新声明 pointer-events:none：下面 body.ui-redesign .quiz-panel 的 pointer-events:auto
       优先级高于基础的 .quiz-panel.hidden，会把隐藏面板变成一块看不见却能吃掉点击的遮罩，
       正好压在底栏最右端的地轴倾斜滑块上（它锚在 right:24px / bottom:24px、z-index 25）。 */
    body.ui-redesign .quiz-panel.hidden {
      pointer-events: none;
    }

    body.ui-redesign .quiz-panel {
      pointer-events: auto;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.10), rgba(120, 150, 200, 0.04)),
        rgba(8, 13, 26, 0.55);
      box-shadow: 0 30px 70px rgba(2, 6, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(28px) saturate(140%);
      -webkit-backdrop-filter: blur(28px) saturate(140%);
    }

    body.ui-redesign .utility-info-panels .panel-card {
      margin-bottom: 0;
      padding: 18px;
    }

    body.ui-redesign .info-card-heading {
      position: relative;
      display: grid;
      gap: 3px;
      margin-bottom: 13px;
      padding-right: 34px;
    }

    body.ui-redesign .info-panel-close {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 26px;
      height: 26px;
    }

    body.ui-redesign .info-card-title {
      font-size: 14px;
      font-weight: 500;
      color: rgba(238, 245, 255, 0.95);
    }

    body.ui-redesign .utility-info-panels .katex-block {
      padding: 9px 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }

    body.ui-redesign .utility-info-panels .formula-kicker {
      margin: 4px 0 0;
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.22em;
      color: rgba(140, 195, 255, 0.75);
    }

    body.ui-redesign .utility-info-panels .goal-item {
      gap: 9px;
      margin-bottom: 9px;
      font-size: 12px;
      line-height: 1.65;
      color: rgba(205, 220, 243, 0.85);
    }

    body.ui-redesign .utility-info-panels .goal-item:last-child {
      margin-bottom: 0;
    }

    body.ui-redesign .utility-info-panels .goal-item input {
      width: 14px;
      height: 14px;
      margin-top: 2.5px;
      accent-color: #6db5f2;
    }

    body.ui-redesign .utility-info-panels .concept-list {
      gap: 9px;
      font-size: 12px;
      line-height: 1.65;
      color: rgba(205, 220, 243, 0.85);
    }

    body.ui-redesign .utility-info-panels [hidden] {
      display: none !important;
    }

    body.ui-redesign .quiz-panel {
      right: 24px;
      bottom: 24px;
      z-index: 25;
      width: min(400px, calc(100% - 48px));
      border-width: 1px;
      color: rgba(238, 245, 255, 0.94);
    }

    body.ui-redesign .quiz-header {
      align-items: flex-start;
      padding: 16px 18px 13px;
      border-bottom-color: rgba(255, 255, 255, 0.08);
      background: transparent;
    }

    body.ui-redesign .quiz-subtitle {
      margin-top: 7px;
      font-size: 11.5px;
      color: rgba(168, 186, 214, 0.6);
    }

    body.ui-redesign .quiz-content {
      padding: 14px 18px 18px;
      gap: 13px;
      background: transparent;
    }

    body.ui-redesign .question-card {
      padding: 0;
      background: transparent;
      border: 0;
    }

    body.ui-redesign .quiz-meta {
      margin-bottom: 10px;
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(150, 172, 205, 0.62);
    }

    body.ui-redesign #quiz-question {
      font-size: 13.5px;
      font-weight: 500;
      line-height: 1.6;
      color: rgba(235, 243, 255, 0.95);
    }

    body.ui-redesign .choice-row {
      gap: 8px;
      margin-top: 12px;
    }

    body.ui-redesign .choice-btn {
      padding: 10px 13px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.10);
      color: rgba(228, 237, 252, 0.92);
      font-size: 12.5px;
      line-height: 1.5;
    }

    body.ui-redesign .choice-btn:hover:not(:disabled) {
      background: rgba(120, 190, 255, 0.13);
      border-color: rgba(150, 205, 255, 0.30);
    }

    body.ui-redesign .choice-btn.correct,
    body.ui-redesign .choice-btn.correct:hover:not(:disabled) {
      background: rgba(52, 200, 120, 0.16);
      border-color: rgba(110, 230, 160, 0.35);
    }

    body.ui-redesign .choice-btn.wrong,
    body.ui-redesign .choice-btn.wrong:hover:not(:disabled) {
      background: rgba(239, 90, 90, 0.14);
      border-color: rgba(248, 130, 130, 0.32);
    }

    body.ui-redesign .quiz-result {
      margin-top: 10px;
      font-size: 12px;
      line-height: 1.65;
      color: rgba(190, 205, 228, 0.85);
    }

    body.ui-redesign .quiz-nav {
      gap: 10px;
    }

    body.ui-redesign .quiz-nav .pill {
      min-height: 34px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.13);
      color: rgba(215, 228, 248, 0.86);
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.01em;
    }

    body.ui-redesign .quiz-nav .pill:hover:not(:disabled) {
      background: rgba(120, 190, 255, 0.16);
      border-color: rgba(150, 205, 255, 0.32);
      color: rgba(232, 243, 255, 0.98);
      box-shadow: none;
    }

    body.ui-redesign .quiz-fab {
      right: 24px;
      bottom: 24px;
      width: 54px;
      height: 54px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      background:
        linear-gradient(155deg, rgba(148, 180, 225, 0.14), rgba(120, 150, 200, 0.06)),
        rgba(8, 13, 26, 0.6);
      box-shadow: 0 18px 44px rgba(2, 6, 18, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      backdrop-filter: blur(24px) saturate(140%);
      -webkit-backdrop-filter: blur(24px) saturate(140%);
    }

    body.ui-redesign .quiz-fab:hover {
      border-color: rgba(150, 205, 255, 0.40);
      box-shadow: 0 18px 44px rgba(2, 6, 18, 0.55), 0 0 24px rgba(110, 190, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    body.ui-redesign .copyright-note {
      z-index: 26;
    }

    @media (max-width: 1180px) {
      body.ui-redesign .nav-view-tabs {
        display: flex;
      }

      body.ui-redesign .brand-title {
        min-width: 0;
      }

      body.ui-redesign .view-pill {
        padding-inline: 14px;
      }

      body.ui-redesign .sidebar {
        transform-origin: top left;
      }

      body.ui-redesign .metrics-chip {
        transform-origin: top right;
      }
    }

    @media (max-width: 1000px) {
      body.ui-redesign .control-dock {
        gap: 8px;
        padding-inline: 14px;
      }

      body.ui-redesign .dock-motion {
        gap: 8px;
      }

      body.ui-redesign .motion-toggle-btn {
        width: 38px;
        height: 38px;
        min-height: 38px;
      }

      body.ui-redesign .motion-kicker {
        display: none;
      }

      body.ui-redesign .speed-step-btn {
        width: 23px;
      }

      body.ui-redesign .pill.motion-speed-step {
        min-width: 42px;
      }

      body.ui-redesign .dock-timeline {
        min-width: 180px;
      }

      body.ui-redesign .dock-tilt {
        flex-basis: 178px;
      }
    }

    @media (max-width: 820px) {
      body.ui-redesign .brand-title {
        min-width: 0;
        font-size: 0;
        gap: 0;
      }

      body.ui-redesign .brand-title .subtitle {
        display: none;
      }

      body.ui-redesign .view-pill {
        padding-inline: 10px;
        font-size: 11.5px;
      }

      body.ui-redesign .nav-actions {
        gap: 6px;
      }

      body.ui-redesign .nav-actions .btn {
        padding-inline: 9px;
      }

      body.ui-redesign .control-dock {
        width: calc(100% - 24px);
      }

      body.ui-redesign .dock-timeline {
        min-width: 175px;
      }

      body.ui-redesign .dock-timeline .season-jump-btn {
        padding-inline: 3px;
        font-size: 10px;
      }

      body.ui-redesign .dock-tilt {
        flex-basis: 160px;
      }

      body.ui-redesign .tilt-scale {
        font-size: 8px;
        letter-spacing: 0;
      }
    }

/* Line-height overrides retained from the previous Tailwind runtime build. */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

body.model-locale-en .about-wechat-contact {
  display: none;
}