:root {
      /* BEGIN JW_COPYRIGHT_CSS */
      --copyright-owner: "王俊辉 Jason Wong";
      --copyright-work-id: "ERR-JW-20260730-A001";
      --copyright-work-name: "Earth Rotation & Revolution";
      --copyright-year: "2026";
      --copyright-version: "v4.1.0";
      --copyright-license-id: "ERR-JW-2026-A073001-GENERAL";
      /* © 2026 王俊辉 Jason Wong. All rights reserved. | Earth Rotation & Revolution | ERR-JW-20260730-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;
      --font-display: "Inter", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
      --font-body: "Inter", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
      --font-mono: "JetBrains Mono", "Source Code Pro", 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.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%);
    }

    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 .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 {
      margin: 1px 0 4px;
      padding-left: 11px;
      border-left: 1px solid rgba(120, 170, 235, 0.28);
    }

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

    .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%;
      z-index: 26;
      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;
    }

    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;
    }

    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 7px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.25;
      color: rgba(178, 194, 220, 0.6);
      cursor: pointer;
      transition: color 0.18s ease, background 0.18s ease;
    }

    body.ui-redesign .dock-timeline .season-jump-btn::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -11px;
      width: 6px;
      height: 6px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(200, 216, 240, 0.45);
      transition: background 0.18s ease, box-shadow 0.18s ease;
    }

    body.ui-redesign .dock-timeline .season-jump-btn:hover {
      background: rgba(255, 255, 255, 0.07);
      border: 0;
      color: rgba(228, 240, 255, 0.96);
      box-shadow: none;
    }

    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.is-current {
      color: rgba(255, 224, 168, 0.96);
      font-weight: 500;
    }

    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);
    }

    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 .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,
    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-edition-free [data-feature-tier="premium"] {
  position: relative;
}

body.model-edition-free [data-feature-tier="premium"]::after {
  content: "PRO";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 14px;
  margin-left: auto;
  padding: 0 5px;
  border: 1px solid rgba(125, 211, 252, 0.38);
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.22);
  color: #bae6fd;
  font: 700 8px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  pointer-events: none;
}

body.model-edition-free #geometry-inset[data-feature-tier="premium"]::after,
body.model-edition-free #quiz-panel[data-feature-tier="premium"]::after {
  display: none;
}

body.model-edition-free .observer-location-row[data-feature-tier="premium"] {
  padding-right: 40px;
}

body.model-edition-free .observer-location-row[data-feature-tier="premium"]::after {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: 0;
  transform: translateY(-50%);
}

body.model-edition-free .observer-location-row[data-feature-tier="premium"] .observer-location-edit {
  display: none;
}

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

.model-upgrade-dialog[hidden] {
  display: none;
}

.model-upgrade-dialog {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 5, 16, 0.72);
  backdrop-filter: blur(12px);
}

.model-upgrade-dialog-card {
  width: min(480px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid rgba(125, 211, 252, 0.3);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(12, 25, 49, 0.98), rgba(3, 9, 24, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.06);
  color: #eaf6ff;
}

.model-upgrade-kicker {
  margin-bottom: 10px;
  color: #7dd3fc;
  font: 700 11px/1.2 system-ui, sans-serif;
  letter-spacing: 0.18em;
}

.model-upgrade-dialog-card h2 {
  margin: 0 0 10px;
  color: #f8fbff;
  font: 700 clamp(22px, 3vw, 30px)/1.15 system-ui, sans-serif;
}

.model-upgrade-dialog-card p {
  margin: 0;
  color: #b8c7dc;
  font: 400 15px/1.65 system-ui, sans-serif;
}

.model-upgrade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.model-upgrade-actions button {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #dceaf7;
  font: 650 13px/1 system-ui, sans-serif;
  cursor: pointer;
}

.model-upgrade-actions [data-upgrade-action] {
  border-color: rgba(56, 189, 248, 0.55);
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: white;
}