.interactive-cue {
  position: absolute;
  z-index: 12;
  top: 22px;
  left: 24px;
  display: inline-flex;
  min-height: 38px;
  padding: 7px 13px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.86);
  border-radius: 999px;
  color: #11193f;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 10px 28px rgba(17,25,63,0.14);
  font-size: 0.75rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.interactive-cue-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #10a07d;
  box-shadow: 0 0 0 5px rgba(16,160,125,0.13);
  animation: cue-pulse 1.8s ease-in-out infinite;
}

@keyframes cue-pulse {
  0%, 100% { transform: scale(0.88); box-shadow: 0 0 0 4px rgba(16,160,125,0.11); }
  50% { transform: scale(1); box-shadow: 0 0 0 7px rgba(16,160,125,0.04); }
}

.drill-stage {
  min-height: 1066px;
  padding-top: 80px;
}

.map-experience,
.test-experience {
  --map-blue: #317bdc;
  --map-blue-soft: #d8e9fb;
  --map-teal: #09888a;
  --map-green: #12915f;
  --map-gold: #e7a51b;
  --test-purple: #7a42d3;
  --light-ink: #101522;
  --light-muted: #70798a;
  --light-surface: rgba(255,255,255,0.88);
  --light-recessed: #dce6ef;
}

.map-experience .story-copy,
.test-experience .story-copy {
  position: sticky;
  top: 126px;
  align-self: start;
}

.map-experience .story-copy > p,
.test-experience .story-copy > p {
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.map-experience button,
.test-experience button {
  font: inherit;
}

.map-stage,
.test-stage {
  position: relative;
  display: grid;
  min-height: 1066px;
  padding: 80px 34px 34px;
  place-items: center;
  border-radius: 46px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.map-stage {
  background:
    radial-gradient(circle at 76% 12%, rgba(32,212,223,0.52), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(49,123,220,0.48), transparent 42%),
    #dceafa;
}

.test-stage {
  background:
    radial-gradient(circle at 76% 12%, rgba(163,103,235,0.52), transparent 34%),
    radial-gradient(circle at 16% 88%, rgba(55,152,223,0.48), transparent 42%),
    #e4e7fb;
}

.map-stage::before,
.map-stage::after,
.test-stage::before,
.test-stage::after {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 50%;
  content: "";
}

.map-stage::before,
.test-stage::before {
  top: -86px;
  right: -54px;
  width: 210px;
  height: 210px;
}

.map-stage::after,
.test-stage::after {
  bottom: -118px;
  left: -68px;
  width: 238px;
  height: 238px;
}

.map-device {
  background-image: image-set(
    url("/assets/app-progress.webp") type("image/webp"),
    url("/assets/app-progress.jpg") type("image/jpeg")
  );
}
.test-device {
  background-image: image-set(
    url("/assets/app-test.webp") type("image/webp"),
    url("/assets/app-test.jpg") type("image/jpeg")
  );
}

.light-device .device-screen {
  color: var(--light-ink);
  background:
    radial-gradient(circle at 92% 7%, rgba(93,178,244,0.20), transparent 20rem),
    linear-gradient(145deg, #eef8ff 0%, #dceefd 44%, #cfe2f3 100%);
}

.light-device .status-time,
.light-device .status-icons { color: #0b101a; }
.light-device .status-time { text-shadow: 0 0.5px 0 rgba(255,255,255,0.48); }
.light-device .battery { border-color: rgba(11,16,26,0.62); }
.light-device .battery::before { background: #0b101a; }
.light-device .battery::after { background: rgba(11,16,26,0.54); }

.light-device .app-surface {
  background:
    radial-gradient(circle at 7% 0%, rgba(255,255,255,0.90), transparent 18rem),
    linear-gradient(145deg, rgba(246,252,255,0.97), rgba(218,236,251,0.98) 46%, rgba(201,225,244,0.98));
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.92)) drop-shadow(0 -12px 18px rgba(28,75,122,0.10));
}

.light-device .session-title strong {
  color: #16233c;
  text-shadow: -0.5px 0.5px 0.5px rgba(28,62,103,0.22), 0.4px -0.4px 0 rgba(255,255,255,0.82);
}

.light-device .session-title span { color: #727d8e; }

.light-device .dock-plane {
  background:
    linear-gradient(155deg, rgba(255,255,255,0.48), rgba(222,235,248,0.95) 48%, rgba(199,218,238,0.97)),
    rgba(224,238,250,0.94);
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.90)) drop-shadow(0 -8px 14px rgba(25,63,104,0.16));
}

.light-device .dock-button {
  color: var(--device-tint, var(--map-blue));
  border-color: rgba(255,255,255,0.92);
  background: rgba(229,240,251,0.98);
  box-shadow: 0 4px 10px rgba(30,71,116,0.24), inset 1px -1px 0 rgba(77,111,148,0.18), inset -1px 1px 0 rgba(255,255,255,0.94);
}

.light-device .dock-button::before {
  border-color: rgba(255,255,255,0.86);
  background: linear-gradient(145deg, rgba(249,253,255,0.98), rgba(210,226,243,0.98));
}

.map-device { --device-tint: var(--map-blue); }
.test-device { --device-tint: var(--test-purple); }

.map-header,
.test-header {
  position: absolute;
  z-index: 6;
  top: 51px;
  right: 0;
  left: 0;
  height: 54px;
  padding: 0 20px;
}

.map-header-row,
.test-header-row {
  display: grid;
  height: 54px;
  grid-template-columns: 52px 1fr 86px;
  align-items: center;
}

.map-header-row { grid-template-columns: 52px 1fr 52px; }

.map-back,
.test-close,
.test-flag,
.test-checklist {
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.map-back,
.test-close { width: 44px; height: 44px; }

.map-back-glyph {
  width: 17px;
  height: 17px;
  border-bottom: 5px solid var(--map-blue);
  border-left: 5px solid var(--map-blue);
  border-radius: 3px;
  filter: drop-shadow(-1px 1px 1px rgba(27,70,118,0.28)) drop-shadow(1px -1px 1px rgba(255,255,255,0.82));
  transform: rotate(45deg);
}

.map-title {
  color: #16233c;
  font-size: 1.48rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-align: center;
  text-shadow: -0.5px 0.5px 0.5px rgba(28,62,103,0.22), 0.4px -0.4px 0 rgba(255,255,255,0.86);
}

.map-title span { color: var(--map-blue); }

.map-scroll,
.test-scroll {
  position: absolute;
  z-index: 3;
  inset: 0;
  padding: 180px 22px 140px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 118px, rgba(0,0,0,0.16) 136px, #000 174px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 118px, rgba(0,0,0,0.16) 136px, #000 174px, #000 100%);
}

.map-scroll {
  padding-top: 151px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 104px, rgba(0,0,0,0.16) 120px, #000 148px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 104px, rgba(0,0,0,0.16) 120px, #000 148px, #000 100%);
}

.map-scroll::-webkit-scrollbar,
.test-scroll::-webkit-scrollbar { display: none; }

.map-section-title {
  margin: 0;
  color: var(--light-ink);
  font-size: 1.28rem;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.map-section-detail {
  margin: 2px 0 0;
  color: var(--light-muted);
  font-size: 0.86rem;
  font-weight: 560;
}

.map-metrics {
  display: grid;
  margin-top: 16px;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.map-metric {
  min-height: 88px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 8px 18px rgba(42,78,118,0.14), inset 0 1px 0 #fff;
}

.map-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.map-metric-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--metric-tint);
  filter: drop-shadow(0 3px 3px color-mix(in srgb, var(--metric-tint) 28%, transparent));
}
.map-metric-icon svg {
  width: 30px;
  height: 30px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-metric-seal .seal-edge { fill: currentColor; stroke: currentColor; }
.map-metric-seal .seal-check { stroke: #fff; stroke-width: 2.2; }
.map-metric-value {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #fff;
  background: var(--metric-tint);
  border-radius: 13px 25px 14px 24px;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--metric-tint) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.35);
  font-size: 0.78rem;
  font-weight: 800;
  transform: rotate(3deg);
}

.map-metric-label {
  margin-top: 10px;
  color: var(--light-muted);
  font-size: 0.84rem;
  font-weight: 650;
}

.map-mastery-heading { margin-top: 30px; }
.map-legend {
  display: flex;
  margin: 11px 0 15px;
  align-items: center;
  gap: 7px;
  color: #465163;
  font-size: 0.78rem;
  font-weight: 670;
}
.map-legend::before { width: 14px; height: 10px; border-radius: 3px; background: var(--map-teal); content: ""; }

.map-domains { display: grid; gap: 10px; }
.map-domain {
  border: 1px solid rgba(255,255,255,0.94);
  border-radius: 18px;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 7px 16px rgba(42,78,118,0.14), inset 0 1px 0 #fff;
  overflow: hidden;
}

.map-domain-toggle {
  display: block;
  width: 100%;
  padding: 13px 14px 12px;
  border: 0;
  color: var(--light-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.map-domain-heading {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
}

.map-domain-chevron {
  width: 10px;
  height: 10px;
  border-right: 3px solid #70798a;
  border-bottom: 3px solid #70798a;
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}
.map-domain.is-open .map-domain-chevron { transform: rotate(45deg) translateY(-2px); }
.map-domain-name { font-size: 1rem; font-weight: 690; }
.map-domain-summary { font-size: 0.78rem; font-weight: 690; white-space: nowrap; }

.map-meter,
.map-skill-meter {
  position: relative;
  display: block;
  height: 7px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--light-recessed);
  overflow: hidden;
}

.map-meter::after,
.map-skill-meter::after {
  display: block;
  width: var(--meter, 50%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--meter-start, var(--map-teal)), var(--meter-end, #17b8ac));
  content: "";
}

.map-domain-content { display: none; border-top: 1px solid #dbe5ee; }
.map-domain.is-open .map-domain-content { display: block; }

.map-skill {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid #dbe5ee;
  color: var(--light-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.map-skill:last-child { border-bottom: 0; }
.map-skill:hover,
.map-skill.is-active { background: rgba(49,123,220,0.08); }

.map-skill-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}
.map-skill-name { font-size: 0.98rem; font-weight: 680; }
.map-skill-badge {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--map-teal);
  background: rgba(9,136,138,0.10);
  font-size: 0.66rem;
  font-weight: 790;
}
.map-skill-status {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  color: #111;
  font-size: 0.76rem;
  font-weight: 740;
  white-space: nowrap;
}
.map-skill-status::before {
  width: 15px;
  height: 15px;
  border: 2px dashed currentColor;
  border-radius: 50%;
  content: "";
}
.map-skill-status.mastered { color: var(--map-green); }
.map-skill-status.mastered::before {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 0;
  border-radius: 7px 9px 7px 9px;
  color: #fff;
  background: var(--map-green);
  content: "✓";
  font-size: 0.68rem;
  line-height: 1;
  transform: rotate(4deg);
}

.map-action-toast,
.test-action-toast {
  position: absolute;
  z-index: 8;
  right: 18px;
  bottom: 116px;
  left: 18px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 14px;
  color: #18314d;
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 24px rgba(33,71,111,0.17);
  font-size: 0.70rem;
  font-weight: 680;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.map-action-toast.is-visible,
.test-action-toast.is-visible { opacity: 1; transform: translateY(0); }

.test-close { color: var(--test-purple); }
.test-close-glyph { position: relative; width: 25px; height: 25px; }
.test-close-glyph::before,
.test-close-glyph::after {
  position: absolute;
  top: 10px;
  left: 0;
  width: 25px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  filter: drop-shadow(-1px 1px 1px rgba(55,26,96,0.26)) drop-shadow(1px -1px 1px rgba(255,255,255,0.84));
  content: "";
}
.test-close-glyph::before { transform: rotate(45deg); }
.test-close-glyph::after { transform: rotate(-45deg); }

.test-timer {
  display: inline-flex;
  min-height: 34px;
  padding: 6px 10px;
  justify-self: end;
  align-items: center;
  gap: 6px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #8c52dd, #6f35c5);
  box-shadow: 0 7px 16px rgba(96,45,175,0.28), inset 0 1px 0 rgba(255,255,255,0.30);
  font-size: 0.74rem;
  font-weight: 790;
  font-variant-numeric: tabular-nums;
}
.test-timer-icon {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.test-timer-icon::before,
.test-timer-icon::after { position: absolute; left: 6px; width: 2px; border-radius: 2px; background: currentColor; content: ""; transform-origin: bottom; }
.test-timer-icon::before { top: 2px; height: 5px; }
.test-timer-icon::after { top: 5px; height: 4px; transform: rotate(-90deg); }

.test-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.test-chip {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 12px;
  align-items: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, #8d50dc, #6d35c4);
  box-shadow: 0 7px 16px rgba(96,45,175,0.22), inset 0 1px 0 rgba(255,255,255,0.27);
  font-size: 0.72rem;
  font-weight: 760;
}

.test-flag {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(122,66,211,0.22);
  border-radius: 14px;
  color: var(--test-purple);
  background: rgba(122,66,211,0.08);
}
.test-flag-svg {
  width: 25px;
  height: 25px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.test-flag-cloth { transition: fill 150ms ease; }
.test-flag[aria-pressed="true"] { color: #fff; background: var(--test-purple); }
.test-flag[aria-pressed="true"] .test-flag-cloth { fill: currentColor; }

.test-passage {
  margin: 24px 0 0;
  color: var(--light-ink);
  font-size: 1.08rem;
  font-weight: 470;
  line-height: 1.55;
  letter-spacing: -0.012em;
}
.test-directive {
  margin: 17px 0 0;
  color: var(--light-muted);
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.45;
}

.test-choices { display: grid; gap: 10px; margin-top: 22px; }
.test-choice {
  display: grid;
  width: 100%;
  min-height: 62px;
  padding: 11px 14px;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(119,141,169,0.22);
  border-radius: 17px;
  color: var(--light-ink);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 7px 16px rgba(42,78,118,0.14), inset 0 1px 0 #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.test-choice:hover { transform: translateY(-1px); }
.test-choice.is-selected {
  color: #fff;
  border-color: rgba(122,66,211,0.78);
  background: linear-gradient(145deg, #8d50dc, #6d35c4);
  box-shadow: 0 8px 18px rgba(96,45,175,0.24), inset 0 1px 0 rgba(255,255,255,0.24);
}
.test-choice-letter {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: rgba(90,104,123,0.10);
  font-size: 0.93rem;
  font-weight: 790;
}
.test-choice.is-selected .test-choice-letter { background: rgba(255,255,255,0.18); }
.test-choice-text { font-size: 0.98rem; font-weight: 680; }

.test-checklist {
  position: absolute;
  z-index: 9;
  right: 20px;
  bottom: 22px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,0.90);
  border-radius: 50%;
  color: var(--test-purple);
  background: rgba(244,248,252,0.94);
  box-shadow: 0 4px 10px rgba(30,71,116,0.20), inset 0 1px 0 #fff;
}
.test-checklist-svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.test-summary {
  position: absolute;
  z-index: 10;
  right: 16px;
  bottom: 82px;
  width: 188px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.94);
  border-radius: 17px;
  color: var(--light-ink);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 14px 34px rgba(32,71,111,0.22);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.test-summary.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.test-summary strong { display: block; margin-bottom: 9px; font-size: 0.78rem; }
.test-summary-row { display: flex; justify-content: space-between; padding: 5px 0; color: var(--light-muted); font-size: 0.67rem; font-weight: 660; }
.test-summary-row span:last-child { color: var(--light-ink); }

.map-back:focus-visible,
.map-domain-toggle:focus-visible,
.map-skill:focus-visible,
.test-close:focus-visible,
.test-flag:focus-visible,
.test-choice:focus-visible,
.test-checklist:focus-visible {
  outline: 3px solid var(--device-tint, var(--map-blue));
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .map-experience .story-copy,
  .test-experience .story-copy { position: static; }
  .map-stage,
  .test-stage { width: min(700px, 100%); margin-inline: auto; }
}

@media (max-width: 620px) {
  .interactive-cue {
    top: 14px;
    left: 18px;
    min-height: 34px;
    padding: 6px 11px;
    font-size: 0.69rem;
  }

  .drill-stage,
  .map-stage,
  .test-stage {
    min-height: 0;
    padding: 64px 10px 10px;
    border-radius: 32px;
  }

  .map-scroll { padding: 151px 18px 140px; }
  .test-scroll { padding: 180px 18px 140px; }
  .map-domain-name { font-size: 0.9rem; }
  .map-domain-summary { font-size: 0.7rem; }
  .test-passage { font-size: 1rem; }
  .test-choice { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .interactive-cue-dot { animation: none; }
}