/* =========================================================
   火箭馆的样子：设计图纸 + 指挥大屏
   · 页面是一张深蓝色的设计图纸（白线、格子）
   · 搭火箭的地方像工程图：零件序号、标题栏、每一步一个圆圈编号
   · 讲解员那一栏像一张贴在图纸旁边的白纸，配合火箭创造者的线稿
   字体：得意黑（标题）、HJ Mono（数字，用 IBM Plex Mono 改的），都在 fonts/ 文件夹里（只留了要用的字，文件小一点），可以免费用（SIL OFL 开源字体许可）
   ========================================================= */
@font-face { font-family: "SmileySans"; src: url("fonts/smiley-sans.woff") format("woff"); font-display: swap; }
@font-face { font-family: "HJMono"; src: url("fonts/hj-mono-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HJMono"; src: url("fonts/hj-mono-500.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "HJMono"; src: url("fonts/hj-mono-600.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  --bp-ink: #0a2647;       /* 图纸底色 */
  --bp-deep: #081d3a;
  --bp-sheet: #0d3160;
  --bp-line: rgba(160, 205, 255, .13);
  --bp-line-2: rgba(160, 205, 255, .3);
  --bp-line-3: rgba(190, 222, 255, .55);
  --chalk: #eaf3ff;        /* 白线 */
  --chalk-dim: #b4cbe8;
  --chalk-mute: #8aa7cc;
  --signal: #ff6a2b;       /* 点火橙 */
  --signal-2: #ffb547;
  --go: #39e0a0;           /* 成功绿 */
  --alarm: #ff5468;
  --paper: #f4f7fb;        /* 讲解员那张白纸 */
  --graphite: #1d2330;
  --f-display: "SmileySans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "HJMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* 起步版原来的颜色变量，换成新配色（讲解员的按钮、面板也跟着变） */
  --bg: var(--bp-ink); --card: #ffffff; --text: var(--graphite); --muted: #5d6b80;
  --accent: var(--signal); --accent-down: #e11d48;
}

/* ---------- 整个页面：一张大图纸 ---------- */
html { background: var(--bp-ink); }
body {
  color: var(--chalk); font-family: var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-color: var(--bp-ink);
  background-image:
    radial-gradient(1100px 700px at 78% -12%, rgba(90, 150, 230, .2), transparent 62%),
    radial-gradient(900px 600px at -10% 110%, rgba(255, 106, 43, .06), transparent 60%),
    linear-gradient(rgba(160, 205, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 205, 255, .075) 1px, transparent 1px),
    linear-gradient(rgba(160, 205, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 205, 255, .03) 1px, transparent 1px);
  background-size: auto, auto, 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
::selection { background: rgba(255, 106, 43, .35); color: #fff; }
.wrap { max-width: 880px; }
.wrap > header { align-items: center; gap: 14px; padding: 2px 0 18px; margin-bottom: 22px; border-bottom: 1px solid var(--bp-line-2); position: relative; }
.wrap > header::after, .ex-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: var(--signal); }
h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: .02em; color: var(--chalk); line-height: 1.1; }
.badge {
  position: relative; font: 500 12px/1 var(--f-mono); padding: 7px 11px 7px 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); color: var(--chalk-dim); border: 1px solid var(--bp-line-2);
}
.badge::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--signal-2); box-shadow: 0 0 0 3px rgba(255, 181, 71, .18); }
.badge.live { background: rgba(57, 224, 160, .1); color: #c4f6e2; border-color: rgba(57, 224, 160, .42); }
.badge.live::before { background: var(--go); box-shadow: 0 0 0 3px rgba(57, 224, 160, .2), 0 0 10px var(--go); }
footer { color: var(--chalk-mute); font: 400 11px/1.6 var(--f-mono); letter-spacing: .08em; }

/* ---------- 展厅：左边展品，右边讲解员 ---------- */
.hall-left { container: hall / inline-size; }   /* 驾驶舱布局按展品有多宽来切换，见文末“驾驶舱布局” */
@media (min-width: 1100px) {
  /* 整页是一个网格：标题只占左列，讲解台从页面顶上就开始，这样它钉住前后位置几乎不变，右下角的牌也不会压到它 */
  .wrap {
    max-width: 1480px; padding: 28px 32px 72px;
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 372px); column-gap: 28px; align-items: start;
    grid-template-areas: "header right" "left right" "footer footer";
  }
  .wrap > header { grid-area: header; }
  .wrap > footer { grid-area: footer; }
  .hall { display: contents; }
  .hall-left { grid-area: left; min-width: 0; }
  .hall-right { grid-area: right; position: sticky; top: 16px; max-height: calc(100vh - 170px); overflow-y: auto; scrollbar-width: thin; }
  .hall-right .talk { width: 132px; height: 132px; margin: 22px auto 16px; }
}

/* =========================================================
   展品 1：造火箭台（一张工程图）
   ========================================================= */
.exhibit {
  container-type: inline-size;
  position: relative; margin: 0 0 24px; padding: 30px 30px 32px; color: var(--chalk);
  background-color: var(--bp-sheet);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 240px),
    linear-gradient(rgba(160, 205, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 205, 255, .06) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  border: 1px solid var(--bp-line-3);
  box-shadow: inset 0 0 0 6px var(--bp-sheet), inset 0 0 0 7px var(--bp-line-2), 0 40px 90px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .2);
}
.exhibit::before {   /* 四个角的对位标记 */
  content: ""; position: absolute; inset: -10px; pointer-events: none;
  background:
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) 0 9.5px / 16px 1px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) 9.5px 0 / 1px 16px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) 100% 9.5px / 16px 1px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) calc(100% - 9.5px) 0 / 1px 16px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) 0 calc(100% - 9.5px) / 16px 1px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) 9.5px 100% / 1px 16px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) 100% calc(100% - 9.5px) / 16px 1px no-repeat,
    linear-gradient(var(--chalk-dim), var(--chalk-dim)) calc(100% - 9.5px) 100% / 1px 16px no-repeat;
}
.exhibit b { font-weight: 600; color: #fff; }
#exhibit button, #exhibit select, #exhibit input { font-family: inherit; }
#exhibit button:disabled, #exhibit select:disabled { opacity: .45; cursor: default; }
#exhibit :focus-visible { outline: 2px solid var(--signal-2); outline-offset: 2px; }

/* 标题区 */
.ex-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--bp-line-2); }
.ex-tag { display: flex; gap: 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--chalk-mute); margin-bottom: 10px; }
.ex-tag span + span::before { content: "/"; margin-right: 14px; opacity: .5; }
.ex-head h2 { margin: 0; font: 400 clamp(38px, 5.4cqi, 58px)/1 var(--f-display); letter-spacing: .02em; color: #fff; }
.ex-lead { margin: 12px 0 0; max-width: 60ch; font-size: 14.5px; line-height: 1.75; color: var(--chalk-dim); }
.ex-tabs { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--bp-line-2); border-radius: 999px; background: rgba(3, 14, 32, .45); align-self: end; }
.ex-tabs button {
  font-size: 14px; color: var(--chalk-dim); background: transparent; border: 0; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease);
}
.ex-tabs button:hover:not(.on) { color: #fff; background: rgba(255, 255, 255, .06); }
.ex-tabs button.on { background: var(--chalk); color: var(--bp-ink); font-weight: 600; }

/* 每一块的小标题：圆圈里写第几步 */
.ex-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; }
.ex-step {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--chalk-dim); color: var(--chalk) !important; font: 500 12px/1 var(--f-mono) !important;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ex-sec-t { font: 400 22px/1.1 var(--f-display); letter-spacing: .03em; color: #fff; }
.ex-sec-head small { color: var(--chalk-mute); font-size: 12.5px; }
.ex-sec-x { margin-left: auto; font: 500 12px var(--f-mono); color: var(--chalk-dim); display: flex; align-items: center; gap: 10px; }
/* 标题右边的碎片计数：点一下去空间站页 */
.deb-chip { font: 500 12px/1 var(--f-body); padding: 5px 10px; border: 1px solid var(--bp-line-3); border-radius: 999px; background: rgba(3, 14, 32, .45); color: var(--chalk-dim); cursor: pointer; white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease); }
.deb-chip:hover:not(:disabled) { color: #fff; border-color: var(--chalk-dim); }
.deb-chip.warn { color: #ffd6dc; border-color: var(--alarm); background: rgba(255, 84, 104, .16); }
@media (prefers-reduced-motion: no-preference) { .deb-chip.warn { animation: chip-warn 1.2s ease-in-out infinite; } }
@keyframes chip-warn { 50% { box-shadow: 0 0 0 4px rgba(255, 84, 104, .25); } }
/* 现在走到哪一步，那一步的圆圈就亮起来 */
#exhibit[data-step="2"] [data-sn="2"] .ex-step,
#exhibit[data-step="3"] [data-sn="3"] .ex-step,
#exhibit[data-step="4"] [data-sn="4"] .ex-step {
  background: var(--signal); border-color: var(--signal); color: #fff !important;
  box-shadow: 0 0 0 5px rgba(255, 106, 43, .2); animation: step-glow 1.8s ease-in-out infinite;
}
#exhibit[data-step="3"] [data-sn="2"] .ex-step, #exhibit[data-step="4"] [data-sn="2"] .ex-step,
#exhibit[data-step="4"] [data-sn="3"] .ex-step, #exhibit[data-mode="done"] [data-sn="4"] .ex-step {
  background: rgba(57, 224, 160, .16); border-color: var(--go); color: var(--go) !important;
}
#exhibit [data-sn="1"] .ex-step { background: rgba(57, 224, 160, .16); border-color: var(--go); color: var(--go) !important; }
@keyframes step-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 106, 43, .18); } 50% { box-shadow: 0 0 0 9px rgba(255, 106, 43, .05); } }

/* ---------- 第 1 步：任务时间线 + 任务书 ---------- */
.ex-task { margin-top: 24px; }
.tl { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); position: relative; }
.tl::before { content: ""; position: absolute; left: calc(100% / 20); right: calc(100% / 20); top: 13px; border-top: 1px dashed var(--bp-line-3); }
.tl-node { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; padding: 0 2px 6px; text-align: center; }
.tl-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  font: 500 11px/1 var(--f-mono); font-style: normal; color: var(--chalk-mute);
  border: 1px solid var(--bp-line-3); background: var(--bp-sheet);
}
.tl-year { font: 500 10.5px/1 var(--f-mono); letter-spacing: .06em; color: var(--chalk-mute); margin-top: 3px; }
.tl-name { font-size: 12.5px; line-height: 1.3; color: var(--chalk-dim); }
.tl-node.done .tl-dot { background: var(--go); border-color: var(--go); color: transparent; }
.tl-node.done .tl-dot::after, .pg-chain li.done::before, .mods li.got b::after { content: ""; display: inline-block; width: 9px; height: 5px; border-left: 2px solid var(--bp-ink); border-bottom: 2px solid var(--bp-ink); transform: translateY(-1px) rotate(-45deg); }   /* 用线画的对勾，哪台电脑都一样 */
.tl-node.done .tl-dot::after { position: absolute; left: 8px; top: 8px; }
.tl-node.done .tl-name { color: var(--chalk); }
.tl-node.cur .tl-dot { background: var(--signal); border-color: var(--signal); color: #fff; box-shadow: 0 0 0 5px rgba(255, 106, 43, .22); }
.tl-node.cur .tl-name { color: #fff; font-weight: 600; }
.tl-node.cur .tl-year { color: var(--signal-2); }
.tl-node.cur::after { content: ""; position: absolute; left: 50%; bottom: -10px; margin-left: -6px; border: 6px solid transparent; border-bottom-color: var(--bp-line-3); }
.tl-node.lock { opacity: .55; }
.brief {
  display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 18px 30px; margin-top: 10px; padding: 22px 24px;
  border: 1px solid var(--bp-line-3); background: linear-gradient(135deg, rgba(3, 14, 32, .5), rgba(3, 14, 32, .22));
  position: relative;
}
.brief-kicker { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--signal-2); }
.brief h3 { margin: 8px 0 10px; font: 400 32px/1.1 var(--f-display); letter-spacing: .02em; color: #fff; }
.brief-story { margin: 0 0 14px; font-size: 14.5px; line-height: 1.8; color: var(--chalk-dim); max-width: 62ch; }
.brief-goal { display: flex; gap: 12px; align-items: baseline; padding: 11px 14px; border-left: 3px solid var(--signal); background: rgba(255, 106, 43, .09); font-size: 16px; font-weight: 600; color: #fff; line-height: 1.55; }
.brief-goal span, .brief-tip span, .brief-reward span { flex: none; font: 500 10.5px/1.9 var(--f-mono); letter-spacing: .12em; color: var(--signal-2); font-weight: 500; }
.brief-tip { display: flex; gap: 12px; align-items: baseline; margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--chalk-dim); }
.brief-tip span { color: var(--chalk-mute); }
.brief-side { display: flex; flex-direction: column; gap: 12px; padding-left: 22px; border-left: 1px solid var(--bp-line-2); }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--bp-line-2); border: 1px solid var(--bp-line-2); }
.chips div { background: rgba(8, 29, 58, .96); padding: 9px 11px; }
.chips dt { font-size: 11px; color: var(--chalk-mute); }
.chips dd { margin: 3px 0 0; font-size: 14.5px; color: #fff; font-weight: 600; }
.brief-reward { display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.6; color: var(--chalk); }
.brief-reward span { color: var(--go); }
.brief-lead { margin: 0; font-size: 15px; line-height: 1.75; color: var(--chalk-dim); }
/* 任务书可以收起来：只留关名和目标，省出地方搭火箭 */
.brief-kicker { display: flex; align-items: center; gap: 12px; }
.brief-fold { margin-left: auto; font: 400 12px/1 var(--f-body); letter-spacing: 0; padding: 5px 10px; border: 1px solid var(--bp-line-2); border-radius: 4px; background: transparent; color: var(--chalk-mute); cursor: pointer; }
.brief-fold:hover { color: #fff; border-color: var(--chalk-dim); }
.brief.fold { grid-template-columns: minmax(0, 1fr); padding: 14px 20px 16px; }
.brief.fold .brief-story, .brief.fold .brief-tip, .brief.fold .brief-side { display: none; }
.brief.fold h3 { font-size: 24px; margin: 6px 0 8px; }
.brief.fold .brief-goal { padding: 8px 12px; font-size: 15px; }
.ex-reset { align-self: flex-start; margin-top: auto; font-size: 12px; padding: 5px 10px; border: 1px solid var(--bp-line-2); border-radius: 4px; background: transparent; color: var(--chalk-mute); cursor: pointer; }
.ex-reset:hover { color: #fff; border-color: var(--chalk-dim); }

/* ---------- 第 2 步：零件表 + 图纸 ---------- */
.ex-bench { display: grid; grid-template-columns: 336px minmax(0, 1fr); gap: 20px; margin-top: 28px; align-items: start; }
.ex-parts { display: flex; flex-direction: column; gap: 12px; }
.ex-group-body { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ex-stage { position: sticky; top: 16px; }
.ex-group-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; color: var(--chalk-mute); }
.ex-group-h b { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--chalk-mute); font: 600 10px/1 var(--f-mono); color: var(--chalk-dim); }
.ex-group-h::after { content: ""; flex: 1; border-top: 1px solid var(--bp-line); }
.ex-part {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; align-items: center;
  width: 100%; min-height: 52px; padding: 5px 6px 5px 3px; margin: 0; text-align: left; cursor: pointer; color: var(--chalk);
  background: rgba(3, 14, 32, .32); border: 1px solid var(--bp-line); border-radius: 3px; position: relative;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.ex-part canvas { grid-row: 1 / span 2; display: block; }
.ex-part .nm { font-size: 13px; line-height: 1.25; align-self: end; padding-right: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-part .sp { grid-column: 2; font-size: 11px; line-height: 1.35; color: var(--chalk-mute); align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-part .cd {   /* 零件序号：和图纸上的圆圈序号对上 */
  position: absolute; top: 4px; right: 4px; display: grid; place-items: center; min-width: 21px; height: 15px; padding: 0 3px; border-radius: 8px;
  border: 1px solid var(--bp-line-2); font: 600 9px/1 var(--f-mono); color: var(--chalk-mute);
}
.ex-part .cd i { position: absolute; top: 18px; right: -1px; font: 600 9.5px/1 var(--f-mono); font-style: normal; color: var(--bp-ink); background: var(--signal-2); padding: 2px 3px; border-radius: 3px; }
.ex-part:hover:not(:disabled):not(.locked) { border-color: var(--bp-line-3); background: rgba(160, 205, 255, .09); transform: translateY(-1px); }
.ex-part:active:not(:disabled) { transform: scale(.97); }
.ex-part.in { border-color: rgba(234, 243, 255, .45); }
.ex-part.in .cd { background: var(--chalk); color: var(--bp-ink); border-color: var(--chalk); }
.ex-part.on { border-color: rgba(255, 106, 43, .7); background: rgba(255, 106, 43, .1); box-shadow: inset 3px 0 0 var(--signal); }
.ex-part.on .sp { color: var(--signal-2); }
.ex-part.locked { cursor: not-allowed; }
.ex-part.locked canvas, .ex-part.locked .nm, .ex-part.locked .cd { opacity: .38; }
.ex-part.locked .sp { color: var(--signal-2); }
.ex-part.locked .sp::before { content: ""; display: inline-block; width: 7px; height: 6px; margin-right: 5px; vertical-align: 0; border: 1.5px solid currentColor; border-radius: 1px; box-shadow: 0 -3px 0 -1.5px transparent; position: relative; top: 1px;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 2px no-repeat; }

.ex-stage { min-width: 0; container-type: inline-size; }   /* 数据条几列按图纸自己的宽度定（驾驶舱里图纸比展品窄得多） */
.ex-screen { position: relative; border: 1px solid var(--bp-line-3); background: var(--bp-deep); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.ex-screen::before, .ex-screen::after {   /* 取景框的角 */
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 1; transition: border-color .4s var(--ease);
}
.ex-screen::before { left: -5px; top: -5px; border-left: 2px solid var(--chalk); border-top: 2px solid var(--chalk); }
.ex-screen::after { right: -5px; bottom: -5px; border-right: 2px solid var(--chalk); border-bottom: 2px solid var(--chalk); }
.ex-canvas { display: block; width: 100%; height: clamp(520px, 68vh, 640px); border-radius: 0; }
#exhibit[data-mode="fly"] .ex-screen, #exhibit[data-mode="test"] .ex-screen { border-color: rgba(255, 106, 43, .8); box-shadow: 0 0 0 1px rgba(255, 106, 43, .3), 0 0 60px -12px rgba(255, 106, 43, .55); }
#exhibit[data-mode="fly"] .ex-screen::before, #exhibit[data-mode="fly"] .ex-screen::after { border-color: var(--signal); }
.ex-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--bp-line-3); border-top: 0; background: rgba(3, 14, 32, .45); }
.ex-stats:empty { display: none; }
.st { padding: 9px 12px 10px; border-left: 1px solid var(--bp-line-2); min-width: 0; }
.st:first-child { border-left: 0; }
.st span { display: block; font-size: 11px; color: var(--chalk-mute); white-space: nowrap; }
.st b { display: block; margin-top: 2px; font: 500 18px/1.2 var(--f-mono); color: #fff; white-space: nowrap; }
.st b small { font: 400 11.5px var(--f-body); color: var(--chalk-dim); margin-left: 3px; }
.st.good b { color: var(--go); }
.st.warn b { color: var(--signal-2); }
.st.bad b { color: var(--alarm); }

/* ---------- 第 3 步：飞行程序 ---------- */
.ex-prog { margin-top: 28px; padding: 20px 22px; border: 1px dashed var(--bp-line-3); background: rgba(3, 14, 32, .28); }
.ex-prog[hidden] { display: none; }
.pg-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 18px 24px; align-items: start; }
.pg-line { margin: 0 0 14px; font-size: 16px; line-height: 2.3; color: var(--chalk); }
#exhibit select {
  -webkit-appearance: none; appearance: none; font-size: 15px; color: #fff; padding: 5px 30px 5px 11px; margin: 0 2px;
  border: 1px solid var(--bp-line-3); border-radius: 4px; cursor: pointer;
  background: rgba(3, 14, 32, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23eaf3ff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
#exhibit select:hover:not(:disabled) { border-color: var(--chalk); background-color: rgba(160, 205, 255, .12); }
#exhibit select option { color: #111; background: #fff; }
.pg-label { font-size: 12px; color: var(--chalk-mute); margin-bottom: 8px; }
.pg-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: pg; }
.pg-chain li {
  counter-increment: pg; display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; font-size: 13px; color: var(--chalk-dim);
  border: 1px solid var(--bp-line-2); border-radius: 999px; background: rgba(3, 14, 32, .4);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.pg-chain li::before { content: counter(pg, decimal-leading-zero); font: 500 10px/1 var(--f-mono); color: var(--chalk-mute); }
.pg-chain li.done { color: #d2fbea; border-color: rgba(57, 224, 160, .55); background: rgba(57, 224, 160, .1); }
.pg-chain li.done::before { width: 8px; height: 4px; border-color: var(--go); margin: 0 1px 0 2px; }
.pg-chain li.now { color: #fff; border-color: var(--signal); background: rgba(255, 106, 43, .2); box-shadow: 0 0 0 4px rgba(255, 106, 43, .14); }
.pg-chain li.fail { color: #ffd6dc; border-color: var(--alarm); background: rgba(255, 84, 104, .14); }
.pg-chain li.fail::before { content: "×"; color: var(--alarm); }
.pg-fig { margin: 0; }
.pg-sketch { display: block; width: 100%; height: 132px; border: 1px solid var(--bp-line-2); background: rgba(3, 14, 32, .45); }
.pg-fig figcaption { margin-top: 6px; font-size: 11px; color: var(--chalk-mute); text-align: right; }
.pg-free { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--bp-line-2); font-size: 14px; color: var(--chalk-dim); }
.pg-chal { display: flex; align-items: center; gap: 6px; }   /* 自由造里的"太空碎片挑战"开关 */
.pg-chal input { accent-color: var(--signal); width: 16px; height: 16px; margin: 0; }
.pg-chal small { font-size: 11.5px; color: var(--chalk-mute); }

/* ---------- 第 4 步：发射 ---------- */
.ex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bp-line-2); }
.ex-tools .ex-sec-head { margin: 0 10px 0 0; }
.ex-wind { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--chalk-dim); }
#exhibit[data-tab="task"] .ex-wind { display: none; }
.ex-ghost { font-size: 14px; padding: 9px 14px; color: var(--chalk-dim); background: transparent; border: 1px solid var(--bp-line-2); border-radius: 4px; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease); }
.ex-ghost:hover:not(:disabled) { color: #fff; border-color: var(--chalk-dim); }
.ex-launch {
  margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: 14px;
  font: 400 24px/1 var(--f-display); letter-spacing: .1em; color: #fff; padding: 16px 34px 16px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #ff8b4d, #f2531b 60%, #d9420f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 14px 34px -10px rgba(255, 106, 43, .85), 0 0 0 6px rgba(255, 106, 43, .14);
  transition: transform .15s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.ex-launch::before {   /* 点火按钮上的小圆灯 */
  content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 40%, #fff6d6, #ffcf6b 45%, #ff9a3c 70%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 14px rgba(255, 220, 140, .9);
}
.ex-launch:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 18px 40px -10px rgba(255, 106, 43, 1), 0 0 0 9px rgba(255, 106, 43, .16); }
.ex-launch:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.ex-launch[data-ready="0"] { background: linear-gradient(180deg, #2b4a78, #213b62); color: var(--chalk-dim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px var(--bp-line-2); }
.ex-launch[data-ready="0"]::before { background: radial-gradient(circle at 50% 40%, #5c7aa3, #34507a); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
#exhibit .ex-launch:disabled { opacity: 1; }
#exhibit[data-mode="fly"] .ex-launch::before { animation: ignite .35s steps(2) infinite; }
@keyframes ignite { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .4), 0 0 26px #fff1b8; } }

/* ---------- 飞行报告、归零 ---------- */
.ex-result { display: none; margin-top: 22px; padding: 18px 22px 16px; border: 1px solid; position: relative; animation: rise .4s var(--ease); }
.ex-result.ok { display: block; border-color: rgba(57, 224, 160, .6); background: linear-gradient(100deg, rgba(57, 224, 160, .14), rgba(57, 224, 160, .03) 70%); }
.ex-result.bad { display: block; border-color: rgba(255, 84, 104, .6); background: linear-gradient(100deg, rgba(255, 84, 104, .14), rgba(255, 84, 104, .03) 70%); }
.rs-tag { font: 500 10.5px/1 var(--f-mono); letter-spacing: .16em; color: var(--go); margin-bottom: 8px; }
.ex-result.bad .rs-tag { color: var(--alarm); }
.ex-verdict { font: 400 24px/1.3 var(--f-display); letter-spacing: .02em; color: #fff; margin-bottom: 6px; }
.rs-text { font-size: 15.5px; line-height: 1.75; color: var(--chalk); }
.rs-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rs-btns:empty { display: none; }
.ex-next { font-size: 14.5px; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 4px; background: var(--go); color: var(--bp-ink); cursor: pointer; transition: filter .2s; }
.ex-next:hover { filter: brightness(1.08); }
.ex-next.ghost { background: transparent; color: var(--chalk); border: 1px solid var(--bp-line-3); font-weight: 400; }
.ex-ask { display: block; margin-top: 10px; font-size: 12.5px; color: var(--chalk-mute); }
.ex-zero { margin-top: 14px; padding: 18px 22px; border: 1px solid rgba(255, 181, 71, .7); background: linear-gradient(100deg, rgba(255, 181, 71, .13), rgba(255, 181, 71, .03) 70%); font-size: 15px; line-height: 1.7; animation: rise .4s var(--ease); }
.ex-zero[hidden] { display: none; }
.ez-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.ez-title b { font: 400 24px/1 var(--f-display); color: var(--signal-2) !important; letter-spacing: .04em; }
.ez-title span { font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; color: var(--chalk-mute); }
.ez-opts { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.ez-opts button {
  text-align: left; font-size: 15px; padding: 11px 14px 11px 40px; border: 1px solid var(--bp-line-3); border-radius: 4px; background: rgba(3, 14, 32, .45);
  color: var(--chalk); cursor: pointer; position: relative; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.ez-opts button::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 1.5px solid var(--chalk-dim); }
.ez-opts button:hover:not(:disabled) { border-color: var(--chalk); background: rgba(160, 205, 255, .1); }
.ez-opts button.wrong { border-color: rgba(255, 84, 104, .7); background: rgba(255, 84, 104, .12); color: #ffd6dc; opacity: 1 !important; }
.ez-opts button.wrong::before { border-color: var(--alarm); background: radial-gradient(var(--alarm) 40%, transparent 45%); }
.ez-opts button.right { border-color: var(--go); background: rgba(57, 224, 160, .15); color: #fff; font-weight: 600; opacity: 1 !important; }
.ez-opts button.right::before { border-color: var(--go); background: radial-gradient(var(--go) 40%, transparent 45%); }
.ez-fb > div { margin-top: 4px; color: var(--chalk-dim); }
.ez-fb > div:only-child { color: var(--signal-2); }
.ez-ok { color: var(--go) !important; font-weight: 600; font-size: 16px; }
.ez-real { margin-top: 10px !important; padding: 10px 12px; border-left: 3px solid var(--signal-2); background: rgba(3, 14, 32, .35); font-size: 13.5px; color: var(--chalk) !important; }
.ez-skip { margin-top: 4px; font-size: 13px; padding: 6px 12px; border: 1px solid var(--bp-line-2); border-radius: 4px; background: transparent; color: var(--chalk-dim); cursor: pointer; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 不同模式要显示的东西 ---------- */
#exhibit[data-tab="rd"] .ex-catalog, #exhibit[data-tab="station"] .ex-catalog,
#exhibit[data-tab="rd"] .ex-tools, #exhibit[data-tab="station"] .ex-tools,
#exhibit[data-tab="log"] .ex-bench, #exhibit[data-tab="log"] .ex-tools { display: none; }
#exhibit[data-tab="rd"] .ex-bench, #exhibit[data-tab="station"] .ex-bench { grid-template-columns: minmax(0, 1fr); }
#exhibit[data-tab="rd"] .ex-canvas { height: clamp(360px, 48vh, 420px); }
#exhibit[data-tab="station"] .ex-canvas { height: clamp(460px, 62vh, 600px); }

/* 空间站 */
.ex-task.station .mods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.mods li { padding: 12px 13px; border: 1px dashed var(--bp-line-2); font-size: 12.5px; line-height: 1.6; color: var(--chalk-mute); }
.mods li b { display: block; margin-bottom: 4px; font: 400 17px/1.2 var(--f-display); color: var(--chalk-dim); letter-spacing: .03em; }
.mods li.got { border-style: solid; border-color: rgba(255, 213, 79, .55); background: rgba(255, 213, 79, .07); color: var(--chalk-dim); }
.mods li.got b { color: #ffe08a; }
.mods li.got b::after { margin-left: 8px; border-color: var(--go); vertical-align: middle; }
/* 传送门参观：按住就走的两个按钮和提示（窄窗口、没键盘也能玩） */
.vis-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; font-size: 13px; color: var(--chalk-mute); }
.vis-btn { font: 400 16px/1 var(--f-display); letter-spacing: .06em; padding: 10px 16px; color: var(--chalk); background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .5); border-radius: 999px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.vis-btn:active { background: rgba(125, 211, 252, .3); }
.vis-hint { flex: 1 1 220px; line-height: 1.5; }
/* 轨道上的碎片、空间站燃料、碎片预警 */
.deb { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--bp-line-2); font-size: 13px; color: var(--chalk-dim); }
.deb.alarm { border-style: solid; border-color: rgba(255, 84, 104, .7); background: rgba(255, 84, 104, .06); }
.deb-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.deb-h b { font: 400 17px/1.2 var(--f-display); color: var(--chalk); letter-spacing: .03em; }
.deb-h span { font-size: 12px; color: var(--chalk-mute); }
.deb-warn { margin: 6px 0 10px; padding: 10px 12px; border-left: 3px solid var(--alarm); background: rgba(3, 14, 32, .4); color: var(--chalk); }
.deb-warn p { margin: 0 0 8px; line-height: 1.6; }
.deb-warn small { display: block; margin-top: 6px; color: var(--signal-2); }
.deb-btn { font: 400 16px/1 var(--f-display); letter-spacing: .06em; padding: 10px 16px; color: #fff; background: linear-gradient(180deg, #ff8b4d, #f2531b 60%, #d9420f); border: 0; border-radius: 999px; cursor: pointer; }
.deb-btn:disabled { background: #2b4a78; color: var(--chalk-mute); cursor: default; }
.deb-list { margin: 0; padding-left: 18px; line-height: 1.7; color: var(--chalk-mute); }
.deb-foot { display: block; margin-top: 8px; font: 500 11px var(--f-mono); color: var(--chalk-mute); }
.ex-tabs button.warn::after { content: "!"; display: inline-block; margin-left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--alarm); color: #fff; font: 700 11px/16px var(--f-mono); text-align: center; }

/* 研发中心 */
.rd-pts { gap: 8px; align-items: baseline; font-family: var(--f-body); }
.rd-pts span { font-size: 12px; color: var(--chalk-mute); }
.rd-pts b { font: 500 30px/1 var(--f-mono); color: var(--signal-2) !important; }
.rd-name { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 14px; color: var(--chalk-dim); }
.rd-name input { font: 400 22px/1.2 var(--f-display); letter-spacing: .04em; width: 9em; padding: 6px 12px; color: #fff; background: rgba(3, 14, 32, .55); border: 1px solid var(--bp-line-3); border-radius: 4px; }
.rd-name input:focus { outline: none; border-color: var(--signal-2); }
.rd-sub { margin: 18px 0 8px; font-size: 12.5px; color: var(--chalk-mute); display: flex; align-items: center; gap: 10px; }
.rd-sub::after { content: ""; flex: 1; border-top: 1px solid var(--bp-line); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.rd-card { display: flex; flex-direction: column; padding: 14px 15px; border: 1px solid var(--bp-line-2); background: rgba(3, 14, 32, .38); font-size: 14px; }
.rd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rd-top b { font: 400 19px/1.2 var(--f-display); letter-spacing: .03em; color: #fff; }
.rd-kind { font: 500 10px/1 var(--f-mono); letter-spacing: .1em; color: var(--chalk-mute); border: 1px solid var(--bp-line-2); padding: 3px 6px; border-radius: 3px; }
.rd-card.up .rd-kind { color: var(--signal-2); border-color: rgba(255, 181, 71, .45); }
.rd-fact { color: var(--chalk-dim); font-size: 13px; margin: 8px 0 10px; line-height: 1.65; flex: 1; }
.rd-up { color: var(--signal-2); font-size: 13px; font-weight: 600; margin: -2px 0 10px; }
.rd-card button { align-self: flex-start; font-size: 13.5px; padding: 7px 12px; border: 0; border-radius: 4px; background: var(--chalk); color: var(--bp-ink); font-weight: 600; cursor: pointer; }
.rd-card button:hover:not(:disabled) { background: #fff; }
.rd-card.done { border-color: rgba(57, 224, 160, .5); background: rgba(57, 224, 160, .07); }
.rd-card.done button { background: transparent; color: var(--go); padding-left: 0; opacity: 1 !important; }

/* 试验记录 */
.log-copy { font-size: 13px; padding: 6px 12px; border: 1px solid var(--bp-line-3); border-radius: 4px; background: transparent; color: var(--chalk); cursor: pointer; font-family: var(--f-body); }
.log-copy:hover { border-color: var(--chalk); }
.log-empty { padding: 26px; text-align: center; border: 1px dashed var(--bp-line-2); color: var(--chalk-mute); font-size: 14px; }
.log-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--bp-line-2); }
.ex-task.log table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; min-width: 640px; }
.ex-task.log th:nth-child(1) { width: 44px; } .ex-task.log th:nth-child(2) { width: 150px; }
.ex-task.log th:nth-child(4) { width: 132px; } .ex-task.log th:nth-child(5) { width: 160px; } .ex-task.log th:nth-child(6) { width: 120px; }
.ex-task.log th { position: sticky; top: 0; background: var(--bp-deep); text-align: left; padding: 9px 10px; font-weight: 500; font-size: 12px; color: var(--chalk-mute); border-bottom: 1px solid var(--bp-line-3); }
.ex-task.log td { padding: 9px 10px; vertical-align: top; color: var(--chalk-dim); border-bottom: 1px solid var(--bp-line); line-height: 1.55; }
.ex-task.log td:first-child { font-family: var(--f-mono); color: var(--chalk-mute); }
.ex-task.log tr.ok td { color: var(--chalk); background: rgba(57, 224, 160, .06); }
.ex-task.log tr.ok td:nth-child(5) { color: var(--go); }

/* ---------- 窄一点的屏幕：零件表放到图纸上面 ---------- */
@container (max-width: 860px) {
  .ex-head { grid-template-columns: minmax(0, 1fr); }
  .ex-tabs { justify-self: start; }
  .brief { grid-template-columns: minmax(0, 1fr); }
  .brief-side { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--bp-line-2); }
  .pg-body { grid-template-columns: minmax(0, 1fr) 200px; }
  .ex-task.station .mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  .tl { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .tl::-webkit-scrollbar { display: none; }
  .tl::before { left: 40px; right: auto; width: calc(10 * 78px - 80px); }
  .tl-node { flex: 0 0 78px; scroll-snap-align: start; }
  .ex-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st { padding: 8px 9px; }
  .st b { font-size: 16px; }
  .st:nth-child(4) { border-left: 0; }
  .st:nth-child(n + 4) { border-top: 1px solid var(--bp-line-2); }
  .pg-body { grid-template-columns: minmax(0, 1fr); }
  .ex-launch { margin-left: 0; width: 100%; justify-content: center; }
  .ex-tools .ex-sec-head { width: 100%; }
  .ex-task.station .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 480px) {
  .ex-part { grid-template-columns: 30px minmax(0, 1fr); column-gap: 6px; }
  .ex-part canvas { width: 30px !important; height: 30px !important; }
  .ex-part .cd { display: none; }
  .ex-part .nm { padding-right: 0; font-size: 12px; }
}
@container (max-width: 860px) { .ex-part .nm { font-size: 12.5px; } }

/* =========================================================
   驾驶舱布局：图纸钉住不动，零件表、飞行程序、发射都在旁边一列里滚
   （按展品的宽度切换，和窗口多宽、右边有没有讲解台无关）
   ========================================================= */
@container hall (min-width: 600px) {
  .exhibit {
    display: grid; grid-template-columns: 212px minmax(0, 1fr); column-gap: 20px; align-items: start;
    grid-template-areas: "head head" "task task" "cat stage" "prog stage" "tools stage" "result stage" "zero stage";
  }
  .ex-bench { display: contents; }   /* 零件表和图纸直接进展品的网格，图纸才能跨过程序、发射那几行 */
  .ex-head { grid-area: head; }
  .ex-task { grid-area: task; }
  .ex-catalog { grid-area: cat; margin-top: 28px; min-width: 0; }
  .ex-stage { grid-area: stage; margin-top: 28px; position: sticky; top: 16px; }
  .ex-prog { grid-area: prog; }
  .ex-tools { grid-area: tools; }
  .ex-result { grid-area: result; }
  .ex-zero { grid-area: zero; }
  .ex-group-body { grid-template-columns: minmax(0, 1fr); }
  .pg-body { grid-template-columns: minmax(0, 1fr); }
  .ex-prog { padding: 16px 14px; }   /* 窄列里少留点边，下拉框才不会顶出去 */
  .pg-line { font-size: 15px; }
  #exhibit select { max-width: 100%; }
  .ex-tools .ex-sec-head { width: 100%; margin-right: 0; }
  .ex-ghost { flex: 1 1 auto; }
  .ex-launch { margin-left: 0; width: 100%; justify-content: center; }
  #exhibit[data-tab="rd"] .ex-stage, #exhibit[data-tab="station"] .ex-stage { grid-column: 1 / -1; position: static; }
}
@container hall (min-width: 820px) {   /* 够宽：零件表两列 */
  .exhibit { grid-template-columns: 336px minmax(0, 1fr); column-gap: 24px; }
  .ex-group-body { grid-template-columns: 1fr 1fr; }
  .ex-prog { padding: 20px 22px; }
  .pg-line { font-size: 16px; }
}
@container hall (max-width: 599px) {   /* 手机：图纸钉在最上面，零件表在它下面滚，点一个零件马上看得见 */
  .ex-bench { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }   /* 图纸量自己的宽度，不撑满就会缩成 0 宽 */
  .ex-stage { order: -1; position: sticky; top: 0; z-index: 3; padding-bottom: 8px; background: var(--bp-sheet); }
  .ex-bench .ex-canvas { height: clamp(220px, 34vh, 340px); }   /* 比下面“矮窗口”那条优先 */
  .ex-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ex-group-body { grid-template-columns: minmax(0, 1fr); }
  #exhibit[data-tab="rd"] .ex-stage, #exhibit[data-tab="station"] .ex-stage { position: static; }
}
@container hall (max-width: 400px) { .ex-parts { grid-template-columns: minmax(0, 1fr); } }
/* 打开页面时，展品一块一块浮上来 */
@media (prefers-reduced-motion: no-preference) {
  .exhibit > * { animation: rise .7s var(--ease) both; }
  .exhibit > .ex-task { animation-delay: .08s; }
  .exhibit > .ex-bench { animation-delay: .16s; }
  .ex-catalog, .ex-stage { animation: rise .7s .16s var(--ease) both; }   /* 驾驶舱布局里这两块不再是展品的直接子元素 */
  .exhibit > .ex-prog { animation-delay: .24s; }
  .exhibit > .ex-tools { animation-delay: .32s; }
  .hall-right { animation: rise .7s .2s var(--ease) both; }
}
@media (max-width: 700px) {
  .exhibit { padding: 22px 16px 24px; }
}
@media (max-height: 760px) {   /* 矮一点的窗口：图纸也矮一点，钉住的时候才放得下 */
  .ex-canvas { height: clamp(260px, 60vh, 560px); }
}
@media (max-width: 1099px) { .wrap { padding-right: 96px; } }   /* 没有讲解台那一列时，右边留出位置给右下角的牌（更窄的屏幕 index.html 里另有规则） */
@media (max-width: 520px) {   /* 手机：右边不再给牌留 96px，画布能用整个宽度；牌缩小躲到右下角 */
  .wrap { padding-right: 16px; padding-bottom: 96px; }
  .cardbox { right: 8px; bottom: 8px; gap: 4px; }
  .cards { flex-direction: row; gap: 6px; }
  .card-btn { width: 40px; height: 54px; font-size: 12px; border-width: 2px; }
  .card-tip { width: auto; font-size: 11px; }
  .brief { padding: 18px 16px; }
  .ex-tabs { flex-wrap: wrap; border-radius: 18px; max-width: 100%; }
  .ex-tabs button { padding: 8px 12px; font-size: 13.5px; }
}

/* =========================================================
   讲解台：一张白纸，上面是火箭创造者
   ========================================================= */
.hall-right {
  color: var(--graphite); padding: 20px 20px 22px; border-radius: 3px;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(29, 35, 48, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 35, 48, .05) 1px, transparent 1px);
  background-size: 16px 16px; background-position: -1px -1px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.hall-right::before {
  content: "讲解台"; display: flex; align-items: center; gap: 10px; margin: -2px 0 6px;
  font: 500 11px/1 var(--f-mono); letter-spacing: .3em; color: #8592a6;
}
@media (max-width: 1099px) { .hall-right { margin-top: 8px; } }
/* 讲解员头上的对话框：说出同学现在在哪一步、下一步干什么（rocket-builder.js 往里写字） */
.say {
  position: relative; margin: 10px 6px 12px; padding: 13px 16px; background: #fff; color: var(--graphite);
  border: 2.5px solid var(--graphite); border-radius: 16px; font-size: 16px; line-height: 1.6;
  box-shadow: 5px 5px 0 var(--graphite);
}
.say::after { content: ""; position: absolute; left: 50%; bottom: -15px; margin-left: -11px; border: 11px solid transparent; border-top-color: var(--graphite); border-bottom: 0; }
.say::before { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -7.5px; border: 7.5px solid transparent; border-top-color: #fff; border-bottom: 0; z-index: 1; }
.say:empty { display: none; }
.say.pop { animation: say-pop .32s var(--ease); }
@keyframes say-pop { from { transform: translateY(4px) scale(.97); opacity: .3; } to { transform: none; opacity: 1; } }
.avatar { margin-top: 14px; }
.talk {
  font: 400 21px/1.1 var(--f-display); letter-spacing: .08em; color: #fff;
  background: radial-gradient(circle at 50% 32%, #ff9a63, #f2531b 58%, #c93d0d);
  box-shadow: 0 0 0 7px #fff, 0 0 0 9px var(--graphite), 0 18px 30px -8px rgba(242, 83, 27, .65);
  transition: transform .12s var(--ease), box-shadow .2s var(--ease);
}
.talk:hover:not(:disabled) { transform: translateY(-1px); }
.talk.recording { background: radial-gradient(circle at 50% 32%, #ff7a8a, #e11d48 60%, #a3102f); animation: talk-pulse 1.1s ease-in-out infinite; }
.talk:disabled { background: #c5cdd8; color: #f4f7fb; box-shadow: 0 0 0 7px #fff, 0 0 0 9px #c5cdd8; }
@keyframes talk-pulse { 0%, 100% { box-shadow: 0 0 0 7px #fff, 0 0 0 9px var(--graphite), 0 0 0 9px rgba(225, 29, 72, .35); } 50% { box-shadow: 0 0 0 7px #fff, 0 0 0 9px var(--graphite), 0 0 0 22px rgba(225, 29, 72, 0); } }
.hint { font-size: 13px; color: #6b778a; line-height: 1.6; }
.hall-right .panel { background: #fff; border: 1.5px solid var(--graphite); border-radius: 10px; padding: 12px 14px; }
.hall-right .panel .label { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .12em; color: #7b8698; }
.hall-right .panel .content { font-size: 16px; }
.timing { font-family: var(--f-mono); font-size: 11px; color: #8592a6; }
.typed input { border: 1.5px solid var(--graphite); border-radius: 10px; background: #fff; color: var(--graphite); }
.typed input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 106, 43, .18); }
.typed button { background: var(--graphite); border-radius: 10px; font-weight: 600; }
.wb-head button { border-color: var(--graphite); border-radius: 6px; color: var(--graphite); }
.card-tip { background: var(--paper); color: var(--graphite); }

@media (min-width: 1100px) and (max-height: 900px) {   /* 矮一点的屏幕：讲解员小一号，“按住说话”“我听到你说”“回答”不用滚就能看全 */
  .hall-right .avatar { margin-top: 6px; }
  .hall-right .avatar svg { width: 168px; height: 210px; }
  .hall-right .talk { width: 112px; height: 112px; margin: 14px auto 12px; font-size: 18px; }
  .hall-right .say { font-size: 15px; padding: 10px 14px; margin-bottom: 8px; }
  .hall-right .hint { font-size: 12px; }
  .hall-right .panel { padding: 9px 12px; margin: 8px 0; }
  .hall-right .panel .content { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-step, .ex-result, .ex-zero, .say.pop, .talk.recording, #exhibit[data-mode="fly"] .ex-launch::before { animation: none !important; }
  .ex-part, .ex-launch { transition: none; }
}