/* Ignite pinboard: expressive discovery surfaces, quiet learning surfaces.
   Official, unmodified Fontshare webfonts. See assets/fonts/*-FFL.txt. */
@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/satoshi-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("./assets/fonts/cabinet-grotesk-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-body: "Satoshi", "Segoe UI", sans-serif;
  --font-display: "Cabinet Grotesk", "Satoshi", sans-serif;
  --board-paper: #f7f2e8;
  --board-line: #e4ddce;
  --note-yellow: #fff0a6;
  --note-blue: #ccecf8;
  --note-mint: #d9f1ce;
  --note-edge: #f0cf34;
}
body {
  font-family: var(--font-body);
  background-color: var(--board-paper);
  background-image: radial-gradient(#bdb5a3 0.65px, transparent 0.65px);
  background-size: 22px 22px;
}
body .hero-copy h1,
body .hero-preview h2,
body .section-heading h2,
body .coverage-copy h2,
body .admission-intro h2,
body .login-card h2,
body .login-setup h4,
body .admitted-card h3,
body .dialog-card h2,
body .support-banner h2,
body .mission-card h2,
body .form-heading span,
body .proof-strip strong {
  font-family: var(--font-display);
  font-weight: 800;
}
body .hero-copy h1 { line-height: 1.04; letter-spacing: -.035em; }
body .hero-preview h2 { font-size: clamp(32px, 3.1vw, 44px); line-height: 1.06; letter-spacing: -.025em; }
body .demo-result h3,
body .question-card > p:not(.feedback),
body .rescue-challenge legend,
body .follow-up-heading h3,
body .learning-workspace,
body .demo-game-hub,
body .learning-review { font-family: var(--font-body); }

/* Text-only identity and an open editorial introduction, not a filled hero box. */
.landing-header, .topbar { min-height: 94px; height: auto; padding: 15px clamp(20px, 4vw, 60px); background: #fcf9f1f5; border-bottom: 2px solid #10243e; gap: 20px; }
.landing-header .landing-brand, .topbar .brand { display: grid; flex: 0 0 auto; gap: 5px; text-decoration: none; line-height: 1; }
.wordmark-project { display: block; margin: 0; color: #354658; font-family: var(--font-body); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .38em; }
.wordmark-ignite { display: block; color: #10243e; font-family: var(--font-body); font-size: 33px; font-weight: 900; font-style: normal; letter-spacing: .055em; transform: none; }
.landing-nav { gap: 12px; }
.landing-nav a { gap: 9px; padding: 0 10px; font-size: 14px; border-radius: 5px; }
.landing-nav .nav-index { font-size: 10px; color: #9b482e; font-weight: 800; }
.landing-nav .admissions-open { display: none; }
.landing-nav .nav-cta { border: 1px solid #10243e; box-shadow: 3px 3px 0 #10243e; padding: 0 16px; }
.landing-nav .nav-cta span { margin-left: 4px; font-size: 20px; }
.nav-login { border-radius: 5px; background: transparent; border-color: #10243e; font-size: 14px; }
.sidebar { top: 94px; height: calc(100dvh - 94px); }
.landing-hero { max-width: 1270px; min-height: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(42px, 6vw, 85px); padding: 76px 32px 72px; overflow: visible; }
.landing-hero::before, .landing-hero::after { content: none; }
.landing-hero .hero-copy { position: relative; color: #10243e; }
.landing-hero .hero-copy .eyebrow { color: #8a452f; font-size: 10px; letter-spacing: .12em; }
body .landing-hero .hero-copy h1 { max-width: 10ch; font-size: clamp(54px, 6.2vw, 86px); font-weight: 900; line-height: .98; letter-spacing: -.045em; }
.landing-hero h1 em { display: inline-block; color: #ab412b; font-style: normal; transform: rotate(-3deg); background: linear-gradient(transparent 72%, #ffd6b6 72%, #ffd6b6 95%, transparent 95%); }
.landing-hero .hero-lead { max-width: 43ch; margin: 28px 0; color: #41536a; font-size: 18px; line-height: 1.65; }
.landing-hero .primary-link { border: 1px solid #10243e; border-radius: 5px; box-shadow: 4px 4px 0 #10243e; min-height: 52px; }
.landing-hero .secondary-link { color: #10243e; border: 0; border-radius: 0; padding: 0 4px; text-decoration: underline; text-underline-offset: 6px; }
.landing-hero .trust-list { color: #41536a; font-size: 12px; gap: 10px 18px; }
.landing-hero .trust-list span { color: #466346; }
.hero-subjects { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px dashed #afa38b; }
.hero-subjects > span { color: #57616c; font-size: 12px; margin-right: 4px; }
.hero-subjects button { min-height: 44px; padding: 8px 12px; color: #10243e; background: #fffaf0; border: 1px solid #b6aa93; border-radius: 4px; cursor: pointer; font-weight: 700; transition: transform 150ms ease; }
.hero-subjects button:hover, .hero-subjects button[aria-pressed="true"] { background: #e8edc7; border-color: #10243e; transform: translateY(-2px); }
.hero-subjects button:focus-visible { outline: 3px solid #10243e; outline-offset: 3px; }
.hero-preview {
  isolation: isolate;
  min-width: 0;
  align-self: center;
  background: repeating-linear-gradient(transparent 0 31px, #ded8ca55 31px 32px), #fffdf7;
  border: 2px solid #a69983;
  border-top: 4px solid #d6e33d;
  border-radius: 5px 15px 6px 13px;
  padding-top: 40px;
  transform: rotate(1deg);
  box-shadow: 7px 9px 0 #e2d6bf, 0 18px 25px #10243e0c;
}
.hero-preview::before,
.coverage-grid .coverage-subject::before,
.app-shell .subject-card::before,
.game-page .chapter-tile::before,
.labs-page .studio-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  width: 85px;
  height: 27px;
  border: 1px solid #f9edc278;
  border-radius: 2px;
  background: #eee2bcdd;
  transform: translateX(-50%) rotate(-5deg);
  pointer-events: none;
}
.hero-preview::before { z-index: 2; width: 110px; height: 31px; }
.hero-preview > * { position: relative; z-index: 1; }
.preview-top { gap: 14px; flex-wrap: wrap; color: #455637; }
.preview-top > span { font-size: 10px; letter-spacing: .14em; }
.preview-top .cutout-badge {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0;
}
.cutout-number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 45px;
  color: #fff4c4;
  background: #102c4e;
  font-size: 35px;
  line-height: 1;
  transform: rotate(-7deg);
  clip-path: polygon(5% 3%, 95% 0, 100% 93%, 0 100%);
}
.cutout-word { display: inline-flex; align-items: center; gap: 1px; }
.cutout-word i {
  display: inline-block;
  padding: 3px 2px;
  color: #10243e;
  background: #dff04f;
  font-style: normal;
  font-size: 14px;
  line-height: 1.25;
  transform: rotate(-4deg);
  clip-path: polygon(4% 0, 100% 4%, 95% 100%, 0 95%);
}
.cutout-word i:nth-child(even) { color: #fff8e7; background: #102c4e; transform: translateY(2px) rotate(5deg); }
.cutout-word i:nth-child(3n) { background: #a9d8f1; color: #10243e; transform: translateY(-2px) rotate(-7deg); }
.hero-preview > p, .hero-preview li small, .hero-preview > small { color: #485a64; }
.hero-preview ol { gap: 12px; margin: 26px 0 22px; }
.hero-preview li { grid-template-columns: 38px minmax(0,1fr); padding: 10px 0; border-bottom: 1px dashed #a99f73; }
.hero-preview li > span { border: 1px solid #10243e26; border-radius: 3px 6px 2px 5px; font-family: var(--font-display); font-size: 20px; background: #ffd76d; transform: rotate(-4deg); }
.hero-preview li:nth-child(2) > span { background: #bce2f4; transform: rotate(3deg); }
.hero-preview li:nth-child(3) > span { background: #cce7b8; transform: rotate(-2deg); }
.hero-preview > small { display: block; max-width: 40ch; font-size: 12px; line-height: 1.5; }

/* Pinboard sections. No animated effects are attached to question controls. */
.step-grid { gap: 22px; }
.step-grid article {
  position: relative;
  background: #fffcf3;
  border: 2px solid #efc92e;
  border-radius: 5px 13px 4px 11px;
  box-shadow: 4px 5px 0 #10243e13;
}
.step-grid article:nth-child(2) { border-color: #48add5; }
.step-grid article:nth-child(3) { border-color: #7bb36c; }
.step-number { background: #fff0a6; border-radius: 3px; font-family: var(--font-display); font-size: 20px; }
.coverage-grid {
  gap: 28px 22px;
  padding: 30px 16px 22px;
  border: 2px solid #decba5;
  border-radius: 10px 17px 12px 7px;
  background: #e9dfca;
  background-image: radial-gradient(#bba987 0.65px, transparent 0.65px);
  background-size: 7px 7px;
}
.coverage-grid .coverage-subject,
.app-shell .subject-card,
.game-page .chapter-tile,
.labs-page .studio-card {
  --note-fill: var(--note-yellow);
  --note-border: #e6b924;
  --note-tilt: -1.5deg;
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 205px;
  padding: 24px 20px 20px;
  color: #10243e;
  border: 2px solid var(--note-border);
  border-bottom-width: 4px;
  border-radius: 3px 5px 18px 3px;
  background: linear-gradient(165deg, #ffffff38, transparent 65%), var(--note-fill);
  text-align: left;
  transform: rotate(var(--note-tilt));
  box-shadow: 3px 5px 0 #10243e12, 0 8px 12px #26364a0c;
  transition: transform 180ms ease, box-shadow 180ms ease;
  animation: note-settle 650ms ease-out backwards;
}
.coverage-grid .coverage-subject[data-subject="Chemistry"],
.app-shell .subject-card[data-subject="Chemistry"],
.game-page .chapter-tile[data-subject="Chemistry"],
.labs-page .studio-card[data-subject="Chemistry"] { --note-fill: var(--note-blue); --note-border: #40add3; --note-tilt: 1.3deg; animation-delay: 70ms; }
.coverage-grid .coverage-subject[data-subject="Biology"],
.app-shell .subject-card[data-subject="Biology"],
.game-page .chapter-tile[data-subject="Biology"],
.labs-page .studio-card[data-subject="Biology"] { --note-fill: var(--note-mint); --note-border: #7bb36c; --note-tilt: -.8deg; animation-delay: 140ms; }
.coverage-grid .coverage-subject[data-subject="Mathematics"],
.app-shell .subject-card[data-subject="Mathematics"],
.game-page .chapter-tile[data-subject="Mathematics"],
.labs-page .studio-card[data-subject="Mathematics"] { --note-fill: #eadff7; --note-border: #a582c7; --note-tilt: 1deg; animation-delay: 210ms; }
.coverage-grid .coverage-subject::before,
.app-shell .subject-card::before,
.game-page .chapter-tile::before,
.labs-page .studio-card::before {
  z-index: 1;
  inset: -12px auto auto 50%;
  padding: 0;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
  animation: none;
}
.coverage-grid .coverage-subject::after,
.app-shell .subject-card::after,
.game-page .chapter-tile::after,
.labs-page .studio-card::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -3px;
  width: 19px;
  height: 19px;
  background: linear-gradient(135deg, #10243e18 49%, var(--board-paper) 51%);
  border-radius: 0 0 14px;
  pointer-events: none;
}
.coverage-grid .coverage-subject:hover,
.coverage-grid .coverage-subject[aria-pressed="true"],
.app-shell .subject-card:hover,
.app-shell .subject-card[aria-pressed="true"],
.game-page .chapter-tile:hover,
.labs-page .studio-card:hover {
  border-color: var(--note-border);
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 4px 9px 0 #10243e1a;
}
.coverage-grid .coverage-subject:focus-visible,
.app-shell .subject-card:focus-visible,
.game-page .chapter-tile:focus-visible,
.labs-page .studio-card:focus-visible { outline: 3px solid #102c4e; outline-offset: 5px; }
.coverage-subject .subject-symbol,
.app-shell .subject-icon {
  width: 50px;
  height: 50px;
  background: #ffffff66;
  border: 1px solid #10243e2e;
  border-radius: 50% 44% 48% 42%;
}
.coverage-subject .subject-symbol svg,
.app-shell .subject-icon svg { width: 29px; height: 29px; }
.coverage-grid .coverage-subject strong,
.app-shell .subject-card strong { font-family: var(--font-display); font-size: 25px; font-weight: 800; line-height: 1.2; }
.coverage-grid .coverage-subject small,
.app-shell .subject-card small { color: #405362; font-size: 13px; }
.coverage-grid .coverage-planned {
  border: 1px dashed #8c816d;
  border-radius: 3px 5px 10px 3px;
  min-height: 205px;
  padding: 22px;
  background: #f4efe4;
  box-shadow: none;
}
.coverage-grid .coverage-planned > .planned-label { color: #5b564b; background: none; }
.app-shell .subject-grid { gap: 24px; padding: 14px 5px 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }
.app-shell .hero { border: 1px solid #cbbfa8; border-top: 4px solid #d6e33d; border-radius: 4px 12px 5px 10px; color: #10243e; background: #fffdf7; }
.app-shell .hero::after { content: none; }
.app-shell .hero-copy > p:not(.eyebrow) { color: #41536a; }
.app-shell .hero .eyebrow { color: #8a452f; }
.app-shell .hero-copy, .app-shell .mission-card { position: relative; z-index: 1; }
.app-shell .mission-card { border: 1px dashed #a69983; border-radius: 4px 12px 5px 10px; background: #f4f0e5; }
.demo-panel { border: 2px solid #d4dca2; border-top: 5px solid #dff04f; background: #fffefa; }
#demoQuestionText { scroll-margin-top: 120px; }
#demoQuestionText:focus { outline: 2px dashed #526075; outline-offset: 8px; border-radius: 3px; }

/* The later Play and Labs pages use this same established pinboard foundation. */
.game-page h1, .game-page h2, .game-page .tile-copy strong,
.labs-page h1, .labs-page h2 { font-family: var(--font-display); font-weight: 800; }
.game-page .chapter-grid { gap: 28px 22px; padding: 16px 5px 12px; }
.game-page .chapter-tile { min-height: 160px; }
.game-page .tile-icon { background: #ffffff66; border: 1px solid #10243e2e; border-radius: 50% 44% 48% 42%; }
.game-page .tile-copy strong { font-size: 20px; }
.game-page .tile-copy small { color: #405362; }
.game-page .player-card, .game-page .continue-card,
.game-page .play-card, .game-page .result-card, .game-page .shelf-row {
  color: #10243e; background: #fffdf7; border: 1px solid #cbbfa8;
  border-top: 4px solid #d6e33d; border-radius: 4px 12px 5px 10px;
  box-shadow: 3px 5px 0 #10243e12;
}
.game-page .player-card .eyebrow { color: #8a452f; }
.game-page .player-copy small, .game-page .player-stats small { color: #41536a; }
.game-page .player-stats { color: #10243e; background: #f4f0e5; border-radius: 4px 12px 5px 10px; }
.game-page .xp-bar { background: #e4ddce; }
.game-page .xp-bar span { background: #566400; }
.game-page .daily-card { background: var(--note-yellow); color: #10243e; border: 2px solid #e6b924; border-radius: 3px 5px 18px 3px; box-shadow: 3px 5px 0 #10243e12; }
.game-page .daily-card.is-done { background: var(--note-mint); border-color: #7bb36c; }
.game-page .chip { border-radius: 4px; }
.game-page .play-option { border-color: #cbbfa8; border-radius: 4px 10px 4px 8px; background: #fffefa; }
.game-page .play-option .demo-option-diagram { font-family: var(--font-body); background: #f7f2e8; }
.game-page .play-option .demo-option-diagram text { font-family: var(--font-body); }
.game-page .play-option.is-correct { border-color: #2f8a57; background: #e5f6ec; }
.game-page .play-option.is-wrong { border-color: #c4472c; background: #fdece7; }
.game-page .primary-button { border: 1px solid #10243e; border-radius: 5px; box-shadow: 3px 3px 0 #10243e; }
.game-page .badge-grid li { border-radius: 3px 5px 10px 3px; background: #f4efe4; }
.game-page .badge-grid li.earned { background: var(--note-mint); border-color: #7bb36c; }
.app-shell .levels-spotlight { color: #10243e; background: #fffdf7; border: 1px solid #cbbfa8; border-top: 4px solid #d6e33d; border-radius: 4px 12px 5px 10px; box-shadow: 3px 5px 0 #10243e12; }
.app-shell .levels-copy .eyebrow { color: #8a452f; }
.app-shell .levels-copy h2 { font-family: var(--font-display); font-weight: 800; }
.app-shell .levels-copy > p:not(.eyebrow), .app-shell .levels-summary small { color: #41536a; }
.app-shell .levels-summary strong { color: #566400; }
.app-shell .levels-summary > p { border-color: #cbbfa8; }
.app-shell .worksheet-footer { flex-wrap: wrap; }
.app-shell .worksheet-footer .review-state { max-width: 100%; white-space: normal; }
.labs-page .studio-grid { gap: 30px 22px; padding: 16px 5px 12px; }
.labs-page .studio-card { min-height: 255px; }
.labs-page .studio-card h2 { font-family: var(--font-display); font-size: 25px; }
.labs-page .studio-card p, .labs-page .studio-tag { color: #405362; }
.labs-page .studio-meta, .labs-page .studio-symbol, .labs-page .studio-open { color: #10243e; }
.labs-page .labs-intro h1 { font-family: var(--font-display); font-weight: 900; }
.labs-page .labs-intro h1 em { font-family: inherit; font-weight: inherit; font-style: normal; color: #ab412b; background: linear-gradient(transparent 72%, #ffd6b6 72%, #ffd6b6 95%, transparent 95%); }
.labs-page .brand .wordmark-project { font-size: 9px; letter-spacing: .38em; }
.labs-page .brand .wordmark-ignite { font-size: 33px; letter-spacing: .055em; }

@media (max-width: 700px) {
  .game-page .game-topbar { flex-wrap: wrap; }
  .game-page .topbar-actions { gap: 7px; flex-wrap: wrap; }
  .game-page #gameAccountLink { width: auto; min-width: 44px; padding: 0 12px; }
  .labs-page .brand .wordmark-project { font-size: 8px; }
  .labs-page .brand .wordmark-ignite { font-size: 27px; }
}

@keyframes note-settle {
  from { transform: translateY(-7px) rotate(0deg); }
  to { transform: translateY(0) rotate(var(--note-tilt)); }
}
@media (max-width: 1100px) {
  .landing-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 36px; padding: 62px 28px; }
  body .landing-hero .hero-copy h1 { font-size: clamp(48px, 6vw, 66px); }
  .landing-hero .hero-lead { font-size: 16px; }
  body .hero-preview h2 { font-size: 32px; }
}
@media (max-width: 850px) {
  .landing-hero { grid-template-columns: 1fr; gap: 44px; }
  .hero-preview { width: 100%; max-width: 580px; }
  .landing-nav { gap: 6px; }
  .landing-nav a { font-size: 13px; padding: 0 7px; }
  .landing-nav .nav-index { display: none; }
}
@media (max-width: 700px) {
  .landing-header, .topbar { min-height: 82px; padding: 12px 16px; gap: 12px; }
  .wordmark-ignite { font-size: 27px; }
  .wordmark-project { font-size: 8px; }
  .sidebar { top: 82px; height: calc(100dvh - 82px); }
  .landing-nav .nav-cta { min-height: 42px; padding: 0 10px; font-size: 12px; box-shadow: 2px 2px 0 #10243e; }
  .landing-nav .nav-cta span { font-size: 16px; }
  .nav-login { padding: 0 9px; font-size: 12px; }
  .landing-hero { padding: 46px 22px 56px; }
  body .landing-hero .hero-copy h1 { font-size: clamp(47px, 10.5vw, 64px); }
  .landing-hero .hero-actions { gap: 18px; }
  .hero-subjects { gap: 7px; }
  .hero-subjects > span { width: 100%; }
  .hero-subjects button { padding: 8px 10px; font-size: 13px; }
  .hero-preview { transform: none; padding: 30px 18px 24px; }
  .hero-preview h2 { font-size: 34px; }
  .preview-top { gap: 12px; }
  .cutout-number { width: 33px; height: 38px; font-size: 29px; }
  .cutout-word i { font-size: 12px; padding: 3px 1.5px; }
  .coverage-grid { gap: 30px; padding: 30px 22px 26px; }
  .coverage-grid .coverage-subject { min-height: 195px; }
  .coverage-grid .coverage-planned { min-height: 155px; }
  .app-shell .subject-card { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-subjects button, .hero-subjects button:hover { transition: none; transform: none; }
  .coverage-grid .coverage-subject,
  .app-shell .subject-card,
  .game-page .chapter-tile,
  .labs-page .studio-card { animation: none; transition: none; transform: none; }
  .coverage-grid .coverage-subject:hover,
  .coverage-grid .coverage-subject[aria-pressed="true"],
  .app-shell .subject-card:hover,
  .app-shell .subject-card[aria-pressed="true"],
  .game-page .chapter-tile:hover,
  .labs-page .studio-card:hover { transform: none; }
}
@media (forced-colors: active) {
  .cutout-number, .cutout-word i { clip-path: none; border: 1px solid CanvasText; }
  .coverage-grid .coverage-subject::before, .coverage-grid .coverage-subject::after,
  .app-shell .subject-card::before, .app-shell .subject-card::after,
  .hero-preview::before, .app-shell .hero::after,
  .game-page .chapter-tile::before, .game-page .chapter-tile::after,
  .labs-page .studio-card::before, .labs-page .studio-card::after { display: none; }
}