/* MEGURU experience pass v2: fast learning, guided decisions and readable crew. */

:root {
  --learn-ink: #143b43;
  --learn-muted: #58747a;
  --learn-line: #c7dcde;
  --learn-paper: #fbfffd;
  --learn-mint: #5dd7b0;
  --learn-yellow: #ffd861;
  --learn-pink: #ff8297;
  --learn-blue: #57c9ef;
}

button,
input,
select,
summary {
  font: inherit;
}

button {
  touch-action: manipulation;
}

button:not(:disabled):active {
  transform: translateY(1px);
}

button:disabled,
button[data-control-state="locked"] {
  cursor: not-allowed !important;
  filter: grayscale(.7);
  opacity: .48 !important;
}

#game small,
.app-menu small,
.crew-modal small,
.fd-modal small,
.guide-modal small,
.replay-modal small,
.collection-modal small {
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#game button,
.app-menu button,
.crew-modal button,
.fd-modal button {
  font-size: 13px;
}

.atlas-learning-title-button,
.future-learning-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(121, 230, 208, .42);
  border-radius: 18px;
  color: #effffd;
  background:
    linear-gradient(115deg, rgba(82, 205, 191, .2), rgba(101, 98, 212, .16)),
    rgba(9, 35, 43, .78);
  box-shadow: 0 12px 24px rgba(3, 21, 29, .2);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.atlas-learning-title-button:hover,
.future-learning-entry:hover {
  border-color: var(--learn-yellow);
  background:
    linear-gradient(115deg, rgba(82, 205, 191, .3), rgba(255, 130, 151, .18)),
    rgba(9, 35, 43, .9);
  transform: translateY(-2px);
}

.atlas-learning-title-button > span,
.future-learning-entry > span {
  grid-row: 1 / 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 78px;
  padding: 8px;
  border-radius: 12px;
  color: #153a42;
  background: var(--learn-yellow);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .1em;
}

.atlas-learning-title-button b,
.future-learning-entry b {
  font-size: 16px;
}

.atlas-learning-title-button small,
.future-learning-entry small {
  color: #bfe5e1;
}

.future-learning-entry {
  margin-top: 14px;
  border-color: rgba(190, 155, 255, .5);
}

.future-learning-entry > span {
  color: #fff;
  background: linear-gradient(135deg, #8d6de4, #e771a2);
}

/* Learning Studio */

.learning-screen {
  padding-bottom: 90px !important;
  color: var(--learn-ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(95, 218, 179, .18), transparent 27%),
    radial-gradient(circle at 95% 5%, rgba(255, 137, 170, .16), transparent 28%),
    linear-gradient(180deg, #edf9f4, #f8fbf7 42%, #eef5f2) !important;
}

.learning-screen.is-active {
  animation-duration: .18s !important;
}

.learning-hero {
  max-width: 1480px !important;
  margin: 0 auto !important;
  padding: 38px 34px 24px !important;
  color: var(--learn-ink) !important;
  scroll-margin-top: 92px;
}

.learning-hero h2 {
  max-width: 850px;
  font-size: clamp(34px, 4.5vw, 68px) !important;
  line-height: 1.02 !important;
}

.learning-hero > div:first-child > p:last-child {
  max-width: 850px !important;
  color: var(--learn-muted) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.learning-hero-actions button {
  min-height: 48px;
  padding: 12px 17px !important;
  border-width: 2px !important;
  font-size: 14px !important;
  font-weight: 900;
}

.learning-workspace {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 34px;
}

.learning-start-guide {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 18px;
  border: 1px solid #b8d8d5;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(115deg, #164956, #297767 58%, #5969a2);
  box-shadow: 0 12px 28px rgba(23, 66, 73, .16);
}

.learning-start-guide > strong {
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, .28);
  font-size: 15px;
  white-space: nowrap;
}

.learning-start-guide ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learning-start-guide li {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #e8ffff;
  font-size: 14px;
  font-weight: 850;
}

.learning-start-guide li span {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #183d42;
  background: var(--learn-yellow);
  font-weight: 1000;
}

.learning-shell {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) !important;
  gap: 18px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.learning-topic-nav {
  position: sticky;
  top: 90px;
  align-self: start;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid #c7dcda;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 18px 38px rgba(25, 76, 74, .1);
  backdrop-filter: blur(10px);
}

.learning-topic-nav button {
  position: relative;
  grid-template-columns: 42px 1fr !important;
  min-height: 72px;
  padding: 11px 12px !important;
  border: 2px solid transparent !important;
  border-radius: 15px !important;
  color: #355c62 !important;
  background: #f4f9f7 !important;
  cursor: pointer;
  text-align: left;
}

.learning-topic-nav button::after {
  position: absolute;
  top: 50%;
  right: 12px;
  content: "→";
  color: #5e8f91;
  font-size: 16px;
  transform: translateY(-50%);
}

.learning-topic-nav button:hover {
  border-color: #8cc9bc !important;
  background: #fff !important;
}

.learning-topic-nav button.is-active {
  border-color: #286f67 !important;
  color: #fff !important;
  background: linear-gradient(110deg, #1b5c61, #2b8070) !important;
  box-shadow: 0 8px 18px rgba(28, 89, 86, .2);
}

.learning-topic-nav button.is-active::after {
  color: var(--learn-yellow);
}

.learning-topic-nav button.is-complete::before {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  content: "✓";
  border-radius: 50%;
  color: #17453e;
  background: #8df0c4;
  font-size: 11px;
  font-weight: 1000;
}

.learning-topic-nav button > span {
  grid-row: 1 / 3;
  display: grid !important;
  place-items: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  color: #24545b !important;
  background: #d9eee9 !important;
  font-size: 12px !important;
  font-weight: 1000;
}

.learning-topic-nav button.is-active > span {
  color: #1f4548 !important;
  background: var(--learn-yellow) !important;
}

.learning-topic-nav b {
  padding-right: 22px;
  font-size: 15px !important;
}

.learning-topic-nav small {
  color: #668084 !important;
  font-size: 12px !important;
}

.learning-topic-nav button.is-active small {
  color: #d6efeb !important;
}

.learning-content {
  min-width: 0;
  padding: 0 0 50px !important;
  border: 0 !important;
  background: transparent !important;
}

.learning-teacher {
  position: relative;
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 220px;
  gap: 22px;
  align-items: center;
  min-height: 180px;
  margin-bottom: 14px;
  padding: 16px 18px 16px 16px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--teacher) 45%, #fff);
  border-radius: 26px;
  color: #153b43;
  background:
    radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--teacher-accent) 42%, transparent), transparent 32%),
    linear-gradient(125deg, #fff, color-mix(in srgb, var(--teacher) 12%, #fff));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--teacher) 16%, rgba(32, 72, 79, .08));
}

.learning-teacher::after {
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 210px;
  height: 210px;
  content: "";
  border: 34px solid var(--teacher);
  border-radius: 50%;
  opacity: .08;
}

.learning-teacher-portrait {
  align-self: stretch;
  min-height: 150px;
  border: 4px solid #fff;
  border-radius: 22px;
  background-color: var(--teacher);
  background-image: url("assets/meguru-crew-roster-v2.webp"), linear-gradient(135deg, var(--teacher), var(--teacher-accent));
  background-position: var(--portrait-x) var(--portrait-y), center;
  background-repeat: no-repeat;
  background-size: 300% 200%, cover;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--teacher) 22%, rgba(24, 57, 65, .1));
}

.learning-teacher-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.learning-teacher-copy > small,
.learning-teacher-effect > small {
  display: block;
  color: color-mix(in srgb, var(--teacher) 70%, #21464d);
  font-size: 12px !important;
  font-weight: 1000;
  letter-spacing: .09em;
}

.learning-teacher-copy h3 {
  margin: 5px 0 7px;
  font-size: 30px;
  line-height: 1;
}

.learning-teacher-copy h3 span {
  display: block;
  margin-top: 7px;
  color: #52727a;
  font-size: 14px;
  letter-spacing: .02em;
}

.learning-teacher-copy p {
  margin: 0;
  color: #234f55;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.65;
}

.learning-teacher-copy p b {
  color: var(--teacher);
  font-size: 24px;
}

.learning-teacher-copy em {
  display: block;
  margin-top: 8px;
  color: #657e83;
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
}

.learning-teacher-effect {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--teacher) 35%, #d5e5e5);
  border-radius: 17px;
  background: rgba(255, 255, 255, .78);
}

.learning-teacher-effect strong {
  color: #173e45;
  font-size: 16px;
  line-height: 1.4;
}

.learning-teacher-effect span {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  color: #16443e;
  background: color-mix(in srgb, var(--teacher-accent) 65%, #e8fff7);
  font-size: 12px;
  font-weight: 900;
}

.learning-section-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 20px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 24px 26px !important;
  border: 1px solid #c5dad9 !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 12px 26px rgba(37, 79, 82, .08);
}

.learning-section-head small {
  color: #318070 !important;
  font-size: 12px !important;
}

.learning-section-head h3 {
  margin: 6px 0 !important;
  color: var(--learn-ink) !important;
  font-size: clamp(26px, 3vw, 42px) !important;
  line-height: 1.15 !important;
}

.learning-section-head p {
  max-width: 900px;
  margin: 0 !important;
  color: var(--learn-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.learning-complete-chip {
  min-width: 120px;
  padding: 9px 12px !important;
  border: 1px solid #a7cdc5 !important;
  border-radius: 999px !important;
  color: #285c57 !important;
  background: #e9f8f3 !important;
  font-size: 13px !important;
  text-align: center;
}

.learning-do-next {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  padding: 13px 16px;
  border: 2px solid #e5b73e;
  border-radius: 18px;
  color: #153e44;
  background: linear-gradient(105deg, #fff9d9, #fffdf1);
  box-shadow: 0 8px 18px rgba(150, 111, 25, .08);
}

.learning-do-next > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: #db8a28;
  font-size: 20px;
  font-weight: 1000;
}

.learning-do-next small,
.learning-do-next b {
  display: block;
}

.learning-do-next small {
  color: #9b641d;
  font-size: 11px !important;
  font-weight: 1000;
  letter-spacing: .1em;
}

.learning-do-next b {
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.5;
}

.learning-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}

.learning-card {
  min-height: 190px;
  padding: 20px !important;
  border: 1px solid #c8dedd !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(35, 75, 78, .07);
}

.learning-card > span {
  width: 48px !important;
  height: 48px !important;
  font-size: 20px !important;
}

.learning-card h4 {
  margin: 12px 0 7px !important;
  font-size: 17px !important;
}

.learning-card p {
  color: var(--learn-muted) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.learning-quiz {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 14px 0 !important;
  padding: 22px !important;
  border: 1px solid #b7d9d2 !important;
  border-radius: 22px !important;
  background: linear-gradient(120deg, #f0fff9, #fff) !important;
}

.learning-quiz h4 {
  margin: 5px 0 !important;
  font-size: 21px !important;
}

.learning-quiz p,
.learning-feedback {
  color: #58777a !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.learning-quiz-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.learning-quiz button {
  min-height: 52px;
  padding: 11px 14px !important;
  border: 2px solid #74bfae !important;
  border-radius: 14px !important;
  color: #174b49 !important;
  background: #fff !important;
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 900;
}

.learning-quiz button:hover {
  background: #e8fff6 !important;
}

.learning-quiz button.is-correct {
  border-color: #17986f !important;
  background: #d8ffed !important;
}

.learning-quiz button.is-wrong {
  border-color: #db5363 !important;
  background: #fff0f1 !important;
}

.learning-feedback {
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef6f4;
}

.learning-feedback.is-correct {
  color: #12614d !important;
  background: #dbf9ec;
}

.learning-feedback.is-wrong {
  color: #873542 !important;
  background: #fff0f2;
}

.process-map {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin: 14px 0 !important;
}

.process-step {
  min-height: 88px;
  padding: 12px !important;
  border-width: 2px !important;
  border-radius: 16px !important;
  cursor: pointer;
}

.process-step b {
  font-size: 14px !important;
}

.process-step small {
  font-size: 11px !important;
}

.process-explainer {
  display: grid !important;
  grid-template-columns: 1.2fr .8fr !important;
  gap: 14px !important;
  padding: 22px !important;
  border-radius: 20px !important;
}

.process-explainer > div > b {
  display: block;
  margin: 4px 0 8px;
  font-size: 24px !important;
}

.process-explainer p {
  font-size: 14px !important;
  line-height: 1.75 !important;
}

.process-explainer aside {
  padding: 16px;
  border-radius: 15px;
  color: #254d53;
  background: #fff7d7;
}

.process-explainer aside small {
  color: #98641e;
  font-weight: 1000;
}

.learning-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.learning-flow-grid article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 5px 10px;
  padding: 16px;
  border: 1px solid #c7dcdd;
  border-radius: 16px;
  background: #fff;
}

.learning-flow-grid article > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: #287a73;
  font-weight: 1000;
}

.learning-flow-grid b {
  font-size: 15px;
}

.learning-flow-grid p {
  margin: 0;
  color: var(--learn-muted);
  font-size: 13px;
  line-height: 1.55;
}

.learning-atlas-hero {
  display: grid;
  grid-template-columns: minmax(280px, .75fr) 1fr;
  gap: 22px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #b9d7da;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(33, 77, 84, .08);
}

.learning-atlas-visual {
  min-height: 320px;
  border-radius: 17px;
  background: #173e4c url("assets/meguru-atlas-hero-v1.webp") center / cover no-repeat;
}

.learning-atlas-hero > div:last-child > small {
  color: #2b7f78;
  font-weight: 1000;
  letter-spacing: .08em;
}

.learning-atlas-hero h4 {
  margin: 7px 0 14px;
  font-size: 26px;
}

.learning-atlas-hero ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learning-atlas-hero li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 3px 10px;
  padding: 11px;
  border-radius: 13px;
  background: #eef8f5;
}

.learning-atlas-hero li span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: #2f7c73;
  font-weight: 1000;
}

.learning-atlas-hero li b {
  font-size: 14px;
}

.learning-atlas-hero li p {
  margin: 0;
  color: var(--learn-muted);
  font-size: 13px;
  line-height: 1.5;
}

.learning-atlas-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.learning-atlas-actions button {
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 16px 18px;
  border: 2px solid #72bfb5;
  border-radius: 17px;
  color: #174a4a;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.learning-atlas-actions button::after {
  justify-self: end;
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  content: "→";
  font-size: 22px;
}

.learning-atlas-actions button:hover {
  border-color: #2d8074;
  background: #eafff7;
}

.learning-atlas-actions button.is-primary {
  color: #fff;
  background: linear-gradient(110deg, #195c63, #2f8b78);
}

.learning-atlas-actions button b {
  font-size: 16px;
}

.learning-atlas-actions button small {
  color: inherit;
  opacity: .8;
}

.learning-caution {
  margin: 12px 0;
  padding: 13px 15px;
  border-left: 5px solid #d89e31;
  border-radius: 0 12px 12px 0;
  color: #635738;
  background: #fff9dd;
  font-size: 13px;
  line-height: 1.7;
}

.future-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.future-status-legend span {
  padding: 7px 10px;
  border: 1px solid #b8d6d4;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

[data-tone="now"] { --future-tone: #48b890; }
[data-tone="demo"] { --future-tone: #e69b36; }
[data-tone="game"] { --future-tone: #9c6ee2; }

.future-status-legend span {
  border-color: var(--future-tone);
  color: color-mix(in srgb, var(--future-tone) 75%, #203f45);
}

.learning-future-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 9px;
  margin: 12px 0;
  overflow-x: auto;
  padding-bottom: 5px;
}

.learning-future-timeline article {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 400px;
  padding: 16px;
  border: 2px solid color-mix(in srgb, var(--future-tone) 62%, #fff);
  border-radius: 19px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--future-tone) 12%, #fff), #fff 35%);
}

.learning-future-timeline time {
  color: var(--future-tone);
  font-size: 34px;
  font-weight: 1000;
}

.learning-future-timeline article > small {
  justify-self: start;
  margin: 3px 0 10px;
  padding: 4px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--future-tone);
  font-size: 11px !important;
  font-weight: 900;
}

.learning-future-timeline h4 {
  margin: 0 0 8px;
  font-size: 18px;
}

.learning-future-timeline p {
  margin: 0;
  color: var(--learn-muted);
  font-size: 13px;
  line-height: 1.65;
}

.learning-future-timeline dl {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
}

.learning-future-timeline dl div {
  padding-top: 7px;
  border-top: 1px solid #d8e5e4;
}

.learning-future-timeline dt {
  color: #6b8588;
  font-size: 11px;
  font-weight: 900;
}

.learning-future-timeline dd {
  margin: 3px 0 0;
  color: #224b51;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.learning-future-timeline aside {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #fff2d8;
  font-size: 11px;
  line-height: 1.4;
}

.learning-future-timeline aside b {
  color: #9c5a19;
}

.learning-scenario-picker {
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #c8dad9;
  border-radius: 20px;
  background: #fff;
}

.learning-scenario-picker header small {
  color: #5d5aa4;
  font-weight: 1000;
}

.learning-scenario-picker h4 {
  margin: 5px 0 12px;
  font-size: 19px;
}

.learning-scenario-picker > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.learning-scenario-picker button {
  display: grid;
  gap: 5px;
  min-height: 150px;
  padding: 14px;
  border: 2px solid #c5d2df;
  border-radius: 15px;
  color: #233f51;
  background: #f8fbff;
  cursor: pointer;
  text-align: left;
}

.learning-scenario-picker button[aria-pressed="true"] {
  border-color: #7964d3;
  background: #f0edff;
  box-shadow: 0 8px 18px rgba(92, 75, 175, .12);
}

.learning-scenario-picker button small {
  color: #7258b1;
  font-weight: 900;
}

.learning-scenario-picker button b {
  font-size: 16px;
}

.learning-scenario-picker button span {
  color: #647782;
  font-size: 12px;
  line-height: 1.55;
}

.learning-evidence-levels {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

.learning-evidence-levels article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid #c5dad9;
  border-left: 7px solid #55a99e;
  border-radius: 16px;
  background: #fff;
}

.learning-evidence-levels article[data-level="game"] { border-left-color: #e1a43a; }
.learning-evidence-levels article[data-level="scenario"] { border-left-color: #936dd8; }

.learning-evidence-levels article > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  background: #255d62;
  font-size: 16px;
  font-weight: 1000;
}

.learning-evidence-levels b {
  font-size: 17px;
}

.learning-evidence-levels p {
  margin: 5px 0 0;
  color: var(--learn-muted);
  font-size: 13px;
  line-height: 1.65;
}

.learning-source-list {
  gap: 9px !important;
  margin: 12px 0 !important;
}

.learning-source-list a,
.learning-source-list article {
  min-height: 90px;
  padding: 15px 17px !important;
  border-radius: 15px !important;
}

.learning-source-list b {
  font-size: 15px !important;
}

.learning-source-list span {
  margin-top: 5px;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.learning-action-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin-top: 16px !important;
  padding: 16px !important;
  border: 1px solid #a7cac5 !important;
  border-radius: 20px !important;
  background: linear-gradient(110deg, #edfdf7, #fff) !important;
  box-shadow: 0 12px 28px rgba(30, 78, 75, .08);
}

.learning-claim-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fff9d9;
}

.learning-claim-copy small {
  grid-row: 1 / 3;
  color: #9b691e;
  font-weight: 1000;
}

.learning-claim-copy b {
  font-size: 16px;
}

.learning-claim-copy span {
  color: #695e45;
  font-size: 13px;
}

.learning-action-row button {
  min-height: 52px;
  padding: 12px 16px !important;
  border: 2px solid #64a99e !important;
  border-radius: 14px !important;
  color: #194e4d !important;
  background: #fff !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 900;
}

.learning-action-row button:hover {
  background: #e7fff6 !important;
}

.learning-action-row button.is-primary {
  color: #fff !important;
  background: linear-gradient(105deg, #177564, #2e9c7c) !important;
  box-shadow: 0 8px 16px rgba(27, 117, 97, .2);
}

/* Affordable project screen */

.affordable-studio {
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
  color: var(--learn-ink);
}

.affordable-guide,
.affordable-preset-step,
.affordable-input-panel,
.affordable-result-panel,
.affordable-evidence,
.affordable-next-actions,
.affordable-game-link,
.affordable-method-note {
  border: 1px solid #c5dbda;
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(38, 77, 80, .07);
}

.affordable-guide {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  color: #fff;
  background: linear-gradient(115deg, #153f4b, #22665e 55%, #5b5789);
}

.affordable-guide h3 {
  margin: 5px 0;
  font-size: 25px;
}

.affordable-guide p {
  max-width: 760px;
  margin: 0;
  color: #d3e8e5;
  font-size: 13px;
  line-height: 1.65;
}

.affordable-guide > div > small {
  color: #8be8d5;
  font-weight: 1000;
}

.affordable-guide ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.affordable-guide li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 8px;
  min-width: 130px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .07);
}

.affordable-guide li > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #173d44;
  background: var(--learn-yellow);
  font-weight: 1000;
}

.affordable-guide li b {
  font-size: 13px;
}

.affordable-guide li small {
  color: #c5dedb;
  font-size: 11px !important;
}

.affordable-preset-step,
.affordable-evidence,
.affordable-next-actions {
  padding: 18px;
}

.affordable-preset-step > header,
.affordable-input-panel > header,
.affordable-result-panel > header,
.affordable-evidence > header,
.affordable-next-actions > header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 13px;
}

.affordable-preset-step > header > span,
.affordable-input-panel > header > span,
.affordable-result-panel > header > span,
.affordable-evidence > header > span,
.affordable-next-actions > header > span {
  align-self: start;
  padding: 6px 8px;
  border-radius: 9px;
  color: #fff;
  background: #27756c;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.affordable-preset-step header b,
.affordable-input-panel header b,
.affordable-result-panel header b,
.affordable-evidence header b,
.affordable-next-actions header b {
  font-size: 17px;
}

.affordable-preset-step header p,
.affordable-input-panel header p,
.affordable-result-panel header p,
.affordable-evidence header p,
.affordable-next-actions header p {
  margin: 4px 0 0;
  color: var(--learn-muted);
  font-size: 13px;
  line-height: 1.5;
}

.affordable-presets {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 9px !important;
}

.affordable-presets button {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 14px !important;
  border: 2px solid #b8d4d0 !important;
  border-radius: 15px !important;
  color: #234f54 !important;
  background: #f6fbf9 !important;
  cursor: pointer;
  text-align: left;
}

.affordable-presets button::after {
  justify-self: end;
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  content: "→";
  font-size: 20px;
}

.affordable-presets button:hover,
.affordable-presets button.is-selected {
  border-color: #2b8275 !important;
  background: #e7fbf3 !important;
}

.affordable-presets button.is-selected::after {
  content: "✓";
}

.affordable-presets button b {
  font-size: 15px;
}

.affordable-presets button small {
  color: #617d7f;
  font-size: 12px !important;
}

.affordable-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
  gap: 14px;
  align-items: start;
}

.affordable-input-panel,
.affordable-result-panel {
  padding: 18px;
}

.affordable-result-panel {
  position: relative;
}

.affordable-inputs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.affordable-input {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  min-width: 0;
  padding: 12px !important;
  border: 1px solid #c8ddda !important;
  border-radius: 14px !important;
  background: #f9fcfb !important;
}

.affordable-input > span {
  display: flex !important;
  gap: 6px;
  align-items: baseline;
}

.affordable-input > span b {
  color: #254c52;
  font-size: 13px;
  line-height: 1.35;
}

.affordable-input > span em {
  color: #758c8e;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.affordable-input input {
  grid-row: auto;
  grid-column: 1;
  width: 100% !important;
  min-height: 44px;
  padding: 8px 10px !important;
  border: 2px solid #81aaa5 !important;
  border-radius: 10px !important;
  color: #173f44 !important;
  background: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-align: right;
}

.affordable-input input:focus {
  border-color: #17856f !important;
  outline: 3px solid rgba(23, 133, 111, .16);
}

.affordable-input > small {
  color: #6a8587;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.affordable-advanced {
  margin-top: 10px;
  border: 1px solid #c8dbd9;
  border-radius: 15px;
  background: #f2f8f6;
}

.affordable-advanced summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 14px;
  cursor: pointer;
}

.affordable-advanced summary b {
  color: #24545a;
  font-size: 14px;
}

.affordable-advanced summary small {
  color: #687f83;
  font-size: 11px !important;
}

.affordable-advanced[open] summary {
  border-bottom: 1px solid #c8dbd9;
}

.affordable-advanced .affordable-inputs {
  padding: 10px;
}

.affordable-decision {
  display: grid !important;
  gap: 6px !important;
  padding: 18px !important;
  border: 2px solid var(--decision, #d4a038) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--decision, #d4a038) 9%, #fff) !important;
}

.affordable-decision[data-tone="danger"] { --decision: #dc5665; }
.affordable-decision[data-tone="warning"] { --decision: #d9992e; }
.affordable-decision[data-tone="good"] { --decision: #2ca279; }

.affordable-decision > small {
  color: var(--decision) !important;
  font-weight: 1000;
  letter-spacing: .08em;
}

.affordable-decision > strong {
  color: var(--decision) !important;
  font-size: 35px !important;
  line-height: 1 !important;
}

.affordable-decision > b {
  color: #244d52 !important;
  font-size: 18px !important;
}

.affordable-decision > p {
  margin: 0 !important;
  color: #5a7376 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.affordable-readiness {
  margin-top: 10px;
  padding: 13px;
  border-radius: 15px;
  background: #eef6f4;
}

.affordable-readiness > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.affordable-readiness small {
  color: #3b7370;
  font-weight: 1000;
}

.affordable-readiness strong {
  font-size: 18px;
}

.affordable-readiness > div:nth-child(2) {
  height: 9px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #c9dedb;
}

.affordable-readiness i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e17c57, #e2c440 50%, #3ab78c);
  transition: width .18s ease;
}

.affordable-readiness p {
  margin: 7px 0 0;
  color: #698184;
  font-size: 11px;
  line-height: 1.45;
}

.affordable-checks {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.affordable-checks article {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e4b6b9;
  border-radius: 13px;
  background: #fff5f5;
}

.affordable-checks article[data-pass="true"] {
  border-color: #a9d7c6;
  background: #f0fbf6;
}

.affordable-checks article > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #d45e68;
  font-weight: 1000;
}

.affordable-checks article[data-pass="true"] > span {
  background: #2ba37a;
}

.affordable-checks article b,
.affordable-checks article small {
  display: block;
}

.affordable-checks article b {
  font-size: 13px;
}

.affordable-checks article small {
  margin-top: 2px;
  color: #718486;
  font-size: 12px !important;
}

.affordable-checks article > strong {
  color: #294e54;
  font-size: 13px;
  white-space: nowrap;
}

.affordable-drivers {
  margin-top: 10px;
  padding: 13px;
  border-radius: 15px;
  background: #fff7df;
}

.affordable-drivers > small {
  color: #a16920;
  font-weight: 1000;
}

.affordable-drivers ol,
.affordable-next-actions ol {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.affordable-drivers li,
.affordable-next-actions li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  color: #4b5f60;
  font-size: 12px;
  line-height: 1.45;
}

.affordable-drivers li span,
.affordable-next-actions li span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: #bd7c26;
  font-weight: 1000;
}

.affordable-gates {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.affordable-gate {
  display: grid !important;
  grid-template-columns: 24px 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  min-height: 76px;
  padding: 12px !important;
  border: 1px solid #cbdcdb !important;
  border-radius: 14px !important;
  background: #f8fbfa !important;
  cursor: pointer;
}

.affordable-gate.is-required {
  border-color: #e2b5a9 !important;
  background: #fff8f5 !important;
}

.affordable-gate:has(input:checked) {
  border-color: #61b89e !important;
  background: #ecfbf4 !important;
}

.affordable-gate input {
  width: 20px !important;
  height: 20px !important;
  margin: 1px 0 0 !important;
  accent-color: #238a70;
}

.affordable-gate b,
.affordable-gate small {
  display: block !important;
}

.affordable-gate b {
  color: #2b5156 !important;
  font-size: 13px !important;
  line-height: 1.35;
}

.affordable-gate b em {
  padding: 2px 5px;
  border-radius: 999px;
  color: #9c413e;
  background: #ffe4df;
  font-size: 11px;
  font-style: normal;
}

.affordable-gate small {
  margin-top: 4px;
  color: #6c8284 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.affordable-evidence > header > strong {
  font-size: 16px;
}

.affordable-next-actions li {
  padding: 10px;
  border-radius: 13px;
  background: #eef7f5;
}

.affordable-next-actions li span {
  background: #377f78;
}

.affordable-next-actions li p {
  margin: 0;
  font-size: 13px;
}

.affordable-game-link {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 18px !important;
  color: #fff !important;
  background: linear-gradient(115deg, #173f4c, #345d7a 55%, #795785) !important;
}

.affordable-game-link small,
.affordable-game-link b,
.affordable-game-link p {
  display: block;
}

.affordable-game-link small {
  color: #8de7da;
  font-weight: 1000;
}

.affordable-game-link b {
  margin-top: 4px;
  font-size: 17px;
}

.affordable-game-link p {
  margin: 5px 0 0;
  color: #d0e0e4;
  font-size: 12px;
  line-height: 1.55;
}

.affordable-game-link button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  min-width: 210px;
  padding: 10px 14px !important;
  border: 2px solid rgba(255, 255, 255, .55) !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .1) !important;
  cursor: pointer;
}

.affordable-game-link button[aria-pressed="true"] {
  color: #173f45 !important;
  background: #8de7bd !important;
}

.affordable-game-link button span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border-radius: 999px;
  color: #153b43;
  background: var(--learn-yellow);
  font-weight: 1000;
}

.affordable-game-link button b {
  margin: 0;
  font-size: 13px;
}

.affordable-method-note {
  padding: 15px 18px;
  border-left: 6px solid #d1a34b;
  border-radius: 3px 16px 16px 3px;
  background: #fffbec;
}

.affordable-method-note b {
  color: #795d26;
  font-size: 13px;
}

.affordable-method-note p {
  margin: 5px 0 0;
  color: #6d684e;
  font-size: 12px;
  line-height: 1.65;
}

/* Learning effects in the game */

.learning-transfer-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 10px 13px;
  border: 1px solid #79c5b5;
  border-radius: 15px;
  color: #173e45;
  background: linear-gradient(100deg, #e6fff5, #fff9df);
}

.learning-transfer-ribbon > span {
  padding: 5px 7px;
  border-radius: 8px;
  color: #fff;
  background: #24756b;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
}

.learning-transfer-ribbon > b {
  margin-right: 3px;
  font-size: 13px;
}

.learning-transfer-ribbon > div {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 5px;
}

.learning-transfer-ribbon em {
  padding: 5px 7px;
  border-radius: 999px;
  color: #235851;
  background: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.learning-transfer-ribbon button {
  padding: 7px 10px;
  border: 1px solid #4d9f91;
  border-radius: 999px;
  color: #245c55;
  background: #fff;
  cursor: pointer;
  font-size: 11px !important;
  font-weight: 900;
}

/* Sorting: explain why, not only what. */

.sort-why-card {
  display: grid;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 18px 20px;
  border: 1px solid rgba(111, 218, 197, .42);
  border-radius: 21px;
  color: #eafffb;
  background:
    radial-gradient(circle at 95% 15%, rgba(255, 216, 97, .16), transparent 25%),
    linear-gradient(115deg, rgba(15, 58, 65, .96), rgba(31, 88, 81, .96));
  box-shadow: 0 14px 28px rgba(5, 29, 36, .16);
}

.sort-why-card header span {
  color: #8ff0d8;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.sort-why-card h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 22px;
}

.sort-why-card > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sort-why-card article {
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}

.sort-why-card article b {
  color: #fff6a7;
  font-size: 14px;
}

.sort-why-card article p,
.sort-why-card > p {
  margin: 5px 0 0;
  color: #cfe5e1;
  font-size: 12px;
  line-height: 1.55;
}

.sort-current-why {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(113, 221, 194, .55);
  border-radius: 13px;
  background: rgba(21, 77, 75, .82);
  text-align: left;
}

.sort-current-why small {
  color: #9ee9d8 !important;
  font-weight: 1000;
  letter-spacing: .08em;
}

.sort-current-why b {
  color: #fff5a4;
  font-size: 14px;
}

.sort-current-why p {
  margin: 0 !important;
  color: #d9eeea !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.sort-feedback aside {
  margin-top: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  color: #284f50;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.55;
}

.sort-feedback > div > small {
  display: block;
  margin-top: 6px;
  color: #6a7f80;
  font-size: 11px !important;
}

/* Crew: readable copy, proportional art and fast backdrop. */

.crew-backdrop {
  background: rgba(1, 10, 18, .84) !important;
  backdrop-filter: none !important;
}

.crew-dialog {
  width: min(1320px, 96vw) !important;
}

.crew-dialog > header p {
  max-width: 850px !important;
  color: #56747c !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

.crew-tabs button {
  min-height: 44px;
  padding: 10px 16px !important;
  font-size: 13px !important;
}

.crew-choice-explainer b {
  font-size: 12px !important;
}

.crew-choice-explainer p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.crew-grid {
  gap: 13px !important;
}

.crew-card {
  grid-template-columns: 190px minmax(0, 1fr) auto !important;
  gap: 16px !important;
  min-height: 330px !important;
  padding: 16px !important;
}

.crew-card-portrait {
  width: 188px !important;
  height: 158px !important;
  border-radius: 30px !important;
  background-size: 300% 200%, cover !important;
}

.crew-card-heading small {
  font-size: 12px !important;
}

.crew-card-heading strong {
  font-size: 26px !important;
}

.crew-card-heading i {
  padding: 5px 8px !important;
  font-size: 11px !important;
  white-space: normal !important;
}

.crew-card-detail {
  gap: 4px !important;
  padding: 8px 10px !important;
}

.crew-card-detail b {
  font-size: 11px !important;
}

.crew-card-detail em {
  color: #405f66 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.crew-card-check {
  padding: 7px 9px !important;
  font-size: 11px !important;
}

.crew-choice-footer span,
.crew-choice-footer span small {
  font-size: 12px !important;
}

.crew-choice-footer span b {
  font-size: 14px !important;
}

.crew-choice-footer button {
  min-height: 48px;
  font-size: 14px !important;
}

.crew-preview small,
.crew-preview > i,
.crew-coach small,
.crew-coach-more,
.crew-button small {
  font-size: 11px !important;
}

.crew-preview b,
.crew-coach b {
  font-size: 14px !important;
}

.crew-preview em,
.crew-coach p {
  font-size: 12px !important;
}

.crew-button > span.crew-face,
.crew-preview-avatar.crew-face,
.crew-coach-avatar.crew-face {
  background-size: 355% 200%, cover !important;
}

.scrapbook-hero small,
.scrap-zone b,
.scrap-zone small,
.scrap-card > small,
.scrap-card footer,
.scrap-card footer span,
.scrap-card footer b,
.crew-result-copy > small,
.crew-result-copy span,
.crew-result-badge small,
.crew-result-badge span {
  font-size: 11px !important;
}

.scrapbook-hero p,
.scrap-card p,
.crew-result-copy p {
  font-size: 13px !important;
}

/* Atlas crew speeches */

.fd-crew-portrait {
  background-size: 355% 200%, cover !important;
}

.fd-crew-list-head .fd-crew-portrait--hero {
  width: 170px !important;
  height: 145px !important;
  background-size: 300% 200%, cover !important;
}

.fd-crew-meta b {
  font-size: 15px !important;
}

.fd-crew-meta small,
.fd-crew-meta i {
  font-size: 11px !important;
}

.fd-speech-card {
  align-items: start !important;
  padding: 16px !important;
}

.fd-speech-copy > span {
  color: var(--fd-crew) !important;
  font-size: 11px !important;
  font-weight: 1000 !important;
  letter-spacing: .07em;
}

.fd-speech-copy h4 {
  margin-top: 5px !important;
  font-size: 19px !important;
  line-height: 1.35 !important;
}

.fd-speech-copy > small {
  display: block;
  margin-top: 3px;
  color: #738588 !important;
  font-size: 12px !important;
}

.fd-speech-copy blockquote {
  margin: 11px 0 0;
  padding: 12px 14px;
  border: 0;
  border-left: 5px solid var(--fd-crew);
  border-radius: 0 13px 13px 0;
  background: color-mix(in srgb, var(--fd-crew) 8%, #fff);
}

.fd-speech-copy blockquote > b {
  display: block;
  color: color-mix(in srgb, var(--fd-crew) 72%, #283e43);
  font-size: 15px;
  line-height: 1.55;
}

.fd-speech-copy blockquote p {
  margin: 7px 0 0 !important;
  color: #4d6569 !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

.fd-speech-watch {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 11px;
  background: #fff8d9;
}

.fd-speech-watch small {
  color: #a26f22 !important;
  font-size: 11px !important;
  font-weight: 1000;
}

.fd-speech-watch b {
  color: #625333;
  font-size: 12px;
  line-height: 1.45;
}

.fd-passion-meter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.fd-passion-meter > span,
.fd-passion-meter > strong {
  color: color-mix(in srgb, var(--fd-crew) 72%, #2f4b51);
  font-size: 11px;
  font-weight: 1000;
}

.fd-passion-meter > i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e0e9e8;
}

.fd-passion-meter > i > b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fd-crew), var(--fd-accent));
}

.fd-speech-more {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  width: min(520px, 100%);
  min-height: 54px;
  margin: 18px auto 2px;
  padding: 12px 16px;
  border: 2px solid var(--fd-crew);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(100deg, color-mix(in srgb, var(--fd-crew) 70%, #224c56), #274f59);
  cursor: pointer;
}

.fd-speech-more b {
  font-size: 14px;
}

.fd-speech-more small {
  color: #fff !important;
}

.fd-detail-speeches article h5 {
  font-size: 15px !important;
}

.fd-detail-speeches article p {
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.fd-detail-speeches article em {
  display: block;
  margin-top: 6px;
  color: #866522;
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .learning-teacher {
    grid-template-columns: 160px 1fr;
  }
  .learning-teacher-effect {
    grid-column: 1 / 3;
  }
  .learning-future-timeline {
    grid-template-columns: repeat(5, 240px);
  }
  .affordable-workbench {
    grid-template-columns: 1fr;
  }
  .affordable-result-panel {
    position: static;
  }
  .crew-card {
    grid-template-columns: 170px minmax(0, 1fr) auto !important;
  }
  .crew-card-portrait {
    width: 168px !important;
    height: 142px !important;
  }
}

@media (max-width: 900px) {
  .learning-workspace {
    padding: 0 16px;
  }
  .learning-start-guide {
    grid-template-columns: 1fr;
  }
  .learning-start-guide > strong {
    padding-right: 0;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .24);
  }
  .learning-shell {
    grid-template-columns: 1fr !important;
  }
  .learning-topic-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .learning-teacher {
    grid-template-columns: 150px 1fr;
  }
  .learning-card-grid,
  .learning-flow-grid,
  .sort-why-card > div {
    grid-template-columns: 1fr !important;
  }
  .learning-atlas-hero {
    grid-template-columns: 1fr;
  }
  .learning-atlas-visual {
    min-height: 300px;
  }
  .learning-action-row {
    grid-template-columns: 1fr !important;
  }
  .learning-scenario-picker > div {
    grid-template-columns: 1fr;
  }
  .affordable-guide {
    grid-template-columns: 1fr;
  }
  .affordable-presets,
  .affordable-gates {
    grid-template-columns: 1fr !important;
  }
  .crew-card {
    grid-template-columns: 150px minmax(0, 1fr) !important;
  }
  .crew-card-portrait {
    width: 148px !important;
    height: 125px !important;
  }
  .crew-card-check {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  #game small,
  .app-menu small,
  .crew-modal small,
  .fd-modal small {
    font-size: 11px !important;
  }
  .learning-hero {
    padding: 26px 16px 18px !important;
  }
  .learning-start-guide ol {
    grid-template-columns: 1fr;
  }
  .learning-topic-nav {
    display: flex !important;
    overflow-x: auto;
    padding: 8px !important;
    scroll-snap-type: x mandatory;
  }
  .learning-topic-nav button {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }
  .learning-teacher {
    grid-template-columns: 118px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .learning-teacher-portrait {
    min-height: 118px;
  }
  .learning-teacher-copy h3 {
    font-size: 24px;
  }
  .learning-teacher-copy p {
    font-size: 14px;
  }
  .learning-teacher-copy em {
    display: none;
  }
  .learning-teacher-effect {
    grid-column: 1 / 3;
  }
  .learning-section-head {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
  .learning-complete-chip {
    justify-self: start;
  }
  .learning-quiz-options,
  .process-map,
  .learning-atlas-actions {
    grid-template-columns: 1fr !important;
  }
  .process-explainer {
    grid-template-columns: 1fr !important;
  }
  .learning-atlas-visual {
    min-height: 220px;
  }
  .affordable-guide ol {
    grid-template-columns: 1fr;
  }
  .affordable-inputs {
    grid-template-columns: 1fr !important;
  }
  .affordable-input {
    grid-template-columns: 1fr 104px !important;
  }
  .affordable-game-link {
    grid-template-columns: 1fr !important;
  }
  .affordable-game-link button {
    width: 100%;
  }
  .crew-dialog > header p {
    font-size: 13px !important;
  }
  .crew-card {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 11px !important;
  }
  .crew-card-portrait {
    width: 116px !important;
    height: 98px !important;
  }
  .crew-card-heading strong {
    font-size: 22px !important;
  }
  .crew-card-copy {
    display: contents !important;
  }
  .crew-card-heading {
    grid-column: 2;
  }
  .crew-card-detail {
    grid-column: 1 / 3;
  }
  .crew-card-detail em {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learning-topic-nav button,
  .atlas-learning-title-button,
  .future-learning-entry,
  .affordable-readiness i {
    transition: none !important;
  }
}

/* Version 19 — real-evidence learning, readable type and identity-safe Crew art */

body small {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body :where(label, input, select, textarea, td, th) {
  font-size: 14px !important;
}

button:not(:disabled),
a[href] {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed !important;
  opacity: .56 !important;
  filter: saturate(.55);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 4px solid #ffe36e !important;
  outline-offset: 3px !important;
}

.learning-teacher-portrait {
  align-self: center !important;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 1.22 / 1;
  background-image: url("assets/meguru-crew-learning-v3.webp"), linear-gradient(135deg, var(--teacher), var(--teacher-accent)) !important;
  background-size: 300% 200%, cover !important;
}

.learning-teacher-copy > small,
.learning-teacher-effect > small,
.learning-section-head small,
.learning-do-next small,
.learning-complete-chip,
.learning-caution {
  font-size: 13px !important;
}

.learning-teacher-copy p,
.learning-teacher-effect b,
.learning-section-head p,
.learning-card-grid p,
.learning-flow-grid p,
.learning-do-next b,
.learning-atlas-hero p,
.learning-atlas-hero li,
.learning-atlas-actions button,
.learning-evidence-levels p,
.learning-source-list span {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.learning-topic-nav button {
  min-height: 78px;
  border-width: 2px !important;
}

.learning-topic-nav button[aria-current="page"],
.learning-topic-nav button.is-current {
  box-shadow: 0 0 0 4px rgba(255, 227, 110, .72), 0 12px 24px rgba(21, 73, 80, .16) !important;
}

.original-tool-card,
.original-report-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 20px;
  align-items: center;
  margin: 14px 0;
  padding: clamp(20px, 3vw, 30px);
  border: 2px solid #55b8a7;
  border-radius: 24px;
  color: #173f46;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 224, 125, .46), transparent 30%),
    linear-gradient(135deg, #fff, #effbf7);
  box-shadow: 0 18px 42px rgba(28, 85, 83, .12);
}

.original-report-card {
  border-color: #5e9ce6;
  background:
    radial-gradient(circle at 94% 10%, rgba(143, 205, 255, .42), transparent 30%),
    linear-gradient(135deg, #fff, #f0f6ff);
}

.original-tool-card h4,
.original-report-card h4 {
  margin: 6px 0 12px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
}

.original-tool-card p,
.original-report-card p,
.original-tool-card li {
  font-size: 14px !important;
  line-height: 1.7;
}

.original-tool-open {
  display: grid;
  gap: 8px;
  min-height: 116px;
  align-content: center;
  padding: 20px;
  border: 3px solid #fff;
  border-radius: 20px;
  color: #fff !important;
  background: linear-gradient(120deg, #176c6b, #299a7d);
  box-shadow: 0 12px 26px rgba(24, 99, 91, .24);
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.original-report-card .original-tool-open {
  background: linear-gradient(120deg, #315ba7, #5c7ed9);
}

.original-tool-open:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(24, 99, 91, .28);
}

.original-tool-open b {
  font-size: 19px;
  line-height: 1.4;
}

.original-tool-open span {
  font-size: 14px;
  font-weight: 800;
}

.market-evidence-banner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.market-evidence-banner > div {
  display: grid;
  gap: 5px;
  min-height: 150px;
  align-content: center;
  padding: 18px;
  border: 1px solid #b8d6e7;
  border-radius: 19px;
  background: linear-gradient(145deg, #fff, #eef8ff);
}

.market-evidence-banner b {
  color: #49656f;
  font-size: 14px;
}

.market-evidence-banner strong {
  color: #265fa7;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
}

.market-reading-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.market-reading-grid article {
  position: relative;
  min-height: 190px;
  padding: 22px 22px 20px 70px;
  border: 1px solid #c7dddb;
  border-radius: 19px;
  background: #fff;
}

.market-reading-grid article > span {
  position: absolute;
  top: 20px;
  left: 18px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #287a75;
  font-size: 15px;
  font-weight: 1000;
}

.market-reading-grid h4 {
  margin: 0 0 8px;
  font-size: 19px;
}

.market-reading-grid p {
  margin: 0;
  color: #506d73;
  font-size: 14px !important;
  line-height: 1.7;
}

[data-tone="scenario"] { --future-tone: #7d65c7; }
[data-tone="adjacent"] { --future-tone: #60737d; }

.learning-future-timeline {
  grid-template-columns: repeat(5, minmax(260px, 1fr));
}

.learning-future-timeline article {
  min-height: 440px;
}

.learning-future-timeline article > small {
  font-size: 13px !important;
}

.learning-future-timeline h4 {
  font-size: 20px;
  line-height: 1.35;
}

.learning-future-timeline p,
.learning-future-timeline a {
  font-size: 14px !important;
  line-height: 1.7;
}

.learning-future-timeline a {
  align-self: end;
  margin-top: 16px;
  padding: 10px 12px;
  border: 2px solid var(--future-tone);
  border-radius: 12px;
  color: color-mix(in srgb, var(--future-tone) 78%, #173a42);
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}

.learning-evidence-levels article[data-level="dataset"] { border-left-color: #348ec5; }
.learning-evidence-levels article[data-level="calculation"] { border-left-color: #df9d36; }

.fd-crew-portrait {
  background-image: url("assets/meguru-crew-atlas-v3.webp"), linear-gradient(145deg, var(--fd-crew, #55d9ef), var(--fd-accent, #ffe07d)) !important;
  background-size: 300% 200%, cover !important;
}

.fd-crew-picker > button {
  min-height: 248px;
}

.fd-crew-meta b {
  font-size: 18px !important;
}

.fd-crew-meta small,
.fd-crew-meta em,
.fd-crew-meta i {
  display: block;
  color: #536f77;
  font-size: 13px !important;
  font-style: normal;
  line-height: 1.4;
}

.fd-crew-picker > button[aria-selected="true"] .fd-crew-meta em {
  color: rgba(255, 255, 255, .82);
}

.fd-crew-list-head p,
.fd-crew-identity {
  font-size: 14px !important;
}

.fd-crew-identity {
  color: var(--fd-accent) !important;
  font-weight: 850;
}

.fd-speech-card {
  min-height: 0 !important;
  padding-block: 22px !important;
}

.fd-speech-copy > span {
  font-size: 13px !important;
}

.fd-speech-copy h4.fd-speech-plant {
  margin: 5px 0 3px !important;
  color: #153d47 !important;
  font-size: clamp(24px, 2.3vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
}

.fd-speech-copy h5 {
  margin: 4px 0 0;
  color: color-mix(in srgb, var(--fd-crew) 75%, #263f46);
  font-size: 18px;
  line-height: 1.45;
}

.fd-speech-copy blockquote > b {
  font-size: 15px !important;
}

.fd-speech-copy blockquote p {
  font-size: 14px !important;
}

.fd-speech-copy blockquote p strong {
  display: block;
  margin-bottom: 3px;
  color: #24545e;
  font-size: 13px;
  letter-spacing: .04em;
}

.fd-speech-question {
  padding-top: 9px;
  border-top: 1px dashed color-mix(in srgb, var(--fd-crew) 40%, #ccd9da);
}

.fd-speech-watch small,
.fd-speech-watch b,
.fd-passion-meter,
.fd-speech-card > button {
  font-size: 13px !important;
}

.fd-speech-source {
  display: inline-flex;
  align-items: center;
  margin-top: 9px;
  padding: 8px 11px;
  border: 2px solid color-mix(in srgb, var(--fd-crew) 65%, #8da5a8);
  border-radius: 10px;
  color: color-mix(in srgb, var(--fd-crew) 68%, #23464d);
  background: #fff;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
}

.fd-detail-speeches p,
.fd-detail-speeches em,
.fd-detail-speeches small,
.fd-detail-speeches a {
  font-size: 13px !important;
  line-height: 1.65;
}

.future-tech-card small,
.future-tech-card i,
.future-operation-meter span,
.future-operation-meter p,
.future-result p,
.future-result-metrics span {
  font-size: 13px !important;
  line-height: 1.55;
}

.future-tech-card > b {
  font-size: 17px !important;
  line-height: 1.35;
}

.future-tech-card .future-game-only {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, .28);
  color: #ffe88d;
  font-weight: 900;
}

@media (max-width: 900px) {
  .original-tool-card,
  .original-report-card,
  .market-evidence-banner,
  .market-reading-grid {
    grid-template-columns: 1fr;
  }
  .market-evidence-banner > div {
    min-height: 118px;
  }
  .fd-crew-picker > button {
    min-height: 165px;
  }
}

@media (max-width: 620px) {
  #game small,
  .app-menu small,
  .crew-modal small,
  .fd-modal small {
    font-size: 13px !important;
  }
  .learning-teacher-portrait {
    min-height: 0 !important;
    aspect-ratio: 1.18 / 1;
  }
  .learning-topic-nav button {
    flex-basis: 235px;
  }
  .market-reading-grid article {
    padding: 68px 18px 18px;
  }
  .fd-crew-picker > button {
    min-height: 156px;
  }
  .fd-speech-copy h4.fd-speech-plant {
    font-size: 24px !important;
  }
  .fd-speech-copy h5 {
    font-size: 17px;
  }
}

/* V19 final readability guard.
   Keep all meaningful interface copy readable after every responsive override. */
body small {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.topbar button,
.topbar button span,
.topbar button b,
.topbar button small,
.language-toggle,
.language-toggle span,
.app-menu-button,
.app-menu-button b,
.app-menu-button small,
.app-menu-dialog p,
.app-menu-dialog button,
.app-menu-dialog button span,
.app-menu-dialog button b,
.app-menu-dialog button small,
.app-menu-dialog a,
.app-menu-dialog a span,
.app-menu-dialog a b,
.app-menu-dialog a small,
.best-score,
.sound-control,
.sound-control span {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.app-menu-header p {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.title-screen .eyebrow,
.family-kicker,
.family-kicker span,
.title-entry-guide > header small,
.title-entry-guide > header p,
.experience-choice-number,
.experience-choice-card small,
.experience-choice-card em,
.experience-choice-card i,
.experience-choice-card strong,
.experience-synergy-note,
.game-preview-strip small,
.game-preview-strip em,
.scene-kpi small,
.scene-kpi span,
.love-preview span,
.crew-preview small,
.crew-preview em,
.crew-preview i,
.hype-tags span,
.run-preview small,
.run-preview em {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.title-entry-guide > header p,
.experience-choice-card em,
.experience-synergy-note,
.crew-preview em {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.learning-studio p,
.learning-studio li,
.learning-studio button,
.learning-studio a,
.fd-modal p,
.fd-modal li,
.fd-modal button,
.fd-modal a,
.crew-modal p,
.crew-modal li,
.crew-modal button,
.guide-modal p,
.guide-modal li,
.guide-modal button,
.top10-modal p,
.top10-modal li,
.top10-modal button {
  font-size: max(13px, 0.8125rem) !important;
}

.future-tech-card small,
.draft-card small,
.draft-card-evidence,
.future-operation-meter span,
.future-operation-meter p,
.future-result p,
.future-result-metrics span {
  font-size: 13px !important;
  line-height: 1.55 !important;
}