:root {
  --accent: #72f1e3;
  --border: rgba(108, 210, 229, 0.19);
  --muted: #92a3bc;
  --neon-glow: 14px;
  --glow-alpha: 0.195;
  color-scheme: dark;
}
body {
  background: #050611;
  color: #e7f6ff;
}
body:after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 140px rgba(53, 18, 98, var(--glow-alpha));
}
header,
footer {
  background: linear-gradient(110deg, rgba(6, 13, 27, 0.95), rgba(19, 10, 34, 0.94));
  border-color: var(--border);
}
header {
  box-shadow: 0 2px var(--neon-glow) rgba(51, 220, 217, var(--glow-alpha));
}
.brandmark {
  color: #78f6e6;
  text-shadow: 0 0 var(--neon-glow) #4cd9da;
}
.brand small {
  letter-spacing: 0.19em;
  color: #90a9c8;
}
.version {
  color: #e79ff7;
  background: #241430;
  border: 1px solid #543467;
}
.panel,
.view-options,
dialog {
  background: linear-gradient(145deg, rgba(10, 20, 36, 0.96), rgba(18, 12, 34, 0.96));
  border: 1px solid var(--border);
  box-shadow:
    0 0 var(--neon-glow) rgba(44, 202, 211, var(--glow-alpha)),
    0 18px 50px #0005;
  backdrop-filter: blur(18px);
}
.panel:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 22px;
  width: 65px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 var(--neon-glow) var(--accent);
  pointer-events: none;
}
.panel-heading h2,
.eyebrow {
  color: #83e7e6;
}
.scene-caption h1 {
  font-weight: 500;
  letter-spacing: -0.035em;
  text-shadow: 0 0 var(--neon-glow) rgba(109, 181, 255, var(--glow-alpha));
}
.scene-caption p {
  line-height: 1.65;
}
.navbtn.active,
.tabs [aria-selected='true'] {
  color: #93fff0;
  background: rgba(39, 172, 170, 0.1);
  border-color: #4aa5ad;
}
.navbtn:hover,
.secondary:hover,
.iconbtn:hover {
  color: #c1fff8;
  background: #173140;
}
.primary {
  color: #07151b !important;
  background: linear-gradient(115deg, #77f2df, #8cbdff) !important;
  border: 1px solid #aefff5 !important;
  box-shadow: 0 0 var(--neon-glow) rgba(83, 232, 227, var(--glow-alpha));
  font-weight: 700;
}
.secondary,
select,
.searchbox,
input[type='text'] {
  border-color: #2b4359;
  background: rgba(17, 32, 49, 0.74);
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid #e4a0ff;
  outline-offset: 3px;
}
.result.active {
  background: linear-gradient(90deg, #15333e, #251a38);
  border-color: #49959c;
}
.result:hover {
  background: #172b3e;
}
.badge {
  color: #b9a6ea;
  border-color: #584770;
  background: #271d3b;
}
.label {
  color: #b8d7ef;
  text-shadow:
    0 0 8px #08101f,
    0 1px 3px #000;
}
.label.selected {
  color: #9dfff0;
  border-color: #61c7c0;
  background: #09262bd9;
  box-shadow: 0 0 var(--neon-glow) rgba(85, 237, 209, var(--glow-alpha));
}
.zoom-dock {
  border-color: #335569;
  background: linear-gradient(120deg, #0e222f, #21152f);
}
input[type='range'] {
  accent-color: #80eadc;
}
.scale-info strong {
  color: #c2fff2;
}
.scale-info small {
  letter-spacing: 0.04em;
}
.detail h2 {
  color: #dcf5ff;
}
.detail dl div {
  border-color: #223447;
}
.detail a {
  color: #93d9ee;
}
.detail .secondary {
  margin-top: 8px;
}
.detail #bookmarkObject[aria-pressed='true'] {
  border-color: #a57bcc;
  color: #e9bbff;
}
.detail #observation {
  margin: 14px 0 18px;
  border: 1px solid #344958;
  border-radius: 10px;
  overflow: hidden;
  background: #070b15;
}
.detail #observation img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
}
.detail figcaption {
  padding: 10px;
  line-height: 1.4;
}
.detail figcaption small {
  display: block;
  font-size: 9px;
  color: #9caac1;
  margin-top: 5px;
}
.detail figcaption a {
  font-size: 11px;
}
.scale-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
  pointer-events: auto;
}
.scale-jumps button {
  font-size: 10px;
  padding: 7px 11px;
  color: #96d5dc;
  background: #0c203099;
  border: 1px solid #2c5263;
  border-radius: 20px;
}
.glow-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  font-size: 11px;
  margin: 14px 0;
}
.glow-control input {
  grid-column: 1/-1;
  width: 100%;
}
.glow-control output {
  color: #a7eee3;
}
.header-actions {
  gap: 7px;
}
.header-actions .navbtn {
  font-size: 11px;
  padding: 9px 10px;
}
.explorer-dialog {
  width: min(780px, calc(100vw - 32px));
  padding: 28px;
  max-height: 85dvh;
  overflow: auto;
}
.explorer-dialog h2 {
  margin: 5px 0;
}
.explorer-dialog > .muted {
  line-height: 1.7;
}
#routeList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}
.route-card {
  border: 1px solid #315263;
  border-radius: 14px;
  padding: 23px;
  background: radial-gradient(ellipse at 100% 0, #183b4b88, transparent 75%), #0d1727;
  display: flex;
  flex-direction: column;
  min-height: 235px;
}
.route-card:nth-child(2n) {
  border-color: #534064;
  background: radial-gradient(ellipse at 100% 0, #55265966, transparent 75%), #141324;
}
.route-number {
  font: 10px monospace;
  letter-spacing: 0.15em;
  color: #7edbd5;
}
.route-card:nth-child(2n) .route-number {
  color: #d9a6ef;
}
.route-card h3 {
  font-size: 20px;
  line-height: 1.3;
  margin: 21px 0 7px;
  font-weight: 500;
}
.route-card p {
  font-size: 12px;
  color: #a7b4ca;
  line-height: 1.7;
  flex: 1;
}
.route-card button {
  width: 100%;
  padding: 11px;
  margin-top: 14px;
  border-radius: 7px;
}
.save-view-form {
  display: flex;
  gap: 10px;
  margin: 22px 0 30px;
}
.save-view-form input {
  min-width: 0;
  flex: 1;
  border: 1px solid #345265;
  background: #0a1726;
  color: #e6f5ff;
  padding: 12px;
  border-radius: 8px;
}
.save-view-form button {
  padding: 10px 14px;
  border-radius: 8px;
}
#savedList h3 {
  font-size: 13px;
  font-weight: 500;
  color: #96e5dc;
  margin-top: 24px;
}
.saved-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.saved-row > .secondary {
  text-align: left;
  flex: 1;
  padding: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tour-panel {
  position: fixed;
  z-index: 12;
  left: 354px;
  bottom: 126px;
  width: min(410px, calc(100vw - 715px));
  padding: 17px;
  border-radius: 13px;
}
.tour-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}
.tour-heading strong {
  font-size: 12px;
  flex: 1;
}
.tour-heading > span {
  font: 10px monospace;
  color: #8cebdc;
  white-space: nowrap;
}
.tour-panel p {
  font-size: 12px;
  line-height: 1.65;
  color: #abbdd2;
  margin: 12px 0;
}
.tour-panel progress {
  height: 3px;
  width: 100%;
  accent-color: #78ebd6;
  display: block;
  margin-top: 10px;
}
.tour-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.tour-actions button {
  padding: 8px 14px;
  border-radius: 7px;
}
.tour-active .view-options {
  bottom: 365px;
}
.catalog-closed .tour-panel {
  left: 25px;
  width: 410px;
}
.tour-active .travel-status {
  bottom: 350px;
}
.comparison-stat,
.compare-stat {
  border-color: #315064;
}
dialog::backdrop {
  background: #01040bbc;
  backdrop-filter: blur(6px);
}
[hidden] {
  display: none !important;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .brand small {
    font-size: 8px;
  }
  .brand {
    gap: 7px;
  }
  .brand .version {
    display: none;
  }
  header {
    padding-left: 16px;
    padding-right: 16px;
  }
  header nav .navbtn {
    padding: 9px 8px;
    font-size: 11px;
  }
  .scene-caption {
    left: 342px;
    max-width: calc(100vw - 365px);
    top: 105px;
  }
  .scene-caption h1 {
    font-size: 31px;
  }
  .detail:not(.hidden) ~ .tour-panel {
    left: 342px;
    width: calc(100vw - 675px);
    min-width: 180px;
  }
  .tour-panel {
    left: 342px;
    width: calc(100vw - 365px);
    max-width: 410px;
  }
  .tour-heading strong {
    font-size: 10px;
  }
  .tour-panel {
    padding: 12px;
  }
}
@media (max-width: 760px) {
  header {
    padding: 12px 14px;
  }
  .brand small {
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  .brand .version {
    display: none;
  }
  .header-actions {
    gap: 4px;
  }
  .header-actions .navbtn {
    font-size: 10px;
    padding: 8px 5px;
  }
  #backView {
    display: none;
  }
  #help {
    width: 27px;
  }
  header nav {
    white-space: nowrap;
    max-width: calc(100vw - 25px);
    width: max-content;
  }
  header nav .navbtn {
    padding: 9px 11px;
    font-size: 11px;
  }
  .scene-caption {
    max-width: calc(100vw - 32px);
    top: 132px;
    left: 18px;
  }
  .scene-caption h1 {
    font-size: 31px;
  }
  .scene-caption p {
    font-size: 11px;
    max-width: 270px;
  }
  .scale-jumps {
    gap: 5px;
    margin-top: 9px;
  }
  .scale-jumps button {
    font-size: 9px;
    padding: 6px 9px;
  }
  .explorer-dialog {
    padding: 19px;
  }
  #routeList {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .route-card {
    min-height: 195px;
    padding: 19px;
  }
  .route-card h3 {
    margin-top: 14px;
  }
  .save-view-form {
    flex-direction: column;
  }
  .tour-panel,
  .catalog-closed .tour-panel,
  .detail:not(.hidden) ~ .tour-panel {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    bottom: 106px;
    padding: 12px;
  }
  .tour-panel p {
    font-size: 11px;
    line-height: 1.45;
    margin: 8px 0;
  }
  .tour-heading strong {
    font-size: 11px;
  }
  .tour-active .detail {
    bottom: 298px;
    max-height: calc(100dvh - 435px);
  }
  .tour-active .view-options {
    display: none;
  }
  .tour-active .catalog-toggle {
    bottom: 300px;
  }
  .tour-active .travel-status {
    bottom: 298px;
  }
  .detail #observation img {
    height: 140px;
  }
  .tour-actions button {
    padding: 7px 12px;
  }
  .tour-panel progress {
    margin-top: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (max-width: 760px) {
  header {
    gap: 6px;
  }
  .brand {
    font-size: 13px;
    gap: 0;
    letter-spacing: 2px;
    flex-shrink: 0;
  }
  .brandmark {
    display: none;
  }
  .brand small {
    font-size: 6.5px;
    max-width: 110px;
  }
  .header-actions .navbtn {
    padding: 8px 4px;
  }
  .header-actions #language {
    padding: 6px;
    font-size: 11px;
  }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .catalog-closed .detail:not(.hidden) ~ .tour-panel {
    left: 25px;
    width: min(410px, calc(100vw - 385px));
  }
  .catalog-closed.tour-active .view-options {
    left: 25px;
  }
}