.story-hub {
  position: relative;
  background:
    radial-gradient(ellipse at 71% 39%, #407bd637, transparent 55%),
    linear-gradient(180deg, #0a1221af, #0d172a05 52%, #09101be0 92%),
    url("assets/Assets/Core/Art/UI/LevelSelect/Backdrops/levelselect_jakarta_backdrop.webp") center 25% / cover;
}
.hub-layout {
  height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.05cqw; padding: 1.65cqw 3.7cqw 1.35cqw;
}
.hub-header { display: flex; align-items: center; gap: 1.2cqw; }
.hub-header h1, .hub-title, .activity-title, .hub-cta, .hub-tab-title {
  margin: 0; font-family: Barlow, "Arial Narrow", sans-serif; font-style: italic; font-weight: 700;
}
.hub-header h1 { font-size: 3.5cqw; line-height: 1; }
.hub-header .mode-fuel { margin-left: auto; }
.hub-main {
  display: grid; grid-template-columns: 2.7cqw minmax(0, 1.22fr) minmax(0, 1fr) 2.7cqw;
  gap: .8cqw; min-height: 0; align-items: stretch;
}
.hub-arrow {
  align-self: center; display: grid; place-items: center; width: 100%; height: 4.6cqw;
  border-radius: .55cqw; background: #0a122685; font: 600 3.6cqw/.8 system-ui;
  text-shadow: 0 .12cqw .32cqw #050a16;
}
.hub-arrow:hover:enabled { background: #21334b; }
.hub-arrow:disabled { opacity: .37; cursor: default; }
.hub-panel {
  grid-column: 2; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: .8cqw; padding-bottom: .6cqw;
}
.hub-title { font-size: 3.35cqw; line-height: .95; text-shadow: 0 .13cqw .45cqw #000; }
.hub-kicker { margin: .35cqw 0 0; color: #ccdaea; font-size: 1.17cqw; font-weight: 700; }
.hub-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .7cqw; min-height: 0; }
.hub-card {
  position: relative; isolation: isolate; min-width: 0; overflow: hidden; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: 1cqw; border: .1cqw solid #7b8da0; border-radius: .72cqw;
  background: #152234; box-shadow: 0 .2cqw .42cqw #0007;
}
.hub-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #0b1424ee, transparent 54%, #0a121ede 83%, #090f19),
    var(--activity-art, none) center / cover;
}
.hub-card[aria-current="step"], .hub-card.primary-card {
  border-color: #6ce9ff; box-shadow: 0 0 .5cqw #53d6f46b;
}
button.hub-card:hover { border-color: #b2f1ff; }
.hub-card[data-locked="true"]::before { filter: grayscale(.78) brightness(.73); }
.hub-card[data-locked="true"] .activity-meta { color: #c9d4e1; }
.hub-card[data-tutorial-lock-info] .activity-copy { color: #b7e4f5; }
.hub-card-lock {
  width: 6.4cqw; align-self: center;
  filter: drop-shadow(0 .42cqw .65cqw #050b16);
}
.activity-title { display: block; font-size: 2.55cqw; line-height: .96; }
.activity-meta, .activity-copy { display: block; font-size: 1.12cqw; color: #dce7f4; }
.activity-meta { margin: 0 0 .48cqw; color: #9ee8fa; font-weight: 750; letter-spacing: .065em; }
.activity-copy { margin-top: .4cqw; }
.hub-card .chevron { float: right; color: #b9eafa; }
.art-launch { --activity-art: url("motox-story-art/launch-first-shift.webp"); }
.art-jakarta {
  --activity-art: url("motox-story-art/jakarta-story.webp");
  --activity-position: 76% center;
}
.art-speed {
  --activity-art: url("motox-story-art/time-attack.webp");
  --activity-position: 64% center;
}
.art-shift-trials { --activity-art: url("motox-story-art/shift-trials.webp"); }
[data-preview-city="berlin"] {
  --city-preview-art: url("assets/Assets/Resources/CityIcons/Berlin.png");
}
[data-preview-city="tokyo"] {
  --city-preview-art: url("assets/Assets/Resources/CityIcons/Tokyo.webp");
}
[data-preview-city="lisbon"] {
  --city-preview-art: url("assets/Assets/Resources/CityIcons/Lisbon.webp");
}
.art-city-preview { --activity-art: var(--city-preview-art); }
.art-race-pack { --activity-art: url("assets/Assets/Core/Art/UI/Loading/loading_keyart_boot.webp"); }
.art-dusk-track { --activity-art: url("assets/Documentation/Handoff/images/jakarta-track-dusk-finish-20261008.webp"); }
.hub-cards:is([data-preview-city="berlin"], [data-preview-city="tokyo"], [data-preview-city="lisbon"])
  .hub-card[data-locked="true"]::before { filter: saturate(.65) brightness(.82); }
.hub-card:is(.art-launch, .art-jakarta, .art-speed, .art-shift-trials)::before {
  background:
    linear-gradient(180deg, #0b1424 5%, #0b1424bd 27%, transparent 49%, transparent 68%, #090f19 96%),
    var(--activity-art) var(--activity-position, center) / cover;
}
.art-race { --activity-art: url("assets/Assets/Core/Art/UI/LevelSelect/Backdrops/levelselect_jakarta_backdrop.webp"); }
.art-shift {
  --activity-art: url("assets/Assets/Core/Art/Sprites/UI/VictoryIcons/icon_speedometer.png");
}
.art-shift::before {
  background: linear-gradient(180deg, #0b1424ed, #1c3a4e35 52%, #080e17ef),
    var(--activity-art) center 53% / 50% auto no-repeat;
}
.hub-globe {
  min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  align-items: center; padding-bottom: .1cqw;
}
.globe-scene { width: min(100%, 27cqw); position: relative; isolation: isolate; }
.globe-scene::before {
  content: ""; position: absolute; z-index: -2; inset: -14% -18% -1%;
  background: radial-gradient(ellipse, #347fe64d, #275cc723 48%, transparent 71%);
  pointer-events: none;
}
.globe-model {
  width: 100%; aspect-ratio: 1; position: relative; isolation: isolate;
  border-radius: 50%; background: radial-gradient(circle at 36% 34%, #345e9b, #101c42 65%, #080e27);
  box-shadow: 0 0 1.65cqw #579bff8c, 0 0 .5cqw #abd2ff68;
  border: .1cqw solid #8db7f0;
}
.globe-model canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.globe-model::before, .globe-model::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.globe-model::before {
  background: url("assets/Assets/Core/Art/Models/globe/GlobeCloudMap.png") 39% 53% / 150% 100% repeat-x;
  mix-blend-mode: screen; opacity: .44;
  animation: globe-cloud-drift 18s ease-in-out infinite alternate;
}
.globe-model::after {
  box-shadow: inset .28cqw .35cqw .65cqw #9ccaff9c, inset -.75cqw -.5cqw 1.4cqw #070d268c;
}
@keyframes globe-cloud-drift { to { background-position-x: 60%; } }
.city-pin {
  position: absolute; z-index: 1; left: 58%; top: 58%; display: flex; align-items: center; gap: .4cqw;
  color: white; font: italic 700 1.7cqw/1 Barlow, "Arial Narrow", sans-serif;
  translate: -.4cqw -50%; text-shadow: 0 .12cqw .3cqw #01040a; white-space: nowrap;
}
.city-pin::before {
  content: ""; width: .78cqw; aspect-ratio: 1; border-radius: 50%;
  background: #ff435e; border: .12cqw solid #fff3f5; box-shadow: 0 0 .67cqw #f52350, 0 0 .23cqw #ff91a0;
  animation: globe-city-beacon 2.6s ease-in-out infinite alternate;
}
@keyframes globe-city-beacon { to { box-shadow: 0 0 1.05cqw #ff3359, 0 0 .42cqw #ff91a0; } }
.globe-base {
  width: 96%; height: 1.95cqw; margin: -1.1cqw auto 0; position: relative; z-index: -1;
  border-radius: 50%; border: .14cqw solid #789ac4;
  background: radial-gradient(ellipse at center, #1a3e67, #0b162a 49%, #426792 68%, #15243c 76%);
  box-shadow: 0 .45cqw .75cqw #03070dd1, 0 .2cqw .7cqw #5299ed71;
}
.hub-globe-footer {
  min-height: 3.2cqw; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: .7cqw; align-items: center;
}
.city-pages { display: flex; justify-content: center; gap: .47cqw; align-items: center; }
.city-pages span { width: .47cqw; aspect-ratio: 1; border-radius: 50%; background: #8391a4; }
.city-pages [aria-current] { background: #6de6fb; }
.hub-cta {
  justify-self: end; min-width: 10.7cqw; padding: .58cqw .9cqw;
  border: .1cqw solid #ff859c; border-radius: .55cqw;
  background: linear-gradient(125deg, #ec3458, #a71638);
  box-shadow: 0 .18cqw .45cqw #13050dc2, inset 0 .05cqw #ffe3ea8a;
  color: #fff; font-size: 1.75cqw; white-space: nowrap;
}
.hub-cta:hover { filter: brightness(1.15); }
.hub-exercise {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: .7cqw;
  padding: 1.75cqw; border: .1cqw solid #6885a3; border-radius: .72cqw;
  background: linear-gradient(140deg, #162842f0, #0b1422e9); box-shadow: 0 .2cqw .42cqw #0007;
}
.hub-exercise p { margin: 0; font-size: 1.32cqw; line-height: 1.4; }
.hub-exercise .exercise-note { color: #9db2cb; font-size: 1.05cqw; }
.hub-tabs {
  display: grid; grid-template-columns: .85fr 1.08fr 1.02fr 1.03fr 1.07fr;
  gap: .9cqw; height: 4.4cqw; isolation: isolate; padding-inline: .55cqw;
}
.hub-tab {
  --edge: #506983; --tint: #172d49;
  position: relative; min-width: 0; isolation: isolate; display: flex;
  align-items: center; justify-content: center; gap: .56cqw; padding: .36cqw .52cqw;
  color: #f4f7fc; background: transparent; text-align: left; text-shadow: 0 .11cqw .25cqw #04070c;
}
.hub-tab::before {
  content: ""; position: absolute; z-index: -1; inset: 0; transform: skewX(-11deg);
  border: .08cqw solid var(--edge); border-radius: .67cqw;
  background: linear-gradient(116deg, var(--tint), #101722 78%);
  box-shadow: inset 0 1px #fff3, inset 0 -2px #02060b7a, 0 .32cqw .62cqw #0009;
}
.hub-tab:hover:enabled::before { border-color: #b7dafa; }
.hub-tab svg {
  width: 2.12cqw; height: 2.12cqw; flex: 0 0 auto; overflow: visible;
  filter: drop-shadow(0 .12cqw .15cqw #010409ad);
}
.hub-tab-title { display: block; font-size: 1.63cqw; line-height: 1; white-space: nowrap; }
.hub-tab[aria-current="page"] { --edge: #7de9ff; --tint: #20546c; }
.hub-tab[aria-current="page"]::before {
  border-width: .15cqw; box-shadow: inset 0 1px #dbfaff85, 0 0 .7cqw #42dafe4d;
}
.hub-tab.street { --edge: #6f83bf; --tint: #242d57; }
.hub-tab.daily { --edge: #a38358; --tint: #42301c; }
.hub-tab.upcoming { --edge: #5c5673; --tint: #242032; color: #bfc9d7; cursor: default; }
.hub-tab.upcoming.rematch { --edge: #516d69; --tint: #1e3435; }
.hub-tab.upcoming svg { opacity: .8; }
.hub-tab.upcoming .hub-tab-title { font-size: 1.46cqw; }
.hub-tab-status {
  display: block; margin-top: .24cqw; color: #b7c2d2;
  font: 650 .66cqw/1.1 system-ui, sans-serif; letter-spacing: .12em; white-space: nowrap;
}

.story-hub [hidden] { display: none; }
.hub-lock-toast {
  position: absolute; z-index: 5; left: 50%; bottom: 7cqw; translate: -50% 0;
  width: 36cqw; display: grid; grid-template-columns: 5.1cqw 1fr; align-items: center; gap: 1.12cqw;
  padding: 1.05cqw 1.55cqw 1.05cqw 1.1cqw; border: .1cqw solid #6ebad6; border-radius: .68cqw;
  overflow: hidden; border-bottom: 0;
  background: linear-gradient(116deg, #203b50, #111e2e 60%, #0d1724);
  box-shadow: 0 .5cqw 1.6cqw #020712cf, 0 0 .75cqw #64c5ed3b, inset 0 .1cqw #cbf1ff35;
  pointer-events: none; animation: hub-lock-toast-in 100ms ease-out both;
}
.hub-lock-toast::after {
  content: ""; position: absolute; top: .82cqw; right: .9cqw;
  width: 2.1cqw; height: .6cqw; transform: skewX(-20deg);
  background: repeating-linear-gradient(90deg, #6bc9e1a8 0 .26cqw, transparent .26cqw .7cqw);
}
.hub-lock-toast-icon {
  width: 5.1cqw; padding: .22cqw; border: .08cqw solid #80c7dd68; border-radius: 50%;
  background: radial-gradient(circle, #254961, #0b1726 72%);
}
.hub-lock-toast-title {
  display: block; color: #ebf9ff; font: italic 700 2.12cqw/1 Barlow, "Arial Narrow", sans-serif;
}
.hub-lock-toast-message { margin: .36cqw 0 .42cqw; color: #c9dbe9; font-size: 1.14cqw; }
.hub-lock-toast-count {
  display: block;
  color: #a9e5f5; font-size: .9cqw; font-weight: 750; letter-spacing: .11em;
}
.hub-lock-toast-loader {
  position: absolute; inset: auto 0 0; height: .38cqw; background: #54738d69;
}
.hub-lock-toast-loader-fill {
  display: block; width: 100%; height: 100%; transform-origin: left center;
  background: linear-gradient(90deg, #49b5e5, #c0faff);
}
.hub-lock-announcement {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%);
}
@keyframes hub-lock-toast-in {
  from { opacity: 0; transform: translateY(.65cqw); }
}
@media (prefers-reduced-motion: reduce) {
  .hub-lock-toast, .globe-model::before, .city-pin::before { animation: none; }
}
.hub-mode-content {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .7cqw; min-height: 0;
  padding-inline: 2.8cqw;
}
.hub-mode-content .flow-footer { padding-block: .25cqw; }
.preview-reset {
  padding: .38rem .6rem; border: 1px solid #56677c; border-radius: .4rem;
  background: #080e17; color: inherit; font: inherit; cursor: pointer;
}

.tutorial-result {
  overflow: hidden;
  background: radial-gradient(ellipse at 74% 16%, #1b354a, #101c2b 42%, #0a121e 78%);
}
.tutorial-result-layout {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  align-items: stretch; gap: 4cqw; padding: 3.2cqw 5.2cqw;
}
.tutorial-result-summary {
  min-width: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 1.7cqw;
}
.tutorial-result-header { width: 100%; }
.tutorial-result-kicker {
  display: flex; align-items: center; gap: .8cqw; margin: 0;
  color: #b0c6d9; font-size: 1.12cqw; font-weight: 750; letter-spacing: .14em;
}
.tutorial-result-kicker span {
  padding: .28cqw .5cqw; border: .08cqw solid #77cfe24d; border-radius: .23cqw;
  background: #133044; color: #a7eafb; font-variant-numeric: tabular-nums;
}
.tutorial-result-header h1 {
  margin: .72cqw 0 .48cqw; font: italic 700 6cqw/.96 Barlow, "Arial Narrow", sans-serif;
}
.tutorial-result-header h1 em { color: #a4ebfc; }
.tutorial-result-lesson { margin: 0; color: #c9d9e8; font-size: 1.55cqw; }
.tutorial-result-checklist {
  display: grid; gap: .55cqw; width: 100%; margin: 0; padding: 0; list-style: none;
}
.tutorial-result-checklist li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9cqw;
  padding: .65cqw .95cqw; border: .08cqw solid #57778e75; border-radius: .48cqw;
  background: linear-gradient(106deg, #152b3c, #111d2c 75%);
}
.tutorial-result-check {
  display: grid; place-items: center; width: 2.25cqw; aspect-ratio: 1; border-radius: 50%;
  background: #25495b; color: #a4ebfc; font-size: 1.35cqw; font-weight: 800;
}
.tutorial-result-checklist strong {
  display: block; font: italic 700 2.25cqw/1 Barlow, "Arial Narrow", sans-serif;
}
.tutorial-result-checklist p { margin: .22cqw 0 0; color: #b5c7d8; font-size: 1.16cqw; }
.tutorial-result-checklist small {
  color: #a4ebfc; font-size: .9cqw; font-weight: 750; letter-spacing: .1em;
}
.tutorial-result-data {
  min-width: 0; align-self: center; display: grid; gap: 1.45cqw;
  padding: 2.2cqw; border: .1cqw solid #6f9bb477; border-radius: .85cqw;
  background: linear-gradient(145deg, #1b3144, #0c1725 80%);
  box-shadow: 0 .5cqw 1.8cqw #060b1366, inset 0 .1cqw #9ac7dd30;
}
.tutorial-result-data h2 {
  margin: .45cqw 0 0; font: italic 700 4.45cqw/.95 Barlow, "Arial Narrow", sans-serif;
}
.tutorial-result-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65cqw; margin: 0;
}
.tutorial-result-metrics > div {
  padding: .95cqw 1.15cqw; border: .08cqw solid #63849a6b; border-radius: .48cqw;
  background: #0b1724b5;
}
.tutorial-result-metrics dt, .tutorial-result-rewards h3 {
  margin: 0; color: #b0c6d9; font-size: 1.15cqw; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase;
}
.tutorial-result-metrics dd {
  margin: .38cqw 0 0; color: #f4f9ff;
  font: italic 700 4cqw/.95 Barlow, "Arial Narrow", sans-serif; font-variant-numeric: tabular-nums;
}
.tutorial-result-metrics dd span { color: #a4ebfc; font-size: .64em; }
.tutorial-result-rewards { padding-top: 1.2cqw; border-top: .08cqw solid #6f9bb459; }
.tutorial-result-rewards ul {
  display: flex; flex-wrap: wrap; align-items: center; gap: .65cqw;
  margin: .55cqw 0 0; padding: 0; list-style: none;
}
.tutorial-result-rewards li {
  display: flex; align-items: center; gap: .52cqw; padding: .5cqw .8cqw;
  border: .08cqw solid #6b94ad66; border-radius: .35cqw; background: #122638;
}
.tutorial-result-rewards img { width: 2.35cqw; height: 1.75cqw; object-fit: contain; }
.tutorial-result-rewards strong {
  font: italic 700 2.45cqw/1 Barlow, "Arial Narrow", sans-serif; white-space: nowrap;
}
.tutorial-result-rewards strong span { color: #add5e5; font-size: .65em; }
.result-continue {
  min-width: 18cqw; padding: .7cqw 1.15cqw; box-shadow: 0 .18cqw .7cqw #16060dce;
  font-size: 2.45cqw;
}
.result-continue span[aria-hidden="true"] { margin-left: .45cqw; }
.result-continue:hover { filter: brightness(1.15); }