:root {
  color-scheme: dark;
  --bg: #04101f;
  --bg-deep: #020914;
  --surface: #07182b;
  --surface-2: #0a2037;
  --surface-3: #0d2944;
  --line: rgba(127, 177, 221, 0.22);
  --line-strong: rgba(50, 215, 238, 0.58);
  --ink: #f7fbff;
  --muted: #a9b9ca;
  --faint: #73859b;
  --cyan: #32d7ee;
  --cyan-soft: #8decf7;
  --yellow: #ffca3a;
  --green: #66e3a4;
  --danger: #ff7f83;
  --thai: "Kanit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hud: "Rajdhani", "Kanit", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --rail: 286px;
  --header: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(rgba(39, 110, 157, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 110, 157, 0.055) 1px, transparent 1px),
    var(--bg-deep);
  background-size: 32px 32px;
  font-family: var(--thai);
  font-weight: 400;
  line-height: 1.6;
}

button, input { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 9px 14px;
  color: #00141d;
  background: var(--cyan);
  border-radius: 5px;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 3.5vw, 54px);
  background: rgba(2, 9, 20, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--cyan);
  text-decoration: none;
}
.brand-icon { width: 39px; height: 39px; flex: none; }
.brand-copy { min-width: 0; display: flex; align-items: baseline; gap: 18px; }
.brand-copy strong {
  color: var(--ink);
  font: 700 clamp(18px, 2vw, 27px)/1 var(--hud);
  letter-spacing: 0.13em;
  white-space: nowrap;
}
.brand-copy small {
  color: var(--cyan);
  font: 600 clamp(14px, 1.5vw, 20px)/1 var(--hud);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand-copy strong::after { content: ""; display: inline-block; width: 2px; height: 0.8em; margin-left: 10px; background: var(--cyan); }

.top-actions { display: flex; align-items: center; gap: 12px; }
.text-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 13px;
}
.text-action svg { width: 20px; }
.text-action:hover, .text-action:focus-visible { color: var(--cyan); border-color: var(--line); }
.menu-button { display: none; width: 46px; height: 44px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: var(--cyan); }

.progress-band {
  position: sticky;
  z-index: 25;
  top: var(--header);
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 10px clamp(18px, 3.5vw, 54px);
  background: rgba(4, 16, 31, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.progress-copy { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 13px; }
.progress-copy strong { color: var(--ink); font-weight: 500; white-space: nowrap; }
.progress-track { height: 6px; overflow: hidden; background: rgba(127, 177, 221, 0.16); border-radius: 9px; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--cyan); border-radius: inherit; transition: width 0.55s cubic-bezier(.22, 1, .36, 1); }
.progress-pct { min-width: 46px; text-align: right; color: var(--cyan); font: 600 16px/1 var(--hud); }

.guide-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: calc(100vh - var(--header) - 66px); }
.lesson-rail {
  position: sticky;
  top: calc(var(--header) + 66px);
  height: calc(100vh - var(--header) - 66px);
  display: flex;
  flex-direction: column;
  background: rgba(4, 16, 31, 0.94);
  border-right: 1px solid var(--line);
}
.rail-head { display: none; }
.lesson-rail nav { overflow-y: auto; padding: 0; }
.chapter-button {
  position: relative;
  width: 100%;
  min-height: 86px;
  display: grid;
  grid-template-columns: 38px 32px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.chapter-button::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: transparent; }
.chapter-button:hover { color: var(--ink); background: rgba(50, 215, 238, 0.035); }
.chapter-button[aria-current="step"] { color: var(--cyan); background: rgba(50, 215, 238, 0.07); }
.chapter-button[aria-current="step"]::before { background: var(--cyan); }
.chapter-button.done .chapter-num { color: #03180e; background: var(--green); border-color: var(--green); }
.chapter-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: currentColor;
  border: 1px solid var(--line);
  border-radius: 50%;
  font: 700 17px/1 var(--hud);
}
.chapter-icon { width: 28px; height: 28px; }
.chapter-label { font-size: 14px; line-height: 1.35; }
.rail-note { display: flex; gap: 11px; margin: auto 18px 14px; padding: 13px 0 0; color: var(--faint); border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.55; }
.rail-note svg { width: 26px; flex: none; color: var(--cyan); }
.rail-note p { margin: 0; }
.rail-note strong { color: var(--muted); font-weight: 500; }
.back-school { min-height: 44px; margin: 0 18px 16px; display: flex; align-items: center; color: var(--cyan); font-size: 12px; text-decoration: none; }
.back-school:hover { color: var(--ink); }
.rail-support { margin-bottom: 0; color: var(--green); }
.rail-scrim { display: none; }
.mobile-chapters { display: none; }

.lesson-stage { min-width: 0; padding: clamp(20px, 3.4vw, 50px); outline: none; }
.lesson-canvas {
  position: relative;
  max-width: 1180px;
  min-height: 720px;
  margin: 0 auto;
  overflow: hidden;
  background:
    linear-gradient(rgba(50, 215, 238, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 215, 238, 0.04) 1px, transparent 1px),
    rgba(4, 16, 31, 0.9);
  background-size: 28px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.24);
}
.lesson-inner { padding: clamp(24px, 4vw, 56px); }
.lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px dashed var(--line-strong); }
.lesson-kicker { margin: 0 0 5px; color: var(--cyan); font: 600 13px/1 var(--hud); letter-spacing: 0.12em; text-transform: uppercase; }
.lesson-head h1 { max-width: 880px; margin: 0; color: var(--ink); font-size: clamp(34px, 5.2vw, 64px); line-height: 1.12; letter-spacing: -0.02em; }
.lesson-head h1 span { color: var(--cyan); }
.lesson-time { flex: none; margin-top: 10px; color: var(--faint); font: 600 13px/1 var(--hud); letter-spacing: 0.06em; }
.lesson-intro { max-width: 780px; margin: 18px 0 0; color: var(--muted); font-size: clamp(15px, 1.45vw, 18px); line-height: 1.8; }
.lesson-intro strong { color: var(--ink); font-weight: 500; }

.start-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.flow-step { min-width: 0; }
.flow-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.flow-num { width: 37px; height: 37px; display: grid; place-items: center; flex: none; color: var(--cyan); border: 2px solid var(--cyan); border-radius: 50%; font: 700 19px/1 var(--hud); }
.flow-top h2 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }
.visual-frame {
  min-height: 208px;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 28, 48, 0.84);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shortcut-demo { text-align: center; }
.shortcut-icon { position: relative; width: 104px; height: 114px; display: grid; place-items: center; margin: 0 auto 10px; color: var(--cyan); background: #0a335b; border: 1px solid rgba(81, 176, 255, 0.55); border-radius: 8px; }
.shortcut-icon svg { width: 60px; }
.shortcut-icon::after { content: "↗"; position: absolute; left: 7px; bottom: 7px; width: 24px; height: 24px; display: grid; place-items: center; color: #0b2e50; background: #f7fbff; font: 700 17px/1 sans-serif; }
.shortcut-demo strong { font-size: 14px; font-weight: 500; }
.terminal-window { width: 100%; overflow: hidden; background: #02070c; border: 1px solid #344657; border-radius: 7px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); }
.terminal-bar { height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: #cbd5df; background: #111a22; font: 500 11px/1 var(--thai); }
.window-controls { color: var(--muted); letter-spacing: 0.35em; }
.terminal-body { min-height: 144px; padding: 18px 15px; color: #f5f8fb; font: 500 13px/1.75 var(--mono); overflow-x: auto; }
.terminal-body .prompt { color: #77dd58; }
.terminal-body .path { color: #a8f37f; }
.cursor { display: inline-block; width: 8px; height: 1em; vertical-align: -0.12em; background: #eef5fb; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.safety-strip { margin-top: 26px; padding: 18px 20px; color: var(--yellow); background: rgba(255, 202, 58, 0.06); border-top: 1px dashed rgba(255, 202, 58, 0.42); border-bottom: 1px dashed rgba(255, 202, 58, 0.42); }
.safety-title { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; font-size: 15px; font-weight: 500; }
.safety-title svg { width: 25px; }
.safety-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.safety-rule { min-height: 58px; padding: 0 20px; border-left: 1px solid rgba(255, 202, 58, 0.24); }
.safety-rule:first-child { padding-left: 0; border-left: 0; }
.safety-rule strong { display: block; color: var(--ink); font-size: 14px; font-weight: 500; }
.safety-rule span { color: var(--muted); font-size: 12px; }

.lesson-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 28px; }
.primary-button, .complete-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 32px;
  color: #00151d;
  background: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(50, 215, 238, 0.17);
}
.primary-button:hover, .complete-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.primary-button svg { width: 24px; }
.secondary-button { min-height: 48px; padding: 10px 4px; color: var(--cyan); background: transparent; font-size: 14px; }
.secondary-button:hover { color: var(--ink); }

/* Manual 360 start routes and evidence flow. */
.start-actions { margin-top: 24px; }
.manual-route-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.manual-route-actions a { min-width: 0; min-height: 76px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; color: var(--muted); background: rgba(7, 24, 43, 0.82); border: 1px solid var(--line); border-radius: 7px; text-decoration: none; }
.manual-route-actions a:hover { color: var(--ink); border-color: var(--cyan); }
.manual-route-actions svg { width: 28px; color: var(--cyan); }
.manual-route-actions strong, .manual-route-actions small { display: block; }
.manual-route-actions strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.manual-route-actions small { margin-top: 2px; color: var(--faint); font-size: 11.5px; }
.manual-route-actions b { color: var(--cyan); font: 400 25px/1 var(--hud); }
.route-overview { margin-top: 26px; overflow: hidden; background: rgba(3, 13, 25, 0.74); border: 1px solid var(--line); border-radius: 8px; }
.route-overview-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.route-overview-head p { margin: 0 0 4px; color: var(--cyan); font: 600 11px/1 var(--hud); letter-spacing: 0.13em; }
.route-overview-head h2 { margin: 0; font-size: 18px; font-weight: 500; }
.route-overview-head > span { color: var(--faint); font-size: 11.5px; }
.route-overview ol { display: grid; grid-template-columns: repeat(8, minmax(80px, 1fr)); gap: 1px; margin: 0; padding: 0; overflow-x: auto; background: var(--line); list-style: none; }
.route-overview li { min-height: 84px; display: flex; flex-direction: column; gap: 7px; padding: 12px; color: var(--muted); background: var(--bg); font-size: 11px; line-height: 1.35; }
.route-overview li b { color: var(--cyan); font: 700 20px/1 var(--hud); }
.no-upload-note { display: flex; align-items: flex-start; gap: 11px; margin: 20px 0 0; padding: 13px 15px; color: var(--muted); background: rgba(102, 227, 164, 0.055); border: 1px solid rgba(102, 227, 164, 0.3); border-radius: 7px; font-size: 12px; }
.no-upload-note svg { width: 23px; flex: none; color: var(--green); }
.no-upload-note strong { color: var(--ink); }
.chain-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 24px; padding: 15px; background: rgba(50, 215, 238, 0.04); border: 1px solid var(--line); border-radius: 8px; }
.chain-strip span { padding: 7px 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.chain-strip b { color: var(--cyan); font-weight: 400; }
.triage-table { overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.triage-table > div { display: grid; grid-template-columns: 0.75fr 1fr 1.2fr; gap: 1px; background: var(--line); }
.triage-table strong, .triage-table span, .triage-table b { padding: 11px 12px; background: var(--bg); font-size: 11.5px; }
.triage-table strong { color: var(--faint); font-weight: 400; }
.triage-table span { color: var(--ink); font-family: var(--mono); }
.triage-table b { color: var(--cyan); font-weight: 500; }
.support-link { display: inline-flex; align-items: center; text-decoration: none; }
.report-workbench { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.report-workbench label { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.report-workbench label strong { color: var(--cyan); font-size: 13px; }
.report-workbench label span { color: var(--faint); font-size: 11px; }
.report-workbench textarea { width: 100%; min-height: 105px; margin-top: 5px; resize: vertical; padding: 10px; color: var(--ink); background: var(--bg-deep); border: 1px solid var(--line); border-radius: 5px; font: 400 12.5px/1.6 var(--thai); }
.report-workbench textarea:focus { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 2px rgba(50, 215, 238, 0.12); }
.report-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.compact { min-height: 44px; padding: 8px 16px; font-size: 13px; }
.report-preview { grid-column: 1 / -1; min-height: 138px; margin: 0; padding: 16px; overflow: auto; color: var(--cyan-soft); background: #02070c; border: 1px solid var(--line); border-radius: 7px; font: 500 12px/1.7 var(--mono); white-space: pre-wrap; }
.copy-report-button { grid-column: 1 / -1; justify-self: end; min-height: 40px; padding: 8px 13px; color: var(--cyan); background: rgba(50, 215, 238, 0.05); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }

.next-preview { margin-top: 26px; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; background: rgba(7, 24, 43, 0.86); border: 1px solid var(--line); border-radius: 8px; }
.next-num { color: #6aaeff; font: 700 42px/1 var(--hud); }
.next-preview small { color: var(--cyan); font-size: 11px; }
.next-preview strong { display: block; font-size: 17px; font-weight: 500; }
.next-preview p { margin: 2px 0 0; color: var(--faint); font-size: 12px; }
.next-button { width: 48px; height: 48px; color: var(--cyan); background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: 27px; }
.next-button:hover { border-color: var(--cyan); }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr); gap: 24px; margin-top: 28px; }
.content-stack { min-width: 0; }
.guide-section { margin-top: 24px; }
.guide-section:first-child { margin-top: 0; }
.section-title { display: flex; align-items: center; gap: 11px; margin: 0 0 10px; color: var(--ink); font-size: 19px; font-weight: 500; }
.section-title .section-num { width: 32px; height: 32px; display: grid; place-items: center; flex: none; color: var(--cyan); border: 1px solid var(--cyan); border-radius: 50%; font: 700 15px/1 var(--hud); }
.guide-section > p, .info-panel p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.guide-section strong, .info-panel strong { color: var(--ink); font-weight: 500; }
.plain-list { margin: 10px 0 0; padding: 0; list-style: none; }
.plain-list li { position: relative; margin: 9px 0; padding-left: 22px; color: var(--muted); font-size: 14px; }
.plain-list li::before { content: "→"; position: absolute; left: 0; color: var(--cyan); }

.command-list { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.command-row { overflow: hidden; background: rgba(1, 8, 15, 0.92); border: 1px solid var(--line); border-radius: 7px; }
.command-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.command-main code { min-width: 0; padding: 13px 15px; color: var(--ink); font: 500 13px/1.65 var(--mono); overflow-x: auto; white-space: pre; }
.command-main code::before { content: "$ "; color: var(--cyan); }
.copy-button { min-width: 74px; min-height: 48px; padding: 8px 13px; color: var(--cyan); background: rgba(50, 215, 238, 0.05); border-left: 1px solid var(--line); font-size: 12px; }
.copy-button:hover, .copy-button.copied { color: #00151d; background: var(--cyan); }
.command-row p { margin: 0; padding: 0 15px 12px; color: var(--faint); font-size: 12px; line-height: 1.55; }

.info-panel { align-self: start; padding: 20px; background: rgba(7, 24, 43, 0.9); border: 1px solid var(--line); border-radius: 8px; }
.info-panel.warning { border-color: rgba(255, 202, 58, 0.4); }
.info-panel h2 { margin: 0 0 12px; color: var(--cyan); font-size: 16px; font-weight: 500; }
.info-panel.warning h2 { color: var(--yellow); }
.key-list { display: grid; gap: 10px; }
.key-list div { display: grid; grid-template-columns: minmax(88px, auto) 1fr; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.key-list div:last-child { padding-bottom: 0; border: 0; }
.key-list span { color: var(--muted); font-size: 12px; }
kbd, .inline-code, code {
  font-family: var(--mono);
}
kbd { display: inline-block; padding: 3px 7px; color: var(--ink); background: #102a43; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; font-size: 11px; }
.inline-code { padding: 2px 6px; color: var(--cyan-soft); background: rgba(2, 9, 20, 0.76); border: 1px solid var(--line); border-radius: 4px; font-size: 0.9em; }

.path-map { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 18px 0; }
.path-box { min-width: 0; padding: 18px; background: rgba(7, 24, 43, 0.9); border: 1px solid var(--line); border-radius: 8px; }
.path-box small { display: block; color: var(--faint); font-size: 11px; }
.path-box code { display: block; margin-top: 5px; color: var(--cyan-soft); font-size: 13px; overflow-wrap: anywhere; }
.path-arrow { color: var(--cyan); font-size: 26px; }

.practice-terminal { margin-top: 15px; overflow: hidden; background: #02070c; border: 1px solid var(--line-strong); border-radius: 8px; }
.practice-output { min-height: 190px; max-height: 280px; overflow-y: auto; padding: 16px; color: #e8f1f8; font: 500 13px/1.7 var(--mono); white-space: pre-wrap; }
.practice-output .sim-note { color: var(--faint); }
.practice-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.practice-form label { color: var(--cyan); font: 700 15px/1 var(--mono); }
.practice-form input { min-width: 0; height: 42px; color: var(--ink); background: transparent; border: 0; outline: none; font: 500 14px/1 var(--mono); }
.practice-form button { min-height: 42px; padding: 8px 16px; color: #00151d; background: var(--cyan); border-radius: 5px; font-size: 12px; font-weight: 600; }

.tool-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 18px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 8px; }
.tool-item { min-width: 0; padding: 18px; background: rgba(7, 24, 43, 0.96); }
.tool-item h2 { margin: 0; color: var(--cyan); font: 700 17px/1 var(--hud); }
.tool-item p { min-height: 44px; margin: 7px 0 12px; color: var(--muted); font-size: 12px; }
.tool-item code { display: block; padding: 9px 10px; color: var(--ink); background: var(--bg-deep); border-radius: 5px; font-size: 11.5px; overflow-x: auto; white-space: nowrap; }

.quiz { margin-top: 24px; padding: 20px; background: rgba(50, 215, 238, 0.045); border: 1px solid var(--line-strong); border-radius: 8px; }
.quiz h2 { margin: 0 0 5px; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.14em; }
.quiz p { margin: 0 0 13px; color: var(--ink); font-size: 15px; }
.quiz-options { display: flex; flex-wrap: wrap; gap: 9px; }
.quiz-option { min-height: 44px; padding: 9px 15px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.quiz-option:hover { color: var(--ink); border-color: var(--cyan); }
.quiz-option.correct { color: #02180f; background: var(--green); border-color: var(--green); }
.quiz-option.wrong { color: var(--ink); background: rgba(255, 127, 131, 0.18); border-color: var(--danger); }
.quiz-result { min-height: 26px; margin-top: 10px; color: var(--muted); font-size: 13px; }

.lesson-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.prev-button { min-height: 48px; padding: 10px 4px; color: var(--muted); background: transparent; }
.prev-button:hover { color: var(--cyan); }
.complete-button.done { color: var(--ink); background: transparent; border-color: var(--green); box-shadow: none; }

.checklist { display: grid; gap: 10px; margin-top: 18px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; color: var(--muted); background: rgba(7, 24, 43, 0.82); border: 1px solid var(--line); border-radius: 7px; }
.check-item input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--green); }
.check-item:has(input:checked) { color: var(--ink); border-color: rgba(102, 227, 164, 0.44); }

.mission-lab { margin-top: 28px; overflow: hidden; background: rgba(7, 24, 43, 0.94); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2); }
.mission-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; }
.mission-head p { margin: 0; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.13em; }
.mission-head h2 { margin: 7px 0 0; color: var(--ink); font-size: 21px; font-weight: 500; }
.mission-head > strong { flex: none; color: var(--cyan); font: 700 26px/1 var(--hud); }
.mission-meter { height: 5px; margin: 0 22px; overflow: hidden; background: rgba(127, 177, 221, 0.15); border-radius: 5px; }
.mission-meter span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); transition: width 0.35s ease; }
.mission-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 18px 0 0; padding: 0; list-style: none; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mission-timeline li { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--faint); background: var(--bg); font-size: 11.5px; }
.mission-timeline li span { width: 25px; height: 25px; display: grid; place-items: center; flex: none; color: var(--faint); border: 1px solid var(--line); border-radius: 50%; font: 700 12px/1 var(--hud); }
.mission-timeline li.active { color: var(--ink); background: rgba(50, 215, 238, 0.07); }
.mission-timeline li.active span { color: var(--cyan); border-color: var(--cyan); }
.mission-timeline li.done { color: var(--green); }
.mission-timeline li.done span { color: #02180f; background: var(--green); border-color: var(--green); }
.mission-console { padding: 22px; background: rgba(1, 8, 15, 0.7); }
.mission-label { margin: 0 0 7px; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.11em; }
.mission-console h3 { max-width: 850px; margin: 0; color: var(--ink); font-size: 19px; font-weight: 500; line-height: 1.55; }
.mission-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }
.mission-choice, .mission-reset, .mission-sheet-link { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 11px 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; text-align: left; text-decoration: none; font-size: 12.5px; line-height: 1.45; }
.mission-choice span { width: 28px; height: 28px; display: grid; place-items: center; flex: none; color: var(--cyan); background: var(--bg); border-radius: 5px; font: 700 14px/1 var(--hud); }
.mission-choice:hover { color: var(--ink); border-color: var(--cyan); }
.mission-choice.correct { color: #02180f; background: var(--green); border-color: var(--green); }
.mission-choice.correct span { color: var(--green); }
.mission-choice.wrong { color: var(--ink); background: rgba(255, 127, 131, 0.12); border-color: var(--danger); }
.mission-choice:disabled { cursor: default; opacity: 0.64; }
.mission-choice.correct:disabled { opacity: 1; }
.mission-feedback { min-height: 28px; margin: 13px 0 0; color: var(--faint); font-size: 12.5px; }
.mission-feedback.success { color: var(--green); }
.mission-feedback.retry { color: var(--yellow); }
.mission-reset, .mission-sheet-link { min-height: 48px; justify-content: center; color: #00151d; background: var(--cyan); border-color: var(--cyan); text-align: center; font-weight: 600; }
.mission-sheet-link { color: var(--cyan); background: transparent; }
.mission-note { margin: 0; padding: 11px 22px; color: var(--faint); background: rgba(4, 16, 31, 0.9); border-top: 1px solid var(--line); font-size: 11.5px; }

.emergency-dialog, .search-dialog {
  width: min(760px, calc(100% - 30px));
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 30px 100px #000;
}
.emergency-dialog::backdrop, .search-dialog::backdrop { background: rgba(0, 5, 12, 0.82); backdrop-filter: blur(4px); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); }
.dialog-head p { margin: 0; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.13em; }
.dialog-head h2 { margin: 6px 0 0; font-size: 22px; font-weight: 500; }
.dialog-head button { width: 44px; height: 44px; flex: none; color: var(--muted); background: transparent; font-size: 28px; }
.emergency-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 22px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 8px; }
.emergency-grid div { min-height: 88px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 15px; background: var(--bg); }
.emergency-grid code { color: var(--cyan); font-size: 16px; }
.emergency-grid span { color: var(--muted); font-size: 12px; }
.dialog-safety { margin: 0 22px 22px; padding: 13px; color: var(--yellow); background: rgba(255, 202, 58, 0.06); border: 1px solid rgba(255, 202, 58, 0.32); border-radius: 7px; font-size: 13px; }
.dialog-sheet-link { display: block; margin: -8px 22px 22px; color: var(--cyan); text-align: right; text-decoration: none; font-size: 13px; }
.dialog-sheet-link:hover { color: var(--ink); }
.sheet-button { display: block; min-height: 0; padding: 5px 0; text-decoration: none; }
.dialog-link-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 14px; margin: -8px 22px 22px; }
.dialog-link-row .dialog-sheet-link { margin: 0; }

/* Global manual search. */
.search-dialog { max-height: min(780px, calc(100vh - 30px)); }
.search-dialog-head { padding-bottom: 18px; }
.manual-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 18px 22px 8px; padding: 0 13px; background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 7px; }
.manual-search svg { width: 22px; color: var(--cyan); }
.manual-search input { min-width: 0; height: 52px; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 14px; }
.search-hint { margin: 0 22px 12px; color: var(--faint); font-size: 11.5px; }
.search-results { max-height: min(430px, 50vh); margin: 0 22px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; }
.search-result { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; padding: 12px 14px; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); text-decoration: none; }
.search-result:last-child { border-bottom: 0; }
.search-result:hover { color: var(--ink); background: rgba(50, 215, 238, 0.06); }
.search-result > span { grid-row: 1 / span 2; color: var(--cyan); font: 600 11px/1 var(--hud); letter-spacing: 0.05em; }
.search-result strong { color: var(--ink); font-size: 13.5px; font-weight: 500; }
.search-result small { color: var(--faint); font-size: 11px; }
.search-result b { grid-column: 3; grid-row: 1 / span 2; color: var(--cyan); font: 400 23px/1 var(--hud); }
.search-empty { display: flex; flex-direction: column; gap: 5px; padding: 24px; color: var(--faint); text-align: center; }
.search-empty strong { color: var(--ink); }
.search-empty a { margin-top: 8px; color: var(--cyan); text-decoration: none; }
.search-shortcuts { display: flex; justify-content: space-between; gap: 12px; margin: 14px 22px 20px; }
.search-shortcuts a { color: var(--cyan); font-size: 11.5px; text-decoration: none; }

.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: min(360px, calc(100% - 44px)); padding: 11px 16px; color: #00151d; background: var(--cyan); border-radius: 6px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(12px); transition: 0.25s; }
.toast.show { opacity: 1; transform: none; }

footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 22px clamp(18px, 3.5vw, 54px); color: var(--faint); background: var(--bg-deep); border-top: 1px solid var(--line); font-size: 11.5px; }
footer p { margin: 0; }
footer strong { color: var(--muted); font-family: var(--hud); letter-spacing: 0.1em; }
noscript { display: block; padding: 20px; color: var(--yellow); background: var(--bg-deep); }

/* Full quick sheet — same accepted visual system, optimized for scanning and print. */
.quick-sheet-page { background-color: var(--bg-deep); }
.quick-topbar { position: sticky; }
.quick-shell { width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 44px 0 54px; }
.quick-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 36px; align-items: end; padding-bottom: 30px; border-bottom: 1px dashed var(--line-strong); }
.quick-back { display: inline-block; margin-bottom: 18px; color: var(--cyan); text-decoration: none; font-size: 13px; }
.quick-hero h1 { margin: 0; color: var(--ink); font-size: clamp(40px, 5.4vw, 72px); font-weight: 600; line-height: 1.03; letter-spacing: -0.035em; }
.quick-hero h1 span { color: var(--cyan); }
.quick-hero > div > p { max-width: 780px; margin: 17px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.quick-hero > div > p strong { color: var(--ink); font-weight: 500; }
.quick-search-wrap { padding: 18px; background: rgba(7, 24, 43, 0.88); border: 1px solid var(--line); border-radius: 8px; }
.quick-search-wrap label { display: block; margin-bottom: 8px; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.08em; }
.quick-search-wrap input { width: 100%; height: 48px; padding: 0 14px; color: var(--ink); background: var(--bg-deep); border: 1px solid var(--line); border-radius: 6px; outline: 0; font-size: 14px; }
.quick-search-wrap input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(50, 215, 238, 0.14); }
.quick-search-wrap p { margin: 8px 0 0; color: var(--faint); font-size: 11.5px; }
.quick-safety { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 1px; margin-top: 26px; overflow: hidden; background: rgba(255, 202, 58, 0.24); border: 1px solid rgba(255, 202, 58, 0.42); border-radius: 8px; }
.quick-safety h2 { display: flex; align-items: center; margin: 0; padding: 16px 18px; color: var(--yellow); background: rgba(255, 202, 58, 0.07); font-size: 16px; font-weight: 500; }
.quick-safety div { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--bg); }
.quick-safety div strong { width: 28px; height: 28px; display: grid; place-items: center; flex: none; color: #251b00; background: var(--yellow); border-radius: 50%; font: 700 13px/1 var(--hud); }
.quick-safety div span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.quick-safety div b { display: block; color: var(--ink); font-weight: 500; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.quick-group { min-width: 0; overflow: hidden; background: rgba(7, 24, 43, 0.92); border: 1px solid var(--line); border-radius: 8px; }
.quick-group[hidden] { display: none; }
.quick-group > header { display: flex; align-items: center; gap: 12px; padding: 17px 18px; border-bottom: 1px solid var(--line); }
.quick-group > header span { width: 34px; height: 34px; display: grid; place-items: center; flex: none; color: var(--cyan); border: 1px solid var(--cyan); border-radius: 50%; font: 700 14px/1 var(--hud); }
.quick-group > header h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 500; }
.quick-command { min-width: 0; display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.quick-command:last-child { border-bottom: 0; }
.quick-command code { min-width: 0; color: var(--cyan-soft); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.quick-command > span { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.quick-command button { min-width: 66px; min-height: 36px; padding: 6px 9px; color: var(--cyan); background: rgba(50, 215, 238, 0.05); border: 1px solid var(--line); border-radius: 5px; font-size: 11px; }
.quick-command button:hover, .quick-command button.copied { color: #00151d; background: var(--cyan); border-color: var(--cyan); }
.key-command { grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 1fr); }
.quick-checklist, .quick-stop-list { margin: 0; padding: 16px 20px 18px 46px; }
.quick-checklist li, .quick-stop-list li { margin: 8px 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.quick-checklist li::marker { color: var(--green); font-family: var(--hud); font-weight: 700; }
.warning-group { border-color: rgba(255, 202, 58, 0.36); }
.warning-group > header span { color: var(--yellow); border-color: var(--yellow); }
.warning-group > header h2, .quick-stop-list li::marker { color: var(--yellow); }
.quick-report-rule { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 1px; margin-top: 26px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 8px; }
.quick-report-rule h2 { display: flex; align-items: center; margin: 0; padding: 18px; color: var(--cyan); background: var(--surface-2); font-size: 17px; font-weight: 500; }
.quick-report-rule div { padding: 16px; background: var(--bg); }
.quick-report-rule strong { display: block; color: var(--ink); font-size: 13px; font-weight: 500; }
.quick-report-rule span { display: block; margin-top: 5px; color: var(--faint); font-size: 11.5px; line-height: 1.5; }
.quick-footer { width: 100%; }

/* Support Center — one decision workspace, not a dashboard of cards. */
.support-page { background-color: var(--bg-deep); }
.support-top-actions .text-action { text-decoration: none; }
.support-shell { display: grid; grid-template-columns: 286px minmax(0, 1fr); min-height: calc(100vh - var(--header)); }
.support-rail { position: sticky; top: var(--header); height: calc(100vh - var(--header)); padding: 26px 18px; background: rgba(4, 16, 31, 0.96); border-right: 1px solid var(--line); }
.support-rail > p:first-child { margin: 0 0 14px; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.1em; }
.support-rail nav { display: grid; }
.support-rail nav a { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px; color: var(--muted); border-left: 2px solid transparent; text-decoration: none; font-size: 12px; }
.support-rail nav a:hover, .support-rail nav a.active { color: var(--ink); background: rgba(50, 215, 238, 0.055); border-left-color: var(--cyan); }
.support-rail nav a b { width: 27px; height: 27px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line); border-radius: 50%; font: 700 12px/1 var(--hud); }
.support-rail-note { margin: 22px 10px 0 !important; padding-top: 15px; color: var(--faint) !important; border-top: 1px solid var(--line); font-size: 11px; }
.support-main { min-width: 0; width: min(1240px, 100%); margin: 0 auto; padding: clamp(26px, 4vw, 56px); }
.support-hero { padding-bottom: 28px; border-bottom: 1px dashed var(--line-strong); }
.support-hero h1 { max-width: 900px; margin: 0; font-size: clamp(38px, 5.6vw, 68px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; }
.support-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; max-width: 880px; margin-top: 22px; padding: 0 16px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 7px; }
.support-search svg { width: 23px; color: var(--cyan); }
.support-search input { min-width: 0; height: 56px; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 14px; }
.support-modes { display: flex; gap: 8px; margin-top: 14px; }
.support-modes button { min-height: 43px; padding: 8px 15px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 5px; font-size: 12px; }
.support-modes button.active { color: #00151d; background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.support-search-status { margin: 10px 0 0; color: var(--faint); font-size: 11.5px; }
.support-workspace { margin-top: 30px; }
.support-step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.support-step-title > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; color: var(--cyan); border: 2px solid var(--cyan); border-radius: 50%; font: 700 18px/1 var(--hud); }
.support-step-title h2, .support-step-title p { margin: 0; }
.support-step-title h2 { font-size: 18px; font-weight: 500; }
.support-step-title p { color: var(--faint); font-size: 11.5px; }
.finder-layout, .trouble-layout { display: grid; grid-template-columns: minmax(210px, 0.37fr) minmax(0, 1fr); gap: 16px; }
.family-list, .symptom-list { display: grid; align-content: start; gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.family-button { min-height: 58px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; color: var(--muted); text-align: left; background: var(--bg); }
.family-button:hover, .family-button[aria-current="true"] { color: var(--ink); background: rgba(50, 215, 238, 0.08); }
.family-button > span { width: 29px; height: 29px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line); border-radius: 5px; font: 700 14px/1 var(--hud); }
.family-button strong { font-size: 12.5px; font-weight: 500; }
.family-button b { color: var(--cyan); font-size: 18px; font-weight: 400; }
.recommendation, .trouble-detail { min-width: 0; overflow: hidden; background: rgba(7, 24, 43, 0.92); border: 1px solid var(--line); border-radius: 8px; }
.recommendation > header, .trouble-detail > header { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.recommendation header p, .trouble-detail header p { margin: 0; color: var(--cyan); font: 600 11px/1 var(--hud); letter-spacing: 0.1em; }
.recommendation header h2, .trouble-detail header h2 { margin: 7px 0 3px; font-size: 22px; font-weight: 500; }
.recommendation header span, .trouble-detail header span { color: var(--muted); font-size: 12px; }
.recommendation-steps, .trouble-steps { margin: 0; padding: 0; list-style: none; }
.recommendation-steps li { display: grid; grid-template-columns: 32px minmax(0, 1.1fr) minmax(150px, 0.75fr); gap: 12px; align-items: start; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.recommendation-steps li > span, .trouble-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--cyan); border-radius: 50%; font: 700 13px/1 var(--hud); }
.recommendation-steps strong { display: block; color: var(--ink); font-size: 12px; font-weight: 500; }
.recommendation-steps code { display: block; margin: 6px 0; color: var(--cyan-soft); font-size: 11.5px; overflow-wrap: anywhere; }
.recommendation-steps button, .trouble-command button { min-height: 36px; padding: 6px 10px; color: var(--cyan); background: rgba(50, 215, 238, 0.05); border: 1px solid var(--line); border-radius: 5px; font-size: 10.5px; }
.recommendation-steps small { color: var(--faint); font-size: 11px; line-height: 1.5; }
.recommendation-steps small b { display: block; color: var(--muted); font-weight: 500; }
.recommendation-limit { margin: 0; padding: 14px 20px; color: var(--muted); background: rgba(255, 202, 58, 0.055); border-bottom: 1px solid rgba(255, 202, 58, 0.2); font-size: 11.5px; }
.recommendation-limit strong { margin-right: 8px; color: var(--yellow); }
.recommendation-actions { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.recommendation-actions a, .recommendation-actions button { color: var(--cyan); background: transparent; text-decoration: none; font-size: 11.5px; }
.symptom-button { min-height: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 9px 13px; color: var(--muted); text-align: left; background: var(--bg); }
.symptom-button:hover, .symptom-button[aria-current="true"] { color: var(--ink); background: rgba(50, 215, 238, 0.08); }
.symptom-button strong { font-size: 12px; font-weight: 500; }
.symptom-button span { color: var(--faint); font-size: 10.5px; }
.trouble-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trouble-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; padding: 15px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trouble-steps p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.trouble-command { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 18px; padding: 14px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 7px; }
.trouble-command strong { grid-column: 1 / -1; color: var(--ink); font-size: 12px; }
.trouble-command code { min-width: 0; color: var(--cyan-soft); overflow-wrap: anywhere; font-size: 11.5px; }
.trouble-command small { grid-column: 1 / -1; color: var(--faint); font-size: 11px; }
.trouble-command small b { color: var(--muted); }
.trouble-stop { margin: 0; padding: 14px 18px; color: var(--muted); background: rgba(255, 202, 58, 0.06); border-top: 1px solid rgba(255, 202, 58, 0.25); font-size: 11.5px; }
.trouble-stop strong { color: var(--yellow); }
.glossary-section { margin-top: 42px; padding-top: 28px; border-top: 1px dashed var(--line-strong); }
.glossary-section > header { display: flex; justify-content: space-between; gap: 24px; align-items: end; }
.glossary-section h2, .glossary-section p { margin: 0; }
.glossary-section h2 { font-size: 26px; font-weight: 500; }
.glossary-section header p { color: var(--faint); font-size: 12px; }
.glossary-section label { color: var(--cyan); font-size: 11px; }
.glossary-section input { display: block; width: min(320px, 100%); height: 42px; margin-top: 6px; padding: 0 11px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; }
.glossary-list { margin: 18px 0 0; border-top: 1px solid var(--line); }
.glossary-row { display: grid; grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr); gap: 22px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.glossary-row dt { color: var(--cyan); font-weight: 500; }
.glossary-row dd { margin: 0; color: var(--muted); font-size: 12.5px; }
.glossary-status { margin-top: 9px !important; color: var(--faint); font-size: 11px; }
.support-closeout { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 34px; padding: 20px; color: var(--muted); background: rgba(255, 202, 58, 0.055); border: 1px solid rgba(255, 202, 58, 0.32); border-radius: 8px; }
.support-closeout h2, .support-closeout p { margin: 0; }
.support-closeout h2 { color: var(--yellow); font-size: 18px; font-weight: 500; }
.support-closeout p { font-size: 12px; }
.support-closeout a { flex: none; color: var(--cyan); text-decoration: none; font-size: 12px; }

/* Complete handbook: screen reading plus A4-ready output. */
.handbook-page { background-color: var(--bg-deep); }
.handbook-topbar { position: sticky; }
.handbook { width: min(1100px, calc(100% - 36px)); margin: 0 auto; padding: 48px 0 60px; }
.handbook-cover { padding: clamp(28px, 6vw, 76px); background: rgba(4, 16, 31, 0.9); border: 1px solid var(--line); border-radius: 10px; }
.handbook-edition { margin: 0 0 20px; color: var(--cyan); font: 600 12px/1 var(--hud); letter-spacing: 0.16em; }
.handbook-cover h1 { margin: 0; font-size: clamp(48px, 8vw, 96px); font-weight: 600; line-height: 0.98; letter-spacing: -0.04em; }
.handbook-cover h1 span { color: var(--cyan); font-size: 0.52em; letter-spacing: -0.02em; }
.handbook-cover > p:not(.handbook-edition) { max-width: 770px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.handbook-cover-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.handbook-cover-actions a { min-height: 46px; display: inline-flex; align-items: center; padding: 9px 16px; color: #00151d; background: var(--cyan); border: 1px solid var(--cyan); border-radius: 5px; text-decoration: none; font-size: 13px; font-weight: 600; }
.handbook-cover-actions a + a { color: var(--cyan); background: transparent; border-color: var(--line); }
.handbook-safety { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px dashed rgba(255, 202, 58, 0.42); }
.handbook-safety strong { color: var(--yellow); }
.handbook-safety span { color: var(--muted); font-size: 12px; }
.handbook-toc { margin-top: 22px; padding: 24px; background: rgba(7, 24, 43, 0.84); border: 1px solid var(--line); border-radius: 8px; }
.handbook-toc > div p, .handbook-toc > div h2 { margin: 0; }
.handbook-toc > div p { color: var(--cyan); font: 600 11px/1 var(--hud); letter-spacing: 0.12em; }
.handbook-toc > div h2 { margin-top: 4px; font-size: 24px; font-weight: 500; }
.handbook-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0 0; padding: 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 6px; list-style: none; }
.handbook-toc a { min-height: 54px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 9px 12px; color: var(--muted); background: var(--bg); text-decoration: none; }
.handbook-toc a:hover { color: var(--ink); background: rgba(50, 215, 238, 0.06); }
.handbook-toc b { color: var(--cyan); font: 700 18px/1 var(--hud); }
.handbook-chapter { scroll-margin-top: calc(var(--header) + 20px); margin-top: 22px; padding: clamp(24px, 4.5vw, 50px); background: rgba(4, 16, 31, 0.9); border: 1px solid var(--line); border-radius: 9px; }
.handbook-chapter > header { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--line-strong); }
.handbook-chapter > header > span { color: var(--cyan); font: 700 52px/1 var(--hud); }
.handbook-chapter header p, .handbook-chapter header h2 { margin: 0; }
.handbook-chapter header p { color: var(--cyan); font: 600 11px/1 var(--hud); letter-spacing: 0.12em; }
.handbook-chapter header h2 { margin-top: 3px; font-size: clamp(26px, 4vw, 42px); font-weight: 500; line-height: 1.18; }
.handbook-chapter > p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.handbook-lead { color: var(--ink) !important; font-size: 16px !important; }
.handbook-steps, .handbook-checklist { padding-left: 24px; }
.handbook-steps li, .handbook-checklist li { margin: 8px 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.handbook-steps li::marker, .handbook-checklist li::marker { color: var(--cyan); font-weight: 700; }
.handbook-command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.handbook-command-grid > div { min-width: 0; padding: 13px 15px; background: var(--bg-deep); }
.handbook-command-grid code { display: block; color: var(--cyan-soft); font-size: 12px; overflow-wrap: anywhere; }
.handbook-command-grid span { display: block; margin-top: 3px; color: var(--faint); font-size: 11px; }
.handbook-stop { padding: 14px 16px; color: var(--muted) !important; background: rgba(255, 202, 58, 0.055); border: 1px solid rgba(255, 202, 58, 0.32); border-radius: 6px; }
.handbook-stop strong { color: var(--yellow); }
.handbook-map { margin: 20px 0; padding: 18px; background: #02070c; border: 1px solid var(--line); border-radius: 7px; }
.handbook-map code { color: var(--cyan-soft); font-size: clamp(13px, 2.4vw, 20px); overflow-wrap: anywhere; }
.handbook-map p { margin: 8px 0 0; color: var(--faint); font-size: 12px; }
.handbook-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 18px 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 7px; }
.handbook-three div { padding: 14px; background: var(--bg); }
.handbook-three strong, .handbook-three span { display: block; }
.handbook-three strong { color: var(--cyan); }
.handbook-three span { color: var(--faint); font-size: 11px; }
.handbook-chapter table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 12px; }
.handbook-chapter th, .handbook-chapter td { padding: 10px; text-align: left; vertical-align: top; border: 1px solid var(--line); }
.handbook-chapter th { color: var(--cyan); background: var(--surface); font-weight: 500; }
.handbook-chapter td { color: var(--muted); background: rgba(2, 9, 20, 0.58); }
.handbook-chapter td code { color: var(--cyan-soft); overflow-wrap: anywhere; }
.handbook-report-template { margin: 20px 0; padding: 20px; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 7px; }
.handbook-report-template h3 { margin: 0 0 12px; color: var(--cyan); font-size: 17px; font-weight: 500; }
.handbook-report-template p { margin: 8px 0; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.fact-band strong { color: var(--ink); }
.handbook-emergency { display: grid; grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; padding: 28px; background: rgba(255, 202, 58, 0.055); border: 1px solid rgba(255, 202, 58, 0.4); border-radius: 9px; }
.handbook-emergency p, .handbook-emergency h2 { margin: 0; }
.handbook-emergency p { color: var(--yellow); font: 600 11px/1 var(--hud); letter-spacing: 0.12em; }
.handbook-emergency h2 { margin-top: 6px; font-size: 25px; font-weight: 500; }
.handbook-emergency ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 6px; list-style: none; }
.handbook-emergency li { display: grid; grid-template-columns: 88px 1fr; gap: 8px; padding: 10px; background: var(--bg); }
.handbook-emergency code { color: var(--cyan-soft); }
.handbook-emergency span { color: var(--faint); font-size: 11px; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

@media (max-width: 940px) {
  :root { --header: 66px; }
  .brand-copy small { display: none; }
  .brand-copy strong::after { display: none; }
  .text-action span { display: none; }
  .menu-button { display: block; }
  .progress-band { grid-template-columns: 1fr auto; gap: 9px 18px; }
  .progress-copy { justify-content: space-between; gap: 16px; }
  .progress-track { grid-column: 1 / -1; grid-row: 2; }
  .progress-pct { grid-column: 2; grid-row: 1; }
  .guide-shell { display: block; }
  .lesson-rail { position: fixed; z-index: 55; top: 0; left: 0; width: min(340px, 88vw); height: 100vh; transform: translateX(-105%); transition: transform 0.28s ease; box-shadow: 30px 0 70px rgba(0, 0, 0, 0.5); }
  .lesson-rail.open { transform: none; }
  .rail-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); }
  .rail-head p { margin: 0; color: var(--cyan); font-size: 14px; }
  .rail-head button { width: 44px; height: 44px; color: var(--muted); background: transparent; font-size: 27px; }
  .rail-scrim { position: fixed; z-index: 50; inset: 0; display: block; background: rgba(0, 5, 12, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.28s; }
  .rail-scrim.open { opacity: 1; pointer-events: auto; }
  .mobile-chapters {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    padding: 0 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .mobile-chapters::-webkit-scrollbar { display: none; }
  .mobile-chapter {
    min-width: 128px;
    min-height: 78px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--faint);
    text-align: left;
    background: transparent;
    border-bottom: 2px solid transparent;
  }
  .mobile-chapter strong { color: inherit; font: 700 22px/1 var(--hud); }
  .mobile-chapter span { font-size: 11px; line-height: 1.25; }
  .mobile-chapter[aria-current="step"] { color: var(--cyan); background: rgba(50, 215, 238, 0.05); border-bottom-color: var(--cyan); }
  .mobile-chapter.done strong { color: var(--green); }
  .lesson-stage { padding: 18px; }
  .lesson-canvas { min-height: 0; }
  .lesson-inner { padding: 26px; }
  .lesson-head { display: block; }
  .start-flow { grid-template-columns: 1fr; }
  .flow-step { display: grid; grid-template-columns: minmax(160px, 0.55fr) minmax(0, 1fr); gap: 16px; align-items: center; }
  .flow-top { align-self: start; }
  .visual-frame { min-height: 180px; }
  .content-grid { grid-template-columns: 1fr; }
  .info-panel { order: -1; }
  .mission-timeline { grid-template-columns: repeat(2, 1fr); }
  .route-overview ol { grid-template-columns: repeat(4, minmax(125px, 1fr)); }
  .report-workbench { grid-template-columns: 1fr; }
  .report-actions, .report-preview, .copy-report-button { grid-column: 1; }
  .support-shell { display: block; }
  .support-rail { position: static; width: 100%; height: auto; padding: 12px 18px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .support-rail > p { display: none; }
  .support-rail nav { display: flex; width: max-content; }
  .support-rail nav a { min-width: 145px; border-left: 0; border-bottom: 2px solid transparent; }
  .support-rail nav a:hover, .support-rail nav a.active { border-left-color: transparent; border-bottom-color: var(--cyan); }
  .finder-layout, .trouble-layout { grid-template-columns: minmax(190px, 0.35fr) minmax(0, 1fr); }
  .recommendation-steps li { grid-template-columns: 32px minmax(0, 1fr); }
  .recommendation-steps li > small { grid-column: 2; }
  .handbook-emergency { grid-template-columns: 1fr; }
  .quick-hero { grid-template-columns: 1fr; align-items: start; }
  .quick-search-wrap { max-width: 620px; }
  .quick-safety { grid-template-columns: repeat(3, 1fr); }
  .quick-safety h2 { grid-column: 1 / -1; }
  .quick-command { grid-template-columns: minmax(170px, 0.85fr) minmax(130px, 1fr) auto; }
  .quick-report-rule { grid-template-columns: repeat(3, 1fr); }
  .quick-report-rule h2 { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { background-size: 24px 24px; }
  .topbar { padding: 0 16px; }
  .brand { gap: 10px; }
  .brand-icon { width: 34px; height: 34px; }
  .brand-copy strong { font-size: 18px; letter-spacing: 0.08em; }
  .text-action { display: none; }
  .progress-band { top: var(--header); padding: 10px 18px 13px; }
  .progress-copy { font-size: 12px; }
  .lesson-stage { padding: 0; }
  .lesson-canvas { border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
  .lesson-inner { padding: 27px 18px 30px; }
  .lesson-head { text-align: center; }
  .lesson-head h1 { font-size: clamp(34px, 9vw, 42px); }
  .lesson-head h1 span { display: block; }
  .lesson-time { display: none; }
  .lesson-intro { max-width: 350px; margin-left: auto; margin-right: auto; font-size: 14px; }
  .start-flow { position: relative; gap: 0; }
  .start-flow::before { content: ""; position: absolute; z-index: 0; top: 38px; bottom: 38px; left: 18px; border-left: 1px dashed rgba(50,215,238,.5); }
  .flow-step { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 8px 12px; padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .flow-step:last-child { border-bottom: 0; }
  .flow-top { display: contents; }
  .flow-num { grid-column: 1; grid-row: 1; width: 37px; height: 37px; background: var(--bg); }
  .flow-top h2 { grid-column: 2; grid-row: 1; align-self: center; }
  .visual-frame { grid-column: 2; grid-row: 2; min-height: 160px; }
  .safety-strip { margin-left: -18px; margin-right: -18px; padding: 16px 18px; }
  .safety-rules { grid-template-columns: 1fr; gap: 9px; }
  .safety-rule, .safety-rule:first-child { min-height: 0; padding: 0 0 9px; border: 0; border-bottom: 1px solid rgba(255, 202, 58, 0.18); }
  .safety-rule:last-child { padding-bottom: 0; border-bottom: 0; }
  .lesson-actions { flex-direction: column; gap: 8px; }
  .primary-button, .complete-button { width: 100%; }
  .manual-route-actions { grid-template-columns: 1fr; }
  .route-overview-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .route-overview ol { grid-template-columns: repeat(8, minmax(118px, 1fr)); }
  .triage-table > div { grid-template-columns: 1fr; }
  .triage-table strong, .triage-table span, .triage-table b { padding: 8px 11px; }
  .search-dialog { width: calc(100% - 18px); max-height: calc(100vh - 18px); }
  .manual-search { margin-left: 14px; margin-right: 14px; }
  .manual-search kbd { display: none; }
  .search-hint, .search-results { margin-left: 14px; margin-right: 14px; }
  .search-result { grid-template-columns: 58px minmax(0, 1fr) auto; }
  .search-shortcuts { display: grid; margin-left: 14px; margin-right: 14px; }
  .support-main { padding: 28px 18px 42px; }
  .support-hero h1 { font-size: clamp(36px, 11vw, 50px); }
  .support-modes { display: grid; grid-template-columns: 1fr 1fr; }
  .finder-layout, .trouble-layout { grid-template-columns: 1fr; }
  .family-list, .symptom-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recommendation-steps li { padding: 14px; }
  .trouble-steps { grid-template-columns: 1fr; }
  .trouble-steps li { border-right: 0; }
  .glossary-section > header { display: block; }
  .glossary-section label { display: block; margin-top: 14px; }
  .glossary-row { grid-template-columns: 1fr; gap: 3px; }
  .support-closeout { align-items: flex-start; flex-direction: column; }
  .handbook { width: 100%; padding: 0 0 36px; }
  .handbook-cover, .handbook-toc, .handbook-chapter, .handbook-emergency { margin-left: 0; margin-right: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .handbook-cover { padding: 34px 18px; }
  .handbook-cover h1 { font-size: clamp(45px, 15vw, 67px); }
  .handbook-safety { grid-template-columns: 1fr; }
  .handbook-toc { margin-top: 0; padding: 24px 18px; }
  .handbook-toc ol, .handbook-command-grid, .handbook-three, .handbook-emergency ul { grid-template-columns: 1fr; }
  .handbook-chapter { margin-top: 12px; padding: 28px 18px; }
  .handbook-chapter > header { align-items: flex-start; }
  .handbook-chapter > header > span { font-size: 40px; }
  .handbook-chapter table { display: block; overflow-x: auto; white-space: nowrap; }
  .next-preview { grid-template-columns: auto 1fr; }
  .next-preview p { display: none; }
  .next-button { grid-column: 1 / -1; width: 100%; height: 44px; }
  .path-map { grid-template-columns: 1fr; }
  .path-arrow { transform: rotate(90deg); text-align: center; }
  .tool-list { grid-template-columns: 1fr; }
  .tool-item p { min-height: 0; }
  .lesson-footer-actions { flex-direction: column-reverse; align-items: stretch; }
  .prev-button { width: 100%; }
  .quiz-options { display: grid; }
  .mission-head { padding: 18px; }
  .mission-head h2 { font-size: 18px; }
  .mission-meter { margin: 0 18px; }
  .mission-timeline li { padding: 10px; }
  .mission-console { padding: 18px; }
  .mission-choices { grid-template-columns: 1fr; }
  .mission-note { padding: 10px 18px; }
  .emergency-grid { grid-template-columns: 1fr; }
  .dialog-head h2 { font-size: 19px; }
  .quick-shell { width: 100%; padding: 28px 18px 40px; }
  .quick-hero { gap: 24px; }
  .quick-hero h1 { font-size: clamp(39px, 12vw, 54px); }
  .quick-hero h1 span { display: block; }
  .quick-safety { grid-template-columns: 1fr; }
  .quick-safety h2 { grid-column: auto; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-command { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .quick-command > span { grid-column: 1; grid-row: 2; }
  .quick-command button { grid-column: 2; grid-row: 1 / span 2; }
  .key-command { grid-template-columns: 1fr; }
  .key-command > span { grid-column: 1; }
  .quick-report-rule { grid-template-columns: 1fr; }
  .quick-report-rule h2 { grid-column: auto; }
  footer { display: block; }
  footer p + p { margin-top: 6px; }
}

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

@page { size: A4; margin: 12mm; }

@media print {
  :root { color-scheme: light; }
  body { color: #111; background: #fff; font-size: 12pt; }
  .topbar, .progress-band, .lesson-rail, .rail-scrim, .lesson-actions, .next-preview, .lesson-footer-actions, .toast, footer, .practice-form, .copy-button, .support-rail { display: none !important; }
  .guide-shell { display: block; }
  .lesson-stage { padding: 0; }
  .lesson-canvas { max-width: none; min-height: 0; color: #111; background: #fff; border: 0; box-shadow: none; }
  .lesson-inner { padding: 0; }
  .lesson-head { border-color: #777; }
  .lesson-head h1, .section-title, .guide-section strong, .info-panel strong { color: #111; }
  .lesson-kicker, .inline-code, .tool-item h2, .info-panel h2 { color: #006778; }
  .lesson-intro, .guide-section > p, .info-panel p, .plain-list li, .command-row p, .tool-item p { color: #333; }
  .command-row, .command-main code, .info-panel, .tool-item, .check-item { color: #111; background: #f4f6f8; border-color: #bbb; }
  .command-main code { white-space: pre-wrap; }
  .content-grid { display: block; }
  .info-panel { margin: 14px 0; }
  .tool-list { grid-template-columns: 1fr 1fr; background: #bbb; border-color: #bbb; }
  .quiz, .practice-terminal { display: none; }
  .mission-lab { break-inside: avoid; color: #111; background: #fff; border-color: #888; box-shadow: none; }
  .quick-sheet-page { min-width: 0; color: #111; background: #fff; }
  .quick-shell { width: 100%; margin: 0; padding: 0; }
  .quick-back, .quick-search-wrap, .quick-command button, .quick-footer { display: none !important; }
  .quick-hero { display: block; padding-bottom: 10mm; border-color: #777; }
  .quick-hero h1, .quick-group > header h2, .quick-report-rule strong, .quick-safety div b { color: #111; }
  .quick-hero h1 span, .quick-group > header span, .quick-report-rule h2 { color: #006778; }
  .quick-hero > div > p, .quick-command > span, .quick-checklist li, .quick-stop-list li, .quick-report-rule span { color: #333; }
  .quick-safety { grid-template-columns: repeat(3, 1fr); margin-top: 6mm; background: #bbb; border-color: #777; break-inside: avoid; }
  .quick-safety h2 { grid-column: 1 / -1; color: #6b4c00; background: #fff7d6; }
  .quick-safety div { background: #fff; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); gap: 4mm; margin-top: 6mm; }
  .quick-group { color: #111; background: #fff; border-color: #999; break-inside: avoid; }
  .quick-group > header { border-color: #bbb; }
  .quick-command { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); border-color: #ddd; }
  .quick-command code { color: #005766; white-space: normal; overflow-wrap: anywhere; }
  .quick-report-rule { grid-template-columns: repeat(3, 1fr); margin-top: 6mm; background: #bbb; border-color: #999; break-inside: avoid; }
  .quick-report-rule h2 { grid-column: 1 / -1; background: #eef8fa; }
  .quick-report-rule div { background: #fff; }
  .handbook-page { min-width: 0; color: #111; background: #fff; }
  .handbook { width: 100%; margin: 0; padding: 0; }
  .handbook-cover, .handbook-toc, .handbook-chapter, .handbook-emergency { color: #111; background: #fff; border-color: #999; box-shadow: none; }
  .handbook-cover { min-height: 250mm; display: flex; flex-direction: column; justify-content: center; page-break-after: always; }
  .handbook-cover h1, .handbook-cover h1 span, .handbook-toc h2, .handbook-chapter header h2, .handbook-emergency h2 { color: #111; }
  .handbook-cover > p:not(.handbook-edition), .handbook-safety span, .handbook-chapter > p, .handbook-steps li, .handbook-checklist li, .handbook-map p, .handbook-three span, .handbook-chapter td, .handbook-report-template p, .handbook-emergency span { color: #333; }
  .handbook-cover-actions { display: none; }
  .handbook-toc { page-break-after: always; }
  .handbook-toc a, .handbook-command-grid > div, .handbook-three div, .handbook-chapter td, .handbook-map, .handbook-report-template, .handbook-emergency li { color: #111; background: #fff; }
  .handbook-chapter { break-before: page; margin-top: 0; padding: 0; border: 0; }
  .handbook-chapter > header { border-color: #777; }
  .handbook-command-grid, .handbook-three, .handbook-chapter table, .handbook-report-template, .handbook-stop, .handbook-map, .handbook-emergency { break-inside: avoid; }
  .handbook-chapter th { color: #005766; background: #eef8fa; }
  .handbook-chapter code, .handbook-command-grid code, .handbook-map code, .handbook-emergency code { color: #005766; }
  .handbook-stop { color: #333 !important; background: #fff7d6; }
}