:root {
  color-scheme: light;
  --ink: #10242b;
  --ink-soft: #38515a;
  --paper: #f3f5f0;
  --paper-deep: #e5ebe6;
  --panel: rgba(250, 251, 247, .94);
  --line: rgba(16, 36, 43, .17);
  --line-strong: rgba(16, 36, 43, .34);
  --teal: #0d7773;
  --teal-dark: #07504f;
  --teal-soft: #d5ebe6;
  --orange: #ef6740;
  --orange-soft: #ffe1d5;
  --blue: #58748a;
  --blue-soft: #dce8ee;
  --red: #c9472b;
  --ok: #16825d;
  --warn: #c05e28;
  --danger: #a5332d;
  --shadow: 0 22px 70px rgba(10, 32, 40, .18);
  font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(13, 119, 115, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 119, 115, .025) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
}

button, input { font: inherit; }
button { color: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(239, 103, 64, .72);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.primary-button,
.ghost-button,
.text-button,
.icon-button,
.choice-card,
.option-button,
.action-button {
  border: 0;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.primary-button,
.action-button {
  min-height: 46px;
  padding: 0 22px;
  color: #fff;
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 8px;
  font-weight: 760;
  letter-spacing: .03em;
  box-shadow: 0 10px 24px rgba(13, 119, 115, .2);
}

.primary-button:hover:not(:disabled),
.action-button:hover:not(:disabled) { transform: translateY(-2px); background: var(--teal-dark); }

.ghost-button {
  min-height: 46px;
  padding: 0 22px;
  color: var(--ink);
  background: rgba(255,255,255,.52);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-weight: 720;
}

.ghost-button:hover:not(:disabled) { transform: translateY(-2px); background: #fff; }

.text-button {
  padding: 8px 10px;
  color: var(--ink-soft);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.text-button:hover { color: var(--teal); }

.icon-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-weight: 850;
}

.icon-button:hover { color: #fff; background: var(--ink); }

/* Opening */

.opening {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 30%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(112deg, #f7f5ef 0 42%, #dfe9e5 42% 72%, #cadbd7 72%);
}

.opening::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(13,119,115,.18) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 0 70%, rgba(13,119,115,.12) 70.2%, transparent 70.5%);
  opacity: .6;
}

.opening-grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(16,36,43,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,36,43,.055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, #000, transparent 62%);
}

.opening-copy {
  position: relative;
  z-index: 4;
  width: min(620px, calc(100vw - 64px));
  margin-left: clamp(32px, 7vw, 120px);
  padding: 42px 0;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .24em;
}

.opening h1 {
  margin: 0;
  font-size: clamp(58px, 7vw, 116px);
  line-height: .88;
  letter-spacing: -.065em;
}

.opening h1 span { display: block; }

.opening h1 small {
  display: block;
  margin-top: 18px;
  color: var(--orange);
  font-size: .34em;
  letter-spacing: .32em;
}

.opening-lead {
  max-width: 520px;
  margin: 34px 0 20px;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.75;
}

.opening-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.opening-meta span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 700;
}

.opening-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.opening-note { margin: 20px 0 0; color: #65777c; font-size: 11px; line-height: 1.6; }

.opening-figures { position: absolute; z-index: 2; inset: 0; pointer-events: none; }

.opening-figure {
  position: absolute;
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(.88) contrast(1.02);
  user-select: none;
  -webkit-mask-image: linear-gradient(#000 0 82%, transparent 99%);
  mask-image: linear-gradient(#000 0 82%, transparent 99%);
}

.opening-m0 {
  z-index: 5;
  right: 39%;
  bottom: 8%;
  width: clamp(180px, 18vw, 320px);
  transform: rotate(-4deg);
  animation: float 4.2s ease-in-out infinite;
  mix-blend-mode: normal;
}

.opening-alfa { z-index: 3; right: 20%; bottom: -4%; height: min(94vh, 980px); }
.opening-q { z-index: 2; right: -1%; bottom: -6%; height: min(96vh, 1020px); opacity: .94; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }

/* Main shell */

.game-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 72px minmax(470px, 1fr) 158px;
  background: #e7ece8;
}

.topbar {
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 620px) minmax(180px, 1fr);
  align-items: center;
  gap: 26px;
  min-width: 0;
  padding: 0 26px;
  background: rgba(247,248,244,.96);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(16,36,43,.06);
}

.brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }

.brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--teal);
  border-radius: 10px 4px 10px 4px;
  font-family: serif;
  font-size: 21px;
  font-weight: 900;
}

.brand-lockup b { display: block; font-size: 15px; letter-spacing: .05em; }
.brand-lockup small { display: block; margin-top: 2px; color: #718187; font-size: 8px; letter-spacing: .18em; }

.chapter-meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-width: 0; }
.chapter-meter > span { color: var(--teal); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.chapter-meter > strong { font: 800 11px/1 "Cascadia Code", Consolas, monospace; }
.meter-track { height: 4px; overflow: hidden; background: #cdd8d4; border-radius: 999px; }
.meter-track i { display: block; width: 14.28%; height: 100%; background: var(--orange); border-radius: inherit; transition: width .45s ease; }

.top-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }

.game-main {
  min-height: 0;
  display: grid;
  grid-template-columns: 198px minmax(0, 1fr);
  gap: 0;
}

.mission-rail {
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px 18px 18px;
  background: #f1f4ef;
  border-right: 1px solid var(--line);
}

.mission-heading span { display: block; color: var(--teal); font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.mission-heading b { display: block; margin-top: 6px; font-size: 17px; line-height: 1.3; }
.mission-rail ol { list-style: none; display: grid; gap: 5px; margin: 20px 0; padding: 0; overflow: auto; }

.mission-rail li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  color: #7a898e;
  border-left: 2px solid transparent;
  font-size: 11px;
  font-weight: 650;
}

.mission-rail li i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #839297;
  background: #e2e8e4;
  border-radius: 50%;
  font: 800 9px/1 "Cascadia Code", monospace;
}

.mission-rail li.active { color: var(--ink); background: var(--teal-soft); border-color: var(--teal); }
.mission-rail li.active i { color: #fff; background: var(--teal); }
.mission-rail li.done { color: var(--ink-soft); }
.mission-rail li.done i { color: #fff; background: var(--ok); }

.score-stack {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}

.score-stack div { padding: 9px 4px; text-align: center; border-right: 1px solid var(--line); }
.score-stack div:last-child { border-right: 0; }
.score-stack span { display: block; color: #718187; font-size: 8px; }
.score-stack b { display: block; margin-top: 3px; font: 850 14px/1 "Cascadia Code", monospace; }

.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #dbe4e0; isolation: isolate; }

.stage-backdrop { position: absolute; z-index: -4; inset: 0; overflow: hidden; background: linear-gradient(180deg,#e9eeeb 0 68%,#bccbc6 68% 70%,#d5ddd9 70%); }
.stage-backdrop::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(16,36,43,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(16,36,43,.055) 1px,transparent 1px); background-size:42px 42px; opacity:.46; }
.lab-window { position:absolute; left:5%; top:8%; width:31%; height:45%; border:9px solid rgba(16,36,43,.15); background:linear-gradient(155deg,#bcd7dc,#f5f6f0 62%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8); }
.lab-window::before,.lab-window::after { content:""; position:absolute; background:rgba(16,36,43,.14); }
.lab-window::before { left:50%; top:0; width:2px; height:100%; }
.lab-window::after { left:0; top:55%; width:100%; height:2px; }
.lab-light { position:absolute; top:0; width:24%; height:14px; background:#fff; box-shadow:0 8px 35px 15px rgba(255,255,255,.84); }
.lab-light.one { left:18%; } .lab-light.two { right:18%; }
.stage-beam { position:absolute; left:10%; right:8%; bottom:13%; height:16px; transform:skewX(-12deg); filter:drop-shadow(0 12px 12px rgba(16,36,43,.2)); }
.stage-beam span { display:block; height:8px; border:1px solid #718187; background:linear-gradient(90deg,#819198,#d4dbd8 45%,#7b8a91); }

.character-layer { position: absolute; z-index: -1; inset: 0; pointer-events: none; }

.character {
  position: absolute;
  bottom: -7%;
  margin: 0;
  transition: opacity .28s ease, transform .35s ease, filter .28s ease;
  transform-origin: bottom center;
}

.character img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(#000 0 86%,transparent 100%); mask-image: linear-gradient(#000 0 86%,transparent 100%); }
.character.m0 img { mix-blend-mode: normal; }
.character figcaption { position:absolute; left:50%; bottom:7%; padding:4px 8px; transform:translateX(-50%); color:#fff; background:rgba(16,36,43,.75); font:800 9px/1 "Cascadia Code",monospace; letter-spacing:.12em; }
.character.m0 { left:1.5%; bottom:5%; width:min(22vw,320px); height:min(30vw,330px); animation:floatSoft 4.6s ease-in-out infinite; }
.character.alfa { left:10%; height:min(82vh,780px); width:min(34vw,480px); }
.character.q { right:0; height:min(86vh,820px); width:min(35vw,490px); }
.character:not(.active) { opacity:.36; filter:grayscale(.3) saturate(.7); }
.character.active { z-index:2; opacity:1; filter:none; }
.character.alfa.active { transform:translateX(12px) scale(1.035); }
.character.q.active { transform:translateX(-10px) scale(1.025); }
.character.m0.active { transform:translateY(-8px) scale(1.08); }

@keyframes floatSoft { 0%,100% { translate:0 0; } 50% { translate:0 -7px; } }

.experiment-card {
  position: absolute;
  z-index: 5;
  top: 24px;
  right: 28px;
  bottom: 24px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  width: min(60%, 780px);
  min-width: 560px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(16,36,43,.26);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.experiment-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  color: #fff;
  background: var(--ink);
}

.experiment-card-head span { color:#8dd5c9; font:800 8px/1 "Cascadia Code",monospace; letter-spacing:.15em; }
.experiment-card-head b { font-size:17px; line-height:1.2; }
.experiment-card-head em { padding:5px 7px; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); font:800 8px/1 "Cascadia Code",monospace; font-style:normal; letter-spacing:.1em; }

.experiment-body { min-height:0; overflow:auto; padding:18px; scrollbar-width:thin; scrollbar-color:#9cb1aa transparent; }

/* Dialogue */

.dialogue-box {
  z-index: 30;
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr) 76px;
  min-width: 0;
  padding: 16px 22px;
  color: #f7faf7;
  background: rgba(13, 30, 37, .975);
  border-top: 4px solid var(--orange);
  box-shadow: 0 -16px 40px rgba(16,36,43,.2);
}

.speaker-badge { align-self: start; padding: 8px 14px 8px 0; border-right: 1px solid rgba(255,255,255,.15); }
.speaker-badge span { display:block; color:#fff; font-size:20px; font-weight:880; letter-spacing:.03em; }
.speaker-badge small { display:block; margin-top:5px; color:#98b5b7; font-size:9px; letter-spacing:.12em; }
.speaker-badge.alfa span { color:#ff8b67; }
.speaker-badge.q span { color:#9ec8dc; }
.speaker-badge.m0 span { color:#fff; }
.speaker-badge.system span { color:#9fd8c9; }

.dialogue-copy { min-width:0; padding:0 18px; }
.dialogue-copy > p { min-height:48px; max-width:1040px; margin:0; font-size:16px; line-height:1.8; letter-spacing:.01em; }
.dialogue-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.dialogue-actions button { min-height:34px; padding:6px 12px; color:#eaf4f1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:5px; font-size:12px; font-weight:700; }
.dialogue-actions button:hover:not(:disabled) { color:#fff; background:var(--teal); border-color:var(--teal); }
.dialogue-actions button.primary { background:var(--orange); border-color:var(--orange); }
.line-index { align-self:start; justify-self:end; padding-top:10px; color:#78969a; font:700 8px/1 "Cascadia Code",monospace; letter-spacing:.13em; }

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 178px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 15px;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  color: #fff;
  background: var(--ink);
  border-left: 4px solid var(--orange);
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.5;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

/* Experiment primitives */

.panel-intro { margin-bottom:14px; }
.panel-intro .panel-kicker { margin:0 0 5px; color:var(--teal); font:850 9px/1 "Cascadia Code",monospace; letter-spacing:.14em; }
.panel-intro h2 { margin:0; font-size:24px; line-height:1.25; }
.panel-intro p { margin:8px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.7; }

.formula-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:12px 0; }
.formula-strip div { padding:9px; background:#eef3ef; border:1px solid var(--line); }
.formula-strip span { display:block; color:#718187; font-size:8px; }
.formula-strip b { display:block; margin-top:3px; font:800 11px/1.3 "Cascadia Code",monospace; }

.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.choice-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-card {
  position:relative;
  min-height:96px;
  padding:13px;
  text-align:left;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
}
.choice-card:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--teal); box-shadow:0 10px 24px rgba(16,36,43,.09); }
.choice-card.selected { border-color:var(--teal); background:var(--teal-soft); box-shadow:inset 0 0 0 1px var(--teal); }
.choice-card.wrong { border-color:var(--danger); animation:shake .25s ease; }
.choice-card strong { display:block; font-size:14px; }
.choice-card span { display:block; margin-top:7px; color:var(--ink-soft); font-size:10px; line-height:1.45; }
.choice-card code { display:block; margin-top:8px; color:var(--teal-dark); font:750 9px/1.4 "Cascadia Code",monospace; }

@keyframes shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }

.console-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.micro-note { margin:10px 0 0; color:#708086; font-size:9px; line-height:1.5; }

.feedback-panel { margin-top:12px; padding:11px 12px; border-left:4px solid var(--warn); background:#fff2e9; }
.feedback-panel.pass { border-color:var(--ok); background:#e3f2eb; }
.feedback-panel strong { display:block; font-size:11px; }
.feedback-panel p { margin:5px 0 0; color:var(--ink-soft); font-size:11px; line-height:1.55; }

.beam-selector { position:relative; margin:14px 0; padding:42px 24px 32px; overflow:hidden; background:linear-gradient(#eef3f1,#dce5e1); border:1px solid var(--line); border-radius:8px; }
.beam-selector::before { content:""; position:absolute; left:7%; right:7%; top:50%; height:34px; transform:translateY(-50%); background:linear-gradient(#899da4 0 48%,#60737b 48% 53%,#a5b5b4 53%); border:1px solid #687b82; box-shadow:0 9px 18px rgba(16,36,43,.17); }
.beam-zones { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.beam-zone { min-height:72px; color:var(--ink); background:rgba(255,255,255,.82); border:2px solid transparent; border-radius:6px; font-weight:800; }
.beam-zone:hover { border-color:var(--orange); }
.beam-zone.selected { color:#fff; background:rgba(13,119,115,.92); border-color:#fff; box-shadow:0 0 0 2px var(--teal); }
.beam-legend { position:relative; z-index:2; display:flex; justify-content:space-between; margin-top:28px; color:#5e737a; font-size:9px; font-weight:700; }

.gauge-workbench { display:grid; grid-template-columns:minmax(180px,.72fr) minmax(240px,1.28fr); gap:14px; }
.gauge-cross-section { position:relative; min-height:330px; overflow:hidden; background:linear-gradient(90deg,#f7f7f2,#e1e8e5); border:1px solid var(--line); border-radius:8px; }
.gauge-cross-section::before { content:""; position:absolute; left:50%; top:28px; bottom:28px; width:96px; transform:translateX(-50%); background:linear-gradient(#8d9da3 0 49%,#43565e 49% 51%,#a7b2b0 51%); border:1px solid #65777d; }
.gauge-cross-section::after { content:"界面 y=26 mm"; position:absolute; top:50%; left:calc(50% + 56px); color:#6c7d82; font:700 8px/1 "Cascadia Code",monospace; }
.neutral-line { position:absolute; left:calc(50% - 60px); width:120px; height:1px; background:rgba(239,103,64,.7); }
.neutral-line.lower { top:29%; } .neutral-line.upper { top:71%; }
.neutral-line span { position:absolute; right:105%; top:-5px; white-space:nowrap; color:var(--orange); font:700 8px/1 "Cascadia Code",monospace; }
.gauge-node { position:absolute; z-index:3; left:50%; width:25px; height:12px; transform:translate(-50%,-50%); padding:0; background:#f6faf7; border:2px solid var(--teal); border-radius:3px; box-shadow:0 2px 5px rgba(16,36,43,.18); }
.gauge-node::after { content:attr(data-y); position:absolute; left:30px; top:-1px; color:#4e636a; font:700 8px/1 "Cascadia Code",monospace; }
.gauge-node.selected { background:var(--orange); border-color:#fff; box-shadow:0 0 0 2px var(--orange); }
.gauge-node.selected::before { content:""; position:absolute; left:50%; top:50%; width:15px; height:2px; transform:translate(-50%,-50%); background:#fff; }
.gauge-controls { display:flex; flex-direction:column; min-width:0; }
.selection-counter { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#edf3ef; border:1px solid var(--line); }
.selection-counter span { font-size:10px; color:var(--ink-soft); }
.selection-counter b { font:850 15px/1 "Cascadia Code",monospace; }
.angle-picker { margin-top:12px; }
.angle-picker h3,.subpanel-title { margin:0 0 8px; font-size:11px; }
.angle-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.angle-option { position:relative; }
.angle-option input { position:absolute; opacity:0; }
.angle-option span { display:grid; place-items:center; min-height:44px; background:#fff; border:1px solid var(--line); border-radius:6px; font:800 12px/1 "Cascadia Code",monospace; }
.angle-option input:checked + span { color:#fff; background:var(--teal); border-color:var(--teal); }
.check-list { display:grid; gap:6px; margin:12px 0 0; }
.check-item { display:grid; grid-template-columns:16px 1fr; gap:7px; align-items:start; color:#718187; font-size:9px; line-height:1.35; }
.check-item i { display:grid; place-items:center; width:14px; height:14px; background:#dce4e0; border-radius:50%; font-style:normal; }
.check-item.ok { color:var(--ink); }.check-item.ok i { color:#fff; background:var(--ok); }

.instrument-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.instrument-panel { padding:12px; background:#edf2ef; border:1px solid var(--line); border-radius:8px; }
.instrument-panel h3 { margin:0 0 5px; font-size:13px; }.instrument-panel > p { margin:0 0 10px; color:var(--ink-soft); font-size:9px; line-height:1.5; }
.option-stack { display:grid; gap:7px; }
.option-button { min-height:45px; padding:8px 10px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:11px; font-weight:700; }
.option-button span { display:block; margin-top:3px; color:#718187; font-size:8px; font-weight:550; }
.option-button.selected { color:#fff; background:var(--teal); border-color:var(--teal); }
.option-button.selected span { color:#d8efeb; }
.bridge-diagram { position:relative; height:68px; margin:9px 0; background:#fff; border:1px solid var(--line); }
.bridge-diagram::before { content:""; position:absolute; left:50%; top:50%; width:35px; height:35px; transform:translate(-50%,-50%) rotate(45deg); border:2px solid #60747a; }
.bridge-diagram i { position:absolute; width:6px; height:6px; background:var(--orange); border-radius:50%; }
.bridge-diagram i:nth-child(1){left:calc(50% - 28px);top:calc(50% - 3px)}
.bridge-diagram i:nth-child(2){left:calc(50% - 3px);top:calc(50% - 28px)}
.bridge-diagram i:nth-child(3){right:calc(50% - 28px);top:calc(50% - 3px)}
.bridge-diagram i:nth-child(4){left:calc(50% - 3px);bottom:calc(50% - 28px)}

.calibration-console { display:grid; grid-template-columns:1fr .9fr; gap:14px; }
.zero-bars { display:grid; grid-template-columns:repeat(8,1fr); align-items:center; gap:5px; height:180px; padding:15px; background:#0e2229; border-radius:8px; }
.zero-bar { position:relative; height:100%; background:linear-gradient(180deg,transparent 49.5%,rgba(255,255,255,.22) 50%,transparent 50.5%); }
.zero-bar i { position:absolute; left:50%; bottom:50%; width:7px; height:var(--bar,40%); transform:translateX(-50%); transform-origin:bottom; background:var(--orange); border-radius:4px 4px 0 0; transition:height .55s ease, background .55s ease; }
.zero-bar.balanced i { height:var(--balanced,2%)!important; background:#72d5bb; }
.zero-bar span { position:absolute; left:50%; bottom:-12px; transform:translateX(-50%); color:#8fb0b2; font:700 7px/1 "Cascadia Code",monospace; }
.calibration-readout { display:flex; flex-direction:column; justify-content:center; padding:14px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.calibration-readout span { color:#6c7c81; font-size:9px; }.calibration-readout b { margin:7px 0; color:var(--teal); font:850 31px/1 "Cascadia Code",monospace; }.calibration-readout p { margin:0; color:var(--ink-soft); font-size:10px; line-height:1.5; }

.load-console { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr); gap:12px; }
.chart-card { min-width:0; padding:10px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.chart-head { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:6px; }
.chart-head b { font-size:11px; }.chart-head span { color:#718187; font:700 8px/1 "Cascadia Code",monospace; }
.strain-chart { display:block; width:100%; height:auto; min-height:210px; background:linear-gradient(rgba(16,36,43,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,36,43,.035) 1px,transparent 1px),#f8faf7; background-size:28px 28px; border:1px solid var(--line); }
.strain-chart .axis { stroke:#6f8086; stroke-width:1; }.strain-chart .line-stacked { fill:none; stroke:var(--orange); stroke-width:3; }.strain-chart .line-wedged { fill:none; stroke:var(--teal); stroke-width:3; }.strain-chart .point { stroke:#fff; stroke-width:2; }
.load-control { display:flex; flex-direction:column; gap:8px; }
.load-readout { padding:13px; color:#d8eee9; background:#0e2229; border-radius:8px; }
.load-readout span { display:block; color:#7fa3a5; font-size:8px; letter-spacing:.1em; }.load-readout b { display:block; margin:6px 0 2px; color:#fff; font:850 28px/1 "Cascadia Code",monospace; }.load-readout p { margin:0; color:#90acae; font-size:9px; }
.load-levels { display:grid; gap:5px; }
.load-level { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:7px; min-height:35px; padding:5px 8px; background:#fff; border:1px solid var(--line); border-radius:5px; font-size:9px; }
.load-level i { display:grid; place-items:center; width:20px; height:20px; background:#e2e9e5; border-radius:50%; font-style:normal; font-weight:800; }.load-level.active { border-color:var(--orange); }.load-level.active i { color:#fff; background:var(--orange); }.load-level.done i { color:#fff; background:var(--ok); }.load-level code { font:750 9px/1 "Cascadia Code",monospace; }
.sample-table-wrap { grid-column:1/-1; max-height:142px; overflow:auto; border:1px solid var(--line); background:#fff; }
.sample-table { width:100%; border-collapse:collapse; font-size:9px; }
.sample-table th,.sample-table td { padding:6px 7px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }.sample-table th:first-child,.sample-table td:first-child { text-align:left; }.sample-table th { position:sticky; top:0; background:#edf2ef; }

.wedge-rig { position:relative; min-height:260px; padding:28px 24px; overflow:hidden; background:linear-gradient(#edf2ef,#dce4e0); border:1px solid var(--line); border-radius:8px; }
.wedge-beams { position:absolute; left:9%; right:9%; top:43%; height:46px; }
.wedge-beams i { display:block; height:23px; background:linear-gradient(90deg,#819198,#c7d0cd,#76878e); border:1px solid #64777e; }
.wedge-slot { position:absolute; top:calc(43% + 11px); width:70px; height:23px; transform:translateY(-50%); border:2px dashed var(--orange); }
.wedge-slot.left { left:15%; }.wedge-slot.right { right:15%; }
.wedge-piece { position:absolute; z-index:2; top:calc(43% + 11px); width:29px; height:17px; transform:translateY(-50%); background:linear-gradient(#e8eeee,#85969b); border:1px solid #5f737a; opacity:.18; transition:opacity .25s ease, transform .25s ease; }
.wedge-piece.visible { opacity:1; }.wedge-piece.driven { transform:translateY(-50%) scaleX(.84); box-shadow:inset 0 0 0 2px #fff; }
.wedge-piece.ll { left:16%; }.wedge-piece.lr { left:calc(16% + 33px); }.wedge-piece.rl { right:calc(16% + 33px); }.wedge-piece.rr { right:16%; }
.wedge-actions { position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:172px; }
.wedge-action { min-height:48px; padding:7px; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:9px; font-weight:750; }.wedge-action.current { border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange); }.wedge-action.done { color:#fff; background:var(--ok); border-color:var(--ok); }

.analysis-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.metric-board { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.metric-card { padding:11px; background:#fff; border:1px solid var(--line); border-radius:7px; }
.metric-card span { display:block; color:#718187; font-size:8px; }.metric-card b { display:block; margin-top:6px; color:var(--teal); font:850 18px/1 "Cascadia Code",monospace; }.metric-card small { display:block; margin-top:5px; color:var(--ink-soft); font-size:8px; }
.comparison-sketch { min-height:210px; padding:12px; background:#0e2229; border-radius:8px; color:#fff; }
.comparison-sketch h3 { margin:0; font-size:11px; }.profile-row { display:grid; grid-template-columns:74px 1fr; align-items:center; gap:8px; margin-top:14px; }.profile-row span { color:#8fb0b2; font-size:9px; }.profile-line { position:relative; height:56px; border-left:1px solid #668386; border-bottom:1px solid #668386; }.profile-line i { position:absolute; left:50%; top:3px; bottom:3px; width:2px; background:var(--orange); transform:var(--profile-transform,rotate(18deg)); transform-origin:center; }.profile-line.wedged i { background:#54cab0; transform:rotate(9deg); }.profile-line.stacked i:first-child { top:2px; bottom:51%; }.profile-line.stacked i:last-child { top:51%; bottom:2px; transform:rotate(18deg); }
.conclusion-list { display:grid; gap:7px; grid-column:1/-1; }
.conclusion-button { padding:11px 12px; text-align:left; background:#fff; border:1px solid var(--line); border-radius:7px; font-size:11px; line-height:1.5; }.conclusion-button:hover { border-color:var(--teal); }.conclusion-button.selected { background:var(--teal-soft); border-color:var(--teal); }

.ending-report { display:grid; gap:12px; }
.ending-banner { padding:16px; color:#fff; background:linear-gradient(120deg,var(--teal-dark),var(--teal)); border-radius:8px; }
.ending-banner span { color:#a8ddd5; font:800 8px/1 "Cascadia Code",monospace; letter-spacing:.15em; }.ending-banner h2 { margin:6px 0; font-size:26px; }.ending-banner p { margin:0; color:#e2f3ef; font-size:11px; line-height:1.6; }
.ending-score { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.ending-score div { padding:10px; text-align:center; background:#fff; border:1px solid var(--line); }.ending-score span { display:block; color:#718187; font-size:8px; }.ending-score b { display:block; margin-top:4px; font:850 18px/1 "Cascadia Code",monospace; }
.result-summary { padding:12px; background:#fff; border:1px solid var(--line); }.result-summary h3 { margin:0 0 8px; font-size:12px; }.result-summary ul { margin:0; padding-left:18px; color:var(--ink-soft); font-size:10px; line-height:1.7; }

/* Help */

.help-dialog { width:min(620px,calc(100vw - 30px)); padding:0; color:var(--ink); background:var(--paper); border:1px solid var(--line-strong); box-shadow:var(--shadow); }
.help-dialog::backdrop { background:rgba(8,25,31,.65); backdrop-filter:blur(4px); }
.help-dialog form { padding:22px; }.dialog-head { display:flex; justify-content:space-between; align-items:center; }.dialog-head > span { color:var(--teal); font:850 9px/1 "Cascadia Code",monospace; letter-spacing:.15em; }.help-dialog h2 { margin:12px 0 8px; }.help-dialog p { color:var(--ink-soft); line-height:1.7; }.help-dialog dl { display:grid; gap:8px; margin:16px 0; }.help-dialog dl div { display:grid; grid-template-columns:92px 1fr; gap:10px; padding:9px; background:#fff; border:1px solid var(--line); }.help-dialog dt { font-weight:800; }.help-dialog dd { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.5; }

@media (max-width: 1180px) {
  .opening-copy { width:min(530px,calc(100vw - 48px)); margin-left:34px; }
  .opening-alfa { right:15%; opacity:.88; }.opening-q { right:-9%; opacity:.75; }.opening-m0 { right:35%; }
  .topbar { grid-template-columns:220px 1fr auto; gap:14px; padding:0 16px; }
  .game-main { grid-template-columns:166px minmax(0,1fr); }
  .mission-rail { padding:18px 12px 14px; }
  .experiment-card { width:67%; min-width:520px; right:18px; }
  .character.alfa { left:2%; }.character.q { right:-8%; }
}

@media (max-width: 900px) {
  .opening { align-items:end; min-height:780px; }
  .opening-copy { width:calc(100vw - 32px); margin:0 16px; padding:38px 0 52px; }
  .opening h1 { font-size:58px; }.opening-lead { max-width:520px; font-size:16px; }
  .opening-figures { opacity:.32; }.opening-alfa { right:5%; bottom:0; height:85vh; }.opening-q { right:-24%; height:88vh; }.opening-m0 { right:9%; bottom:37%; width:230px; }
  .game-shell { display:block; min-height:100dvh; }
  .topbar { position:sticky; top:0; grid-template-columns:1fr auto; min-height:64px; padding:8px 12px; }
  .chapter-meter { grid-column:1/-1; grid-row:2; padding-bottom:3px; }.top-actions { grid-column:2; grid-row:1; }.brand-lockup { grid-column:1; grid-row:1; }
  .game-main { display:block; }
  .mission-rail { display:none; }
  .stage { min-height:760px; overflow:visible; }
  .character-layer { position:absolute; height:350px; overflow:hidden; }.character.alfa { left:-10%; height:390px; width:260px; }.character.q { right:-10%; height:410px; width:270px; }.character.m0 { left:36%; bottom:8%; width:150px; height:150px; }
  .experiment-card { position:absolute; top:320px; left:12px; right:12px; bottom:auto; width:auto; min-width:0; min-height:420px; max-height:none; }
  .experiment-body { overflow:visible; }
  .dialogue-box { position:relative; grid-template-columns:100px 1fr; min-height:190px; padding:14px; }
  .dialogue-copy { padding:0 0 0 14px; }.line-index { display:none; }.speaker-badge span { font-size:17px; }.dialogue-copy > p { font-size:14px; }
  .toast { bottom:24px; }
}

@media (max-width: 620px) {
  .opening h1 { font-size:48px; }.opening h1 small { letter-spacing:.22em; }.opening-meta { display:grid; grid-template-columns:1fr 1fr; }
  .brand-lockup small { display:none; }.text-button { font-size:11px; }.chapter-meter { gap:7px; }
  .stage { min-height:850px; }.character-layer { height:300px; }.character.alfa { left:-17%; height:340px; width:230px; }.character.q { right:-18%; height:355px; width:235px; }.character.m0 { left:35%; width:125px; height:125px; }
  .experiment-card { top:274px; min-height:540px; }.experiment-card-head { grid-template-columns:1fr auto; }.experiment-card-head span { grid-column:1/-1; }.experiment-body { padding:13px; }
  .dialogue-box { grid-template-columns:1fr; }.speaker-badge { display:flex; align-items:baseline; gap:8px; padding:0 0 7px; border-right:0; border-bottom:1px solid rgba(255,255,255,.15); }.speaker-badge small { margin:0; }.dialogue-copy { padding:10px 0 0; }
  .formula-strip { grid-template-columns:1fr; }.choice-grid,.choice-grid.two { grid-template-columns:1fr; }.choice-card { min-height:74px; }
  .gauge-workbench,.instrument-grid,.calibration-console,.load-console,.analysis-grid { grid-template-columns:1fr; }.gauge-cross-section { min-height:360px; }.sample-table-wrap { grid-column:auto; }
  .wedge-actions { grid-template-columns:1fr 1fr; margin-top:160px; }.ending-score { grid-template-columns:1fr 1fr; }
  .help-dialog dl div { grid-template-columns:1fr; gap:3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}