/* Celestial reference: 1513 × 1039, 84px navigation, Quantum selected. */
.map-page.maps-shell-page {
  --maps-navigation-space: var(--top-navigation-height, 84px);
  background: #000; height: 100dvh; min-height: 0; padding: 0; overflow: hidden;
}
.maps-shell-page .app-shell { height: 100%; min-height: 0; background: #000; overflow: clip; }
.maps-shell-page .app-shell > .maps-shell-workspace {
  position: relative; display: grid; width: 100%; max-width: none;
  height: calc(100dvh - var(--maps-navigation-space)); min-height: 0;
  margin: 0; padding: 0; overflow: clip; place-items: center; isolation: isolate;
}
.maps-shell-stars { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.maps-star-field, .maps-star-hover-field {
  position: absolute; inset: 0;
  background: url("/static/web-v1/maps-celestial-stars.c1cef842.webp") center top / cover no-repeat;
}
.maps-star-field { opacity: .43; }
.maps-star-hover-field {
  opacity: 0; filter: brightness(1.8); transition: opacity 180ms ease;
  -webkit-mask-image: radial-gradient(circle 140px at var(--star-pointer-x, 50%) var(--star-pointer-y, 34%), #000, transparent);
  mask-image: radial-gradient(circle 140px at var(--star-pointer-x, 50%) var(--star-pointer-y, 34%), #000, transparent);
}
.maps-shell-workspace.has-star-pointer .maps-star-hover-field { opacity: .45; }
.maps-shell-scene {
  position: relative; z-index: 1; width: min(100vw, calc((100dvh - var(--maps-navigation-space)) * 1513 / 955));
  aspect-ratio: 1513 / 955; container-type: inline-size; cursor: grab; touch-action: pan-y; user-select: none;
}
.maps-shell-heading { position: absolute; z-index: 5; top: 7.23%; left: 0; width: 100%; text-align: center; }
.maps-shell-heading h1 { width: 49.44%; margin: 0 auto; line-height: 1; }
.maps-shell-heading img { display: block; width: 100%; height: auto; }
.maps-shell-heading p {
  margin: 1.2cqw 0 0; background: linear-gradient(90deg, #83e2f3 28%, #ddd7ef 53%, #d390ed 73%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
  font-size: 1.19cqw; font-weight: 400; letter-spacing: .4em; line-height: 1.3; text-indent: .4em; text-transform: uppercase;
}
.maps-shell-card {
  --maps-side: 1; --maps-frame-start: #83ddf1; --maps-frame-middle: #a6c6e4; --maps-frame-end: #a9a0c8; --maps-frame-glow: 100 195 238;
  position: absolute; z-index: 3; top: 19.37%; left: 50%; width: 29.61%; aspect-ratio: 448 / 634;
  overflow: hidden; border: max(1px, .1322cqw) solid transparent; border-radius: 1.85cqw;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(100deg, var(--maps-frame-start), var(--maps-frame-middle), var(--maps-frame-end)) border-box;
  transform: translateX(-50%); transform-origin: 50% 50%;
}
.maps-shell-card[data-campaign="classical-mechanics"] { --maps-frame-start: #83c9ed; --maps-frame-middle: #748ea6; --maps-frame-end: #84a8c4; --maps-frame-glow: 118 192 232; }
.maps-shell-card[data-campaign="quantum-mechanics"] { --maps-frame-start: #68e7ff; --maps-frame-middle: #b3c0ee; --maps-frame-end: #d580f5; --maps-frame-glow: 120 192 242; }
.maps-shell-card[data-campaign="black-hole-physics"] { --maps-frame-start: #a89ca9; --maps-frame-middle: #bda398; --maps-frame-end: #a99892; --maps-frame-glow: 230 178 143; }
.maps-shell-card[aria-current="true"] { --maps-side: 0; box-shadow: 0 0 1px rgb(var(--maps-frame-glow) / 55%), 0 0 22px rgb(var(--maps-frame-glow) / 16%); }
.maps-shell-card[data-position="-1"] { transform: translateX(-50%) translateX(-28.9cqw) translateY(-1.45cqw) perspective(59.5cqw) rotateY(-16deg) scale(.78,.8); }
.maps-shell-card[data-position="1"] { transform: translateX(-50%) translateX(28.9cqw) translateY(-1.45cqw) perspective(59.5cqw) rotateY(16deg) scale(.78,.8); }
.maps-shell-scene.is-moving .maps-shell-card { will-change: transform, opacity; }
.maps-shell-scene.is-dragging, .maps-shell-scene.is-dragging .maps-shell-card-pick { cursor: grabbing; }
.maps-shell-artwork { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.maps-shell-artwork img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.maps-shell-card[data-campaign="classical-mechanics"] .maps-shell-artwork img { transform: translate(2%, 1.3%) scale(1.16); transform-origin: 50% 37%; }
.maps-shell-card[data-campaign="quantum-mechanics"] .maps-shell-artwork img { transform: translate(-1.5%, .8%); }
.maps-shell-card[data-campaign="black-hole-physics"] .maps-shell-artwork img { transform: translate(-3%, 1%) scale(1.15); transform-origin: 50% 37%; }
.maps-shell-artwork::after { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(0 0 0 / 20%) 65%, rgb(0 0 0 / 48%) 80%); content: ""; pointer-events: none; }
.maps-shell-card-pick { position: absolute; z-index: 2; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; }
.maps-shell-card[aria-current="true"] .maps-shell-card-pick { display: none; }
.maps-shell-card-footer { position: absolute; z-index: 3; top: calc(62.8% + var(--maps-side) * 6.2%); right: 11.6%; left: 11.6%; pointer-events: none; }
.maps-shell-card-copy { margin: 0; color: #f2f1f7; text-align: center; text-transform: uppercase; text-shadow: 0 1px 8px #000; }
.maps-shell-card-copy h2 { margin: 0 -2cqw; font-family: var(--ui-font); font-size: calc(1.6cqw + var(--maps-side) * .16cqw); font-weight: 400; letter-spacing: .13em; line-height: 1.2; text-indent: .13em; white-space: nowrap; }
.maps-shell-card-copy p { margin: .73cqw -1cqw 0; color: #bcd7f0; font-size: calc(.85cqw + var(--maps-side) * .12cqw); font-weight: 500; letter-spacing: .18em; line-height: 1.5; text-indent: .18em; white-space: nowrap; }
.maps-shell-progress { display: flex; align-items: center; gap: 1.85cqw; margin: 1.46cqw .45cqw 0; color: #f1f1f6; font-size: 1.19cqw; font-variant-numeric: tabular-nums; font-weight: 500; line-height: 1.25; }
.maps-shell-progress-track { display: block; height: .46cqw; flex: 1; overflow: hidden; border-radius: 999px; background: #222128; }
.maps-shell-begin {
  position: relative; display: flex; width: 100%; height: 3.97cqw; align-items: center; justify-content: center;
  margin-top: 2cqw; border: 0; padding: 0 1cqw; background: transparent; color: #f5f2f6;
  font: inherit; font-size: .93cqw; font-weight: 500; letter-spacing: .32em; line-height: 1; text-indent: .32em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; visibility: hidden; opacity: 0; pointer-events: none;
}
.maps-shell-card[aria-current="true"] .maps-shell-begin { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 160ms ease; }
.maps-shell-scene.is-moving .maps-shell-begin { visibility: hidden; opacity: 0; pointer-events: none; }
.maps-shell-begin-frame { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgb(0 0 0 / 20%); stroke: url(#maps-action-gradient); stroke-width: 2; }
.maps-shell-begin:hover .maps-shell-begin-frame { fill: rgb(104 180 243 / 10%); }
.maps-shell-arrow {
  position: absolute; z-index: 6; top: 47.96%; display: grid; width: max(44px, 4.23cqw); aspect-ratio: 1; place-items: center;
  padding: 0; border: max(1px, .1cqw) solid transparent; border-radius: 50%;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(120deg, #8cddf6, #9d9fec 70%, #ce9afa) border-box;
  color: #f7f5fc; cursor: pointer; transform: translate(-50%, -50%);
}
.maps-shell-arrow-prev { left: 6.48%; } .maps-shell-arrow-next { left: 93.46%; }
.maps-shell-arrow:hover { box-shadow: 0 0 18px rgb(160 148 235 / 25%); }
.maps-shell-arrow svg { width: 30%; height: 30%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.maps-shell-ground { position: absolute; z-index: 0; top: 79.16%; left: 50%; width: 76.85%; height: 12.3%; overflow: visible; transform: translateX(-50%); pointer-events: none; }
.maps-shell-dots { position: absolute; z-index: 5; top: 93.72%; left: 50%; display: flex; align-items: center; justify-content: center; gap: .55cqw; transform: translate(-50%, -50%); }
.maps-shell-dots button { display: grid; width: max(44px, 2.9cqw); height: max(44px, 2.9cqw); place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.maps-shell-dots button::before { width: max(9px, .86cqw); aspect-ratio: 1; border-radius: 50%; background: #463754; content: ""; }
.maps-shell-dots button[aria-current="true"]::before { background: #c080ef; box-shadow: 0 0 13px rgb(190 117 246 / 30%); }
.maps-shell-arrow:focus-visible, .maps-shell-dots button:focus-visible, .maps-shell-begin:focus-visible { outline: 2px solid #addfff; outline-offset: 5px; }
.maps-shell-card-pick:focus-visible { outline: 2px solid #addfff; outline-offset: -6px; }
.maps-shell-dialog { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 30px; border: 1px solid #677d9e; border-radius: 20px; background: #070e1b; color: #dce8f6; }
.maps-shell-dialog::backdrop { background: rgb(0 0 0 / 78%); }
.maps-shell-dialog h2 { margin: 0 0 15px; font-size: 25px; font-weight: 500; }
.maps-shell-dialog p { color: #b4c8df; font-size: 14px; line-height: 1.7; }
.maps-shell-dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.maps-shell-dialog a, .maps-shell-dialog button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #758eac; border-radius: 7px; background: #132237; color: #dceeff; font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.maps-shell-dialog :focus-visible { outline: 2px solid #c1a4ee; outline-offset: 4px; }
@media (min-width: 901px) {
  .maps-shell-page .app-shell > .side-navigation .navigation-item { font-size: 11px; }
}
@media (max-width: 900px) {
  .maps-shell-scene { width: 100%; height: calc(100dvh - var(--maps-navigation-space)); aspect-ratio: auto; --maps-card-width: min(55vw, 340px, calc((100dvh - var(--maps-navigation-space) - 210px) * .7066)); }
  .maps-shell-heading { top: 30px; }
  .maps-shell-heading h1 { width: min(82%, 600px); }
  .maps-shell-heading p { margin-top: 18px; font-size: 11px; letter-spacing: .22em; }
  .maps-shell-card { top: 142px; width: var(--maps-card-width); border-width: 1.5px; border-radius: 24px; }
  .maps-shell-card-footer { top: 62.8%; }
  .maps-shell-card:not([aria-current="true"]) .maps-shell-card-copy h2 { font-size: calc(var(--maps-card-width) * .054); }
  .maps-shell-card:not([aria-current="true"]) .maps-shell-card-copy p { font-size: max(8px, calc(var(--maps-card-width) * .028)); }
  .maps-shell-card-copy h2 { margin-inline: -20px; font-size: calc(var(--maps-card-width) * .054); letter-spacing: .11em; }
  .maps-shell-card-copy p { margin: calc(var(--maps-card-width) * .024) -14px 0; font-size: max(8px, calc(var(--maps-card-width) * .028)); letter-spacing: .12em; }
  .maps-shell-progress { gap: 18px; margin: calc(var(--maps-card-width) * .057) 5px 0; font-size: 13px; }
  .maps-shell-progress-track { height: 4px; }
  .maps-shell-begin { height: max(44px, calc(var(--maps-card-width) * .133)); margin-top: calc(var(--maps-card-width) * .055); font-size: 10px; letter-spacing: .24em; }
  .maps-shell-arrow { top: calc(142px + var(--maps-card-width) * .61); width: 44px; }
  .maps-shell-arrow-prev { left: 6%; } .maps-shell-arrow-next { left: 94%; }
  .maps-shell-ground { top: calc(142px + var(--maps-card-width) * 1.415 - 40px); width: 120%; height: 90px; }
  .maps-shell-dots { top: calc(142px + var(--maps-card-width) * 1.415 + 46px); gap: 8px; }
}
@media (max-width: 720px) {
  .map-page.maps-shell-page { --maps-navigation-space: 64px; }
  .maps-shell-scene { --maps-card-width: min(74vw, 340px, calc((100dvh - 64px - 210px) * .7066)); }
  .maps-shell-heading h1 { width: 88%; }
  .maps-shell-heading p { font-size: 9px; letter-spacing: .16em; }
}
@media (max-height: 600px) and (max-width: 900px) {
  .maps-shell-heading { top: 16px; }
  .maps-shell-heading h1 { width: min(60%, 500px); }
  .maps-shell-heading p { display: none; }
  .maps-shell-scene { --maps-card-width: min(55vw, 260px, calc((100dvh - var(--maps-navigation-space) - 110px) * .7066)); }
  .maps-shell-card { top: 65px; }
  .maps-shell-card-copy p { display: none; }
  .maps-shell-progress { display: none; }
  .maps-shell-begin { margin-top: 10px; font-size: 8px; }
  .maps-shell-arrow { top: calc(65px + var(--maps-card-width) * .61); }
  .maps-shell-ground { top: calc(65px + var(--maps-card-width) * 1.415 - 30px); }
  .maps-shell-dots { top: calc(65px + var(--maps-card-width) * 1.415 + 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .maps-shell-card, .maps-shell-begin, .maps-shell-card[aria-current="true"] .maps-shell-begin, .maps-shell-arrow, .maps-shell-dots button { transition: none; }
}
@media (hover: none), (prefers-reduced-motion: reduce) { .maps-star-hover-field { display: none; } }