/* ==========================================================================
   codex-aether.css —— 法则 · 第〇章「以太」
   一整屏的"仪器"：画布在底，左下是讲解，右上是读数。类名统一 ae- 前缀。
   视觉语法见 docs/法则-设计简报.md 第二节：人是实体人影；以太是人身外的微粒；原核是胸口金色火种。
   ========================================================================== */

.ae-body { background: #05080b; }
.ae-body .foot { margin-top: 0; }

.ae-stage {
  position: relative; height: 100svh; min-height: 640px; overflow: hidden;
  background: radial-gradient(80% 70% at 42% 52%, #0b131a 0%, #070b0f 60%, #04070a 100%);
  user-select: none; -webkit-user-select: none;
}
.ae-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

/* ---------- 顶部：返回、章名、步骤点 ---------- */
.ae-top {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 96px; z-index: 2;
  display: flex; align-items: center; gap: 22px; pointer-events: none;
}
.ae-back, .ae-dots button { pointer-events: auto; }
.ae-back {
  font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--text-3);
  transition: color .3s var(--ease);
}
.ae-back::before { content: '←'; font-family: var(--latin); letter-spacing: 0; margin-right: 10px; }
.ae-back:hover { color: var(--text); }
.ae-chapter { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(159, 194, 212, .75); }
.ae-dots { display: flex; gap: 8px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.ae-dots button {
  width: 26px; height: 3px; border-radius: 2px; padding: 0;
  background: rgba(159, 194, 212, .18); transition: background .4s var(--ease), width .4s var(--ease);
}
.ae-dots button.is-done { background: rgba(159, 194, 212, .5); }
.ae-dots button.is-on { width: 44px; background: var(--ice); }

/* ---------- 右上：读数（像仪器上的表盘） ---------- */
.ae-meter {
  position: absolute; right: var(--gutter); top: 140px; z-index: 2; margin: 0;
  display: grid; gap: 14px; text-align: right;
}
.ae-meter div { display: grid; gap: 2px; }
.ae-meter dt { font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: var(--text-3); }
.ae-meter dd {
  margin: 0; font-family: var(--display-latin); font-size: 34px; font-weight: 400; line-height: 1.1;
  color: var(--ice); font-variant-numeric: lining-nums tabular-nums; transition: color .4s var(--ease);
}
.ae-meter dd.is-hot { color: #f0a46a; }
.ae-meter dd.is-word { font-family: var(--serif); font-size: 18px; letter-spacing: .14em; padding-top: 8px; } /* 文字类读数（如“自然带走”）不用大号数字体 */

.ae-meter[hidden], .ae-chips[hidden] { display: none; }

/* ---------- 选项（阶位、三条路） ---------- */
.ae-chips {
  position: absolute; right: var(--gutter); bottom: clamp(40px, 8vh, 80px); z-index: 2;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.ae-chip {
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(159, 194, 212, .22);
  font-family: var(--serif); font-size: 14px; letter-spacing: .14em; color: var(--frost);
  background: rgba(6, 10, 14, .6); transition: .35s var(--ease);
}
.ae-chip small { font-family: var(--display-latin); font-size: 14px; letter-spacing: .02em; margin-left: 8px; opacity: .75; }
.ae-chip:hover { border-color: rgba(220, 238, 246, .55); color: var(--ice); }
.ae-chip.is-on { border-color: var(--ice); color: #fff; background: rgba(159, 194, 212, .12); }

/* ---------- 左下：讲解 ---------- */
.ae-panel {
  position: absolute; left: var(--gutter); bottom: clamp(40px, 8vh, 80px); z-index: 2;
  width: min(500px, calc(100% - 2 * var(--gutter)));
  pointer-events: none;
}
.ae-panel > * { pointer-events: auto; }
.ae-no { font-family: var(--display-latin); font-style: italic; font-size: 17px; color: rgba(159, 194, 212, .7); margin-bottom: 8px; }
.ae-title {
  font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3vw, 44px); line-height: 1.3;
  letter-spacing: .1em; color: var(--ice); text-shadow: 0 0 30px rgba(5, 8, 11, .9);
  width: max-content; max-width: min(680px, calc(100vw - 2 * var(--gutter))); /* 标题可以比正文宽，避免单字落行 */
}
.ae-body-text { margin-top: 18px; }
.ae-body-text p {
  font-family: var(--serif); font-size: 16px; line-height: 2.05; letter-spacing: .04em;
  color: rgba(214, 226, 234, .82); text-shadow: 0 0 18px rgba(5, 8, 11, .95);
  text-wrap: pretty;
}
.ae-body-text p + p { margin-top: 8px; }
.ae-body-text b { font-weight: 500; color: var(--ice); }
.ae-hint {
  margin-top: 22px; min-height: 1.5em;
  font-family: var(--serif); font-size: 14px; letter-spacing: .24em; color: var(--aether);
  text-shadow: 0 0 14px rgba(111, 230, 216, .35);
  animation: ae-breathe 2.6s ease-in-out infinite;
}
.ae-hint.is-done { color: var(--text-3); text-shadow: none; animation: none; }
@keyframes ae-breathe { 50% { opacity: .55; } }
.ae-acts { display: flex; gap: 22px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.ae-act {
  padding: 4px 2px 10px; font-family: var(--serif); font-size: 15px; letter-spacing: .3em;
  color: var(--text-3); border-bottom: 1px solid rgba(159, 194, 212, .18);
  transition: color .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease);
}
.ae-act.is-main { color: var(--ice); border-bottom-color: rgba(236, 242, 246, .6); }
.ae-act.is-main:disabled { color: var(--text-4); border-bottom-color: rgba(159, 194, 212, .14); cursor: default; }
.ae-act:not(:disabled):hover { color: #fff; border-bottom-color: #fff; }
.ae-act.is-path { color: var(--ice); border-bottom-color: rgba(236, 242, 246, .45); }

/* 换步时讲解淡入 */
.ae-panel.is-swap .ae-title, .ae-panel.is-swap .ae-body-text { animation: ae-in .7s var(--out) both; }
.ae-panel.is-swap .ae-body-text { animation-delay: .08s; }
@keyframes ae-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 820px) {
  .ae-meter { top: 130px; }
  .ae-meter dd { font-size: 26px; }
  .ae-chips { left: var(--gutter); right: var(--gutter); bottom: auto; top: 220px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-hint { animation: none; }
  .ae-panel.is-swap .ae-title, .ae-panel.is-swap .ae-body-text { animation: none; }
}