/* 3D 互动场景公共样式:深色画布 + 右侧说明面板 */
:root {
  color-scheme: dark;
  --bg: #070a12;
  --panel: #0e1320;
  --panel-2: #151c2e;
  --line: #243049;
  --text: #e6ecf8;
  --muted: #8d9bb8;
  --accent: #4dd0e1;
  --warm: #ffd166;
  --hot: #ff7a59;
  --ok: #5fd39a;
  --bad: #ff6b81;
  --panel-w: 372px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }

.app { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); height: 100vh; height: 100dvh; }
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.stage canvas { display: block; touch-action: none; }

.topbar { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; z-index: 5; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.back { color: var(--muted); text-decoration: none; font-size: 13px; padding: 6px 10px; border-radius: 8px;
  background: rgba(14, 19, 32, .75); border: 1px solid var(--line); }
.back:hover { color: var(--text); }
.tabs { display: flex; gap: 6px; background: rgba(14, 19, 32, .75); border: 1px solid var(--line);
  border-radius: 12px; padding: 4px; }
.tab { appearance: none; border: 0; background: transparent; color: var(--muted); padding: 7px 14px;
  border-radius: 8px; font: inherit; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.hint { position: absolute; left: 16px; bottom: 12px; color: var(--muted); font-size: 12px; z-index: 5;
  pointer-events: none; }

.panel { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 18px 18px 28px; }
.panel[hidden], .mode-panel[hidden] { display: none; }
.panel h2 { margin: 0 0 4px; font-size: 18px; }
.panel .sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.sec { margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sec h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.note { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.note.src { font-size: 12px; border-left: 2px solid var(--line); padding-left: 10px; }
.note.warn { color: var(--warm); }

.btn { appearance: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  padding: 7px 12px; border-radius: 8px; font: inherit; cursor: pointer; margin: 0 6px 6px 0; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible, .seg-btn:focus-visible, .tab:focus-visible, .back:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: #123a44; border-color: var(--accent); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-col { display: flex; flex-direction: column; align-items: stretch; }
.btn-col .btn { text-align: left; margin-right: 0; }

.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg.col { flex-direction: column; }
.seg.col .seg-btn { text-align: left; }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--panel-2); margin: 6px 0 2px; }
.bar > span { display: block; height: 100%; transition: width .4s; }
.bar .good { background: var(--ok); }
.bar .junk { background: #56627d; }
.seg-btn { appearance: none; flex: 1 1 auto; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); padding: 6px 10px; border-radius: 8px; font: inherit; cursor: pointer; }
.seg-btn[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: #123a44; }

.ctl { display: block; margin: 0 0 10px; }
.ctl-name { display: flex; justify-content: space-between; color: var(--muted); font-size: 12.5px; }
.ctl-name output { color: var(--text); font-variant-numeric: tabular-nums; }
.ctl input[type="range"] { width: 100%; accent-color: var(--accent); }
.toggle { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; }
.toggle small { grid-column: 2; color: var(--muted); font-size: 12px; }

.readout { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.readout dt { color: var(--muted); font-size: 12.5px; }
.readout dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.readout dd[data-tone="ok"] { color: var(--ok); }
.readout dd[data-tone="warn"] { color: var(--warm); }
.readout dd[data-tone="bad"] { color: var(--bad); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px;
  transition: all .25s; }
.chip.on { color: #06222a; background: var(--accent); border-color: var(--accent); }

.answer { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line);
  min-height: 3.2em; font-size: 13px; }
.answer[data-tone="ok"] { border-color: var(--ok); }
.answer[data-tone="warn"] { border-color: var(--warm); }
.answer[data-tone="bad"] { border-color: var(--bad); }
.answer b { display: block; margin-bottom: 2px; }
.log { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.log li { padding: 2px 0; }
.log li:first-child { color: var(--text); }
.cmp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cmp th, .cmp td { padding: 3px 4px; text-align: right; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--muted); font-weight: 400; }
.cmp tr.cur td { color: var(--accent); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* 3D 标签 */
.lbl { color: var(--text); font-size: 12px; white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.lbl.dim { color: var(--muted); }
.lbl.title { font-size: 13px; font-weight: 600; }
.lbl.sm { font-size: 11px; }
.lbl.warn { color: var(--bad); }
.tip { position: fixed; z-index: 20; pointer-events: none; background: rgba(14, 19, 32, .94); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; max-width: 260px; display: none; }
.fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  color: var(--muted); }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 56vh minmax(0, 1fr); }
  .panel { border-left: 0; border-top: 1px solid var(--line); }
  .hint { display: none; }
  .lbl { font-size: 10px; }
  .lbl.title { font-size: 11px; }
  .lbl.sm { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }

/* ---------- 导览(tour) ---------- */
.kicker { margin: 0 0 6px; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.stepper { display: flex; gap: 6px; margin: 0 0 14px; }
.seg-col { min-width: 0; }
.seg-col .seg-name { margin: 0 0 3px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-col .dots { display: flex; gap: 3px; padding-top: 4px; border-top: 2px solid var(--line); }
.seg-col.on .dots { border-top-color: var(--accent); }
.seg-col.on .seg-name { color: var(--text); }
.dot { appearance: none; flex: 1 1 0; min-width: 22px; height: 26px; padding: 0; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--muted); border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; }
.dot:hover { border-color: var(--accent); }
.dot[aria-current="step"] { background: #123a44; border-color: var(--accent); color: var(--text); }
.dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 2px; }
.step-head h2 { margin: 0; font-size: 18px; }
.badge { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--warm); color: var(--warm); font-size: 11.5px; }
.sec-ref { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.plain { margin: 0 0 12px; font-size: 14.5px; line-height: 1.7; }
.ncard { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--panel-2); border-left: 3px solid var(--line); }
.ncard summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ncard p { margin: 6px 0 0; font-size: 13px; line-height: 1.65; }
.ncard.limit { border-left-color: var(--bad); } .ncard.limit summary { color: var(--bad); }
.ncard.win { border-left-color: var(--warm); } .ncard.win summary { color: var(--warm); }
.ncard.how { border-left-color: var(--accent); } .ncard.how summary { color: var(--accent); }
.terms { margin: 10px 0 0; font-size: 12.5px; }
.terms div { margin: 3px 0; }
.terms dt { display: inline; color: var(--accent); }
.terms dd { display: inline; margin: 0 0 0 6px; color: var(--muted); }
.seen { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; background: var(--panel-2); border-left: 3px solid var(--line); }
.seen[data-tone="bad"] { border-left-color: var(--bad); }
.seen[data-tone="ok"] { border-left-color: var(--ok); }
.nav { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.nav .count { flex: 1; text-align: center; color: var(--muted); font-size: 12.5px; }
.steplist { margin: 0 0 12px; padding: 0; list-style: none; }
.steplist button { appearance: none; width: 100%; text-align: left; border: 0; background: transparent; color: var(--muted);
  padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
.steplist button:hover { background: var(--panel-2); color: var(--text); }
.steplist button[aria-current="step"] { color: var(--text); background: #123a44; }
.tryit { margin: 0 0 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.tryit h3 { margin: 0 0 8px; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .06em; }

/* 3D 场景里的文字卡片 */
.card3d { padding: 6px 10px; border-radius: 8px; background: rgba(14, 19, 32, .93); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; white-space: pre-line; text-align: left; max-width: 250px; color: var(--text); }
.card3d.ok { border-color: var(--ok); } .card3d.bad { border-color: var(--bad); }
.card3d.warm { border-color: var(--warm); } .card3d.cyan { border-color: var(--accent); }
.card3d.dash { border-style: dashed; } .card3d.dim { color: var(--muted); }
.card3d.sm { font-size: 11.5px; padding: 4px 8px; max-width: 200px; }
.lbl.ok { color: var(--ok); }
@media (max-width: 860px) { .card3d { font-size: 10.5px; padding: 4px 6px; max-width: 160px; } .card3d.sm { font-size: 9.5px; } }

/* 导览章节(body.tour3d)窄屏:卡片更窄,辅助标签(.aux)隐藏,把画面让给关键信息 */
@media (max-width: 860px) {
  .tour3d .card3d { max-width: 132px; padding: 3px 5px; font-size: 9.5px; line-height: 1.35; }
  .tour3d .card3d.sm { max-width: 118px; font-size: 9px; }
  .tour3d .lbl.aux, .tour3d .card3d.aux { display: none !important; }
}
.tour3d .narrow-only { display: none; }
.tour3d .lbl.formula { white-space: nowrap; }
@media (max-width: 860px) {
  .tour3d .wide-only { display: none !important; }
  .tour3d .narrow-only { display: block; } /* 不加 !important:被 3D 渲染器标成 display:none 的(看不见的)仍然隐藏 */
}

/* ---------- 先猜一猜(predict):选项必须能换行,窄屏不得撑出横向滚动 ---------- */
.predict { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--warm); border-radius: 10px; background: var(--panel-2); min-width: 0; }
.predict h3 { margin: 0 0 6px; font-size: 12px; color: var(--warm); font-weight: 600; letter-spacing: .06em; }
.predict .pq { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; overflow-wrap: anywhere; }
.predict .pa { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.predict .pwhy { margin: 6px 0 6px; font-size: 12.5px; line-height: 1.65; overflow-wrap: anywhere; }
.predict .ptip { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.popts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px; }
.popt { text-align: left; margin: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.predict[data-state="done"], .predict[data-state="skipped"] { border-color: var(--line); }
.predict[data-state="done"] { border-left: 3px solid var(--ok); }
.stamp { display: inline-block; margin: 0 0 6px; padding: 1px 10px; border: 1.5px solid var(--ok); border-radius: 6px;
  color: var(--ok); font-size: 12.5px; font-weight: 600; transform: rotate(-2deg); animation: stampIn .25s ease-out; }
@keyframes stampIn { from { transform: rotate(-2deg) scale(1.6); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
.linkbtn { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px;
  padding: 2px 0; cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--text); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dot.done { border-color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }

/* ---------- 墨线与纸张风格(body.ink-on):画布变纸色,3D 里的文字标签改墨色;侧边面板保持深色 ---------- */
.ink-on .lbl { color: #2b2117; text-shadow: 0 0 4px rgba(239, 230, 208, .95), 0 0 8px rgba(239, 230, 208, .8); }
.ink-on .lbl.dim { color: #6b5d48; }
.ink-on .lbl.on-ground { color: #2b2117; }   /* 压在地面上的暗淡标签:#6b5d48 对地面只有 2.4 到 3.1,改用正文墨色(约 6 到 7.7);只在墨线开时生效 */
.ink-on .lbl.dim-deep { color: #4f4331; }   /* 压在纸色斑驳处的暗淡标签:#6b5d48 最低只有 3.3,加深一档(最低约 5.0);不改 .lbl.dim,06、07 不受影响 */
.ink-on .lbl.on-block { color: #fff; text-shadow: 0 0 3px rgba(43, 33, 23, .9), 0 0 7px rgba(43, 33, 23, .75); }   /* 写在中间色块上的标签(S6 的句块):墨色字压不过,改白字加深色光晕;纸色光晕会把白字洗掉,所以光晕也换 */
.ink-on .lbl.ok { color: #1f6b43; }
.ink-on .lbl.warn { color: #a3221b; }
.ink-on .hint { color: #5a4d3a; }   /* 舞台左下角的操作提示,在纸色背景上要用墨色才看得清 */