:root {
  --bg: #e9eef3;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-solid: #ffffff;
  --ink: #172334;
  --muted: #718093;
  --blue: #138bd0;
  --blue-dark: #0872b5;
  --blue-soft: #e7f4fc;
  --line: #d8e1e9;
  --line-strong: #c6d2dc;
  --shadow: 0 14px 38px rgba(38, 58, 78, 0.13);
  --shadow-soft: 0 7px 20px rgba(42, 62, 82, 0.09);
  --radius: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button { font: inherit; color: inherit; }
.screen { position: absolute; inset: 0; display: none; background: var(--bg); }
.screen.active { display: block; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.round-action {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.round-action:hover {
  transform: translateY(-2px);
  border-color: #9ecbe7;
  color: var(--blue-dark);
  box-shadow: 0 10px 24px rgba(19, 139, 208, 0.16);
}
.round-action:active { transform: scale(0.96); }

/* Cover */
.exit-action { position: absolute; z-index: 5; right: 28px; top: 24px; }
.cover-heading { position: absolute; z-index: 4; left: 5.5vw; top: 7vh; width: 42vw; pointer-events: none; }
.cover-heading > span {
  display: inline-block;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
}
.cover-heading h1 {
  margin: 16px 0 12px;
  max-width: 530px;
  font-size: clamp(54px, 5.6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.065em;
}
.cover-heading p { margin: 0; color: #5d6b79; font-size: 18px; line-height: 1.55; }
.cover-stage {
  position: absolute;
  left: 31vw;
  right: 5.5vw;
  top: 6.5vh;
  bottom: 7vh;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 65% 44%, rgba(224, 233, 239, 0.72) 0 25%, transparent 55%),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}
.cover-stage::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  top: 34px;
  bottom: 34px;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--blue);
}
#cover-canvas { position: absolute; inset: 0; }
.cover-index {
  position: absolute;
  z-index: 2;
  right: 30px;
  top: 26px;
  color: #7c8997;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.22em;
  text-align: right;
}
.primary-action {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  min-width: 190px;
  padding: 14px 30px;
  border: 1px solid #0d83c7;
  border-radius: 10px;
  background: linear-gradient(180deg, #1a9ddd, #0f86ca);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(13, 126, 188, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.primary-action:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 13px 30px rgba(13, 126, 188, 0.32); }

/* Shared header */
.angled-header {
  position: absolute;
  z-index: 8;
  left: 16px;
  top: 16px;
  width: min(560px, 43vw);
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 34px 0 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius) 0 var(--radius) var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
  clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
}
.angled-header h1 { margin: 0; font-size: 24px; letter-spacing: -0.035em; white-space: nowrap; }
.angled-header span { color: #7b8998; font-size: 9px; font-weight: 800; letter-spacing: 0.18em; }

/* Chapter select */
.chapter-back { position: absolute; z-index: 9; right: 28px; top: 24px; }
.chapter-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 270px));
  gap: clamp(24px, 4vw, 56px);
  align-content: center;
  justify-content: center;
  padding: 100px 48px 36px;
}
.chapter-card {
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-solid);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.chapter-card.available { border-color: #59b6e8; box-shadow: 0 12px 30px rgba(19, 139, 208, 0.14); }
.chapter-card.available::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--blue);
  border-radius: inherit;
  pointer-events: none;
}
.chapter-card.available:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(24, 84, 119, 0.18); }
.chapter-card.locked { opacity: 0.58; cursor: default; filter: grayscale(0.5); }
.chapter-number { position: absolute; left: 18px; top: 16px; color: var(--blue); font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
.chapter-visual {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 54px;
  height: 232px;
  border: 1px solid #e1e8ee;
  border-radius: 10px;
  background: radial-gradient(circle at 55% 45%, #fff 0 15%, #eef3f6 58%, #e7edf1 100%);
}
.chapter-ear::before {
  content: "◎  ◌";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -58%);
  color: #61b9d8;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.35em;
  text-shadow: -25px 6px 0 #cf8c78;
}
.chapter-ear::after { content: "EAR / 3D"; position: absolute; left: 18px; bottom: 16px; color: #243142; font-size: 20px; font-weight: 900; letter-spacing: 0.08em; }
.chapter-card strong { padding: 13px 10px; border-radius: 7px; background: #f1f4f7; text-align: center; font-size: 18px; }
.chapter-card small { margin-top: 10px; color: var(--muted); text-align: center; }
.chapter-card.available small { color: var(--blue-dark); }

/* Lab */
#lab-screen { background: #edf1f4; }
#lab-screen::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border: 1px solid rgba(203, 214, 223, 0.8);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
#lab-canvas { position: absolute; inset: 0; z-index: 1; }
.model-loading {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 38px auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  min-width: 310px;
  padding: 17px 20px;
  border: 1px solid #b9d9eb;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: opacity 0.3s, visibility 0.3s;
}
.model-loading.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.model-loading.is-error { border-color: #e78f96; }
.model-loading-spinner { grid-row: 1 / 3; width: 32px; height: 32px; border: 3px solid #e5eef4; border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
.model-loading strong { font-size: 14px; }
.model-loading small { margin-top: 5px; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

.lab-title { width: min(520px, 42vw); }
.lab-title h1 { font-size: 22px; }
.top-actions { position: absolute; z-index: 9; right: 26px; top: 24px; display: flex; gap: 10px; }
.module-nav {
  position: absolute;
  z-index: 7;
  left: 24px;
  top: 98px;
  width: 194px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
.nav-caption, .panel-label { display: flex; align-items: baseline; gap: 9px; padding: 2px 4px 10px; }
.nav-caption strong, .panel-label strong { color: #263548; font-size: 13px; }
.nav-caption span, .panel-label span { color: #8794a3; font-size: 7px; font-weight: 800; letter-spacing: 0.14em; }
.module-btn {
  position: relative;
  width: 100%;
  min-height: 36px;
  margin-bottom: 4px;
  padding: 7px 9px 7px 38px;
  border: 1px solid #e0e7ed;
  border-radius: 7px;
  background: rgba(248, 250, 252, 0.96);
  cursor: pointer;
  color: #334155;
  font-size: 13px;
  text-align: left;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.module-btn::before {
  content: "○";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  color: #697b8c;
  font-weight: 900;
  text-align: center;
}
.module-btn[data-module="overview"]::before { content: "◎"; }
.module-btn[data-module="journey"]::before { content: "◉"; }
.module-btn[data-module="outer"]::before { content: "◁"; }
.module-btn[data-module="middle"]::before { content: "◇"; }
.module-btn[data-module="inner"]::before { content: "◌"; }
.module-btn[data-module="nerves"]::before { content: "⌁"; }
.module-btn[data-module="vessels"]::before { content: "∿"; }
.module-btn[data-module="temporal"]::before { content: "⬡"; font-size: 12px; }
.module-btn:hover { transform: translateX(2px); border-color: #b7d9ec; background: #f0f8fd; }
.module-btn.active { border-color: var(--blue); background: linear-gradient(180deg, #199bdc, #0f82c5); color: #fff; font-weight: 800; box-shadow: 0 5px 13px rgba(19, 139, 208, 0.24); }
.module-btn.active::before { color: #fff; }

.info-panel {
  position: absolute;
  z-index: 7;
  right: 24px;
  top: 104px;
  width: 300px;
  max-height: calc(100vh - 138px);
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
.info-panel h2 { margin: 4px 4px 5px; font-size: 24px; letter-spacing: -0.03em; }
.breadcrumb { margin: 0 4px; padding-bottom: 11px; border-bottom: 1px solid #e2e8ee; color: var(--blue-dark); font-size: 11px; }
.info-panel dl { margin: 12px 4px 0; }
.info-panel dt { margin-top: 12px; color: var(--blue-dark); font-size: 12px; font-weight: 900; }
.info-panel dd { margin: 4px 0 0; color: #556476; font-size: 12px; line-height: 1.65; }

.hierarchy-panel {
  position: absolute;
  z-index: 7;
  left: 24px;
  bottom: 22px;
  width: min(500px, 42vw);
  max-height: 186px;
  overflow: auto;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
#hierarchy-content { display: flex; flex-direction: column; gap: 8px; }
.hierarchy-level { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.level-title { width: 100%; color: #667789; font-size: 10px; font-weight: 900; }
.hierarchy-btn {
  padding: 6px 11px;
  border: 1px solid #dce5ec;
  border-radius: 6px;
  background: #f7f9fb;
  color: #415367;
  cursor: pointer;
  font-size: 11px;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.hierarchy-btn:hover { transform: translateY(-1px); border-color: #a9d3e9; }
.hierarchy-btn.selected { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 4px 10px rgba(19, 139, 208, 0.2); }
.hierarchy-btn.hidden-item { opacity: 0.44; text-decoration: line-through; }

.viewport-tools {
  position: absolute;
  z-index: 7;
  left: calc(min(500px, 42vw) + 42px);
  bottom: 22px;
  display: flex;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.viewport-tools button { padding: 8px 14px; border: 1px solid #d8e4ec; border-radius: 7px; background: #f6f9fb; color: #3e5367; cursor: pointer; font-size: 11px; font-weight: 800; }
.viewport-tools button:hover { border-color: var(--blue); color: var(--blue-dark); }

.journey-hud {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(610px, 50vw);
  padding: 15px 20px;
  border: 1px solid #87c7e9;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.journey-stage { display: flex; align-items: baseline; gap: 12px; }
.journey-stage span { color: var(--blue); font-size: 11px; font-weight: 900; }
.journey-stage strong { font-size: 20px; }
.track { height: 5px; margin: 10px 0; overflow: hidden; border-radius: 5px; background: #dce6ed; }
.track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--blue); transition: width 0.15s; }
.journey-hud p { margin: 0; color: #667789; font-size: 11px; }

dialog {
  width: min(460px, calc(100vw - 40px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(21, 41, 58, 0.28);
}
dialog::backdrop { background: rgba(52, 66, 80, 0.38); backdrop-filter: blur(4px); }
dialog h2 { margin-top: 0; }
dialog p { color: #5b6a79; line-height: 1.7; }
dialog button { float: right; padding: 9px 20px; border: 0; border-radius: 7px; background: var(--blue); color: #fff; cursor: pointer; }

@media (max-width: 1100px) {
  .cover-heading { left: 3.5vw; width: 45vw; }
  .cover-stage { left: 34vw; right: 3.5vw; }
  .chapter-grid { grid-template-columns: repeat(3, minmax(190px, 230px)); gap: 22px; }
  .module-nav { left: 14px; width: 178px; }
  .info-panel { right: 14px; width: 270px; }
  .hierarchy-panel { left: 14px; width: 410px; }
  .viewport-tools { left: 438px; }
}

@media (max-width: 760px) {
  .cover-heading { left: 24px; top: 36px; width: calc(100% - 48px); }
  .cover-heading h1 { font-size: 48px; }
  .cover-stage { left: 18px; right: 18px; top: 220px; bottom: 20px; }
  .chapter-grid { grid-template-columns: 1fr; align-content: start; overflow: auto; padding: 100px 20px 24px; }
  .chapter-card { height: 330px; }
  .module-nav { top: 90px; width: 164px; max-height: 50vh; overflow: auto; }
  .info-panel { top: 90px; width: 230px; max-height: 48vh; }
  .hierarchy-panel { left: 14px; right: 14px; bottom: 14px; width: auto; max-height: 150px; }
  .viewport-tools { display: none; }
  .angled-header { left: 10px; top: 10px; width: 62vw; }
  .angled-header h1 { font-size: 18px; }
  .top-actions { right: 12px; top: 14px; }
  .round-action { width: 42px; height: 42px; }
}