:root {
  color-scheme: dark;
  --bg: #06101d;
  --panel: #0b1828;
  --panel-2: #0f2033;
  --line: #20364c;
  --line-soft: #172a3e;
  --text: #f4f8fc;
  --muted: #8fa4b9;
  --accent: #55e6c1;
  --danger: #ff6b6b;
  font-family: "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow: hidden; }
button, select, input { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { opacity: .46; cursor: not-allowed; }
.sr-only { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
@font-face { font-family: "Material Symbols Rounded"; src: url("../assets/fonts/material-symbols-rounded.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: block; }
.material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24; }

.app-shell { width: 100%; min-width: 0; height: 100vh; display: grid; grid-template-rows: 76px minmax(0, 1fr) 164px; overflow-x: hidden; background: #06101d; }
.topbar { display: flex; align-items: center; gap: 18px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(6, 16, 29, .96); }
.directory-toggle { min-width: 46px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #0d1b2c; cursor: pointer; }
.directory-toggle:hover { border-color: var(--accent); color: var(--accent); }
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 700 13px "JetBrains Mono"; transform: rotate(-4deg); }
.brand-lockup div { display: grid; gap: 2px; min-width: 0; }
.brand-lockup small { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.brand-lockup strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.course-select-label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.course-select-label select { min-height: 42px; max-width: 280px; padding: 0 38px 0 14px; color: var(--text); border: 1px solid var(--line); border-radius: 8px; background: #0d1b2c; }
.duration-chip { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font: 600 12px "JetBrains Mono"; }
.duration-chip .material-symbols-rounded { font-size: 18px; }

.inquiry-workspace { margin-bottom: 22px; overflow: hidden; border: 1px solid #294258; border-radius: 14px; background: linear-gradient(135deg, rgba(13, 31, 49, .98), rgba(8, 23, 38, .98)); box-shadow: 0 16px 44px rgba(0, 0, 0, .2); }
.inquiry-workspace-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.inquiry-workspace-header > div { display: flex; align-items: center; gap: 12px; }
.inquiry-workspace-header > div > .material-symbols-rounded { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.inquiry-phase-heading { min-width: 0; display: grid; flex: 1; gap: 2px; }
.inquiry-workspace-header small { color: var(--muted); font: 600 9px "JetBrains Mono"; letter-spacing: .12em; text-transform: uppercase; }
.inquiry-workspace-header h1 { margin: 0; font-size: 20px; line-height: 1.25; }
.inquiry-workspace-header h1:focus { outline: none; }
.inquiry-phase-heading > span { overflow: hidden; max-width: 860px; color: #9db1c2; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-workspace-header em { padding: 7px 10px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 10px; font-style: normal; font-weight: 700; }
.inquiry-workspace[data-phase="experiment"] .inquiry-workspace-header em, .inquiry-workspace[data-phase="evidence"] .inquiry-workspace-header em { color: #7ec7ff; background: rgba(78, 159, 229, .1); }
.inquiry-phase-nav { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); background: #081725; }
.inquiry-phase-nav button { min-width: 0; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border: 0; border-right: 1px solid var(--line-soft); color: var(--muted); background: transparent; cursor: pointer; }
.inquiry-phase-nav button:last-child { border-right: 0; }
.inquiry-phase-nav button.active { color: var(--text); background: #10253a; box-shadow: inset 0 -3px var(--accent); }
.inquiry-phase-nav button:not(:disabled):hover { color: var(--accent); background: #0d2234; }
.inquiry-phase-nav .material-symbols-rounded { color: var(--accent); font-size: 19px; }
.inquiry-phase-nav .phase-index { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid #35506a; border-radius: 999px; color: #8da6bb; font: 700 9px "JetBrains Mono"; }
.inquiry-phase-nav button.complete .phase-index { border-color: #4cac79; color: #061b11; background: #6fe0a0; }
.inquiry-phase-nav b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-workspace-body { display: grid; grid-template-columns: minmax(230px, .34fr) minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
.level-scaffold { min-height: 146px; padding: 15px; border: 1px solid var(--line-soft); border-radius: 9px; background: #0a1b2c; }
.level-scaffold small { color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.level-scaffold p { margin: 9px 0 0; color: #c0ceda; font-size: 11px; line-height: 1.7; }
.level-scaffold button { min-height: 38px; margin-top: 12px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: #102438; cursor: pointer; font-size: 10px; }
.level-scaffold code { display: block; margin-top: 12px; padding: 9px; color: #80caff; background: #06131f; font: 600 10px "JetBrains Mono"; white-space: normal; }
.stage-goal-card { min-height: 146px; position: relative; display: grid; align-content: center; gap: 6px; padding: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, #09192a), #071522); }
.stage-goal-card > .material-symbols-rounded { color: var(--accent); font-size: 27px; }
.stage-goal-card small { color: var(--muted); font-size: 10px; }
.stage-goal-card strong { font-size: 18px; }
.stage-goal-card p { margin: 0; color: #a9bac8; font-size: 11px; line-height: 1.55; }
.stage-goal-card > b { position: absolute; right: 12px; top: 12px; padding: 5px 8px; border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font: 750 10px "JetBrains Mono"; }
.stage-goal-card.complete { border-color: rgba(111, 224, 160, .45); }
.scaffold-variable-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 12px; }
.scaffold-variable-table span, .scaffold-variable-table b { min-height: 34px; display: grid; place-items: center; padding: 5px; border: 1px solid var(--line-soft); text-align: center; font-size: 8px; }
.scaffold-variable-table span { color: var(--muted); background: #071624; }
.scaffold-variable-table b { color: #d0dce6; font-weight: 600; }
.workspace-form { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; padding: 2px; }
.workspace-form > label { display: grid; gap: 7px; }
.workspace-form > label > span { color: #c8d4df; font-size: 11px; font-weight: 650; }
.workspace-form textarea, .workspace-form input { width: 100%; padding: 11px 12px; border: 1px solid #314a61; border-radius: 7px; color: var(--text); background: #071522; resize: vertical; }
.workspace-form textarea:focus, .workspace-form input:focus { border-color: var(--accent); }
.workspace-form .primary-button { min-width: 136px; }
.mission-contract { display: grid; gap: 14px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(8,18,31,.74)); }
.mission-contract header, .mission-contract footer, .mission-contract header > div, .mission-contract footer > div { display: grid; gap: 7px; }
.mission-contract header { grid-template-columns: auto 1fr; align-items: start; }
.mission-contract header > .material-symbols-rounded { color: var(--accent); font-size: 30px; }
.mission-contract h3 { margin: 0; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; }
.mission-contract p { margin: 0; color: var(--muted); line-height: 1.65; }
.mission-variable-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mission-variable-map > div { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.035); }
.mission-variable-map small { width: 100%; color: var(--accent); font-weight: 800; }
.mission-variable-map span, .mission-contract footer b { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 12px; }
.mission-contract footer { grid-template-columns: 1fr 1fr; align-items: end; }
.mission-contract footer > div { display: flex; flex-wrap: wrap; }
.mission-contract footer small { width: 100%; color: var(--muted); }
.mission-contract footer p { display: flex; gap: 7px; align-items: center; }
.task-focus-layout { min-width: 0; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(300px, 1.1fr); gap: 14px; align-items: stretch; }
.task-observation-stage { min-width: 0; min-height: 304px; display: grid; grid-template-rows: auto minmax(170px, 1fr) auto; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 16px; background: radial-gradient(circle at 50% 48%, rgba(83, 156, 202, .14), transparent 46%), #061522; }
.task-observation-stage figcaption { display: grid; gap: 3px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.task-observation-stage figcaption small { color: var(--accent); font: 750 9px "JetBrains Mono"; letter-spacing: .12em; }
.task-observation-stage figcaption strong { font-size: 12px; }
.task-observation-visual { min-height: 170px; position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.task-observation-visual::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(105, 184, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 184, 255, .06) 1px, transparent 1px); background-size: 32px 32px; }
.task-observation-visual img { width: min(76%, 340px); max-height: 150px; object-fit: contain; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .58)); animation: taskAircraftDrift 3.4s ease-in-out infinite; }
.task-observation-visual > em { position: absolute; right: 10px; bottom: 9px; padding: 6px 8px; border: 1px solid rgba(255, 189, 104, .35); border-radius: 999px; color: #ffd28e; background: rgba(14, 25, 37, .88); font-size: 9px; font-style: normal; }
.task-wind-lines { position: absolute; left: 5%; right: 5%; top: 22%; display: grid; gap: 16px; transform: rotate(-4deg); }
.task-wind-lines i { width: 38%; height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, #69b8ff, transparent); animation: taskWind 2.2s linear infinite; }
.task-wind-lines i:nth-child(2) { width: 52%; animation-delay: -.7s; }
.task-wind-lines i:nth-child(3) { width: 31%; animation-delay: -1.4s; }
.task-force { position: absolute; left: 50%; z-index: 2; display: grid; justify-items: center; color: var(--accent); transform: translateX(-50%); text-shadow: 0 0 10px rgba(85, 230, 193, .45); }
.task-force i { font-size: 28px; }
.task-force b { padding: 2px 5px; background: rgba(4, 14, 24, .85); font-size: 8px; }
.task-force-up { top: 8px; }
.task-force-down { bottom: 8px; color: #ff8585; }
.task-observation-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); }
.task-observation-metrics span { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border-right: 1px solid var(--line-soft); }
.task-observation-metrics span:last-child { border-right: 0; }
.task-observation-metrics small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.task-observation-metrics strong { color: var(--accent); font: 750 10px "JetBrains Mono"; }
.task-focus-copy { min-width: 0; display: grid; align-content: start; gap: 9px; padding: 16px; border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(8, 24, 39, .72); }
.task-focus-copy > small { color: var(--accent); font: 750 9px "JetBrains Mono"; letter-spacing: .12em; }
.task-focus-copy h3 { margin: 0; font-size: 17px; line-height: 1.45; }
.task-focus-copy > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.task-condition-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-condition-strip small { width: 100%; color: var(--muted); font-size: 9px; }
.task-condition-strip span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: #cbd8e2; font-size: 9px; }
.task-focus-variable { display: grid; gap: 4px; padding: 9px 11px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.task-focus-variable small { color: var(--muted); font-size: 8px; }
.task-focus-variable strong { color: var(--accent); font-size: 11px; }
.task-focus-variable span { color: #a9bac8; font-size: 9px; line-height: 1.45; }
.task-term-hint { display: flex; align-items: center; gap: 7px; margin: 0; color: #b7c7d3; font-size: 9px; }
.task-term-hint b { color: #ffd28e; }
.task-question-form { grid-template-columns: 1fr; margin-top: 2px; }
.task-question-form .primary-button { width: 100%; min-height: 42px; }
.hypothesis-focus-layout { min-width: 0; display: grid; grid-template-columns: minmax(210px, .55fr) minmax(360px, 1.45fr); gap: 14px; align-items: stretch; }
.hypothesis-question-card { min-width: 0; display: grid; align-content: center; gap: 9px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 16px; background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44%), #081827; }
.hypothesis-question-card > .material-symbols-rounded { color: var(--accent); font-size: 30px; }
.hypothesis-question-card small { color: var(--accent); font: 750 9px "JetBrains Mono"; letter-spacing: .1em; }
.hypothesis-question-card blockquote { margin: 0; color: #edf6fc; font-size: 15px; font-weight: 750; line-height: 1.55; }
.hypothesis-question-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.hypothesis-builder-card { min-width: 0; display: grid; gap: 11px; padding: 15px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 16px; background: rgba(8, 24, 39, .76); }
.hypothesis-builder-card > header { display: grid; gap: 4px; }
.hypothesis-builder-card > header small, .hypothesis-live-sentence small { color: var(--accent); font: 750 9px "JetBrains Mono"; letter-spacing: .08em; }
.hypothesis-builder-card > header strong { font-size: 13px; }
.hypothesis-relation-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.hypothesis-relation-options button { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; align-content: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: #d7e3ec; background: #071522; cursor: pointer; text-align: left; }
.hypothesis-relation-options button span, .hypothesis-relation-options button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hypothesis-relation-options button span { color: #b8c8d5; font-size: 9px; }
.hypothesis-relation-options button b { grid-column: 1 / -1; color: #eef7fc; font-size: 10px; }
.hypothesis-relation-options button i { color: var(--muted); font-size: 15px; }
.hypothesis-relation-options button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #071522); box-shadow: inset 0 -2px var(--accent); }
.hypothesis-relation-options button[aria-pressed="true"] i, .hypothesis-relation-options button[aria-pressed="true"] b { color: var(--accent); }
.hypothesis-live-sentence { display: grid; gap: 5px; padding: 10px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hypothesis-live-sentence strong { color: #e9f3f9; font-size: 11px; line-height: 1.55; }
.hypothesis-edit-form { grid-template-columns: 1fr; }
.hypothesis-reason-hint { overflow: hidden; border: 1px solid var(--line-soft); border-radius: 9px; background: #071522; }
.hypothesis-reason-hint summary { padding: 9px 11px; color: #b8c9d6; cursor: pointer; font-size: 9px; }
.hypothesis-reason-hint[open] summary { border-bottom: 1px solid var(--line-soft); color: var(--accent); }
.hypothesis-reason-hint p { display: grid; grid-template-columns: minmax(100px, .45fr) 1fr; gap: 9px; margin: 0; padding: 8px 11px; border-bottom: 1px solid var(--line-soft); font-size: 9px; line-height: 1.45; }
.hypothesis-reason-hint p:last-child { border-bottom: 0; }
.hypothesis-reason-hint b { color: #dbe8f1; }
.hypothesis-reason-hint span { color: var(--muted); }
.hypothesis-edit-form .primary-button { width: 100%; min-height: 42px; }
.plan-workspace-stack { min-width: 0; display: grid; gap: 14px; }
.plan-focus-layout { min-width: 0; display: grid; gap: 10px; }
.plan-hypothesis-carry { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, #071522); }
.plan-hypothesis-carry > .material-symbols-rounded { color: var(--accent); font-size: 24px; }
.plan-hypothesis-carry > div { min-width: 0; display: grid; gap: 3px; }
.plan-hypothesis-carry small { color: var(--accent); font: 750 8px "JetBrains Mono"; letter-spacing: .08em; }
.plan-hypothesis-carry blockquote { overflow: hidden; margin: 0; color: #e6f0f6; font-size: 10px; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.plan-hypothesis-carry em { padding: 4px 7px; border-radius: 999px; color: #b5c5d1; background: rgba(255, 255, 255, .045); font-size: 8px; font-style: normal; white-space: nowrap; }
.plan-builder-card { min-width: 0; display: grid; gap: 9px; padding: 13px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 15px; background: rgba(8, 24, 39, .78); }
.plan-builder-card > header { display: grid; gap: 3px; }
.plan-builder-card > header small { color: var(--accent); font: 750 8px "JetBrains Mono"; letter-spacing: .08em; }
.plan-builder-card > header strong { font-size: 12px; }
.plan-preset-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.plan-preset-options button { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: #d7e3ec; background: #071522; cursor: pointer; text-align: left; }
.plan-preset-options button span { color: #b7c7d3; font-size: 8px; }
.plan-preset-options button b, .plan-preset-options button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-preset-options button b { color: #edf6fb; font-size: 10px; }
.plan-preset-options button small { color: var(--muted); font-size: 8px; }
.plan-preset-options button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #071522); box-shadow: inset 0 -2px var(--accent); }
.plan-preset-options button[aria-pressed="true"] b, .plan-preset-options button[aria-pressed="true"] small { color: var(--accent); }
.plan-protocol-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed #31516a; border-radius: 10px; background: #071522; }
.plan-protocol-strip > span { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 6px; align-items: center; }
.plan-protocol-strip > span > i { width: 21px; height: 21px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 50%; color: #071522; background: var(--accent); font: 800 8px "JetBrains Mono"; }
.plan-protocol-strip b { color: #dbe8f0; font-size: 9px; }
.plan-protocol-strip small { color: var(--muted); font-size: 7px; }
.plan-protocol-strip > .material-symbols-rounded { color: #5e7a90; font-size: 17px; }
@keyframes taskAircraftDrift { 0%, 100% { transform: translateY(3px) rotate(-.5deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes taskWind { 0% { opacity: 0; transform: translateX(-25%); } 35% { opacity: .8; } 100% { opacity: 0; transform: translateX(160%); } }
.plan-principle { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.workspace-lab-link em { display: block; margin-top: 8px; color: var(--accent); font-style: normal; }
.retest-control { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.retest-control div { display: grid; gap: 4px; }
.retest-control small { color: var(--accent); }
.retest-control p { margin: 0; color: var(--muted); }
.plan-grid { grid-template-columns: repeat(2, 1fr); align-items: end; }
.plan-grid .primary-button { grid-column: 2; justify-self: end; }
.focused-plan-grid { gap: 8px 10px; }
.focused-plan-grid .plan-principle { padding: 7px 9px; border-radius: 8px; font-size: 9px; }
.focused-plan-grid > label { gap: 4px; }
.focused-plan-grid > label > span { font-size: 9px; }
.focused-plan-grid input { padding-block: 8px; font-size: 10px; }
.focused-plan-grid input[aria-invalid="true"] { border-color: #ff8585; box-shadow: 0 0 0 2px rgba(255, 133, 133, .12); }
.plan-validation-message { grid-column: 1 / -1; margin: 0; color: #ffb0b0; font-size: 9px; }
.focused-plan-grid .primary-button { width: 100%; min-height: 40px; }
.workspace-lab-link { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px dashed #33536c; background: #081827; }
.workspace-lab-link small { color: var(--accent); font-size: 10px; }
.workspace-lab-link h3 { margin: 5px 0; font-size: 17px; }
.workspace-lab-link p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.evidence-workspace { grid-template-columns: minmax(220px, .75fr) minmax(260px, 1.25fr) auto; }
.measurement-summary { display: grid; align-content: start; gap: 5px; }
.measurement-summary > small { color: var(--accent); font-size: 9px; font-weight: 700; }
.measurement-summary article { display: flex; justify-content: space-between; gap: 9px; padding: 7px 9px; background: #071522; font-size: 9px; }
.measurement-summary article span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.measurement-summary p { margin: 5px 0; color: var(--muted); font-size: 10px; }
.report-grid { grid-template-columns: repeat(2, 1fr) auto; }
.inquiry-missing-evidence { display: flex; align-items: center; gap: 8px; margin: 0 18px 14px; padding: 9px 12px; border-left: 3px solid #f0b45f; color: #efd6b1; background: rgba(240, 180, 95, .08); font-size: 10px; }
.inquiry-missing-evidence .material-symbols-rounded { font-size: 17px; }
.inquiry-workspace > footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 18px; border-top: 1px solid var(--line); color: var(--muted); font: 600 9px "JetBrains Mono"; }
.inquiry-workspace > footer .secondary-button { min-height: 38px; display: flex; align-items: center; gap: 6px; font-size: 10px; }
.inquiry-workspace > footer .material-symbols-rounded { font-size: 16px; }

.inquiry-experience { display: grid; gap: 18px; }
.plan-support-toolbox { overflow: hidden; border: 1px solid rgba(113, 158, 194, .24); border-radius: 14px; background: #071522; }
.plan-support-toolbox > summary { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 10px 16px; color: #dce8f0; cursor: pointer; list-style: none; }
.plan-support-toolbox > summary::-webkit-details-marker { display: none; }
.plan-support-toolbox > summary > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.plan-support-toolbox > summary > div { display: grid; gap: 3px; }
.plan-support-toolbox > summary strong { font-size: 11px; }
.plan-support-toolbox > summary small { color: var(--muted); font-size: 8px; }
.plan-support-toolbox > summary > i { color: var(--muted); font-size: 20px; transition: transform .2s ease; }
.plan-support-toolbox[open] > summary { border-bottom: 1px solid var(--line); }
.plan-support-toolbox[open] > summary > i { transform: rotate(180deg); }
.plan-support-content { display: grid; gap: 14px; padding: 14px; }
.inquiry-context-resource { overflow: hidden; border: 1px solid rgba(113, 158, 194, .24); border-radius: 16px; background: linear-gradient(145deg, rgba(9, 25, 40, .96), rgba(6, 18, 30, .96)); }
.inquiry-context-resource > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(10, 29, 46, .82); }
.inquiry-context-resource > header > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.inquiry-context-resource > header .material-symbols-rounded { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; color: #07131f; background: var(--accent); }
.inquiry-context-resource > header p { min-width: 0; display: grid; gap: 3px; margin: 0; }
.inquiry-context-resource > header small { color: var(--accent); font: 700 9px "JetBrains Mono"; letter-spacing: .1em; }
.inquiry-context-resource > header strong { overflow: hidden; color: #eef7fd; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-context-resource > header em { color: #7f98ad; font-size: 10px; font-style: normal; }
.inquiry-resource-content { padding: 18px; }
.inquiry-resource-content > .scene-header,
.inquiry-resource-content > .learning-compass,
.inquiry-resource-content > .scene-taskbar,
.inquiry-resource-content > .scene-action,
.inquiry-resource-content .summary-shell > .scene-action,
.inquiry-resource-content .quiz-shell > .scene-action { display: none; }
.inquiry-resource-content > .learning-body,
.inquiry-resource-content > .activity-brief,
.inquiry-resource-content > .summary-shell,
.inquiry-resource-content > .quiz-shell { margin-top: 0; }
.inquiry-resource-content .lesson-footer button { min-width: 150px; }
.directory-inquiry-path small { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; }

@media (max-width: 1050px) {
  .topbar { padding-inline: 18px; }
  .course-select-label > span { display: none; }
  .course-select-label select { max-width: 190px; }
  .inquiry-workspace-body { grid-template-columns: 1fr; }
  .evidence-workspace, .report-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .inquiry-phase-nav { display: flex; grid-template-columns: none; overflow-x: auto; scrollbar-width: thin; }
  .inquiry-phase-nav button { min-width: 50px; flex: 0 0 50px; border-bottom: 1px solid var(--line-soft); }
  .inquiry-phase-nav button.active { min-width: 118px; flex-basis: 118px; }
  .inquiry-phase-nav button:not(.active) b { display: none; }
  .inquiry-phase-nav button:not(.active) .material-symbols-rounded { display: none; }
  .workspace-form, .plan-grid { grid-template-columns: 1fr; }
  .plan-grid .primary-button { grid-column: auto; justify-self: stretch; }
  .task-focus-layout { grid-template-columns: 1fr; }
  .hypothesis-focus-layout, .hypothesis-relation-options, .plan-preset-options { grid-template-columns: 1fr; }
  .plan-hypothesis-carry { grid-template-columns: auto minmax(0, 1fr); }
  .plan-hypothesis-carry em { grid-column: 2; justify-self: start; }
  .plan-hypothesis-carry blockquote { overflow: visible; white-space: normal; }
  .plan-protocol-strip { grid-template-columns: 1fr; }
  .plan-protocol-strip > .material-symbols-rounded { justify-self: center; transform: rotate(90deg); }
  .workspace-lab-link { align-items: stretch; flex-direction: column; }
  .inquiry-context-resource > header { align-items: flex-start; flex-direction: column; }
  .inquiry-resource-content { padding: 12px; }
}

.scene-content { min-height: 0; overflow: auto; padding: 34px 38px 48px; scroll-behavior: smooth; }
.scene-content > * { width: min(1440px, 100%); margin-left: auto; margin-right: auto; }
.scene-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--accent); font: 600 11px "JetBrains Mono"; letter-spacing: .16em; text-transform: uppercase; }
.scene-header h1 { margin: 0; font-size: clamp(30px, 3vw, 48px); line-height: 1.14; letter-spacing: -.025em; }
.scene-header p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.scene-counter { display: flex; align-items: baseline; color: var(--muted); font: 600 14px "JetBrains Mono"; }
.scene-counter strong { color: var(--accent); font-size: 38px; }

.learning-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 22px; align-items: stretch; }
.knowledge-stage, .model-stage, .lab-shell, .quiz-shell, .summary-shell { border: 1px solid var(--line); background: rgba(9, 24, 40, .96); box-shadow: 0 18px 42px rgba(0, 0, 0, .2); }
.knowledge-stage { min-height: 520px; display: flex; flex-direction: column; }
.beat-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.beat-tabs button { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: #0b1929; cursor: pointer; }
.beat-tabs button:last-child { border-right: 0; }
.beat-tabs button[aria-selected="true"] { color: var(--text); background: #102438; box-shadow: inset 0 -3px var(--accent); }
.beat-tabs span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: 600 11px "JetBrains Mono"; }
.beat-copy { padding: 38px 44px 28px; }
.beat-kicker { color: var(--accent); font-size: 13px; font-weight: 700; }
.beat-copy h2 { margin: 9px 0 14px; font-size: clamp(25px, 2.4vw, 36px); }
.beat-copy > p { margin: 0; color: #cad6e2; font-size: 17px; line-height: 1.9; }
.formula-block { margin: 24px 0; padding: 18px 20px; border-left: 3px solid var(--accent); background: #0d2032; }
.formula-block span { display: block; color: var(--muted); font-size: 11px; }
.formula-block strong { display: block; margin-top: 6px; font: 600 18px "JetBrains Mono"; color: var(--accent); }
.thinking-prompt { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border: 1px dashed #3a556f; color: var(--muted); }
.thinking-prompt .material-symbols-rounded { color: var(--accent); }
.thinking-prompt strong { color: var(--text); }
.thinking-prompt p { margin: 5px 0 0; line-height: 1.6; }
.lesson-footer { margin-top: auto; min-height: 74px; padding: 14px 20px 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.lesson-footer > span { display: flex; align-items: center; gap: 8px; }
.lesson-footer i { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); }
.secondary-button, .primary-button, .run-button, .evidence-button { min-height: 46px; padding: 0 20px; border: 1px solid var(--accent); border-radius: 7px; cursor: pointer; font-weight: 700; }
.secondary-button { background: transparent; color: var(--accent); }
.secondary-button:hover { background: #112d36; }
.primary-button, .run-button { background: var(--accent); color: #041410; }
.primary-button:hover, .run-button:hover { filter: brightness(1.08); }
.model-stage { display: flex; flex-direction: column; }
.model-image-wrap { min-height: 290px; position: relative; display: grid; place-items: center; overflow: hidden; background: #081522; }
.model-image-wrap img { position: relative; z-index: 1; width: 92%; height: 290px; object-fit: contain; filter: saturate(.88) contrast(1.04); }
.model-grid, .reference-grid { position: absolute; inset: 14px; border: 1px solid #17324a; opacity: .6; }
.image-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(5, 15, 26, .86); }
.image-label small { display: block; color: var(--muted); font: 500 9px "JetBrains Mono"; }
.image-label strong { font-size: 13px; }
.model-evidence { display: flex; gap: 13px; align-items: center; margin: 16px 18px 0; padding: 16px; border: 1px solid var(--line); background: #0c1b2b; }
.model-evidence .material-symbols-rounded { color: var(--accent); }
.model-evidence small, .misconception small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.model-evidence strong { display: block; margin-top: 4px; color: var(--accent); font-size: 12px; line-height: 1.6; }
.misconception { margin: 14px 18px 18px; padding: 16px; border-top: 1px solid var(--line); }
.misconception p { margin: 7px 0 0; color: #c4d1dd; font-size: 13px; line-height: 1.7; }

.guided-learning-body { grid-template-columns: minmax(410px, .82fr) minmax(520px, 1.18fr); }
.learning-interaction { min-height: 520px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); background: #081725; box-shadow: 0 18px 42px rgba(0, 0, 0, .2); }
.interaction-heading { margin-bottom: 18px; }
.interaction-heading h3 { margin: 4px 0 7px; font-size: 23px; }
.interaction-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.learning-interaction button { min-height: 44px; border: 1px solid var(--line); color: #c7d3de; background: #0c1e30; cursor: pointer; }
.learning-interaction button:hover, .learning-interaction button[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: #112b39; }
.learning-evidence { margin-top: auto; display: grid; gap: 5px; padding: 14px 16px; border-left: 3px solid var(--accent); background: #0d2232; }
.learning-evidence small { color: var(--accent); font: 600 9px "JetBrains Mono"; letter-spacing: .12em; text-transform: uppercase; }
.learning-evidence strong { font-size: 12px; line-height: 1.65; }
.learning-evidence.danger { border-color: var(--danger); }
.learning-evidence.danger small { color: var(--danger); }

.quadrotor-interaction { position: relative; overflow: hidden; --quad-blue: #69b8ff; --quad-amber: #ffbd68; }
.quadrotor-interaction button { scroll-margin-block: 190px; }
.quad-visual-stage { min-height: 184px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #061320; isolation: isolate; }
.quad-visual-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(105, 184, 255, .08); background: rgba(4, 14, 24, .42); pointer-events: none; }
.quad-visual-stage > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .72; filter: saturate(.82) contrast(1.08) brightness(.72); }
.quad-stage-status { position: absolute; left: 12px; bottom: 11px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(105, 184, 255, .38); background: rgba(4, 14, 24, .9); font-size: 10px; font-weight: 700; }
.quad-stage-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.quad-force-arrow { position: absolute; left: 50%; display: grid; justify-items: center; color: var(--accent); transform: translateX(-50%); text-shadow: 0 0 13px rgba(85, 230, 193, .45); }
.quad-force-arrow span { font-size: 48px; line-height: .8; }
.quad-force-arrow b { margin-top: 4px; font: 800 12px "JetBrains Mono"; }
.quad-force-arrow small { padding: 2px 5px; background: rgba(4, 14, 24, .9); font-size: 8px; }
.quad-force-up { top: 10px; }
.quad-force-down { bottom: 8px; color: #ff8585; text-shadow: 0 0 13px rgba(255, 107, 107, .4); }
.quad-force-down span { order: 3; }
.quad-force-down b { order: 2; }
.quad-force-down small { order: 1; }
.quad-case-selector, .quad-profile-selector, .quad-condition-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0; }
.quad-case-selector button, .quad-condition-selector button { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 2px 7px; padding: 9px 10px; text-align: left; }
.quad-case-selector .material-symbols-rounded, .quad-condition-selector .material-symbols-rounded { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 19px; }
.quad-case-selector strong, .quad-condition-selector strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.quad-case-selector small, .quad-condition-selector small { overflow: hidden; color: var(--muted); font-size: 8px; white-space: nowrap; }
.quad-profile-selector button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 10px; }
.quad-profile-selector .material-symbols-rounded { color: var(--accent); font-size: 17px; }
.quad-metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 0 0 10px; }
.quad-metric-strip > div { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 5px; padding: 9px; border: 1px solid var(--line-soft); background: #0b1c2d; }
.quad-metric-strip small { color: var(--muted); font-size: 8px; }
.quad-metric-strip strong { overflow: hidden; color: var(--accent); font: 700 11px "JetBrains Mono"; text-overflow: ellipsis; white-space: nowrap; }
.quad-thrust-core { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; margin-bottom: 10px; border: 1px solid var(--line); background: #061521; }
.quad-thrust-core .material-symbols-rounded { color: var(--quad-blue); font-size: 42px; animation: quadRotorIdle 2.2s linear infinite; }
.quad-thrust-core strong { color: var(--accent); font: 800 24px "JetBrains Mono"; }
.quad-thrust-core small { color: var(--muted); font-size: 9px; }
.thrust-prediction { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; border: 0; }
.thrust-prediction legend { margin-bottom: 10px; color: var(--text); font-size: 14px; font-weight: 750; }
.thrust-prediction-options { display: grid; gap: 8px; }
.thrust-prediction-options label { min-height: 48px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); background: #0b1c2d; color: #c9d5df; cursor: pointer; }
.thrust-prediction-options label:has(input:checked) { border-color: var(--accent); background: #102c36; color: var(--text); box-shadow: inset 3px 0 var(--accent); }
.thrust-prediction-options input { flex: 0 0 auto; accent-color: var(--accent); }
.thrust-prediction-options span { font-size: 12px; line-height: 1.5; }
.thrust-prediction-action { display: grid; grid-template-columns: max-content 1fr; gap: 12px; align-items: stretch; }
.cycle-feedback { min-height: 46px; display: grid; align-content: center; gap: 3px; margin: 0; padding: 9px 12px; border-left: 3px solid #486177; background: #0b1c2d; color: var(--muted); font-size: 11px; line-height: 1.55; }
.cycle-feedback.correct { border-color: var(--accent); color: #d7f8ef; }
.cycle-feedback.misconception { border-color: var(--quad-amber); color: #f5dfbd; }
.cycle-feedback small { color: var(--accent); }
.thrust-model-locked { display: grid; place-items: center; }
.model-lock-card { width: min(430px, 88%); display: grid; justify-items: center; gap: 8px; padding: 28px; border: 1px dashed #385169; background: #0a1a2a; text-align: center; }
.model-lock-card > .material-symbols-rounded { color: var(--accent); font-size: 38px; }
.model-lock-card small { color: var(--accent); font: 650 10px "JetBrains Mono"; letter-spacing: .16em; }
.model-lock-card h3 { margin: 3px 0; }
.model-lock-card p { margin: 0; color: var(--muted); font-size: 12px; }
.model-lock-card ol { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: lock-step; }
.model-lock-card li { padding: 9px 6px; border: 1px solid var(--line-soft); color: #c5d2de; font-size: 10px; counter-increment: lock-step; }
.model-lock-card li::before { content: "0" counter(lock-step); display: block; margin-bottom: 4px; color: var(--accent); font: 700 9px "JetBrains Mono"; }
.thrust-model-grid { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.1fr); gap: 10px; margin-bottom: 9px; }
.thrust-curve { min-width: 0; position: relative; margin: 0; padding: 8px 10px 6px; border: 1px solid var(--line); background: #061521; }
.thrust-curve canvas { width: 100%; height: 118px; display: block; }
.thrust-curve figcaption { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 9px; }
.thrust-curve figcaption strong { color: var(--text); }
.thrust-causal-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 5px; align-items: center; padding: 9px; border: 1px solid var(--line); background: #0a1a2a; }
.thrust-causal-chain > span { min-width: 0; min-height: 58px; display: grid; align-content: center; gap: 4px; padding: 7px; border: 1px solid var(--line-soft); background: #0b1c2d; }
.thrust-causal-chain small { color: var(--muted); font-size: 8px; }
.thrust-causal-chain strong { overflow: hidden; color: #cdd8e2; font: 700 10px "JetBrains Mono"; text-overflow: ellipsis; white-space: nowrap; }
.thrust-causal-chain > i { color: #526c83; font-size: 16px; }
.thrust-causal-chain[data-path="density"] [data-variable="density"], .thrust-causal-chain[data-path="density"] [data-variable="thrust"], .thrust-causal-chain[data-path="density"] [data-variable="margin"], .thrust-causal-chain[data-path="rpm"] [data-variable="rpm"], .thrust-causal-chain[data-path="rpm"] [data-variable="thrust"], .thrust-causal-chain[data-path="rpm"] [data-variable="margin"] { border-color: var(--accent); background: #102d36; animation: thrust-causal-pulse .72s ease both; }
.thrust-causal-chain[data-path="density"] [data-variable="density"] strong, .thrust-causal-chain[data-path="density"] [data-variable="thrust"] strong, .thrust-causal-chain[data-path="density"] [data-variable="margin"] strong, .thrust-causal-chain[data-path="rpm"] [data-variable="rpm"] strong, .thrust-causal-chain[data-path="rpm"] [data-variable="thrust"] strong, .thrust-causal-chain[data-path="rpm"] [data-variable="margin"] strong { color: var(--accent); }
@keyframes thrust-causal-pulse { 0% { transform: translateY(3px); box-shadow: 0 0 0 transparent; } 60% { box-shadow: 0 0 18px rgba(85, 230, 193, .2); } 100% { transform: none; } }
.thrust-comparison-table { display: grid; gap: 2px; margin-bottom: 9px; }
.thrust-comparison-row { min-height: 28px; display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(4, minmax(58px, 1fr)); align-items: center; gap: 5px; padding: 4px 9px; border-left: 2px solid transparent; background: #0b1c2d; color: #b9c8d5; font: 650 9px "JetBrains Mono"; }
.thrust-comparison-row.heading { min-height: 22px; background: transparent; color: var(--muted); font-size: 8px; }
.thrust-comparison-row[data-current="true"] { border-left-color: var(--accent); background: #102b35; color: var(--text); }
.thrust-comparison-row[data-current="true"] span { color: var(--accent); }
.thrust-explanation { display: grid; gap: 11px; margin-top: 18px; }
.thrust-explanation-heading { display: flex; gap: 11px; align-items: flex-start; }
.thrust-explanation-heading > .material-symbols-rounded { color: var(--accent); }
.thrust-explanation-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.thrust-explanation-fields { display: grid; gap: 7px; }
.thrust-explanation-fields label { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; }
.thrust-explanation-fields label > span { color: var(--accent); font-size: 11px; font-weight: 700; }
.thrust-explanation-fields select { width: 100%; min-height: 40px; padding: 0 10px; color: var(--text); border: 1px solid var(--line); background: #0b1c2d; font-size: 11px; }
.mixer-stage { min-height: 226px; }
.quad-channel-chip { --channel-level: 50%; position: absolute; width: 68px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; padding: 7px 8px; border: 1px solid rgba(105, 184, 255, .48); background: rgba(4, 14, 24, .92); }
.quad-channel-chip small { color: var(--quad-blue); font: 700 8px "JetBrains Mono"; }
.quad-channel-chip strong { font: 700 9px "JetBrains Mono"; }
.quad-channel-chip i { grid-column: 1 / -1; height: 3px; background: var(--accent); width: var(--channel-level); box-shadow: 0 0 8px rgba(85, 230, 193, .42); }
.quad-channel-1 { left: 8%; top: 12%; }
.quad-channel-2 { right: 8%; top: 12%; }
.quad-channel-3 { right: 8%; bottom: 15%; }
.quad-channel-4 { left: 8%; bottom: 15%; }
.quad-axis-chip { display: grid; justify-items: center; gap: 2px; padding: 9px 11px; border: 1px solid var(--accent); background: rgba(4, 14, 24, .9); }
.quad-axis-chip .material-symbols-rounded { color: var(--accent); }
.quad-axis-chip strong { font-size: 10px; }
.quad-axis-chip small { color: var(--muted); font-size: 8px; }
.vector-stage { min-height: 218px; }
.vector-stage img { transform: rotate(var(--quad-lesson-tilt)); transform-origin: center; transition: transform .24s ease; }
.vector-total, .vector-vertical, .vector-horizontal { position: absolute; z-index: 2; display: grid; justify-items: center; color: var(--quad-amber); text-shadow: 0 0 14px rgba(255, 189, 104, .48); }
.vector-total { left: 53%; top: 18%; transform: rotate(var(--quad-lesson-tilt)); transform-origin: center bottom; }
.vector-vertical { left: 46%; top: 9%; color: var(--accent); }
.vector-horizontal { left: 62%; top: 42%; color: var(--quad-blue); }
.vector-total span, .vector-vertical span, .vector-horizontal span { font-size: 38px; line-height: .82; }
.vector-total b, .vector-vertical b, .vector-horizontal b { padding: 3px 5px; background: rgba(4, 14, 24, .86); font: 700 8px "JetBrains Mono"; }
.quad-condition-selector { grid-template-columns: repeat(4, 1fr); }
.margin-budget { margin: 8px 0 13px; padding: 15px; border: 1px solid var(--line); background: #071522; }
.margin-scale { position: relative; height: 15px; overflow: hidden; background: #152b3e; }
.margin-scale i, .margin-scale b, .margin-scale span { position: absolute; inset: 0 auto 0 0; }
.margin-scale i { width: var(--hover-demand); background: #ffbd68; }
.margin-scale b { left: var(--hover-demand); width: calc(var(--available-ceiling) - var(--hover-demand)); background: var(--accent); }
.margin-scale span { left: var(--available-ceiling); width: 2px; background: var(--text); box-shadow: 0 0 8px var(--text); }
.margin-labels { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: 8px; }
@keyframes quadRotorIdle { to { transform: rotate(360deg); } }

.fixed-wing-interaction { position: relative; overflow: hidden; }
.fixed-wing-interaction button, .fixed-wing-interaction input { scroll-margin-block: 190px; }
.fixed-wing-interaction::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(124, 183, 255, .07), transparent 42%); }
.fixed-wing-visual, .control-map-stage, .coordination-stage, .cg-airframe { position: relative; min-height: 136px; overflow: hidden; border: 1px solid var(--line); background: #061320; }
.fixed-wing-visual img, .control-map-stage img, .coordination-stage img, .cg-airframe img { width: 100%; height: 100%; min-height: 136px; position: absolute; inset: 0; object-fit: cover; filter: saturate(.78) contrast(1.08) brightness(.72); }
.fixed-wing-visual img { object-fit: contain; object-position: center; }
.fixed-wing-interaction .fixed-wing-visual img,
.fixed-wing-interaction .control-map-stage img,
.fixed-wing-interaction .coordination-stage img,
.fixed-wing-interaction .cg-airframe img { width: 84%; height: 84%; min-height: 0; inset: 8%; object-fit: contain; object-position: center; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .52)); }
.visual-chip { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(124, 183, 255, .45); background: rgba(5, 15, 26, .88); color: #dceaff; font-size: 9px; }
.visual-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); }
.force-change-selector, .control-surface-selector, .coordination-selector, .sensitivity-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0; }
.force-change-selector button, .control-surface-selector button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; font-size: 10px; }
.force-change-selector .material-symbols-rounded, .control-surface-selector .material-symbols-rounded { color: var(--accent); font-size: 17px; }
.force-vector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.force-vector-grid div { min-height: 64px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 2px 7px; padding: 9px; border: 1px solid var(--line-soft); background: #0b1c2d; }
.force-vector-grid .material-symbols-rounded { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 18px; }
.force-vector-grid small { color: var(--muted); font-size: 8px; }
.force-vector-grid strong { font: 700 15px "JetBrains Mono"; }

.cg-airframe { min-height: 178px; }
.cg-airframe img { min-height: 178px; object-fit: contain; opacity: .76; }
.cg-axis { position: absolute; left: 8%; right: 8%; top: 49%; height: 2px; background: rgba(216, 230, 244, .38); }
.cg-axis i { position: absolute; top: 50%; width: 16px; height: 16px; border: 3px solid currentColor; border-radius: 50%; background: #081725; transform: translate(-50%, -50%); }
.cg-marker { left: var(--cg-track-position); color: #7cb7ff; transition: left .12s ease; }
.neutral-marker { left: var(--neutral-track-position); color: #ffbd6b; }
.cg-legend, .neutral-legend { position: absolute; top: 12px; padding: 5px 7px; border: 1px solid currentColor; background: rgba(5, 15, 26, .86); font: 700 8px "JetBrains Mono"; }
.cg-legend { left: 12px; color: #7cb7ff; }
.neutral-legend { right: 12px; color: #ffbd6b; }
.cg-slider { display: grid; gap: 7px; margin: 12px 0 10px; color: var(--muted); font-size: 10px; }
.cg-slider span { display: flex; justify-content: space-between; }
.cg-slider strong { color: var(--text); font: 700 10px "JetBrains Mono"; }
.cg-slider input { width: 100%; accent-color: var(--accent); }
.cg-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.cg-readout div { min-height: 62px; padding: 10px; border: 1px solid var(--line-soft); background: #0b1d2e; }
.cg-readout small { display: block; color: var(--muted); font-size: 8px; }
.cg-readout strong { display: block; margin-top: 7px; color: var(--accent); font-size: 11px; line-height: 1.4; }
.cg-stability-surface[data-state="danger"] .cg-readout strong { color: var(--danger); }

.control-map-stage { min-height: 150px; }
.control-map-stage img { min-height: 150px; object-position: center; }
.axis-badge { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--accent); background: rgba(5, 15, 26, .88); color: var(--accent); }
.axis-badge .material-symbols-rounded { font-size: 18px; }
.axis-badge strong { font-size: 10px; }
.control-chain { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; margin-bottom: 10px; }
.control-chain div { min-height: 62px; padding: 9px; border: 1px solid var(--line-soft); background: #0b1d2e; }
.control-chain small, .coordination-readout small { display: block; color: var(--muted); font-size: 8px; }
.control-chain strong, .coordination-readout strong { display: block; margin-top: 6px; font-size: 10px; line-height: 1.45; }
.control-chain > .material-symbols-rounded { color: var(--accent); font-size: 18px; }

.coordination-stage { min-height: 180px; }
.coordination-stage img { min-height: 180px; }
.slip-instrument { position: absolute; left: 12%; right: 12%; bottom: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); background: rgba(5, 15, 26, .92); color: var(--muted); font-size: 8px; }
.slip-instrument > div { position: relative; height: 18px; border-radius: 12px; background: #13293d; box-shadow: inset 0 0 0 1px #29465f; }
.slip-instrument > div::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--accent); }
.slip-instrument i { position: absolute; left: calc(50% + var(--slip-position)); top: 3px; width: 12px; height: 12px; border: 2px solid #dce8f2; border-radius: 50%; background: #7cb7ff; transform: translateX(-50%); transition: left .2s ease; }
.coordination-selector button, .sensitivity-selector button { padding: 7px; font-size: 10px; }
.coordination-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.coordination-readout p { margin: 0; padding: 9px; border: 1px solid var(--line-soft); background: #0b1d2e; }

.sensitivity-inputs { display: flex; gap: 8px; margin: 2px 0 9px; }
.sensitivity-inputs span { flex: 1; display: flex; justify-content: space-between; padding: 8px 10px; border-left: 2px solid var(--accent); background: #0d2031; color: var(--muted); font-size: 9px; }
.sensitivity-inputs strong { color: var(--text); font: 700 9px "JetBrains Mono"; }
.sensitivity-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.sensitivity-metrics div { min-height: 80px; display: grid; align-content: center; gap: 8px; padding: 11px; border: 1px solid var(--line-soft); background: #0b1d2e; }
.sensitivity-metrics small { color: var(--muted); font-size: 8px; }
.sensitivity-metrics strong { color: var(--accent); font: 700 16px "JetBrains Mono"; }
.sensitivity-surface[data-state="bank"] .sensitivity-metrics div:nth-child(n+2) strong { color: #ffbd6b; }

.tradeoff-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tradeoff-options button { min-height: 170px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 18px; text-align: center; }
.tradeoff-options .material-symbols-rounded { color: var(--accent); font-size: 36px; }
.tradeoff-options strong { font-size: 15px; }
.tradeoff-options small { color: #9dd8c8; }
.tradeoff-options em { color: #ffbc73; font-size: 11px; font-style: normal; }
.balance-line { display: grid; grid-template-columns: 1fr auto 42px auto 1fr; align-items: center; gap: 8px; margin: 18px 0; color: var(--muted); font-size: 10px; }
.balance-line i, .balance-line b { height: 1px; background: #38536c; }
.balance-line b { height: 9px; border-left: 1px solid var(--accent); border-right: 1px solid #ffb35c; background: linear-gradient(90deg, var(--accent), #ffb35c); }

.mode-selector, .profile-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-selector button { display: grid; gap: 4px; padding: 10px; }
.mode-selector small { color: var(--muted); font: 600 9px "JetBrains Mono"; }
.mode-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 0; }
.mode-readout div { min-height: 76px; padding: 12px; border: 1px solid var(--line-soft); background: #0b1c2c; }
.mode-readout small { display: block; color: var(--muted); font-size: 9px; }
.mode-readout strong { display: block; margin-top: 9px; color: var(--accent); font-size: 13px; }

.layer-stage { position: relative; min-height: 220px; overflow: hidden; border: 1px solid var(--line); background: #07131f; }
.layer-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .68; }
.flow-layer-surface .layer-stage img { width: 88%; height: 88%; inset: 6%; opacity: .92; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .52)); }
.flow-annotation { position: absolute; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid currentColor; background: rgba(4, 14, 24, .82); font-size: 10px; transition: opacity .2s, transform .2s; }
.slipstream-annotation { left: 18%; top: 28%; color: #ffb35c; }
.freestream-annotation { right: 9%; top: 18%; color: #6ac7ff; }
.incidence-annotation { left: 44%; bottom: 15%; color: #68e9a8; }
.flow-layer-surface:not([data-state~="slipstream"]) .slipstream-annotation,
.flow-layer-surface:not([data-state~="freestream"]) .freestream-annotation,
.flow-layer-surface:not([data-state~="incidence"]) .incidence-annotation { opacity: .12; transform: scale(.94); }
.layer-toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.layer-toggles button, .profile-selector button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; font-size: 11px; }
.layer-toggles .material-symbols-rounded, .profile-selector .material-symbols-rounded { color: var(--accent); font-size: 18px; }

.risk-case-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.telemetry-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; padding: 12px; border: 1px solid #43536a; background: #0a1827; }
.telemetry-strip span, .question-telemetry span { padding: 6px 8px; color: #d8e4ed; border: 1px solid #2b455d; background: #102337; font: 600 9px "JetBrains Mono"; }
.risk-actions { display: grid; gap: 7px; margin-bottom: 12px; }
.risk-actions button { padding: 8px 12px; text-align: left; }

.handoff-slider { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: 10px; }
.handoff-slider input { width: 100%; accent-color: var(--accent); }
.authority-bars { display: grid; gap: 18px; margin-bottom: 18px; }
.authority-bars > div { display: grid; grid-template-columns: 90px 1fr 42px; align-items: center; gap: 10px; }
.authority-bars span { color: var(--muted); font-size: 11px; }
.authority-bars i { height: 12px; position: relative; overflow: hidden; background: #142a3d; }
.authority-bars b { position: absolute; inset: 0 auto 0 0; background: #ffb35c; transition: width .15s; }
.authority-bars > div:first-child b { width: var(--rotor-authority); }
.authority-bars > div:nth-child(2) b { width: var(--aero-authority); background: #68e9a8; }
.authority-bars strong { color: var(--text); font: 700 10px "JetBrains Mono"; text-align: right; }

.profile-selector { margin-bottom: 14px; }
.mission-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mission-phases div { min-height: 74px; display: grid; align-content: center; gap: 7px; padding: 10px; border: 1px solid var(--line); background: #0b1d2d; }
.mission-phases span { color: var(--accent); font: 600 9px "JetBrains Mono"; }
.mission-phases strong { font-size: 11px; line-height: 1.4; }
.planner-gates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.planner-gates p { margin: 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: #0d2030; }
.planner-gates p:last-child { border-color: #ffb35c; }
.planner-gates small { display: block; color: var(--muted); font-size: 9px; }
.planner-gates strong { display: block; margin-top: 5px; font-size: 10px; line-height: 1.5; }

.activity-brief { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; margin-bottom: 16px; border: 1px solid var(--line); background: #0a1929; }
.activity-brief div { display: flex; align-items: center; gap: 12px; }
.activity-brief .material-symbols-rounded { color: var(--accent); }
.activity-brief p { margin: 0; color: #cbd7e2; }
.activity-brief > strong { color: var(--accent); font-size: 11px; white-space: nowrap; }
.mission-debrief { margin-top: 16px; padding: 18px; border: 1px solid var(--line); background: #0a1b2a; }
.mission-debrief > div { display: flex; align-items: center; gap: 9px; }
.mission-debrief .material-symbols-rounded { color: var(--accent); }
.mission-debrief h3 { margin: 0; }
.mission-debrief > p { color: var(--muted); font-size: 12px; }
.mission-debrief blockquote { margin: 12px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent); background: #0d2432; color: #d7e4ec; font-size: 12px; line-height: 1.7; }
.lab-shell { overflow: hidden; }
.lab-heading { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.lab-heading h2 { margin: 2px 0 4px; font-size: 23px; }
.lab-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.run-state { display: grid; justify-items: end; gap: 2px; padding: 7px 10px; border: 1px solid #38536d; border-radius: 4px; color: var(--muted); font: 600 11px "JetBrains Mono"; }
.run-state strong { color: inherit; font: inherit; }
.run-state small { color: #6f8aa0; font: 600 9px "Noto Sans SC"; }
.lab-shell[data-running="true"] .run-state { color: var(--accent); border-color: var(--accent); }
.lab-layout { min-height: 430px; display: grid; grid-template-columns: 270px minmax(400px, 1fr) 300px; }
.lab-controls, .evidence-panel { padding: 22px; background: #0a1727; }
.lab-controls { border-right: 1px solid var(--line); }
.evidence-panel { border-left: 1px solid var(--line); }
.control-row { display: block; margin-bottom: 22px; }
.control-row > span { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.control-row strong { font-size: 13px; }
.control-row output { color: var(--accent); font: 600 12px "JetBrains Mono"; }
.control-row input { width: 100%; accent-color: var(--accent); cursor: ew-resize; }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 16px; }
.preset-button { min-height: 40px; padding: 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #0e2032; font-size: 11px; cursor: pointer; }
.preset-button:hover { color: var(--accent); border-color: var(--accent); }
.run-button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 7px; }
.lab-visual { --flow-speed: 1.5s; --lift-scale: 1; position: relative; min-height: 430px; display: grid; place-items: center; overflow: hidden; background: #071420; }
.flow-field { position: absolute; inset: 0; overflow: hidden; color: #52b9f2; }
.flow-field i { position: absolute; left: -8%; top: calc(7% + var(--i) * 11%); width: 58px; opacity: .42; animation: airflow var(--flow-speed) linear infinite; animation-delay: calc(var(--i) * -0.16s); }
@keyframes airflow { from { transform: translateX(0); } to { transform: translateX(760px); } }
.lab-aircraft { position: relative; z-index: 3; width: 88%; height: 72%; object-fit: contain; transform-origin: center; transition: transform .15s linear; filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .48)); }
.lab-shell[data-lab-kind^="fixed-"] .lab-aircraft { width: 72%; height: 68%; }
.lab-shell[data-lab-kind^="aero-"] .lab-aircraft { width: 72%; height: 62%; }
.aerodynamic-teaching-view { --separation: 0; background: radial-gradient(circle at 48% 48%, rgba(45, 117, 178, .16), transparent 34%), #06121d; }
.aerodynamic-teaching-view .flow-field { opacity: calc(.55 + var(--separation) * .25); }
.aerodynamic-teaching-view[data-aero-flow="separating"] .flow-field { color: #ffc86b; }
.aerodynamic-teaching-view[data-aero-flow="stalled"] .flow-field { color: #ff786f; }
.aero-hud { position: absolute; z-index: 6; top: 16px; left: 16px; right: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aero-hud span { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(119, 176, 224, .22); background: rgba(5, 16, 27, .82); backdrop-filter: blur(10px); }
.aero-hud small { color: var(--muted); font: 500 8px "JetBrains Mono"; letter-spacing: .08em; text-transform: uppercase; }
.aero-hud strong { color: #eef8ff; font: 650 12px "JetBrains Mono"; }
.drag-arrow { top: 54%; left: 23%; color: #ff8b84; transform: translateX(-50%) rotate(0deg); }
.separation-wake { position: absolute; z-index: 2; left: 62%; top: 45%; width: 34%; height: 28%; opacity: var(--separation); transition: opacity .2s; }
.separation-wake i { position: absolute; left: calc(var(--i) * 12%); top: calc(18% + (var(--i) % 3) * 22%); width: calc(13px + var(--i) * 2px); aspect-ratio: 1; border: 1px solid rgba(255, 112, 99, .78); border-radius: 50%; animation: wake-spin calc(.9s + var(--i) * .12s) linear infinite; }
.aerodynamic-teaching-view[data-aero-flow="stalled"] .lab-aircraft { filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .48)) drop-shadow(0 0 18px rgba(255, 93, 80, .22)); }
@keyframes wake-spin { to { transform: translateX(38px) rotate(360deg) scale(1.3); opacity: .12; } }
.force-arrow { position: absolute; z-index: 4; left: 50%; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); }
.force-arrow span { font-size: 34px; }
.force-arrow b { font: 600 10px "JetBrains Mono"; white-space: nowrap; }
.lift-arrow { bottom: 54%; color: var(--accent); transform: translateX(-50%) scaleY(var(--lift-scale)); transform-origin: bottom; }
.weight-arrow { top: 56%; color: #ff7d7d; }
.risk-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(255, 72, 72, .32); opacity: 0; transition: opacity .2s; }
.visual-caption { position: absolute; z-index: 5; left: 18px; bottom: 16px; display: grid; grid-template-columns: 10px auto; gap: 2px 9px; padding: 10px 12px; background: rgba(5, 15, 25, .88); border: 1px solid var(--line); }
.visual-caption .signal-dot { grid-row: 1 / 3; width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.visual-caption strong { font-size: 11px; }
.visual-caption small { color: var(--muted); font-size: 9px; }

.quadrotor-teaching-view { --quad-pitch: 0deg; --quad-roll: 0deg; --quad-lift-scale: 1; min-height: 540px; place-items: stretch; isolation: isolate; background: #06131f; }
.quadrotor-backdrop { position: absolute; inset: 8% 9% 7%; z-index: -2; width: 82%; height: 85%; object-fit: contain; opacity: .8; filter: saturate(.76) contrast(1.08) brightness(.78) drop-shadow(0 22px 34px rgba(0, 0, 0, .52)); }
.quadrotor-teaching-view::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(105, 184, 255, .16); background: linear-gradient(rgba(78, 145, 194, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 145, 194, .045) 1px, transparent 1px), radial-gradient(circle at 50% 52%, rgba(18, 65, 96, .34), rgba(3, 12, 21, .72)); background-size: 42px 42px, 42px 42px, auto; pointer-events: none; }
.quadrotor-stage-label { position: absolute; z-index: 8; left: 18px; top: 16px; display: grid; gap: 3px; }
.quadrotor-stage-label span { font-size: 13px; font-weight: 800; }
.quadrotor-stage-label small { color: var(--muted); font: 500 9px "JetBrains Mono"; }
.quadrotor-motion-readout { position: absolute; z-index: 8; right: 18px; top: 15px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(5, 15, 25, .92); }
.quadrotor-motion-readout > span { color: var(--accent); font-size: 20px; }
.quadrotor-motion-readout div { display: grid; gap: 2px; }
.quadrotor-motion-readout small { color: var(--muted); font-size: 8px; }
.quadrotor-motion-readout strong { font-size: 10px; }
.quadrotor-airframe { position: absolute; z-index: 3; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); transform-origin: center; transition: transform .14s linear; }
.quadrotor-product { display: none; }
.quadrotor-channel { --channel-level: 0%; position: absolute; z-index: 6; width: 82px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; padding: 7px 8px; border: 1px solid rgba(105, 184, 255, .62); background: rgba(4, 14, 24, .92); box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
.quadrotor-channel small { color: #69b8ff; font: 800 9px "JetBrains Mono"; }
.quadrotor-channel strong { font: 700 9px "JetBrains Mono"; }
.quadrotor-channel > i { grid-column: 1 / -1; width: var(--channel-level); height: 3px; background: var(--accent); box-shadow: 0 0 8px rgba(85, 230, 193, .5); transition: width .15s ease; }
.quadrotor-channel.channel-1 { left: 24%; top: 22%; }
.quadrotor-channel.channel-2 { right: 19%; top: 23%; }
.quadrotor-channel.channel-3 { right: 23%; bottom: 18%; }
.quadrotor-channel.channel-4 { left: 18%; bottom: 20%; }
.quadrotor-lift-vector { position: absolute; z-index: 8; left: 50%; top: 33%; display: grid; justify-items: center; color: var(--accent); transform: translate(-50%, -100%) scaleY(var(--quad-lift-scale)); transform-origin: center bottom; text-shadow: 0 0 18px rgba(85, 230, 193, .54); }
.quadrotor-lift-vector span { font-size: 58px; line-height: .72; }
.quadrotor-lift-vector b { margin-top: 5px; padding: 3px 5px; background: rgba(4, 14, 24, .86); font: 700 8px "JetBrains Mono"; white-space: nowrap; }
.attitude-instrument { position: absolute; z-index: 8; left: 18px; top: 64px; width: 114px; height: 66px; overflow: hidden; border: 1px solid var(--line); background: #07131e; }
.attitude-instrument > div { position: absolute; left: -30%; right: -30%; top: 50%; height: 50%; border-top: 2px solid #fff; background: #154b73; transform-origin: center top; transition: transform .14s linear; }
.attitude-instrument span, .attitude-instrument b { position: absolute; z-index: 2; top: 7px; color: var(--muted); font: 700 8px "JetBrains Mono"; }
.attitude-instrument span { left: 8px; }
.attitude-instrument b { right: 8px; color: var(--text); }
.quadrotor-balance-meter { position: absolute; z-index: 8; left: 28%; right: 28%; bottom: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(5, 15, 25, .92); color: var(--muted); font-size: 8px; }
.quadrotor-balance-meter > i { position: relative; height: 6px; background: #152b3e; }
.quadrotor-balance-meter b { position: absolute; left: 50%; top: -4px; width: 3px; height: 14px; background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: translateX(-50%); transition: left .15s ease; }
.lab-shell[data-running="true"] .quadrotor-channel { animation: quadChannelPulse .65s ease-in-out infinite alternate; }
.lab-shell[data-running="true"] .quadrotor-backdrop { animation: quadBackdropPulse 1.8s ease-in-out infinite alternate; }
@keyframes quadChannelPulse { from { border-color: rgba(105, 184, 255, .44); } to { border-color: rgba(85, 230, 193, .9); } }
@keyframes quadBackdropPulse { from { opacity: .45; } to { opacity: .56; } }

.transition-corridor { --transition-progress: 50%; --nacelle-angle: 35deg; --rotor-glow: .6; --wing-glow: .4; --rotor-load: 60%; --wing-load: 40%; min-height: 540px; place-items: stretch; isolation: isolate; }
.corridor-backdrop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.72) contrast(1.06); }
.transition-corridor::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(73, 116, 151, .22); background: rgba(3, 12, 22, .36); pointer-events: none; }
.corridor-label { position: absolute; z-index: 8; left: 18px; top: 16px; display: grid; gap: 3px; }
.corridor-label span { color: var(--text); font-size: 13px; font-weight: 800; }
.corridor-label small { color: var(--muted); font: 500 9px "JetBrains Mono"; }
.vector-breakdown { position: absolute; z-index: 8; right: 18px; top: 16px; display: flex; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(5, 15, 25, .9); }
.vector-breakdown span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }
.vector-breakdown i { color: var(--accent); font-size: 16px; }
.vector-breakdown span:first-child i { color: #ffb35c; }
.vector-breakdown b { color: var(--text); font: 700 10px "JetBrains Mono"; }
.mechanical-viewport { position: absolute; z-index: 2; inset: 58px 14px 128px; display: grid; place-items: center; overflow: hidden; }
.aircraft-rig { position: relative; width: min(82%, 680px); aspect-ratio: 1967 / 635; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .52)); }
.mechanical-airframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: contain; }
.tilt-module { position: absolute; z-index: 5; top: 27%; width: 23%; aspect-ratio: 1116 / 897; transform: rotate(var(--nacelle-angle)); transform-origin: 50% 24.5%; transition: transform .24s cubic-bezier(.2, .75, .25, 1); }
.tilt-module-left { left: 14.5%; }
.tilt-module-right { left: 62.5%; }
.tilt-module-right .rotor-module { transform: scaleX(-1); }
.rotor-module { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 11px rgba(0, 0, 0, .48)); }
.thrust-vector { position: absolute; z-index: 7; left: 50%; top: 69%; display: grid; justify-items: center; color: rgba(255, 179, 92, calc(.42 + var(--rotor-glow) * .58)); transform: translate(-50%, -118%); transform-origin: center bottom; pointer-events: none; }
.thrust-vector span { font-size: 68px; line-height: .72; text-shadow: 0 0 18px rgba(255, 179, 92, .72); transform: scaleY(calc(.6 + var(--rotor-glow) * .58)); transform-origin: center bottom; }
.thrust-vector b { margin-top: 5px; padding: 3px 5px; color: #ffc77f; background: rgba(6, 16, 27, .82); font: 700 8px "JetBrains Mono"; white-space: nowrap; transform: rotate(calc(-1 * var(--nacelle-angle))); }
.wing-lift-field { position: absolute; z-index: 7; left: 50%; top: 13%; display: grid; justify-items: center; color: #68e9a8; opacity: calc(.28 + var(--wing-glow) * .72); filter: drop-shadow(0 0 12px rgba(104, 233, 168, .62)); transform: translate(-50%, -68%); transition: opacity .22s ease; }
.wing-lift-field span { font-size: 68px; line-height: .72; transform: scaleY(calc(.42 + var(--wing-glow) * .72)); transform-origin: center bottom; }
.wing-lift-field b { margin-top: 5px; padding: 3px 5px; color: #8cf2be; background: rgba(6, 16, 27, .82); font: 700 8px "JetBrains Mono"; white-space: nowrap; }
.lab-shell[data-running="true"] .corridor-backdrop { animation: tunnelDrift var(--airflow-speed) linear infinite alternate; }
.lab-shell[data-running="true"] .rotor-module { animation: rotorResponse .13s ease-in-out infinite alternate; }
.lab-shell[data-running="true"] .thrust-vector span,
.lab-shell[data-running="true"] .wing-lift-field span { animation: vectorPulse .72s ease-in-out infinite alternate; }
@keyframes tunnelDrift { from { transform: scale(1.02) translateX(-4px); } to { transform: scale(1.045) translateX(8px); } }
@keyframes rotorResponse { from { filter: brightness(.95) drop-shadow(0 12px 11px rgba(0, 0, 0, .48)); } to { filter: brightness(1.08) drop-shadow(0 12px 15px rgba(255, 179, 92, .18)); } }
@keyframes vectorPulse { from { opacity: .72; } to { opacity: 1; } }
.corridor-status { position: absolute; z-index: 8; left: 18px; bottom: 88px; display: flex; align-items: flex-start; gap: 8px; max-width: 230px; padding: 9px 11px; border: 1px solid var(--line); background: rgba(5, 15, 25, .9); }
.corridor-status .signal-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.corridor-status div { display: grid; gap: 2px; }
.corridor-status strong { font-size: 10px; }
.corridor-status small { color: var(--muted); font-size: 8px; line-height: 1.4; }
.recovery-advice { position: absolute; z-index: 8; right: 18px; bottom: 88px; display: flex; gap: 8px; align-items: flex-start; max-width: 240px; padding: 9px 11px; border: 1px solid var(--line); background: rgba(5, 15, 25, .9); }
.recovery-advice > span { color: var(--accent); font-size: 18px; }
.recovery-advice div { display: grid; gap: 2px; }
.recovery-advice small { color: var(--muted); font-size: 8px; }
.recovery-advice strong { font-size: 9px; line-height: 1.4; }
.load-transfer-meter { position: absolute; z-index: 8; left: 20%; right: 20%; bottom: 14px; display: grid; gap: 5px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(5, 15, 25, .92); }
.load-transfer-labels, .load-transfer-values { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; }
.load-transfer-labels strong { color: var(--text); font-size: 9px; }
.load-transfer-values b { color: var(--text); font: 700 8px "JetBrains Mono"; }
.load-transfer-track { position: relative; height: 7px; overflow: hidden; background: #152b3e; }
.load-transfer-track i { position: absolute; top: 0; bottom: 0; transition: width .24s ease; }
.load-transfer-track .rotor-load { left: 0; width: var(--rotor-load); background: #ffb35c; }
.load-transfer-track .wing-load { right: 0; width: var(--wing-load); background: #68e9a8; }
.load-transfer-track em { position: absolute; left: var(--rotor-load); top: -3px; width: 2px; height: 13px; background: #f4f8fb; box-shadow: 0 0 8px rgba(244, 248, 251, .7); transform: translateX(-50%); transition: left .24s ease; }
.transition-corridor[data-risk-tone="danger"] .corridor-status .signal-dot,
.transition-corridor[data-risk-tone="danger"] .load-transfer-track em { background: var(--danger); box-shadow: 0 0 14px var(--danger); }
.transition-corridor[data-risk-tone="danger"] .recovery-advice { border-color: var(--danger); }
.transition-corridor[data-risk-tone="caution"] .corridor-status .signal-dot { background: #ffcf66; box-shadow: 0 0 12px #ffcf66; }
.evidence-panel h3 { margin: 0 0 16px; font-size: 15px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { min-height: 74px; padding: 11px; border: 1px solid var(--line); background: #0d1d2e; }
.metric span { display: block; color: var(--muted); font-size: 10px; }
.metric strong { display: inline-block; margin-top: 8px; color: var(--accent); font: 700 19px "JetBrains Mono"; }
.metric small { margin-left: 4px; color: var(--muted); font-size: 9px; }
.cause-chain { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 16px 0; color: var(--muted); font-size: 9px; }
.cause-chain i { height: 1px; flex: 1; background: #38516a; }
.lab-feedback { min-height: 90px; padding: 12px; border-left: 2px solid var(--accent); background: #0e2030; }
.lab-feedback strong { font-size: 12px; }
.lab-feedback p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.evidence-button { width: 100%; margin-top: 12px; background: transparent; color: var(--accent); }
.evidence-button:disabled { color: #5f788d; border-color: #324b60; cursor: not-allowed; opacity: .62; filter: grayscale(.4); }
.scene-action { min-height: 72px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 16px; padding: 12px 16px; border-top: 1px solid var(--line); background: #091827; }
.scene-action p { margin: 0; color: var(--muted); font-size: 12px; }
.scene-content:has(.scene-taskbar) { padding-bottom: 118px; }
.scene-taskbar { position: fixed; left: 50%; bottom: 104px; z-index: 36; width: min(1180px, calc(100vw - 72px)); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 10px 12px 10px 16px; border: 1px solid color-mix(in srgb, var(--accent) 44%, #36536c); border-radius: 14px; background: linear-gradient(95deg, rgba(8, 24, 38, .97), rgba(10, 30, 47, .97)); box-shadow: 0 18px 46px rgba(0, 0, 0, .46), inset 3px 0 var(--accent); backdrop-filter: blur(14px); transform: translateX(-50%); }
.scene-taskbar > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.scene-taskbar > div > .material-symbols-rounded { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; color: #07121e; background: var(--accent); font-size: 20px; }
.scene-taskbar p { min-width: 0; display: grid; gap: 2px; margin: 0; }
.scene-taskbar p small { color: #7892a8; font: 700 9px "JetBrains Mono"; letter-spacing: .09em; }
.scene-taskbar p strong { overflow: hidden; color: #edf7ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.scene-taskbar button { min-width: 188px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.scene-taskbar button .material-symbols-rounded { font-size: 18px; }
.primary-button.ready { box-shadow: 0 0 22px rgba(85, 230, 193, .35); }

.quiz-shell, .summary-shell { padding: 24px; }
.quiz-intro { display: flex; gap: 14px; align-items: center; padding: 16px 18px; margin-bottom: 18px; border-left: 3px solid var(--accent); background: #0d2031; }
.quiz-intro .material-symbols-rounded { color: var(--accent); font-size: 30px; }
.quiz-intro p { margin: 4px 0 0; color: var(--muted); }
.question-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.question-card { min-width: 0; padding: 18px; border: 1px solid var(--line); background: #0b1b2b; }
.question-card input, .question-card button { scroll-margin-block: 190px; }
.question-card legend { padding: 0 5px; line-height: 1.5; font-weight: 700; }
.question-card legend span { margin-right: 8px; color: var(--accent); font: 600 11px "JetBrains Mono"; }
.question-telemetry { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.question-objective { margin: 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: #0e2030; color: #d2dde7; font-size: 11px; line-height: 1.5; }
.question-objective small { display: block; margin-bottom: 4px; color: var(--accent); font: 600 8px "JetBrains Mono"; letter-spacing: .12em; }
.option-list { display: grid; gap: 8px; margin: 16px 0; }
.option-list label { cursor: pointer; }
.option-list input { position: absolute; opacity: 0; }
.option-list span { display: block; padding: 12px; border: 1px solid var(--line); color: #c3d0dc; }
.option-list input:checked + span { border-color: var(--accent); color: var(--text); background: #102a36; }
.answer-feedback { min-height: 48px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.question-card[data-correct="true"] { border-color: var(--accent); }
.summary-hero { padding: 12px 8px 22px; }
.summary-hero h2 { margin: 5px 0 10px; font-size: 30px; }
.summary-hero p { margin: 0; color: var(--muted); }
.causal-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 9px; margin: 16px 0 22px; }
.chain-node { min-height: 126px; padding: 18px; border: 1px solid var(--line); background: #0c1d2e; }
.chain-node span { color: var(--accent); font: 600 12px "JetBrains Mono"; }
.chain-node p { margin: 22px 0 0; font-weight: 700; line-height: 1.6; }
.causal-chain > .material-symbols-rounded { color: var(--accent); }
.transfer-card { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--accent); background: #0c202b; }
.transfer-card div { display: flex; align-items: center; gap: 10px; }
.transfer-card .material-symbols-rounded { color: var(--accent); }
.transfer-card h3 { margin: 0; }
.transfer-card p { margin: 0; color: #c6d3de; line-height: 1.7; }
.plan-builder { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 14px 20px; align-items: end; margin-top: 20px; padding: 20px; border: 1px solid var(--line); background: #091a29; }
.plan-builder-heading { grid-row: 1 / 3; display: flex; align-items: flex-start; gap: 12px; }
.plan-builder-heading > .material-symbols-rounded { color: var(--accent); font-size: 30px; }
.plan-builder-heading small { color: var(--accent); font: 600 9px "JetBrains Mono"; letter-spacing: .12em; }
.plan-builder-heading h3 { margin: 4px 0 7px; }
.plan-builder-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.plan-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plan-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 9px; }
.plan-fields select { width: 100%; min-height: 44px; padding: 0 10px; color: var(--text); border: 1px solid var(--line); background: #0d2031; font-size: 10px; }
.plan-builder > .primary-button { justify-self: start; }
.plan-builder blockquote { grid-column: 2; margin: 0; padding: 13px 15px; border-left: 3px solid var(--accent); background: #0e2632; color: #d5e1ea; font-size: 11px; line-height: 1.65; }

.classroom-footer { min-height: 0; display: grid; grid-template-columns: minmax(520px, .7fr) minmax(620px, 1.3fr); border-top: 1px solid var(--line); background: #071321; }
.teacher-console { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 22px; border-right: 1px solid var(--line); }
.teacher-avatar { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; background: #17304a; font-weight: 800; }
.teacher-avatar i { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border: 2px solid #071321; border-radius: 50%; background: var(--accent); }
.narration-panel { min-width: 0; }
.narration-panel small { color: var(--accent); font-size: 10px; letter-spacing: .08em; }
.narration-panel p { margin: 5px 0 0; color: #d2dce5; font-size: 13px; line-height: 1.55; }
.narration-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.narration-meta > span { padding-left: 8px; border-left: 1px solid var(--line); color: #8da1b4; font: 600 9px "JetBrains Mono"; white-space: nowrap; }
.narration-meta .narration-status { overflow: hidden; max-width: 190px; color: var(--accent); text-overflow: ellipsis; }
.classroom-footer[data-playback-status="taken-over"] .narration-status { color: #f2b15e; }
.classroom-footer[data-playback-status="waiting-lab"] .narration-status { color: #77b8ff; }
.player-controls { display: flex; gap: 6px; }
.player-icon { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #0c1b2b; cursor: pointer; }
.player-icon:hover { color: var(--accent); border-color: var(--accent); }
.player-icon.primary { color: #041410; border-color: var(--accent); background: var(--accent); }
.player-icon.playing { box-shadow: 0 0 18px rgba(85, 230, 193, .35); }
.player-icon.speed { font: 700 11px "JetBrains Mono"; }
.scene-rail { min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(72px, 1fr)); gap: 5px; align-items: stretch; padding: 16px 18px; overflow-x: auto; }
.rail-step { min-width: 64px; position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding: 9px 8px; border: 1px solid transparent; color: #71879b; background: transparent; cursor: pointer; text-align: left; }
.rail-step::before { content: ""; position: absolute; left: 8px; right: 8px; top: 20px; height: 1px; background: #31475c; }
.rail-step span { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #46617a; border-radius: 50%; background: #071321; font: 600 9px "JetBrains Mono"; }
.rail-step small { line-height: 1.35; font-size: 9px; }
.rail-step.current { color: var(--text); border-color: var(--line); background: #0d1d2e; }
.rail-step.current span { color: #06101d; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px rgba(85, 230, 193, .32); }
.rail-step.complete span { color: var(--accent); border-color: var(--accent); }

.course-directory[hidden] { display: none; }
.course-directory { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(280px, 520px) 1fr; }
.directory-backdrop { grid-column: 1 / -1; grid-row: 1; background: rgba(1, 7, 13, .72); }
.directory-panel { grid-column: 1; grid-row: 1; position: relative; z-index: 1; height: 100%; overflow: auto; border-right: 1px solid var(--line); background: #081522; box-shadow: 24px 0 60px rgba(0, 0, 0, .4); }
.directory-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--line); background: #081522; }
.directory-header small { color: var(--accent); font: 600 10px "JetBrains Mono"; letter-spacing: .15em; }
.directory-header h2 { margin: 5px 0 0; font-size: 25px; }
.directory-content { padding: 14px; }
.directory-course { margin-bottom: 10px; border: 1px solid var(--line); background: #0a1929; }
.directory-course.active { border-color: #3d5a74; }
.directory-course-title { width: 100%; min-height: 72px; display: grid; grid-template-columns: 5px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.directory-course-title > span { align-self: stretch; background: var(--course-accent); }
.directory-course-title div { display: grid; gap: 4px; }
.directory-course-title small { color: var(--muted); font: 500 9px "JetBrains Mono"; }
.directory-course-title strong { font-size: 14px; }
.directory-course-title i { color: var(--muted); font-style: normal; }
.directory-course ol { margin: 0; padding: 0 10px 10px; list-style: none; }
.directory-course li button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-top: 1px solid var(--line-soft); color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
.directory-course li button:hover, .directory-course li button.current { color: var(--text); background: #102238; }
.directory-course li button > span { font: 600 10px "JetBrains Mono"; color: var(--accent); }
.directory-course li button div { display: grid; gap: 3px; }
.directory-course li button strong { font-size: 12px; }
.directory-course li button small { font-size: 9px; }
.directory-course li button i { font-size: 18px; }

@media (max-width: 1100px) {
  .app-shell { grid-template-rows: 68px minmax(0, 1fr) 146px; }
  .learning-body { grid-template-columns: 1fr; }
  .model-stage { display: grid; grid-template-columns: 1.1fr .9fr; }
  .model-image-wrap { grid-row: 1 / 3; }
  .question-list { grid-template-columns: 1fr; }
  .classroom-footer { grid-template-columns: 1fr; }
  .scene-rail { display: none; }
  .teacher-console { border-right: 0; }
  .duration-chip { display: none; }
  .learning-interaction { min-height: 460px; }
}

@media (max-height: 780px) and (min-width: 901px) {
  .scene-content { padding: 16px 28px 20px; }
  .scene-header { align-items: center; padding-bottom: 10px; margin-bottom: 12px; }
  .scene-header h1 { font-size: 28px; }
  .scene-header p { margin-top: 4px; font-size: 12px; }
  .scene-counter strong { font-size: 30px; }
  .guided-learning-body { gap: 14px; }
  .guided-learning-body .knowledge-stage { min-height: 400px; }
  .guided-learning-body .learning-interaction { min-height: 400px; padding: 14px 16px; }
  .guided-learning-body .beat-tabs button { min-height: 46px; font-size: 11px; }
  .guided-learning-body .beat-copy { padding: 20px 24px 14px; }
  .guided-learning-body .beat-copy h2 { margin: 6px 0 9px; font-size: 24px; }
  .guided-learning-body .beat-copy > p { font-size: 13px; line-height: 1.55; }
  .guided-learning-body .lesson-footer { min-height: 54px; padding: 8px 14px 8px 20px; }
  .guided-learning-body .interaction-heading { margin-bottom: 8px; }
  .guided-learning-body .interaction-heading h3 { margin: 2px 0 4px; font-size: 18px; }
  .guided-learning-body .interaction-heading p { font-size: 10px; }
  .thrust-prediction { gap: 8px; margin-top: 12px; }
  .thrust-prediction legend { margin-bottom: 5px; font-size: 12px; }
  .thrust-prediction-options { gap: 5px; }
  .thrust-prediction-options label { min-height: 36px; padding: 7px 9px; }
  .thrust-prediction-options span { font-size: 10px; }
  .thrust-prediction-action { grid-template-columns: 1fr; gap: 6px; }
  .thrust-prediction-action .secondary-button { min-height: 38px; }
  .cycle-feedback { min-height: 38px; padding: 6px 9px; font-size: 9px; }
  .thrust-model-grid { grid-template-columns: minmax(230px, .82fr) minmax(330px, 1.18fr); gap: 7px; margin-bottom: 6px; }
  .thrust-curve canvas { height: 82px; }
  .thrust-causal-chain { padding: 6px; }
  .thrust-causal-chain > span { min-height: 43px; padding: 5px; }
  .quad-profile-selector { margin: 6px 0; }
  .quad-profile-selector button { min-height: 36px; }
  .thrust-comparison-row { min-height: 23px; padding: 3px 7px; }
  .learning-evidence { padding: 8px 11px; }
  .learning-evidence strong { font-size: 10px; line-height: 1.4; }
  .thrust-explanation { gap: 7px; margin-top: 10px; }
  .thrust-explanation-heading p { display: none; }
  .thrust-explanation-fields { gap: 5px; }
  .thrust-explanation-fields select { min-height: 34px; font-size: 10px; }
  .thrust-explanation > .secondary-button { min-height: 38px; }
  .quiz-shell { padding: 18px; }
  .quiz-intro { padding: 12px 14px; margin-bottom: 12px; }
  .question-card { padding: 14px; }
  .question-telemetry { margin-top: 10px; }
  .question-objective { margin: 8px 0 0; padding: 9px 11px; }
  .option-list { gap: 6px; margin: 10px 0; }
  .option-list span { padding: 9px 10px; }
  .answer-feedback { min-height: 38px; }
  .lab-heading { min-height: 58px; padding: 8px 20px; }
  .lab-heading h2 { font-size: 21px; }
  .lab-heading p { display: none; }
  .lab-layout, .lab-visual, .quadrotor-teaching-view { min-height: 384px; }
  .transition-corridor { min-height: 384px; }
  .lab-controls, .evidence-panel { padding: 16px 20px; }
  .control-row { margin-bottom: 14px; }
  .control-row > span { margin-bottom: 6px; }
  .preset-row { margin: 4px 0 12px; }
  .evidence-panel .cause-chain { display: none; }
  .evidence-panel .lab-feedback { min-height: 70px; margin-top: 12px; }
  .mechanical-viewport { inset: 46px 10px 106px; }
  .aircraft-rig { width: 82%; }
  .corridor-status, .recovery-advice { bottom: 68px; padding: 7px 9px; }
  .corridor-status { max-width: 205px; }
  .recovery-advice { max-width: 225px; }
  .load-transfer-meter { left: 20%; right: 20%; bottom: 8px; padding: 6px 8px; }
  .quadrotor-airframe { width: 100%; top: 50%; }
  .quadrotor-balance-meter { left: 22%; right: 22%; bottom: 8px; }
  .attitude-instrument { top: 54px; }
}

/* 幽隼三维气动数字孪生：真实数值与教学视觉分层呈现 */
.yousun-twin-stage { position: absolute; inset: 0; z-index: 1; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(54, 131, 197, .15), transparent 43%); }
.yousun-twin-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.yousun-twin-canvas:active { cursor: grabbing; }
.yousun-twin-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; color: #d9edff; background: radial-gradient(circle, rgba(11, 40, 65, .86), rgba(4, 15, 26, .96)); }
.yousun-twin-loading .material-symbols-rounded { color: #73b7ff; font-size: 34px; animation: twinLoadingPulse 1.15s ease-in-out infinite alternate; }
.yousun-twin-loading strong { font-size: 12px; }
.yousun-twin-loading small { color: #76a9d2; font: 700 11px "JetBrains Mono"; }
@keyframes twinLoadingPulse { from { opacity: .45; transform: scale(.94) rotate(-4deg); } to { opacity: 1; transform: scale(1.06) rotate(4deg); } }
.yousun-twin-stage[data-render-mode="fallback"] { display: grid; place-items: center; padding: 54px 22px 74px; }
.yousun-twin-fallback-stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.yousun-twin-fallback { width: min(76%, 560px); max-height: 270px; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .48)); transform: perspective(700px) rotateX(calc(var(--fallback-pitch, 0) * 1deg)); transition: transform .22s ease; }
.yousun-fallback-reference { position: absolute; z-index: 3; left: 16%; top: 50%; width: 68%; height: 2px; border-radius: 99px; transform-origin: center; pointer-events: none; }
.yousun-fallback-reference.is-chord { background: #f6c978; box-shadow: 0 0 8px rgba(246, 201, 120, .48); transform: rotate(calc(var(--fallback-pitch, 0) * -1deg)); }
.yousun-fallback-reference.is-airflow { background: #6caeff; box-shadow: 0 0 8px rgba(108, 174, 255, .52); transform: rotate(calc(var(--fallback-flight-path, 0) * -1deg)) translateY(12px); }
.yousun-fallback-force { position: absolute; z-index: 4; left: 51%; top: 50%; width: 3px; border-radius: 99px; transform-origin: bottom center; pointer-events: none; }
.yousun-fallback-force::before { position: absolute; top: -7px; left: -5px; width: 10px; height: 10px; border-top: 3px solid currentColor; border-left: 3px solid currentColor; content: ''; transform: rotate(45deg); }
.yousun-fallback-force b { position: absolute; top: -9px; left: 11px; color: currentColor; font-size: 9px; font-style: normal; white-space: nowrap; }
.yousun-fallback-force.is-lift { height: calc(42px * var(--fallback-lift, 1)); color: #70e4b2; background: currentColor; transform: translateY(-100%) rotate(calc(var(--fallback-flight-path, 0) * -1deg)); }
.yousun-fallback-force.is-drag { height: calc(34px * var(--fallback-drag, 1)); color: #ffb060; background: currentColor; transform: rotate(calc(90deg - var(--fallback-flight-path, 0) * 1deg)); }
.yousun-twin-stage[data-render-mode="fallback"]::after { position: absolute; inset: 18% 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 96, 86, calc(var(--fallback-separation, 0) * .22)), transparent 64%); content: ''; pointer-events: none; }
.yousun-twin-stage.is-stalled .yousun-twin-fallback-note { border-color: rgba(255, 112, 97, .5); }
.yousun-twin-stage.is-running .yousun-fallback-reference.is-airflow { animation: fallbackFlowPulse .8s linear infinite alternate; }
@keyframes fallbackFlowPulse { to { filter: brightness(1.45); opacity: .72; } }
.yousun-twin-fallback-note { position: absolute; left: 50%; bottom: 74px; display: grid; gap: 3px; width: max-content; max-width: calc(100% - 32px); padding: 8px 11px; border: 1px solid rgba(119, 176, 224, .23); border-radius: 8px; color: #dcefff; background: rgba(5, 16, 27, .9); transform: translateX(-50%); text-align: center; }
.yousun-twin-fallback-note strong { font-size: 10px; }
.yousun-twin-fallback-note span { color: #7f9bb2; font-size: 9px; }
.aerodynamic-teaching-view .aero-hud { grid-template-columns: repeat(4, minmax(0, 1fr)); pointer-events: none; }
.aerodynamic-teaching-view[data-aero-flow="separating"] .aero-hud span:first-child { border-color: rgba(255, 194, 96, .52); }
.aerodynamic-teaching-view[data-aero-flow="stalled"] .aero-hud span:first-child { border-color: rgba(255, 106, 93, .72); background: rgba(54, 17, 20, .82); }
.yousun-angle-legend { position: absolute; z-index: 6; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px 11px; max-width: 58%; padding: 8px 10px; border: 1px solid rgba(119, 176, 224, .2); border-radius: 7px; color: #8ea9bf; background: rgba(5, 16, 27, .84); backdrop-filter: blur(9px); pointer-events: none; }
.yousun-angle-legend span { display: flex; align-items: center; gap: 5px; font-size: 9px; }
.yousun-angle-legend i { display: inline-block; width: 18px; height: 2px; background: #f6c978; box-shadow: 0 0 7px rgba(246, 201, 120, .42); }
.yousun-angle-legend .flow-swatch { background: #6caeff; box-shadow: 0 0 7px rgba(108, 174, 255, .48); }
.yousun-angle-legend strong { flex-basis: 100%; color: #7de1bd; font-size: 9px; text-align: right; }
.aerodynamic-teaching-view .visual-caption { max-width: 50%; pointer-events: none; }
.aerodynamic-teaching-view .risk-overlay { z-index: 2; pointer-events: none; }

@media (max-width: 760px) {
  .aerodynamic-teaching-view .aero-hud { top: 10px; left: 10px; right: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .aero-hud span { padding: 6px 8px; }
  .yousun-angle-legend { right: 10px; bottom: 10px; max-width: 46%; padding: 6px 8px; }
  .aerodynamic-teaching-view .visual-caption { left: 10px; bottom: 10px; max-width: 48%; padding: 7px 8px; }
  .yousun-twin-stage[data-render-mode="fallback"] { padding: 86px 16px 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .yousun-twin-loading .material-symbols-rounded { animation: none; }
  .yousun-twin-canvas { scroll-behavior: auto; }
}

.mode-context-notice {
  display: grid;
  grid-template-columns: 30px max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, rgba(8, 20, 34, .76));
  color: var(--text-muted);
}

.mode-context-notice .material-symbols-rounded { color: var(--accent); }
.mode-context-notice strong { color: var(--text); }
.mode-context-notice p { margin: 0; font-size: 13px; line-height: 1.45; }
.mode-context-notice.compact { grid-template-columns: 24px max-content minmax(0, 1fr); margin-bottom: 8px; padding: 7px 12px; border-radius: 9px; }
.mode-context-notice.compact .material-symbols-rounded { font-size: 19px; }
.mode-context-notice.compact strong, .mode-context-notice.compact p { font-size: 10px; }

.mode-context-notice.explore {
  border-color: rgba(245, 181, 92, .42);
  background: linear-gradient(90deg, rgba(245, 181, 92, .11), rgba(11, 26, 43, .7));
}

.mode-context-notice.explore .material-symbols-rounded { color: #f5b55c; }

@media (max-width: 620px) {
  .mode-context-notice { grid-template-columns: 28px minmax(0, 1fr); }
  .mode-context-notice p { grid-column: 1 / -1; }
}

/* V6X 飞控板硬件证据台：模型只有在学生主动进入后才加载 */
.hardware-evidence-station { display: grid; gap: 16px; margin: 22px 0 14px; padding: 22px; border: 1px solid color-mix(in srgb, var(--accent) 32%, rgba(111, 157, 194, .22)); border-radius: 22px; background: radial-gradient(circle at 54% 35%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%), linear-gradient(145deg, #0b1b2b, #07121e 62%, #091827); box-shadow: 0 22px 58px rgba(0, 0, 0, .24); }
.hardware-station-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.hardware-station-heading > div { min-width: 0; }
.hardware-station-heading .eyebrow { color: var(--accent); font: 750 10px "JetBrains Mono"; letter-spacing: .16em; }
.hardware-station-heading h2 { margin: 6px 0 5px; color: #f4f9fd; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.2; }
.hardware-station-heading p { max-width: 74ch; margin: 0; color: #91a9bc; font-size: 13px; line-height: 1.65; }
.hardware-source-chip { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(94, 218, 169, .28); border-radius: 999px; color: #8ee2bb; background: rgba(39, 122, 88, .12); font-size: 11px; white-space: nowrap; }
.hardware-source-chip .material-symbols-rounded { font-size: 17px; }
.hardware-station-grid { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(420px, 1.55fr) minmax(240px, .72fr); gap: 13px; min-height: 410px; }
.hardware-task-panel, .hardware-evidence-panel { min-width: 0; padding: 16px; border: 1px solid rgba(117, 161, 195, .16); border-radius: 16px; background: rgba(7, 20, 33, .76); }
.hardware-task-panel > small, .hardware-evidence-panel > small { color: var(--accent); font: 750 9px "JetBrains Mono"; letter-spacing: .12em; }
.hardware-task-panel > p { margin: 7px 0 14px; color: #a9bdcc; font-size: 12px; line-height: 1.65; }
.hardware-module-list { display: grid; gap: 7px; }
.hardware-module-list button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 52px; padding: 8px 10px; border: 1px solid rgba(115, 155, 188, .16); border-radius: 11px; color: #a9bece; background: rgba(16, 37, 56, .7); cursor: pointer; text-align: left; transition: border-color .18s ease, color .18s ease, transform .18s ease, background .18s ease; }
.hardware-module-list button:hover:not(:disabled) { transform: translateX(2px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: #edf8ff; }
.hardware-module-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hardware-module-list button:disabled { opacity: .48; cursor: wait; }
.hardware-module-list button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 72%, transparent); color: #f7fbff; background: color-mix(in srgb, var(--accent) 13%, #102538); box-shadow: inset 3px 0 var(--accent); }
.hardware-module-list button > .material-symbols-rounded { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #0a1a28); font-size: 18px; }
.hardware-module-list button > span:last-child { display: grid; gap: 2px; min-width: 0; }
.hardware-module-list b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hardware-module-list small { color: #6f899f; font-size: 9px; }
.hardware-viewer { position: relative; display: grid; min-width: 0; min-height: 410px; overflow: hidden; border: 1px solid rgba(112, 164, 204, .24); border-radius: 18px; background: radial-gradient(circle at 50% 46%, rgba(39, 104, 153, .32), transparent 42%), linear-gradient(165deg, #0c2032, #06111d 70%); isolation: isolate; }
.hardware-viewer::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .28; background-image: linear-gradient(rgba(110, 169, 211, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 169, 211, .13) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 92%); }
.hardware-viewer-intro { align-self: center; justify-self: center; display: grid; justify-items: center; max-width: 430px; padding: 28px; text-align: center; }
.hardware-viewer-intro > .material-symbols-rounded { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 13px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 19px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, rgba(5, 18, 30, .86)); font-size: 35px; box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 14%, transparent); }
.hardware-viewer-intro small { color: #6d8ba3; font: 700 9px "JetBrains Mono"; letter-spacing: .1em; }
.hardware-viewer-intro strong { margin-top: 8px; color: #f0f7fc; font-size: 17px; }
.hardware-viewer-intro p { margin: 7px 0 17px; color: #90aabd; font-size: 12px; line-height: 1.6; }
.hardware-viewer-intro button { display: flex; align-items: center; gap: 8px; }
.hardware-viewer[data-state="loading"] .material-symbols-rounded { animation: hardware-spin 1.15s linear infinite; }
.hardware-viewer-canvas { display: block; width: 100%; height: 100%; min-height: 410px; cursor: grab; touch-action: none; }
.hardware-viewer-canvas:active { cursor: grabbing; }
.hardware-viewer-error { align-self: center; justify-self: center; display: grid; justify-items: center; max-width: 360px; padding: 24px; color: #f0f5f8; text-align: center; }
.hardware-viewer-error > .material-symbols-rounded { color: #ff827d; font-size: 38px; }
.hardware-viewer-error strong { margin-top: 8px; }
.hardware-viewer-error p { margin: 6px 0 0; color: #93a8b8; font-size: 12px; line-height: 1.55; }
.hardware-evidence-panel { align-content: start; display: grid; gap: 12px; }
.hardware-evidence-panel h3 { margin: -5px 0 2px; color: #f2f8fc; font-size: 19px; }
.hardware-evidence-panel > div { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 9px; padding: 12px; border: 1px solid rgba(91, 211, 160, .18); border-radius: 12px; background: rgba(35, 112, 79, .09); }
.hardware-evidence-panel > div.boundary { border-color: rgba(255, 179, 92, .2); background: rgba(118, 77, 31, .1); }
.hardware-evidence-panel > div > .material-symbols-rounded { color: #68d8a8; font-size: 21px; }
.hardware-evidence-panel > div.boundary > .material-symbols-rounded { color: #ffbc70; }
.hardware-evidence-panel p { display: grid; gap: 5px; margin: 0; }
.hardware-evidence-panel p small { color: #7391a8; font-size: 9px; }
.hardware-evidence-panel p strong { color: #c8d9e5; font-size: 11px; font-weight: 550; line-height: 1.6; }
.hardware-evidence-station > footer { display: flex; justify-content: space-between; gap: 18px; color: #738da2; font-size: 10px; }
.hardware-evidence-station > footer span:first-child { color: #a9bed0; }
@keyframes hardware-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .hardware-station-grid { grid-template-columns: minmax(210px, .7fr) minmax(420px, 1.3fr); }
  .hardware-evidence-panel { grid-column: 1 / -1; grid-template-columns: auto 1fr 1fr; align-items: center; }
  .hardware-evidence-panel > small { display: none; }
  .hardware-evidence-panel h3 { margin: 0; }
}

@media (max-width: 800px) {
  .hardware-evidence-station { padding: 16px; }
  .hardware-station-heading { align-items: start; flex-direction: column; gap: 10px; }
  .hardware-station-grid { grid-template-columns: 1fr; }
  .hardware-task-panel { order: 2; }
  .hardware-viewer { order: 1; min-height: 340px; }
  .hardware-viewer-canvas { min-height: 340px; }
  .hardware-evidence-panel { order: 3; grid-column: auto; grid-template-columns: 1fr; }
  .hardware-module-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hardware-evidence-station > footer { flex-direction: column; gap: 4px; }
}

@media (max-width: 520px) {
  .hardware-module-list { grid-template-columns: 1fr; }
  .hardware-viewer, .hardware-viewer-canvas { min-height: 290px; }
  .hardware-source-chip { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .hardware-viewer[data-state="loading"] .material-symbols-rounded { animation: none; }
}

/* 空气动力学知识交互：统一使用实机透明素材，数据图层只承担解释。 */
.aero-interaction { gap: 14px; background: radial-gradient(circle at 48% 30%, rgba(65, 139, 218, .13), transparent 44%), linear-gradient(145deg, rgba(11, 28, 45, .98), rgba(5, 16, 29, .98)); }
.aero-product-stage { position: relative; display: grid; place-items: center; min-height: 168px; overflow: hidden; border: 1px solid rgba(88, 167, 255, .17); border-radius: 15px; background: linear-gradient(180deg, rgba(9, 26, 43, .82), rgba(5, 15, 26, .94)); }
.aero-product-stage::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(112, 164, 210, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 164, 210, .07) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 78%, transparent); }
.aero-product-stage img { position: relative; z-index: 1; width: min(68%, 390px); max-height: 150px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .54)); transform: rotate(var(--bank-angle, 0deg)); transition: transform .28s ease; }
.aero-state-badge { position: absolute; z-index: 3; right: 12px; bottom: 12px; padding: 7px 10px; border: 1px solid rgba(88, 167, 255, .25); border-radius: 999px; color: #d7ecff; background: rgba(4, 15, 26, .84); font: 700 10px "JetBrains Mono"; }
.aero-frame-selector, .aero-layer-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aero-frame-selector button, .aero-layer-selector button { min-height: 48px; padding: 9px 10px; border: 1px solid rgba(126, 169, 205, .17); border-radius: 11px; color: #9cb1c4; background: rgba(8, 23, 38, .78); cursor: pointer; }
.aero-frame-selector button { display: grid; gap: 2px; text-align: left; }
.aero-frame-selector small { color: #64809a; font: 700 9px "JetBrains Mono"; }
.aero-frame-selector strong { font-size: 11px; }
.aero-frame-selector button[aria-pressed="true"], .aero-layer-selector button[aria-pressed="true"] { border-color: rgba(88, 167, 255, .7); color: #eff8ff; background: linear-gradient(145deg, rgba(41, 104, 169, .34), rgba(10, 31, 51, .9)); box-shadow: inset 0 0 0 1px rgba(88, 167, 255, .11); }
.aero-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aero-metric-grid > span { display: grid; gap: 4px; min-width: 0; padding: 10px 11px; border: 1px solid rgba(126, 169, 205, .14); border-radius: 10px; background: rgba(5, 18, 31, .72); }
.aero-metric-grid small { color: #6f8ca5; font-size: 9px; }
.aero-metric-grid strong { overflow: hidden; color: #e9f6ff; font: 750 13px "JetBrains Mono"; text-overflow: ellipsis; white-space: nowrap; }
.aero-slider-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aero-slider-pair label, .aero-polar-slider { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid rgba(126, 169, 205, .14); border-radius: 11px; background: rgba(5, 18, 31, .7); }
.aero-slider-pair label > span, .aero-polar-slider > span { display: flex; justify-content: space-between; color: #9eb2c3; font-size: 11px; font-weight: 700; }
.aero-slider-pair output, .aero-polar-slider output { color: #75bcff; font: 750 12px "JetBrains Mono"; }
.aero-airflow-line, .aero-chord-line { position: absolute; z-index: 2; left: 13%; right: 13%; top: 50%; height: 2px; transform: rotate(var(--flight-path-line, 0deg)); transform-origin: center; background: #55aaff; box-shadow: 0 0 12px rgba(85, 170, 255, .5); }
.aero-chord-line { transform: rotate(var(--pitch-line, 0deg)); background: #f0bb69; box-shadow: 0 0 12px rgba(240, 187, 105, .45); }
.aero-airflow-line span, .aero-chord-line span { position: absolute; right: 0; bottom: 6px; padding: 2px 5px; color: #8fc8ff; background: rgba(4, 15, 26, .82); font-size: 9px; }
.aero-chord-line span { color: #ffd18a; }
.aero-angle-surface .aero-product-stage { min-height: 230px; }
.aero-angle-aircraft { width: min(46%, 310px) !important; max-height: 190px !important; transform: rotate(var(--aircraft-pitch)) scale(1.04) !important; transform-origin: 50% 52%; transition: transform .18s cubic-bezier(.2, .75, .25, 1) !important; }
.aero-angle-surface .aero-airflow-line, .aero-angle-surface .aero-chord-line { left: 8%; right: 8%; height: 3px; transition: transform .18s cubic-bezier(.2, .75, .25, 1); }
.aero-airflow-line::before { position: absolute; left: -2px; top: 50%; width: 13px; height: 13px; content: ""; border-left: 3px solid #55aaff; border-bottom: 3px solid #55aaff; transform: translateY(-50%) rotate(45deg); }
.aero-chord-line::after { position: absolute; right: -2px; top: 50%; width: 9px; height: 9px; content: ""; border-right: 3px solid #f0bb69; border-top: 3px solid #f0bb69; transform: translateY(-50%) rotate(45deg); }
.aero-angle-arc { position: absolute; z-index: 4; left: 50%; top: 50%; width: 190px; height: 190px; pointer-events: none; transform: translate(-50%, -50%); }
.aero-angle-arc path { fill: none; stroke: #76efc8; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(118, 239, 200, .8)); }
.aero-angle-badge { position: absolute; z-index: 5; left: calc(50% + 54px); top: calc(50% + 22px); display: grid; gap: 1px; min-width: 76px; padding: 7px 10px; border: 1px solid rgba(118, 239, 200, .5); border-radius: 9px; color: #dffbf3; background: rgba(4, 18, 29, .9); box-shadow: 0 8px 18px rgba(0, 0, 0, .28); }
.aero-angle-badge small { color: #8fb5aa; font-size: 8px; }
.aero-angle-badge strong { color: #76efc8; font: 800 18px "JetBrains Mono"; }
.aero-angle-surface[data-state="caution"] .aero-angle-arc path, .aero-angle-surface[data-state="caution"] .aero-angle-badge strong { stroke: #ffc66d; color: #ffc66d; }
.aero-angle-surface[data-state="danger"] .aero-angle-arc path, .aero-angle-surface[data-state="danger"] .aero-angle-badge strong { stroke: #ff7676; color: #ff7676; }
.aero-equation { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(24, 57, 87, .45); }
.aero-equation span { color: #7f9bb2; font-size: 10px; }
.aero-equation strong { color: #f1f8fd; font: 750 16px "JetBrains Mono"; }
.aero-equation small { grid-column: 2; color: #89a5ba; font-size: 10px; }
.aero-layer-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aero-layer-selector button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.aero-layer-selector .material-symbols-rounded { color: #67b7ff; font-size: 17px; }
.aero-layer-stage { min-height: 190px; }
.aero-layer-chip { position: relative; z-index: 3; margin: 4px; padding: 6px 9px; border: 1px solid rgba(88, 167, 255, .27); border-radius: 999px; color: #d9eeff; background: rgba(8, 29, 47, .88); font-size: 9px; }
.aero-layer-chip[data-layer="pressure"] { color: #8ed1ff; }
.aero-layer-chip[data-layer="boundary"] { color: #74e0bb; }
.aero-layer-chip[data-layer="momentum"] { color: #ffd082; }
.aero-calc-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 9px; align-items: center; }
.aero-calc-chain span { display: grid; gap: 4px; padding: 11px; border: 1px solid rgba(88, 167, 255, .15); border-radius: 10px; background: rgba(6, 20, 34, .78); }
.aero-calc-chain small { color: #718da4; font-size: 9px; }
.aero-calc-chain strong { color: #eaf7ff; font: 750 14px "JetBrains Mono"; }
.aero-calc-chain > i { color: #4e7495; font-style: normal; }
.aero-polar-chart { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(88, 167, 255, .15); border-radius: 13px; background: rgba(5, 18, 31, .75); }
.aero-polar-chart > div { display: grid; grid-template-columns: 44px 1fr 52px; gap: 9px; align-items: center; }
.aero-polar-chart span { color: #8da5ba; font-size: 10px; }
.aero-polar-chart i { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(109, 145, 174, .14); }
.aero-polar-chart b { display: block; width: var(--cl); height: 100%; border-radius: inherit; background: #58a7ff; transition: width .25s ease; }
.aero-polar-chart > div:nth-child(2) b { width: var(--cd); background: #ff8b7d; }
.aero-polar-chart > div:nth-child(3) b { width: var(--efficiency); background: #6ce2b0; }
.aero-polar-chart strong { color: #eaf6fe; font: 700 11px "JetBrains Mono"; text-align: right; }
.aero-polar-zones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; color: #708ca4; font-size: 9px; text-align: center; }
.control-select select { width: 100%; min-height: 42px; margin-top: 8px; padding: 0 10px; border: 1px solid rgba(125, 169, 205, .24); border-radius: 9px; color: #eaf6ff; background: #0b2033; }
.lab-controls :disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 760px) {
  .aero-frame-selector, .aero-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aero-slider-pair { grid-template-columns: 1fr; }
  .aero-product-stage img { width: 82%; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; grid-template-rows: auto minmax(0, 1fr) auto; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; }
  .brand-lockup { flex: 1; }
  .topbar-actions { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr) auto auto; margin: 0; }
  .course-select-label { width: auto; min-width: 0; }
  .course-select-label select { width: 100%; min-width: 0; max-width: none; }
  .scene-content { overflow: visible; padding: 24px 16px 34px; }
  .scene-header { align-items: flex-start; }
  .scene-counter { display: none; }
  .lab-layout { grid-template-columns: 1fr; }
  .lab-controls, .evidence-panel { border: 0; }
  .lab-controls { border-bottom: 1px solid var(--line); }
  .evidence-panel { border-top: 1px solid var(--line); }
  .lab-visual { min-height: 360px; }
  .transition-corridor { min-height: 520px; }
  .quadrotor-teaching-view { min-height: 520px; }
  .quadrotor-airframe { width: 100%; }
  .aircraft-rig { width: min(86%, 680px); }
  .model-stage { display: flex; }
  .causal-chain { grid-template-columns: 1fr; }
  .causal-chain > .material-symbols-rounded { transform: rotate(90deg); justify-self: center; }
  .transfer-card { grid-template-columns: 1fr; }
  .plan-builder { grid-template-columns: 1fr; align-items: stretch; }
  .plan-builder-heading { grid-row: auto; }
  .plan-builder blockquote { grid-column: auto; }
  .teacher-console { grid-template-columns: 48px 1fr; }
  .player-controls { grid-column: 1 / -1; justify-content: center; }
  .course-directory { grid-template-columns: minmax(280px, 92vw) 1fr; }
}

@media (max-width: 580px) {
  .topbar-actions { grid-template-columns: minmax(0, 1fr) minmax(0, .68fr); }
  .mode-toggle, .duration-chip { justify-content: center; }
  .inquiry-workspace-header { align-items: stretch; flex-direction: column; gap: 10px; }
  .inquiry-workspace-header > div { width: 100%; min-width: 0; align-items: flex-start; }
  .inquiry-phase-heading { min-width: 0; flex: 1; }
  .inquiry-phase-heading > span { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; }
  .inquiry-workspace-header em { align-self: flex-start; }
  .brand-lockup small { display: none; }
  .brand-lockup strong { font-size: 14px; }
  .scene-header h1 { font-size: 28px; }
  .beat-tabs button { min-height: 58px; font-size: 11px; }
  .beat-tabs span { display: none; }
  .beat-copy { padding: 28px 22px 20px; }
  .lesson-footer, .scene-action { align-items: stretch; flex-direction: column; }
  .activity-brief { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .transition-corridor { min-height: 560px; }
  .vector-breakdown { left: 14px; right: auto; top: 58px; }
  .mechanical-viewport { inset: 102px 4px 182px; }
  .aircraft-rig { width: 100%; }
  .corridor-status, .recovery-advice { left: 12px; right: 12px; max-width: none; }
  .corridor-status { bottom: 128px; }
  .recovery-advice { bottom: 78px; }
  .load-transfer-meter { left: 12px; right: 12px; bottom: 8px; }
  .tradeoff-options, .mode-readout, .planner-gates { grid-template-columns: 1fr; }
  .mode-selector, .layer-toggles, .profile-selector, .plan-fields { grid-template-columns: 1fr; }
  .mission-phases { grid-template-columns: 1fr 1fr; }
  .authority-bars > div { grid-template-columns: 78px 1fr 38px; }
  .force-change-selector, .control-surface-selector, .coordination-selector, .sensitivity-selector { grid-template-columns: 1fr; }
  .quad-case-selector, .quad-profile-selector, .quad-condition-selector { grid-template-columns: 1fr; }
  .force-vector-grid, .sensitivity-metrics { grid-template-columns: 1fr 1fr; }
  .quad-metric-strip { grid-template-columns: 1fr 1fr; }
  .quadrotor-motion-readout { left: 14px; right: 14px; top: 50px; }
  .quadrotor-airframe { top: 50%; width: 100%; }
  .quadrotor-channel { width: 66px; padding: 5px; }
  .quadrotor-balance-meter { left: 14px; right: 14px; }
  .cg-readout, .coordination-readout, .control-chain { grid-template-columns: 1fr; }
  .control-chain > .material-symbols-rounded { transform: rotate(90deg); justify-self: center; }
}

/* P0：四课统一入口、紧凑播放器与实验证据闭环 */
.app-shell { grid-template-rows: 76px minmax(0, 1fr) 92px; transition: grid-template-rows .24s ease; }
.app-shell:has(.classroom-footer[data-expanded="true"]) { grid-template-rows: 76px minmax(0, 1fr) 164px; }
.mode-toggle { min-height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: #c5d4e1; background: #0d1b2c; cursor: pointer; }
.mode-toggle b { font-size: 12px; font-weight: 650; }
.mode-toggle .material-symbols-rounded { color: var(--accent); font-size: 18px; }
.mode-toggle[data-mode="explore"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, #0d1b2c); }
.mode-toggle.needs-attention { animation: mode-attention .42s ease 2; }
@keyframes mode-attention { 50% { transform: translateY(-2px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } }

.classroom-footer { grid-template-columns: 1fr; transition: min-height .24s ease; }
.classroom-footer .teacher-console { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 10px 22px; border-right: 0; }
.classroom-footer .teacher-avatar { width: 40px; height: 40px; }
.classroom-footer .narration-panel p { overflow: hidden; margin-top: 3px; white-space: nowrap; text-overflow: ellipsis; }
.classroom-footer .scene-rail { display: none; }
.classroom-footer[data-expanded="true"] { grid-template-columns: minmax(740px, .85fr) minmax(600px, 1.15fr); }
.classroom-footer[data-expanded="true"] .teacher-console { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 18px 22px; border-right: 1px solid var(--line); }
.classroom-footer[data-expanded="true"] .teacher-avatar { width: 52px; height: 52px; }
.classroom-footer[data-expanded="true"] .narration-panel p { white-space: normal; }
.classroom-footer[data-expanded="true"] .scene-rail { display: grid; }
.player-expand { color: var(--accent); }
.rail-step.locked { opacity: .42; cursor: not-allowed; }
.directory-course li button.locked { opacity: .46; cursor: not-allowed; }

.evidence-comparison { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 8px; align-items: center; margin: 13px 0; padding: 12px; border: 1px solid #27435c; background: #081827; }
.evidence-comparison > div { min-width: 0; display: grid; gap: 3px; }
.evidence-comparison small, .evidence-comparison span { color: var(--muted); font-size: 11px; }
.evidence-comparison strong { color: #d9e8f5; font: 700 18px "JetBrains Mono"; }
.evidence-comparison > .material-symbols-rounded { color: #5f7690; font-size: 18px; }
.evidence-comparison .evidence-delta { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; padding-top: 9px; border-top: 1px solid var(--line-soft); }
.evidence-comparison .evidence-delta strong { font-size: 14px; }
.evidence-comparison.has-change { border-color: color-mix(in srgb, var(--accent) 44%, #27435c); box-shadow: inset 3px 0 var(--accent); }
.evidence-comparison.has-change [data-evidence-current], .evidence-comparison.has-change [data-evidence-delta] { color: var(--accent); }
.lab-shell[data-running="true"] .evidence-comparison [data-evidence-current] { animation: evidence-pulse 1.1s ease-in-out infinite; }
@keyframes evidence-pulse { 50% { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 56%, transparent); } }

.experiment-memory { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: center; margin-top: 20px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); background: linear-gradient(135deg, #0a1d2e, #0b202a); }
.experiment-memory h3 { margin: 3px 0 7px; }
.experiment-memory p { margin: 0; color: #b8c9d7; font-size: 13px; line-height: 1.65; }
.memory-columns { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 10px; align-items: center; }
.memory-columns > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.memory-columns > div > b { grid-column: 1 / -1; color: var(--accent); font-size: 11px; letter-spacing: .08em; }
.memory-columns span { display: grid; gap: 2px; padding: 9px; border: 1px solid var(--line); background: #081724; }
.memory-columns small { color: var(--muted); font-size: 11px; }
.memory-columns strong { font: 700 13px "JetBrains Mono"; }
.memory-columns > .material-symbols-rounded { color: var(--accent); }
.experiment-memory.empty { grid-template-columns: 1fr auto; border-style: dashed; }

.directory-course-title small, .directory-course li button small, .directory-course li button > span { font-size: 11px; }

/* 幽隼四课时：观察—假设—方案 */
.duration-chip b { color: inherit; font-size: inherit; font-weight: 650; }
.scene-rail:has(.period-tabs) { grid-template-columns: 210px 1fr; gap: 12px; padding: 10px 16px; }
.period-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.period-tab { min-width: 0; display: grid; gap: 1px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #091725; cursor: pointer; text-align: left; }
.period-tab span { color: #d5e2ec; font-size: 10px; font-weight: 750; }
.period-tab small { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.period-tab.current { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, #091725); }
.period-tab.current span { color: var(--accent); }
.period-scene-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.period-scene-steps .rail-step.compact { min-width: 0; padding: 8px 5px; }
.period-scene-steps .rail-step.compact small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.directory-period { margin: 10px 12px 16px; border: 1px solid var(--line); background: #081724; }
.directory-period > header { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.directory-period > header > span { color: var(--accent); font-size: 11px; font-weight: 800; }
.directory-period > header div { display: grid; gap: 3px; }
.directory-period > header strong { font-size: 13px; }
.directory-period > header small { color: var(--muted); font-size: 11px; }

.tilt-inquiry-surface, .hypothesis-builder, .investigation-plan { overflow: hidden; }
.observation-stage { position: relative; min-height: 280px; margin: 0 18px; border: 1px solid #294258; background: radial-gradient(circle at 50% 45%, rgba(53, 105, 145, .2), transparent 58%), linear-gradient(160deg, #081827, #06111d); }
.observation-stage::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(113, 151, 181, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 151, 181, .07) 1px, transparent 1px); background-size: 32px 32px; }
.observation-stage img { position: absolute; inset: 8% 8% 11%; width: 84%; height: 81%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .48)); }
.observation-axis, .observation-lift { position: absolute; z-index: 2; display: grid; gap: 5px; justify-items: center; color: #d9e9f6; font-size: 10px; font-weight: 750; }
.observation-axis { top: 15%; right: 10%; transform: rotate(var(--observed-tilt)); transform-origin: 50% 70%; }
.observation-axis i { width: 3px; height: 72px; border-radius: 4px; background: linear-gradient(#ffbc6d, transparent); box-shadow: 0 0 16px rgba(255, 179, 92, .55); }
.observation-lift { bottom: 14%; left: 10%; }
.observation-lift i { width: 3px; height: 58px; background: linear-gradient(transparent, #6fe7ad); box-shadow: 0 0 14px rgba(111, 231, 173, .45); }
.observation-selector, .hypothesis-variables, .plan-task-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 12px 18px; }
.observation-selector button, .hypothesis-variables button, .plan-task-selector button { min-height: 54px; padding: 9px; border: 1px solid var(--line); border-radius: 7px; color: #c6d5e1; background: #0b1a29; cursor: pointer; }
.observation-selector button[aria-pressed="true"], .hypothesis-variables button[aria-pressed="true"], .plan-task-selector button[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: color-mix(in srgb, var(--accent) 12%, #0b1a29); box-shadow: inset 0 -2px var(--accent); }
.observation-selector button, .hypothesis-variables button { display: grid; gap: 3px; text-align: left; }
.observation-selector small, .hypothesis-variables small { color: var(--muted); font-size: 10px; }
.observation-readout, .plan-evidence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 18px 12px; }
.observation-readout p, .plan-evidence-grid p { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); background: #081725; }
.observation-readout small, .plan-evidence-grid small { color: var(--muted); font-size: 10px; }
.observation-readout strong, .plan-evidence-grid strong { color: #dbe8f2; font-size: 12px; line-height: 1.45; }

.hypothesis-sentence { display: grid; grid-template-columns: 52px 1fr; gap: 7px 10px; margin: 14px 18px; padding: 16px; border-left: 3px solid var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, #081725), #081725); }
.hypothesis-sentence span { color: var(--accent); font-size: 11px; font-weight: 800; }
.hypothesis-sentence strong, .hypothesis-sentence p { margin: 0; color: #dce8f1; font-size: 12px; line-height: 1.55; }
.hypothesis-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 18px 12px; }
.hypothesis-checks span { display: flex; align-items: center; gap: 5px; color: #a9c4b9; font-size: 10px; }
.hypothesis-checks .material-symbols-rounded { color: #6fe7ad; font-size: 15px; }
.plan-protocol { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; gap: 5px; align-items: center; margin: 0 18px 12px; }
.plan-protocol span { display: flex; gap: 7px; align-items: center; min-height: 48px; padding: 9px; border: 1px solid var(--line); background: #091826; font-size: 10px; line-height: 1.35; }
.plan-protocol b { color: var(--accent); font: 750 10px "JetBrains Mono"; }
.plan-protocol > .material-symbols-rounded { color: #526a80; font-size: 16px; }

@media (max-width: 900px) {
  .app-shell, .app-shell:has(.classroom-footer[data-expanded="true"]) { grid-template-rows: auto minmax(0, 1fr) auto; }
  .classroom-footer, .classroom-footer[data-expanded="true"] { grid-template-columns: 1fr; }
  .classroom-footer[data-expanded="true"] .scene-rail { display: none; }
  .experiment-memory, .memory-columns { grid-template-columns: 1fr; }
  .memory-columns > .material-symbols-rounded { transform: rotate(90deg); justify-self: center; }
  .observation-selector, .hypothesis-variables, .plan-task-selector { grid-template-columns: 1fr; }
  .plan-protocol { grid-template-columns: 1fr; }
  .plan-protocol > .material-symbols-rounded { transform: rotate(90deg); justify-self: center; }
}

/* 幽隼四课时：变量—证据—设计—迭代 */
.variable-map-surface,.data-reading-surface,.flight-profile-surface,.engineering-choice-surface{display:grid;gap:18px}.variable-map-tabs,.data-record-tabs,.engineering-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.variable-map-tabs button,.data-record-tabs button,.flight-profile-track button,.engineering-options button{border:1px solid rgba(129,167,205,.2);background:rgba(11,23,40,.78);color:#c9d8e8;border-radius:12px;padding:12px;text-align:left;cursor:pointer}.variable-map-tabs button[aria-pressed="true"],.data-record-tabs button[aria-pressed="true"],.flight-profile-track button[aria-pressed="true"],.engineering-options button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,rgba(11,23,40,.9));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}.variable-chain{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}.variable-chain>div,.locked-variables,.engineering-risk{padding:16px;border-radius:14px;background:rgba(17,35,56,.72);border:1px solid rgba(129,167,205,.16)}.variable-chain small,.locked-variables small,.engineering-risk small{display:block;color:#7f9ab5;margin-bottom:6px}.variable-chain strong,.locked-variables strong,.engineering-risk strong{color:#eff8ff;line-height:1.5}.locked-variables,.engineering-risk{display:flex;gap:12px;align-items:center}.locked-variables>.material-symbols-rounded{color:#75d6ff}.engineering-risk>.material-symbols-rounded{color:#ffbb69}.evidence-data-grid,.profile-evidence-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.evidence-data-grid>div,.profile-evidence-grid>p{margin:0;padding:14px;border-radius:12px;background:rgba(17,35,56,.68);border:1px solid rgba(129,167,205,.14)}.evidence-data-grid small,.profile-evidence-grid small{display:block;color:#7894ae;margin-bottom:6px}.evidence-data-grid strong,.profile-evidence-grid strong{color:#f1f8ff}.data-bar-compare{display:grid;gap:8px}.data-bar-compare span{position:relative;overflow:hidden;display:block;padding:8px 12px;border-radius:8px;background:rgba(20,38,58,.82);color:#d9eaff;z-index:0}.data-bar-compare span:before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--bar);background:linear-gradient(90deg,rgba(74,159,255,.3),rgba(84,222,192,.38));transition:width .35s ease}.flight-profile-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.flight-profile-track button span{display:block;color:#68bfff;font-size:11px}.flight-profile-track button strong{display:block;margin-top:5px}.profile-airframe{position:relative;display:grid;place-items:center;min-height:210px;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(54,126,190,.2),transparent 56%),linear-gradient(160deg,#0c1b2b,#08131f)}.profile-airframe img{width:min(66%,540px);height:180px;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.5))}.profile-vector{position:absolute;right:8%;top:18%;display:flex;align-items:center;gap:7px;color:#79dc9c;background:rgba(5,20,29,.8);padding:9px 12px;border-radius:999px;border:1px solid rgba(121,220,156,.3)}.engineering-options{grid-template-columns:repeat(2,minmax(0,1fr))}.engineering-options button{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:start}.engineering-options button>.material-symbols-rounded{grid-row:1/3;color:#6cc7ff}.engineering-options button small{line-height:1.45;color:#8ea7bf}.engineering-change-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.engineering-change-list span{display:flex;gap:10px;align-items:center;padding:13px;border-radius:12px;background:rgba(17,35,56,.7);color:#dcecff}.engineering-change-list b{color:#65c4ff;font-size:11px}.measurement-notebook,.dry-run-checklist,.flight-test-strip,.iteration-brief{grid-column:1/-1;margin-top:12px;padding:14px;border-radius:14px;background:rgba(8,22,37,.82);border:1px solid rgba(98,183,236,.2)}.workflow-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.workflow-heading small{display:block;color:#5ab9ee;font-size:10px;letter-spacing:.12em}.workflow-heading strong{color:#eaf6ff}.workflow-heading button{border:0;border-radius:9px;background:#4a9ef7;color:white;padding:9px 12px;cursor:pointer}.data-reading-table{display:grid;gap:5px}.reading-row{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:8px;padding:8px 9px;border-radius:8px;background:rgba(24,44,65,.65);color:#c9d8e8;font-size:12px}.reading-head{color:#7292ae;background:transparent}.measurement-notebook>p,.iteration-brief>p{margin:10px 0 0;color:#94aec5;line-height:1.5}.dry-run-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.dry-run-items button{border:1px solid rgba(117,150,181,.2);background:rgba(22,40,60,.7);color:#9fb4c8;border-radius:10px;padding:10px;cursor:pointer}.dry-run-items button[aria-pressed="true"]{color:#8ee0a7;border-color:rgba(87,220,137,.45);background:rgba(48,133,83,.16)}.test-stages{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center}.test-stages span{padding:10px;border-radius:10px;background:rgba(22,40,60,.7);color:#dcecff}.test-stages b{color:#66bfff;margin-right:7px}.test-stages i{width:28px;height:1px;background:#436480}.iteration-brief .workflow-heading{margin-bottom:4px}
@media (max-width:900px){.variable-map-tabs,.data-record-tabs,.evidence-data-grid,.profile-evidence-grid,.flight-profile-track,.engineering-change-list{grid-template-columns:repeat(2,minmax(0,1fr))}.variable-chain{grid-template-columns:1fr}.variable-chain>.material-symbols-rounded{transform:rotate(90deg)}.dry-run-items,.test-stages{grid-template-columns:1fr}.test-stages i{display:none}.reading-row{grid-template-columns:1.1fr repeat(2,1fr)}.reading-row span:nth-child(4),.reading-row span:nth-child(5){display:none}}

.inquiry-memory-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.inquiry-memory-tags span{padding:10px 12px;border-radius:9px;background:rgba(33,58,81,.7);border:1px solid rgba(103,184,235,.18);color:#cfe4f5;font-size:12px}

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

/* 四课时证据档案与实验门槛 */
.scene-action button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.35); box-shadow: none; }
.scene-action button.ready { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 10px 28px color-mix(in srgb, var(--accent) 18%, transparent); }
.evidence-portfolio { display: grid; gap: 16px; margin-top: 22px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, #081523), #07111d); }
.portfolio-heading { display: grid; gap: 5px; }
.portfolio-heading h3, .evidence-portfolio.empty h3 { margin: 0; color: #eef7ff; font-size: 20px; }
.portfolio-heading p, .evidence-portfolio.empty p { margin: 0; color: #8ca6bc; line-height: 1.55; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.portfolio-grid article { display: grid; gap: 9px; min-width: 0; padding: 14px; border: 1px solid rgba(126, 177, 216, .16); border-radius: 13px; background: rgba(14, 31, 49, .82); }
.portfolio-grid article > small { color: var(--accent); font: 700 10px "JetBrains Mono"; letter-spacing: .08em; }
.portfolio-grid article > strong { overflow: hidden; color: #dcebf7; font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.portfolio-grid article > div { display: grid; gap: 5px; }
.portfolio-grid article span { display: flex; justify-content: space-between; gap: 8px; color: #eff8ff; font: 650 11px "JetBrains Mono"; }
.portfolio-grid article b { color: #7894ab; font: 500 10px "Noto Sans SC"; }

@media (max-width: 1340px) and (min-width: 901px) {
  .app-shell:has(.classroom-footer[data-expanded="true"]) { grid-template-rows: 68px minmax(0, 1fr) 146px; }
  .classroom-footer[data-expanded="true"] { grid-template-columns: 1fr; }
  .classroom-footer[data-expanded="true"] .teacher-console { border-right: 0; }
  .classroom-footer[data-expanded="true"] .scene-rail { display: none; }
}

/* 教师讲解：可选中文音色与即时试听 */
.voice-picker { display: flex; min-width: 0; align-items: center; }
.voice-picker select { width: 164px; height: 44px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #0c1b2b; font: 600 12px "Noto Sans SC", sans-serif; cursor: pointer; }
.voice-picker select:hover, .voice-picker select:focus-visible { border-color: var(--accent); outline: none; }
.voice-picker select:disabled, .player-icon:disabled { opacity: .45; cursor: not-allowed; }
.player-icon.voice-preview { color: #8ebcff; }
.player-icon.voice-preview.playing { color: #041410; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 18px rgba(85, 230, 193, .35); }
.player-icon.auto-demo { color: #7897b5; }
.player-icon.auto-demo[aria-pressed="true"] { color: #051813; border-color: var(--accent); background: var(--accent); box-shadow: 0 0 18px rgba(85, 230, 193, .28); }
.narration-focus { position: relative; z-index: 2; outline: 2px solid color-mix(in srgb, var(--accent) 85%, white); outline-offset: 5px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), 0 18px 46px rgba(0, 0, 0, .32); transition: outline-color .2s ease, box-shadow .2s ease; }

@media (max-width: 1180px) {
  .voice-picker select { width: 138px; }
}

@media (max-width: 760px) {
  .player-controls { flex-wrap: wrap; }
  .voice-picker { order: 2; flex: 1 1 150px; }
  .voice-picker select { width: 100%; }
}

/* 四课时完整教案：在课堂片段之上补齐目标、流程、证据与安全边界 */
.scene-header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.period-guide-trigger { display: grid; grid-template-columns: 34px auto; gap: 10px; align-items: center; min-height: 50px; padding: 7px 12px 7px 8px; border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: 12px; color: #edf6fc; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, #0d2132), #091725); cursor: pointer; text-align: left; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.period-guide-trigger:hover { transform: translateY(-1px); border-color: var(--accent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 19%, #0d2132), #091725); }
.period-guide-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.period-guide-trigger > .material-symbols-rounded { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #07111f; background: var(--accent); font-size: 19px; }
.period-guide-trigger > span:last-child { display: grid; gap: 2px; }
.period-guide-trigger small { color: var(--accent); font: 700 9px "JetBrains Mono"; letter-spacing: .06em; }
.period-guide-trigger b { font-size: 12px; white-space: nowrap; }

.scene-header:has(+ .learning-compass) { margin-bottom: 10px; }
.learning-compass { display: grid; gap: 7px; margin-bottom: 16px; padding: 8px 10px 10px; border: 1px solid rgba(130, 170, 205, .18); border-radius: 13px; background: linear-gradient(90deg, rgba(10, 27, 43, .94), rgba(8, 22, 36, .88)); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); }
.learning-compass > header { display: flex; align-items: center; gap: 8px; padding: 0 3px; color: #7f99ae; font-size: 9px; }
.learning-compass > header span { font: 700 9px "JetBrains Mono"; letter-spacing: .08em; }
.learning-compass > header strong { padding-left: 8px; border-left: 1px solid rgba(130, 170, 205, .22); color: var(--accent); font-size: 10px; }
.learning-compass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.learning-compass-grid article { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; min-width: 0; padding: 8px 9px; border: 1px solid rgba(130, 170, 205, .12); border-radius: 9px; background: rgba(6, 19, 31, .7); }
.learning-compass-grid article > .material-symbols-rounded { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #77a7cb; background: rgba(73, 127, 168, .12); font-size: 15px; }
.learning-compass-grid article[data-compass-kind="target"] > .material-symbols-rounded { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.learning-compass-grid article[data-compass-kind="output"] { border-color: color-mix(in srgb, var(--accent) 22%, rgba(130, 170, 205, .12)); }
.learning-compass-grid article[data-compass-kind="output"] > .material-symbols-rounded { color: #69d59c; background: rgba(73, 183, 124, .12); }
.learning-compass-grid article > div { min-width: 0; }
.learning-compass-grid small { display: flex; justify-content: space-between; gap: 6px; color: #d6e3ec; font-size: 10px; font-weight: 750; }
.learning-compass-grid small b { color: #66829a; font: 600 9px "JetBrains Mono"; white-space: nowrap; }
.learning-compass-grid p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: #91a8bb; font-size: 11px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.period-guide[hidden] { display: none; }
.period-guide { position: fixed; inset: 0; z-index: 52; display: grid; grid-template-columns: minmax(0, 1fr) minmax(700px, min(980px, 80vw)); }
.period-guide-backdrop { grid-column: 1 / -1; grid-row: 1; background: rgba(1, 8, 15, .78); backdrop-filter: blur(8px); }
.period-guide-panel { position: relative; z-index: 1; grid-column: 2; grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; overflow: hidden; border-left: 1px solid rgba(130, 170, 205, .22); background: linear-gradient(150deg, #0c1b2a, #07121e 56%, #081724); box-shadow: -30px 0 90px rgba(0, 0, 0, .52); }
.period-guide-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 26px; border-bottom: 1px solid rgba(130, 170, 205, .18); background: rgba(7, 18, 30, .86); }
.period-guide-header > div { display: grid; gap: 4px; }
.period-guide-header small { color: var(--accent); font: 700 10px "JetBrains Mono"; letter-spacing: .14em; }
.period-guide-header h2 { margin: 0; color: #f2f8fd; font-size: 20px; }
.period-guide-content { overflow: auto; overscroll-behavior: contain; padding: 24px 28px 56px; scrollbar-color: color-mix(in srgb, var(--accent) 55%, #294157) #081522; }
.period-guide-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .7fr); gap: 22px; overflow: hidden; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(130, 170, 205, .18)); border-radius: 20px; background: radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, #10263a), #091725); }
.period-guide-hero::after { content: ''; position: absolute; right: -35px; bottom: -55px; width: 180px; height: 180px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 50%; box-shadow: 0 0 0 28px color-mix(in srgb, var(--accent) 4%, transparent), 0 0 0 56px color-mix(in srgb, var(--accent) 3%, transparent); }
.period-guide-hero > div { position: relative; z-index: 1; }
.period-guide-hero > div > span { color: var(--accent); font: 750 11px "JetBrains Mono"; letter-spacing: .08em; }
.period-guide-hero h3 { margin: 7px 0 10px; color: #f4f9fd; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; }
.period-guide-hero p { max-width: 66ch; margin: 0; color: #afc3d3; font-size: 14px; line-height: 1.75; }
.period-guide-hero aside { position: relative; z-index: 1; align-self: end; display: grid; gap: 8px; padding: 16px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: rgba(4, 15, 25, .64); }
.period-guide-hero aside small { color: #829cb1; font-size: 10px; letter-spacing: .1em; }
.period-guide-hero aside strong { color: #f7d8ac; font-size: 15px; line-height: 1.55; }

.period-guide-block { margin-top: 18px; padding: 20px; border: 1px solid rgba(130, 170, 205, .16); border-radius: 16px; background: rgba(13, 30, 47, .76); }
.period-guide-block > header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.period-guide-block > header > .material-symbols-rounded { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, #0b1b2a); }
.period-guide-block > header div { display: grid; gap: 2px; }
.period-guide-block > header small { color: #6f8ca5; font: 700 9px "JetBrains Mono"; letter-spacing: .13em; }
.period-guide-block > header h3 { margin: 0; color: #edf6fc; font-size: 17px; }
.period-guide-block ul, .period-guide-block ol { margin: 0; padding: 0; list-style: none; }
.period-guide-block > ul { display: grid; gap: 8px; }
.period-guide-block > ul li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; color: #c4d4e0; }
.period-guide-block > ul .material-symbols-rounded { margin-top: 2px; color: #65c7a0; font-size: 16px; }
.period-guide-block > ul p { margin: 0; font-size: 12px; line-height: 1.6; }
.period-objectives ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.period-objectives li { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; min-height: 92px; padding: 13px; border: 1px solid rgba(130, 170, 205, .14); border-radius: 12px; background: rgba(7, 20, 33, .7); }
.period-objectives li b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #07111f; background: var(--accent); font: 800 11px "JetBrains Mono"; }
.period-objectives li p { margin: 2px 0 0; color: #d0dee8; font-size: 12px; line-height: 1.55; }

.period-schedule { display: grid; gap: 8px; }
.period-schedule article { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; gap: 13px; align-items: center; padding: 12px; border: 1px solid rgba(130, 170, 205, .13); border-radius: 12px; background: rgba(7, 20, 33, .68); }
.period-schedule article.current { border-color: color-mix(in srgb, var(--accent) 60%, rgba(130, 170, 205, .2)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, #0b2031), rgba(7, 20, 33, .76)); box-shadow: inset 3px 0 var(--accent); }
.period-schedule-time { display: grid; gap: 3px; justify-items: center; }
.period-schedule-time strong { color: #e9f4fb; font: 700 16px "JetBrains Mono"; }
.period-schedule-time span { color: var(--accent); font: 700 9px "JetBrains Mono"; }
.period-schedule article > div:nth-child(2) { min-width: 0; }
.period-schedule article small { color: var(--accent); font-size: 10px; font-weight: 750; }
.period-schedule article h4 { margin: 2px 0 3px; color: #eff7fc; font-size: 14px; }
.period-schedule article p { margin: 0; color: #94aabd; font-size: 11px; line-height: 1.55; }
.period-schedule article button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(130, 170, 205, .2); border-radius: 10px; color: var(--accent); background: #0b1d2c; cursor: pointer; }
.period-schedule article button:hover:not(:disabled) { border-color: var(--accent); }
.period-schedule article button:disabled { color: #516b80; cursor: not-allowed; }
.period-schedule article button .material-symbols-rounded { font-size: 18px; }
.period-guide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.period-guide-columns .period-guide-block { margin-top: 14px; }
.period-safety { border-color: rgba(255, 179, 92, .24); background: linear-gradient(140deg, rgba(80, 52, 24, .18), rgba(13, 30, 47, .76)); }
.period-safety > ul .material-symbols-rounded { color: #ffbd70; }
.period-assessment > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.period-assessment > ul li { padding: 11px; border-radius: 10px; background: rgba(7, 20, 33, .7); }
body.period-guide-open { overflow: hidden; }

@media (max-width: 900px) {
  .scene-header-actions { width: 100%; justify-content: space-between; }
  .learning-compass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-content:has(.scene-taskbar) { padding-bottom: 34px; }
  .scene-taskbar { position: static; width: 100%; margin-top: 16px; transform: none; }
  .scene-taskbar button { min-width: 154px; }
  .period-guide { grid-template-columns: 1fr; }
  .period-guide-panel { grid-column: 1; }
  .period-guide-hero, .period-guide-columns { grid-template-columns: 1fr; }
  .period-objectives ol, .period-assessment > ul { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .learning-compass-grid { grid-template-columns: 1fr; }
  .period-guide-content { padding: 16px 14px 40px; }
  .period-guide-header { padding: 15px 16px; }
  .period-guide-hero, .period-guide-block { padding: 16px; }
  .period-schedule article { grid-template-columns: 48px minmax(0, 1fr) 34px; gap: 9px; }
  .period-guide-trigger b { font-size: 11px; }
}

@media (max-height: 780px) and (min-width: 901px) {
  .scene-content:has(.learning-compass) { padding-bottom: 10px; }
  .learning-compass { gap: 0; margin-bottom: 10px; padding: 6px 8px; }
  .learning-compass > header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .learning-compass-grid { gap: 5px; }
  .learning-compass-grid article { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 6px 7px; }
  .learning-compass-grid article > .material-symbols-rounded { width: 22px; height: 22px; font-size: 13px; }
  .learning-compass-grid p { font-size: 11px; line-height: 1.35; }
  .scene-content:has(.scene-taskbar) { padding-bottom: 118px; }
  .scene-content:has(.learning-compass) .guided-learning-body .knowledge-stage,
  .scene-content:has(.learning-compass) .guided-learning-body .learning-interaction { min-height: 330px; }
  .scene-content:has(.learning-compass) .hypothesis-builder { padding: 10px 12px; }
  .scene-content:has(.learning-compass) .hypothesis-builder .interaction-heading { margin-bottom: 4px; }
  .scene-content:has(.learning-compass) .hypothesis-builder .interaction-heading p { line-height: 1.35; }
  .scene-content:has(.learning-compass) .hypothesis-variables { margin: 6px 10px; }
  .scene-content:has(.learning-compass) .hypothesis-variables button { min-height: 44px; padding: 6px 8px; }
  .scene-content:has(.learning-compass) .hypothesis-sentence { margin: 7px 10px; padding: 10px 12px; }
  .scene-content:has(.learning-compass) .hypothesis-checks { margin: 0 10px 7px; }
  .scene-content:has(.learning-compass) .hypothesis-builder .learning-evidence { padding: 9px 12px; }
}
/* 本地文件入口：模块课程必须通过回环地址运行 */
.file-startup-help {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  color: #eef6ff;
  background: radial-gradient(circle at 50% 10%, #10243a 0, #07111f 55%);
}

.file-startup-help[hidden] { display: none; }

.file-startup-help > div {
  width: min(560px, 100%);
  padding: 36px;
  border: 1px solid #27425f;
  border-radius: 20px;
  background: #0b1828;
  box-shadow: 0 24px 80px #0008;
}

.file-startup-help small { color: #78dfc3; letter-spacing: .14em; }
.file-startup-help h1 { margin: 12px 0; font-size: clamp(28px, 5vw, 44px); }
.file-startup-help p, .file-startup-help li { color: #aebdd0; line-height: 1.8; }
.file-startup-help code { color: #f3bd75; }
.file-startup-help a { display: inline-flex; margin-top: 12px; padding: 12px 18px; border-radius: 10px; color: #07111f; background: #78dfc3; font-weight: 700; text-decoration: none; }