/* ==================================================================
   CAPY-01 · 水豚一号机的个人小站
   莱茵生命式档案终端：整页光影渐变、极细分割线、小圆点索引、
   橙色单点强调；默认完整外观
   ================================================================== */

/* 英文 / 数字 Aber Mono（作者免费授权，已随项目打包）；中文思源黑体 */
@font-face { font-family: "Aber Mono"; src: url("fonts/Aber-Mono-Light.woff2") format("woff2"), url("fonts/Aber-Mono-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Aber Mono"; src: url("fonts/Aber-Mono-Regular.woff2") format("woff2"), url("fonts/Aber-Mono-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aber Mono"; src: url("fonts/Aber-Mono-Bold.woff2") format("woff2"), url("fonts/Aber-Mono-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --paper:    #e9e6e1;
  --paper-hi: #f8f6f3;
  --ink:      #24211d;
  --ink-2:    #4a4641;
  /* 次要文字色：原来太贴近底色（毛玻璃块上 --mute 只有 3.1:1、--mute-2 只有 1.9:1），
     现在 --mute ≈ 4.1:1、--mute-2 ≈ 3.2:1，波轮里没选中的项也不用再靠 opacity 压暗 */
  --mute:     #6b665f;
  --mute-2:   #7f7970;
  --line:     rgba(36, 33, 29, 0.13);
  --line-2:   rgba(36, 33, 29, 0.30);
  --accent:   #c2551e;
  --page-bg:  radial-gradient(150% 120% at 28% 10%, #faf8f6 0%, #edeae5 38%, #dedad4 72%, #d2cdc6 100%);
  /* 三档阶梯：背景 → 卡片 → 操控台。卡片压得很轻（≈背景与台面的中间值），
     台面更实更深，这样从上到下是"一次比一次沉"，而不是两块各调各的颜色。 */
  --glass-tint: rgba(104, 94, 78, 0.055);
  --console-tint: rgba(104, 94, 78, 0.15);
  /* 那三条细线：浅色主题用"深一点"，深色主题必须用"亮一点"
     （深色下用同一支深墨线，压在同样深的背景上等于看不见） */
  --hairline: rgba(36, 33, 29, 0.20);
  /* 操控台顶边那条 1px 高光：浅色下是一点点"车边"，深色下必须压到很淡，
     否则它比细线还亮，底下两条线会显得扎眼 */
  --console-bevel: rgba(255, 252, 246, 0.55);
  --font: "Aber Mono", "Noto Sans SC", "Source Han Sans SC", "思源黑体", "PingFang SC", "Microsoft YaHei", sans-serif;
  --caps: 0.18em;
}

html[data-theme="dark"] {
  --paper:    #171512;
  --paper-hi: #232019;
  --ink:      #ece8e2;
  --ink-2:    #c6c1b9;
  --mute:     #a49d93;
  --mute-2:   #7f7a72;
  --line:     rgba(236, 232, 226, 0.15);
  --line-2:   rgba(236, 232, 226, 0.32);
  --accent:   #e07a3c;
  --page-bg:  radial-gradient(150% 120% at 28% 10%, #2a2621 0%, #1d1a17 40%, #141210 74%, #0c0b0a 100%);
  --glass-tint: rgba(0, 0, 0, 0.06);
  --console-tint: rgba(0, 0, 0, 0.30);
  --hairline: rgba(236, 232, 226, 0.16);
  --console-bevel: rgba(255, 252, 246, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

.caps {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--mute);
}

.rl-app {
  position: relative;
  isolation: isolate;        /* 让画布层能待在"页面背景之上、所有 UI 之下" */
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  /* 边距同时存成变量：毛玻璃那几块要往外"出血"到屏幕边缘时要用 */
  --pad-x: clamp(34px, 5vw, 150px);
  /* 顶上那条压线离窗口顶太近会显得挤：留 20px */
  --pad-t: 20px;
  /* 下内边距归 0：底下那两块要按黄金分割分配（底栏 60 / 页脚条 37），
     页脚条自己撑满到底，文字才正好居中 */
  --pad-b: 0px;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  background: var(--page-bg);
}

/* ---------------------------------------------------------- 顶栏 */

.rl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* 顶栏上面补一条细线：底栏是"两条线夹着"，上面这样才不空 */
  border-top: 1px solid var(--line);
  padding: 21px 0 8px;          /* 线下面多留一点，品牌字不贴着线 */
}

.rl-brand-name { font-size: 29px; font-weight: 300; letter-spacing: 0.10em; line-height: 1; }
.rl-brand-name i { font-style: normal; display: inline-block; }
.rl-brand-name i + i { margin-left: 0.42em; }
.rl-brand-cn { margin-top: 3px; font-size: 15px; letter-spacing: 0.14em; color: var(--ink-2); }

.rl-head-right { display: flex; align-items: center; }

.rl-nav { display: flex; align-items: center; }
.rl-nav-btn {
  position: relative;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--mute);
  padding: 3px 16px;
  transition: color 0.16s;
}
.rl-nav-btn:hover { color: var(--ink); }
.rl-nav-btn.is-on { color: var(--ink); cursor: default; }
.rl-nav-btn.is-on::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: -3px;
  height: 1px;
  background: var(--ink);
}
.rl-nav-sep { width: 1px; height: 12px; background: var(--line-2); }

.rl-theme {
  margin-left: 16px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--mute);
  border: 1px solid var(--line);
  transition: color 0.16s, border-color 0.16s;
}
.rl-theme:hover { color: var(--ink); border-color: var(--line-2); }
.rl-theme svg { display: block; }
html[data-theme="light"] .rl-theme .ico-moon { display: none; }
html[data-theme="dark"]  .rl-theme .ico-sun  { display: none; }

/* ---------------------------------------------------------- 主区 */

.rl-main {
  display: grid;
  /* 右栏不再顶到窗口右边：整块往左推 8%，模型和菜单一起更靠中间，
     模型与菜单之间的空档也跟着小一截；右栏下限 320px，窄屏不会挤成一条 */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 28%);
  gap: 0 40px;
  padding-right: 10%;
  min-height: 0;
}

.rl-stage { position: relative; min-height: 0; }
.rl-canvas { position: absolute; inset: 0; }
.rl-labels { position: absolute; inset: 0; pointer-events: none; }

.cm-label {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 8px 2px;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--paper-hi) 88%, transparent);
  white-space: nowrap; font-size: 10.5px; letter-spacing: 0.06em;
}
.cm-label::before { content: ""; width: 4px; height: 4px; background: var(--mute); }
.cm-label-en { font-size: 9px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--mute); }
.cm-label.is-active { border-color: var(--accent); color: var(--accent); }
.cm-label.is-active::before { background: var(--accent); }

.rl-tooltip {
  position: absolute; left: 0; top: 0; display: none;
  max-width: 250px; padding: 6px 10px;
  background: var(--ink); color: var(--paper-hi);
  font-size: 11.5px; pointer-events: none;
}

.rl-detail {
  /* 位置由 JS 算：贴着被点中的零件放，左右自动翻边，并保持在台面内 */
  position: absolute; left: 0; top: 0;
  width: 320px; padding: 14px 16px 15px;
  background: color-mix(in srgb, var(--paper-hi) 94%, transparent);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(6px);
  display: none;
}
.rl-detail.is-on { display: block; }

/* 读数卡 → 零件 的引线（细线 + 零件上的小点） */
.rl-leader {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  opacity: 0; transition: opacity 0.18s ease;
}
.rl-leader.is-on { opacity: 1; }
.rl-leader polyline { fill: none; stroke: var(--line-2); stroke-width: 1; }
.rl-leader circle { fill: var(--accent); }
/* 卡片标题行兼作拖动手柄 */
.cm-detail-head {
  display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.rl-detail.is-pinned .cm-detail-head { cursor: grabbing; }
.rl-detail.is-pinned { box-shadow: 0 10px 28px rgba(0,0,0,0.10); }
.cm-detail-code { font-size: 10px; font-weight: 400; letter-spacing: var(--caps); text-transform: uppercase; color: var(--accent); }
.cm-detail-name { font-size: 14.5px; letter-spacing: 0.04em; }
.cm-detail-en { font-size: 9.5px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--mute); }
.cm-detail-close { margin-left: auto; font-size: 15px; line-height: 1; color: var(--mute); }
.cm-detail-close:hover { color: var(--ink); }
/* 读数卡「展开 / 收起」按钮：只在手机出现（桌面端卡片本来就完整显示） */
.cm-detail-more {
  display: none;                 /* ≤600px 那一档才放出来 */
  font-size: 10px; line-height: 1;
  letter-spacing: 0.08em; color: var(--accent);
  padding: 2px 0;
}
.cm-detail-more:hover { color: var(--ink); }
.cm-detail-more[aria-expanded="true"] { color: var(--ink); }
.cm-detail-desc { margin: 10px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.cm-specs { list-style: none; margin: 10px 0 0; padding: 0; }
.cm-specs li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; }
.cm-specs .cm-k { color: var(--mute); }
.cm-specs li b { font-weight: 400; color: var(--ink); }

/* ---------------------------------------------------------- 右栏 */

.rl-info {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(16px, 1.6vw, 40px) 0 0;
}

.rl-menu-title { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: 0.10em; }
.rl-rule { height: 1px; background: var(--line-2); border: 0; margin: 18px 0 24px; }

/* 第一层：左 = 当前模块提示，右 = 模块波轮 */
.rl-layer-1 {
  display: grid;
  /* 读数列跟着窗口缩：窗口一窄就把宽度让给右边的模块波轮，
     否则 1400 上下波轮只剩 140px，模块名会被挤掉 */
  grid-template-columns: clamp(110px, 8.6vw, 138px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.rl-now-kicker { font-size: 10.5px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--mute); }
.rl-now-name { margin-top: 12px; font-size: clamp(16px, 1.15vw, 19px); letter-spacing: 0.08em; }
.rl-now-en { margin-top: 6px; font-size: 10px; font-weight: 300; letter-spacing: var(--caps); text-transform: uppercase; color: var(--mute); }
.rl-now-code { margin-top: 16px; font-size: 10px; font-weight: 400; letter-spacing: 0.22em; color: var(--accent); }

.wheel-v {
  display: flex; flex-direction: column; align-items: stretch;
  height: 172px;
  padding: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x;
}
.wheel-v::-webkit-scrollbar { display: none; }
.wheel-v.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wheel-v .wheel-item {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  scroll-snap-align: center;
  padding: 6px 0;
  /* 不再靠 opacity 把没选中的项压到看不清：用颜色分层（未选中 --mute / 居中 --ink / 选中橙色） */
  color: var(--mute);
  transition: color 0.2s ease;
}
.wheel-v .wheel-item b { font-weight: 400; font-size: 14px; letter-spacing: 0.04em; }
.wheel-v .wheel-item i, .wheel-v .wheel-item em { font-style: normal; font-size: 9.5px; font-weight: 400; letter-spacing: 0.10em; color: var(--mute-2); }
.wheel-v .wheel-item u { display: block; width: 8px; height: 8px; border: 1px solid var(--mute-2); border-radius: 50%; text-decoration: none; }
.wheel-v .wheel-item:hover { color: var(--ink-2); }
.wheel-v .wheel-item.is-center { color: var(--ink); }
.wheel-v .wheel-item.is-active { color: var(--accent); }
.wheel-v .wheel-item.is-active u { background: var(--accent); border-color: var(--accent); }
.wheel-v .wheel-item.is-active em { color: var(--accent); }

/* 第二层：剖面 / 分解 / 转速 一行三列 */
.rl-layer-2 {
  margin-top: 40px;
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.rl-slider-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px; letter-spacing: var(--caps); text-transform: uppercase; color: var(--mute);
  padding-bottom: 10px;
}
.rl-slider-label b { color: var(--ink-2); font-weight: 400; letter-spacing: 0.06em; }
.rl-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 14px; background: none; }
.rl-range::-webkit-slider-runnable-track { height: 1px; background: var(--line-2); }
.rl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3.5px; background: var(--ink); }
.rl-range:hover::-webkit-slider-thumb { background: var(--accent); }
.rl-range::-moz-range-track { height: 1px; background: var(--line-2); }
.rl-range::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 0; background: var(--ink); }

/* ---------------------------------------------------------- 底栏 */

.rl-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 26px;
  /* 上下留白撑到 60px 高，和页脚条 37px 配成 ≈1.618（黄金分割） */
  padding: 14px 0 12px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}

/* 左下：只写月 / 日，09/21 的样子，月份比日期高一点 */
.rl-date { position: relative; top: 2px; display: flex; align-items: baseline; gap: 1px; flex: 0 0 auto; }
/* 月与日同样大小，用 / 分隔；左边（月）高一点、右边（日）低一点 */
.rl-date b { font-size: 21px; font-weight: 300; letter-spacing: 0.04em; line-height: 1; color: var(--ink-2); }
.rl-date i { font-style: normal; font-size: 17px; font-weight: 300; color: var(--mute-2); margin: 0 2px; }
.rl-date #rl-date-month { position: relative; top: -3px; }
.rl-date .rl-date-today { position: relative; top: 2px; color: var(--accent); }
/* 中间：三组波轮，标签在上、波轮在下，组间细分隔线 */
.rl-wheels { display: flex; align-items: flex-start; flex: 1 1 auto; justify-content: center; min-width: 0; }
.rl-wheel-group { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 26px; }
.rl-wheel-group + .rl-wheel-group { border-left: 1px solid var(--line); }
.rl-wheel-head { display: none; }
.rl-wheel-wrap { position: relative; padding-top: 7px; }
.rl-caret {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 6px solid var(--accent);
  opacity: 0.85;
}

.wheel {
  display: flex; align-items: center; gap: 4px;
  width: 196px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.wheel::-webkit-scrollbar { display: none; }
.wheel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
/* 自动滚动到选中项时关掉吸附，免得动画和 snap 互相拉扯 */
.wheel.is-animating, .wheel-v.is-animating { scroll-snap-type: none; }
/* 波轮位置是 JS 量出来的（还跟字体加载有关），量准之前先藏起来，
   否则首帧会看到"停在列表开头 → 再跳到位"的闪动 */
.wheel, .wheel-v { visibility: hidden; }
html[data-wheels="ready"] .wheel, html[data-wheels="ready"] .wheel-v { visibility: visible; }
.wheel-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 3px 10px; white-space: nowrap;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--mute);
  transition: color 0.2s ease;
}
.wheel-item:hover { color: var(--ink-2); }
.wheel-item.is-center { color: var(--ink-2); }
.wheel-item.is-active { color: var(--accent); }

/* 右下：参数 + 运转 + 复位 */
.rl-foot-right { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.rl-telemetry { display: flex; gap: 16px; }
.rl-telemetry span { font-size: 11px; }
.rl-telemetry b { font-weight: 400; color: var(--ink-2); }
.rl-run {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 5.4em; gap: 7px;
  padding: 4px 12px 3px;
  background: var(--ink); color: var(--paper-hi);
  font-size: 12.5px; letter-spacing: 0.10em;
}
.rl-run::before {
  content: ""; width: 8px; height: 8px; background: currentColor;
  clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 0 0, 68% 0, 100% 0, 100% 100%, 68% 100%, 68% 0);
}
.rl-run:not(.is-active)::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rl-reset {
  font-size: 11.5px; font-weight: 300; letter-spacing: var(--caps); text-transform: uppercase;
  color: var(--mute); padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color 0.16s, border-color 0.16s;
}
.rl-reset:hover { color: var(--ink); border-color: var(--line-2); }

/* ---------------------------------------------------------- 最底一行 */

.rl-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.rl-credit { display: flex; align-items: center; gap: 18px; }

.rl-beian { display: flex; align-items: center; gap: 12px; }
.rl-beian a { display: inline-flex; align-items: center; gap: 5px; }
.rl-beian img { width: 14px; height: 14px; display: block; opacity: 0.8; }
.rl-beian, .rl-beian a { font-size: 10.5px; font-weight: 300; letter-spacing: 0.06em; color: var(--mute-2); }
.rl-beian a:hover { color: var(--ink); }

/* ---------------------------------------------------------- 窄屏 */

@media (max-width: 1180px) {
  html, body { overflow: auto; }
  .rl-app { height: auto; min-height: 100dvh; padding: 18px 20px 12px; }
  .rl-main { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 44vh) auto; gap: 0; padding-right: 0; }
  .rl-info { padding: 26px 0 8px; }
  .rl-now-name { font-size: 19px; }
  .rl-layer-1 { grid-template-columns: 170px minmax(0, 1fr); gap: 26px; }
  /* 窄屏/竖屏：竖向模块波轮从 172px 压到 132px（约 4 行），别把手机屏当桌面用 */
  .wheel-v { height: 132px; }
  /* 底栏改两行：第一行 日期 …… 参数/运转/复位，第二行三组波轮各占一格。
     以前是 flex-wrap，窄一点（约 700px 以下）第三组波轮会被挤到第二行，
     三组各分一半宽 —— 竖屏/窄窗口下就是"下面菜单分成两行"。 */
  .rl-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
  }
  .rl-date { grid-column: 1; grid-row: 1; }
  .rl-foot-right { grid-column: 2; grid-row: 1; }
  .rl-wheels { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; min-width: 0; }
  /* align-items: stretch 让波轮跟着组宽走（基类是 column + center，会按 max-content 撑开） */
  .rl-wheel-group { flex: 1 1 0; min-width: 0; padding: 0 10px; align-items: stretch; }
  .rl-wheel-group:first-child { padding-left: 0; }
  .rl-wheel-group:last-child { padding-right: 0; }
  .wheel { width: 100%; }
  .rl-head-right { flex-wrap: wrap; }
}

/* 循环接缝：只留一段空白，不画线（竖向模块波轮用） */
/* ---------------------------------------------------------- 竖屏（≤1180 且竖向） */
/* 页脚：提示语单独一行，站名 + 两个备案另起一行 */
@media (orientation: portrait) and (max-width: 1180px) {
  .rl-strip { flex-direction: column; align-items: flex-start; gap: 7px; }
  .rl-strip > .caps { font-size: 10px; letter-spacing: 0.06em; }
  .rl-credit { flex-wrap: wrap; gap: 6px 14px; }
  .rl-beian { flex-wrap: wrap; gap: 6px 12px; }
}

.wheel-v .wheel-sep { flex: 0 0 auto; height: 42px; }

/* ---------------------------------------------------------- 手机（≤600px） */
/* 这一整块只在手机宽度下生效，≥601px（含所有电脑端）一条都不会命中 */

@media (max-width: 600px) {
  .rl-app { padding: 14px 16px 10px; }

  /* 顶栏分两行：第一行品牌，第二行 导航 …… 明暗 */
  .rl-head { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 10px; }
  .rl-brand-name { font-size: 22px; letter-spacing: 0.06em; }
  .rl-brand-cn { margin-top: 6px; font-size: 12.5px; letter-spacing: 0.12em; }
  .rl-head-right { justify-content: space-between; flex-wrap: nowrap; }
  .rl-nav-btn { padding: 3px 12px; font-size: 12.5px; }
  .rl-nav-btn:first-child { padding-left: 0; }
  .rl-theme { margin-left: 0; width: 26px; height: 26px; }

  /* 模型区高一点，菜单压下来 */
  .rl-main { grid-template-columns: 1fr; grid-template-rows: minmax(230px, 50vh) auto; gap: 0; }
  .rl-info { padding: 20px 0 4px; }
  .rl-menu-title { font-size: 22px; letter-spacing: 0.06em; }
  .rl-rule { margin: 13px 0 16px; }

  /* 第一层：读数一行（整机概览 OVERVIEW SYS-00），模块波轮一行 */
  .rl-layer-1 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rl-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
  .rl-now-kicker { width: 100%; }
  .rl-now-name { margin-top: 2px; font-size: 17px; letter-spacing: 0.06em; }
  .rl-now-en, .rl-now-code { margin-top: 0; }
  /* 手机：再压到 108px（约 3~4 行），移动端纵向空间优先让给模型和滑块 */
  .wheel-v { height: 108px; margin-top: 10px; }
  .wheel-v .wheel-item { padding: 5px 0; }
  .wheel-v .wheel-item b { text-align: left; }

  /* 第二层：三个滑块挤一挤 */
  .rl-layer-2 { margin-top: 22px; gap: 12px; }
  .rl-slider-label { font-size: 10px; letter-spacing: 0.06em; padding-bottom: 8px; }

  /* 底栏：第一行 日期 …… 运转中 / 复位，第二行 三组波轮
     用 grid 而不是 flex-wrap：flex 的 wrap + flex-basis:100% 会把父级的
     min-content 撑到所有波轮项之和（一整页横向溢出），grid 的轨道不会。 */
  .rl-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
    padding: 10px 0 8px;
  }
  .rl-date { grid-column: 1; grid-row: 1; }
  .rl-foot-right { grid-column: 2; grid-row: 1; gap: 12px; }
  .rl-telemetry { display: none; }
  .rl-run { min-width: 0; padding: 4px 10px 3px; font-size: 12px; }
  .rl-wheels { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; min-width: 0; }
  /* align-items: stretch 很关键：基类是 column + align-items:center，
     子项会按 max-content 撑开（波轮变成 899px 宽），改成 stretch 才会跟着组宽走 */
  .rl-wheel-group { flex: 1 1 0; min-width: 0; padding: 0 8px; align-items: stretch; }
  .rl-wheel-group:first-child { padding-left: 0; }
  .rl-wheel-group:last-child { padding-right: 0; }
  .wheel { width: 100%; }
  .wheel-item { padding: 3px 6px; font-size: 12.5px; }

  /* 最底一行：提示 → 站名 → 备案，竖着排 */
  .rl-strip { flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 8px; }
  .rl-strip > .caps { font-size: 10px; letter-spacing: 0.06em; }
  .rl-credit { flex-wrap: wrap; gap: 6px 14px; }
  .rl-beian { flex-wrap: wrap; gap: 6px 12px; }

  /* 零件读数卡：手机上不做锚定 —— 贴底通栏、**钉死在屏幕这一条**上，
     默认只占一小块（模型能看的面积优先），点「展开」才放开全部内容。 */
  .rl-detail {
    width: auto; left: 2px; right: 2px; top: auto; bottom: 2px;
    padding: 10px 12px 11px;
    /* 收起态不给 max-height：内容被 line-clamp / nth-child 砍过之后高度是固定的
       （标题 + 两行说明 + 两条规格），再压一个百分比反而会在矮屏上把最后一行切一半 */
    overflow: hidden;
    touch-action: pan-y;
  }
  .rl-detail.is-expanded { max-height: 62%; overflow-y: auto; }
  /* 收起态只留 标题 + 两行说明 + 前两条规格 */
  .rl-detail:not(.is-expanded) .cm-detail-desc {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .rl-detail:not(.is-expanded) .cm-specs li:nth-child(n + 3) { display: none; }
  /* 标题行压成一行：名字不换行（长名字省略号收尾），「展开」「×」排到最右 */
  .cm-detail-head { gap: 7px; padding-bottom: 7px; }
  .cm-detail-name { font-size: 14px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .cm-detail-more { display: block; margin-left: auto; }
  .cm-detail-close { margin-left: 10px; }
  .cm-specs li { padding: 4px 0; }
  .rl-leader { display: none; }
  .cm-detail-desc { font-size: 12px; line-height: 1.7; }
}

/* ---------------------------------------------------------- 整页画布（≥1181px） */
/* 模型能到的区域从"左栏舞台"放大成整页：再放大也不会被硬边切断。
   顶栏 / 底栏 / 页脚条**恢复成以前的样子**：就是整页背景本身，实心、带自己的细线。
   做法不是拿底色去盖，而是把画布裁掉——画布只画"顶栏下沿 → 底栏上沿"这一条带
   （`--clip-t` / `--clip-b` 由 JS 量好写进来），模型根本没机会跑到横栏底下去。
   右栏是常驻毛玻璃，玻璃只框住中间那一块内容（`.rl-info-inner`），左右多铺 46px、上下 12px，
   直角不羽化；面板颜色一律走暖色，且做成三档阶梯：背景 → 卡片（`--glass-tint` + 纸色雾面）
   → 操控台（`--console-tint`，更实更深）。不用中性灰/黑去压 —— 那样会发脏。 */

@media (min-width: 1181px) {
  /* 画布层铺满整页；顶栏/右栏/底栏在 DOM 里排在它后面，自然盖在上面 */
  /* z-index:-1 让它落在 .rl-app 这个层叠上下文的最底部：
     在整页背景之上、在顶栏/右栏/底栏之下 */
  .rl-stage { position: fixed; inset: 0; z-index: -1; }
  /* clip-path 只影响绘制，不改命中框，所以取景偏移、camScale、读数卡坐标全都照旧 */
  .rl-stage { clip-path: inset(var(--clip-t, 0px) 0 var(--clip-b, 100px) 0); }
  .rl-main { position: relative; z-index: 1; }
  .rl-head, .rl-foot, .rl-strip { position: relative; z-index: 2; }
  /* 舞台脱离文档流之后，右栏要显式放回第二列；position:relative 让毛玻璃伪元素贴着面板本身 */
  .rl-info { position: relative; grid-column: 2; }

  /* 顶栏：**完全透明**。上面只有"CAPY ALPHA / 水豚一号机"两行字，不配一条横栏；
     画布一直画到窗口最上面（`updateStageClip()` 里 `--clip-t = 0`），
     放大时模型从顶部压下来，字就浮在模型上。 */

  /* 下面两条：**操控台**质感 —— 铺一层近乎不透明的纸色（不再让整页渐变透上来），
     顶边一条极细高光、整体往上投一圈淡影，把它从画布里托起来。 */
  .rl-foot::before, .rl-strip::before {
    content: "";
    position: absolute; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(var(--console-tint), var(--console-tint)),
      linear-gradient(color-mix(in srgb, var(--paper) 94%, transparent),
                      color-mix(in srgb, var(--paper) 94%, transparent));
    box-shadow: inset 0 1px 0 var(--console-bevel);
  }
  /* -1px：连自己那 1px 上边框一起铺。底栏这条线就压在画布裁剪线上（画布到这儿为止），
     上面那 12px 的 margin-top 留给画布，底栏不再被顶上去。 */
  .rl-foot::before {
    inset: -1px calc(var(--pad-x) * -1) 0;
    box-shadow: inset 0 1px 0 var(--console-bevel),
                0 -12px 26px -16px rgba(36, 33, 29, 0.28);
  }
  .rl-strip::before { inset: -1px calc(var(--pad-x) * -1) calc((var(--pad-b) + 4px) * -1); }

  /* 细线得另画一层：`::before` 是 z-index:-1，层叠顺序排在"元素自己的背景/边框"之后，
     会把 border-top 整条盖掉（看着就是"线没了"）。所以边框留成透明只为撑版式，
     线用 `::after` 画在底色之上。
     三条线都铺到**窗口左右边**（-pad-x）：一是和操控台的台面同宽，二是必须盖住
     `::before` 那条 `inset 0 1px 0` 的顶边高光 —— 高光只铺中间会被看见，
     线两端就会各留一小截亮底（踩过这个坑）。 */
  .rl-head, .rl-foot, .rl-strip { border-top-color: transparent; }
  .rl-head::after, .rl-foot::after, .rl-strip::after {
    content: "";
    position: absolute; z-index: 1; pointer-events: none;
    left: calc(var(--pad-x) * -1); right: calc(var(--pad-x) * -1);
    height: 1px;
    background: var(--hairline);
  }
  .rl-head::after { top: -1px; }     /* 顶栏：透明之后只留这一条压线平衡视觉 */
  .rl-foot::after { top: -1px; }     /* 底栏：压在画布下沿（就是操控台的顶边） */
  .rl-strip::after { top: -1px; }    /* 页脚条：操控台中间那条分隔线 */

  /* 底下这两条线夹出的两块要一样高：
       上面那块 = 底栏自己的盒子 48px；
       下面那块 = 页脚条 36px + `.rl-app` 的 12px 下内边距 = 48px。
     所以页脚条固定 36px（内容垂直居中），字跟着放大一档。 */
  /* 视觉上的"下面那块"= 页脚条 36px + `.rl-app` 的 12px 下内边距，
     而 `align-items:center` 只会在页脚条自己的内容盒里居中，
     所以补 12px 上内边距，文字才是整块的正中 */
  /* 页脚条 = 37px（`.rl-app` 下内边距已经是 0，所以这一块就是 37px），
     文字靠 align-items:center 正好居中；配底栏 60px ≈ 黄金分割 */
  .rl-strip { min-height: 37px; padding-top: 0; }
  .rl-strip > .caps { font-size: 12px; letter-spacing: 0.08em; }
  .rl-beian, .rl-beian a { font-size: 12px; }
  .rl-beian img { width: 15px; height: 15px; }

  /* 右栏毛玻璃：贴在面板内层（= 中间那一块内容）上。四边留白是
     上 32px / 左右 68px / 下 44px —— 侧边明显大于上下，下面又比上面多一截。
     底色 = 和横栏同一层暖色 + 一层纸色雾面（55%），所以卡片和上下菜单同色；
     两层都写成 gradient，别用"裸的变量色 + color-mix"那种两层背景（Chrome 会整条判非法） */
  .rl-info-inner { position: relative; }
  /* 投影必须单独放一层：`.rl-info-inner::before` 带 mask（羽化），
     而 mask 会把"画在盒子外面"的 box-shadow 整块裁掉 —— 写在那儿等于没有。
     所以用 ::after（z-index:-2，压在玻璃下面）专门投一圈影子。 */
  .rl-info-inner::after {
    content: "";
    /* 比玻璃层（::before）**内缩 6px**：box-shadow 只画在盒子外面，
       这样影子才会盖到玻璃那圈 4px 羽化带上。否则羽化最外圈淡到透明、
       透出比卡片更亮的背景，边上就是一道白缝（投影一加就被衬出来）。
       再叠一层往下偏的投影，才有"浮起来"的感觉。 */
    position: absolute; inset: -32px -68px -44px; z-index: -2; pointer-events: none;
    /* 强度取"背景(0) ↔ 操控台投影(-18)"之间的一半左右，并且跟台面一样铺得开、够柔 */
    box-shadow: 0 0 26px -6px rgba(36, 33, 29, 0.10),
                0 12px 32px -14px rgba(36, 33, 29, 0.16);
  }
  .rl-info-inner::before {
    content: "";
    position: absolute; inset: -32px -68px -44px; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(var(--glass-tint), var(--glass-tint)),
      linear-gradient(color-mix(in srgb, var(--paper) 55%, transparent),
                      color-mix(in srgb, var(--paper) 55%, transparent));
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
  }
}