* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: linear-gradient(140deg, #151936, #241830 55%, #102a2d);
  color: #f2f5ff;
}
.topbar {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.topbar h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.topbar p { margin: 0.35rem 0 0; opacity: .85; }
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1rem;
  max-width: 1100px;
  margin: 1rem auto;
  padding: 0 1rem 1rem;
}
.map, .content {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 1rem;
}
.map { display: flex; flex-direction: column; gap: .7rem; height: fit-content; }
.node {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.2);
  color: white;
  padding: .7rem .8rem;
  border-radius: 10px;
  cursor: pointer;
}
.node:hover { transform: translateY(-1px); }
.node.active { background: #5b6dff; border-color: #8b98ff; }
.progress-wrap { margin-top: .4rem; font-size: .92rem; opacity: .9; }
progress { width: 100%; height: 14px; }
.panel { display: none; }
.panel.show { display: block; animation: fade .25s ease; }
.panel h2 { margin-top: 0; }
a { color: #9ed0ff; }
a:hover { color: #cbe7ff; }
.footer { text-align: center; opacity: .8; padding: .5rem 0 1.2rem; }
@keyframes fade { from {opacity: .25; transform: translateY(4px);} to {opacity: 1; transform: translateY(0);} }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
}