:root {
  --ink: #f8fbff;
  --muted: #9bb0cc;
  --navy: #07152b;
  --panel: #102441;
  --line: #294465;
  --yellow: #f5c84c;
  --blue: #24d8ff;
  --red: #ff355f;
}
* {
  box-sizing: border-box;
}
html {
  background: #07152b;
}
body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(circle at 50% -20%, #173c6d 0, #07152b 48%);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  padding: 16px;
  animation: pageIn 0.22s ease;
}
.app {
  width: min(800px, 100%);
  min-height: calc(100svh - 32px);
  margin: auto;
  display: flex;
  flex-direction: column;
}
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.brand {
  font-weight: 950;
  letter-spacing: -0.04em;
  font-size: clamp(1.12rem, 4vw, 1.65rem);
}
.brand span {
  color: var(--yellow);
}
.brand small {
  display: block;
  color: var(--blue);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  margin-top: 3px;
}
.timer {
  font-size: 1.35rem;
  font-weight: 950;
  background: #081a34;
  border: 1px solid var(--line);
  padding: 8px 15px;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.score {
  text-align: right;
  color: var(--muted);
  font-size: 0.7rem;
}
.score strong {
  display: block;
  color: var(--ink);
  font-size: 1.2rem;
}
.progress {
  height: 7px;
  background: #142b4a;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 9px;
}
.progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  transition: width 0.2s linear;
}
.roundstats {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 0.82rem;
  font-weight: 850;
  margin-bottom: 10px;
}
.rightStat {
  color: var(--blue);
}
.wrongStat {
  color: #ff7993;
}

.pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  background: #081a34;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin: 0 auto 11px;
  width: min(610px, 100%);
}

.pages a {
  border-radius: 11px;
  color: var(--muted);
  padding: 10px 6px;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 0.88rem;
}

.pages a.active {
  background: #19375d;
  color: white;
  box-shadow: 0 0 18px #24d8ff25;
}
.levelbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.levelbar label {
  font-size: 0.73rem;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.levelbar select {
  max-width: 350px;
  background: #102441;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 34px 9px 11px;
  font: 800 0.9rem inherit;
}
.intro {
  text-align: center;
  margin: 3px 0 14px;
}
.intro h1 {
  font-size: clamp(1.5rem, 6vw, 2.35rem);
  margin: 0 0 4px;
  letter-spacing: -0.04em;
}
.intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.bank {
  display: inline-flex;
  margin-top: 7px;
  padding: 5px 10px;
  border: 1px solid #2d4b70;
  border-radius: 99px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
}
.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.status {
  text-align: center;
  min-height: 40px;
  margin: 12px 0 3px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.3;
}
.status strong {
  color: var(--yellow);
}
.controls {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 5px;
}
.primary {
  border: 0;
  border-bottom: 5px solid #ba8f19;
  border-radius: 16px;
  background: var(--yellow);
  color: #172039;
  padding: 14px 25px;
  font: 950 1rem inherit;
  cursor: pointer;
  min-width: 220px;
}
.primary:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
.primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.secondary {
  border: 1px solid #416285;
  border-radius: 13px;
  background: #142b49;
  color: white;
  padding: 11px 15px;
  font: 850 0.88rem inherit;
  cursor: pointer;
}
.loading {
  display: grid;
  place-items: center;
  min-height: 330px;
  color: var(--muted);
  font-weight: 800;
}
.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.column {
  display: grid;
  gap: 10px;
}
.label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-size: 0.71rem;
  font-weight: 850;
  text-align: center;
}
.tile {
  min-height: 62px;
  border: 1px solid #365477;
  border-bottom-width: 4px;
  border-radius: 16px;
  background: linear-gradient(180deg, #173254, #10233f);
  color: var(--ink);
  font: 800 clamp(0.94rem, 4vw, 1.2rem) / 1.16 inherit;
  padding: 9px 28px 9px 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: 0.15s;
  box-shadow: 0 7px 20px #0002;
  overflow-wrap: anywhere;
}
.tile:active {
  transform: translateY(3px);
  border-bottom-width: 1px;
}
.tile.selected {
  border-color: var(--yellow);
  background: #514625;
}
.tile.correct,
.card.correct {
  background: #0e4056;
  border-color: var(--blue);
  box-shadow: 0 0 12px var(--blue), 0 0 32px #24d8ff77;
}
.tile.wrong,
.card.wrong {
  background: #5c1730;
  border-color: var(--red);
  box-shadow: 0 0 12px var(--red), 0 0 32px #ff355f77;
  animation: shake 0.28s;
}
.tile.gone {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.88);
}
.spanish {
  position: relative;
}
.spanish:after {
  content: "🔊";
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 0.7rem;
}
.cardWrap {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 390px;
}
.card {
  width: min(620px, 100%);
  min-height: 370px;
  border: 1px solid #365477;
  border-radius: 25px;
  background: linear-gradient(155deg, #17365b, #0d203b);
  box-shadow: 0 18px 55px #0005;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 22px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.card.swap {
  animation: cardIn 0.25s ease;
}
.promptLabel {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}
.promptWord {
  font-size: clamp(2rem, 9vw, 3.8rem);
  font-weight: 950;
  letter-spacing: -0.04em;
  margin: 10px 0 7px;
  overflow-wrap: anywhere;
}
.hint {
  color: var(--muted);
  font-weight: 750;
}
.answer {
  min-height: 50px;
  margin: 11px 0 9px;
  font-weight: 850;
  line-height: 1.35;
}
.answer strong {
  display: block;
  color: var(--yellow);
  font-size: 1.22rem;
}
.actionRow {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.mic {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  background: #0b2947;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 0 24px #24d8ff66;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  touch-action: manipulation;
}
.mic span {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.mic.listening {
  background: var(--blue);
  color: #06162a;
  animation: pulse 1s infinite;
}
.hear,
.reveal,
.choice,
.typeTab {
  border: 1px solid #416285;
  border-radius: 12px;
  background: #102845;
  color: white;
  padding: 10px 13px;
  font: 800 0.85rem inherit;
  cursor: pointer;
}
.privacy {
  font-size: 0.67rem;
  color: #7189a7;
  margin-top: 13px;
}
.sentenceCard {
  width: min(680px, 100%);
  min-height: 405px;
}
.sentenceTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: 100%;
  margin-bottom: 18px;
}
.typeTab.active {
  border-color: var(--blue);
  background: #164362;
}
.sentenceEnglish {
  font-size: 1.02rem;
  color: var(--muted);
  font-weight: 750;
  margin: 7px 0 14px;
}
.blankSentence {
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 900;
  line-height: 1.3;
  margin: 7px 0 20px;
}
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  width: 100%;
}
.choice {
  font-size: 1rem;
  padding: 12px;
}
.choice.correct {
  border-color: var(--blue);
  background: #0e4056;
  box-shadow: 0 0 14px #24d8ff99;
}
.choice.wrong {
  border-color: var(--red);
  background: #5c1730;
  box-shadow: 0 0 14px #ff355f99;
}
.dictation {
  width: 100%;
}
.dictationPrompt {
  color: var(--muted);
  margin-bottom: 10px;
}
.dictationActions {
  display: flex;
  gap: 11px;
  align-items: center;
  justify-content: center;
  margin: 8px 0 14px;
}
.sentenceMic {
  width: 88px;
  height: 88px;
}
.typeInput {
  width: 100%;
  border: 2px solid #416285;
  border-radius: 14px;
  background: #081b33;
  color: white;
  padding: 14px;
  font: 750 1rem/1.35 inherit;
  margin: 3px 0 10px;
}
.typeInput:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 15px #24d8ff44;
}
.typeInput.wrong {
  border-color: var(--red);
  box-shadow: 0 0 15px #ff355f88;
}
.typeInput.correct {
  border-color: var(--blue);
  box-shadow: 0 0 15px #24d8ff88;
}
.typedFeedback {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 34px;
  margin: 3px 0 10px;
}
.typedWord {
  padding: 3px 6px;
  border-radius: 7px;
  font-weight: 850;
}
.typedWord.correct {
  color: #bdf5ff;
  background: #0d4156;
  box-shadow: 0 0 8px #24d8ff55;
}
.typedWord.wrong {
  color: #ffd2da;
  background: #58182e;
  box-shadow: 0 0 8px #ff355f66;
}
.sentenceResult {
  min-height: 38px;
  font-weight: 850;
}
.sentenceResult strong {
  color: var(--yellow);
}
.finish {
  display: none;
  text-align: center;
  margin: auto;
  background: #102441;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 27px 22px;
  width: min(580px, 100%);
}
.finish.show {
  display: block;
}
.finish .big {
  font-size: 3.1rem;
  font-weight: 950;
  color: var(--yellow);
  margin: 3px;
}
.finish h2 {
  font-size: 1.9rem;
  margin: 0;
}
.finish p {
  color: var(--muted);
  margin: 3px 0 14px;
}
.summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.summary div {
  background: #0b1d36;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 5px;
  color: var(--muted);
  font-size: 0.72rem;
}
.summary strong {
  display: block;
  color: white;
  font-size: 1.25rem;
}
.review {
  text-align: left;
  background: #0b1d36;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 17px;
}
.review h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff7993;
  margin: 0 0 7px;
}
.review ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.55;
}
.review b {
  color: white;
}
.finishActions {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
}
.credits {
  margin-top: 14px;
  text-align: center;
  color: #7890ad;
  font-size: 0.7rem;
}
.credits summary {
  cursor: pointer;
  list-style: none;
}
.credits summary::-webkit-details-marker {
  display: none;
}
.credits div {
  margin: 8px auto 0;
  max-width: 650px;
  line-height: 1.45;
}
.credits a {
  color: #8dddea;
}
.tile:focus-visible,
.mic:focus-visible,
.primary:focus-visible,
.secondary:focus-visible,
.choice:focus-visible,
.pages a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
@keyframes shake {
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
@keyframes pulse {
  50% {
    box-shadow: 0 0 42px #24d8ff;
  }
}
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes cardIn {
  from {
    opacity: 0.25;
    transform: translateX(12px);
  }
}
@media (max-width: 430px) {
  body {
    padding: 10px;
  }
  .app {
    min-height: calc(100svh - 20px);
  }

  .pages a {
    padding: 9px 3px;
    font-size: 0.79rem;
  }
  .tile {
    min-height: 56px;
    border-radius: 14px;
  }
  .top {
    margin-bottom: 8px;
  }
  .intro {
    margin: 1px 0 10px;
  }
  .score {
    font-size: 0.65rem;
  }
  .levelbar label {
    display: none;
  }
  .levelbar select {
    width: 100%;
    max-width: none;
  }
  .card {
    min-height: 350px;
    padding: 21px 13px;
  }
  .sentenceCard {
    min-height: 385px;
  }
  .mic {
    width: 104px;
    height: 104px;
  }
  .sentenceMic {
    width: 84px;
    height: 84px;
  }
  .choices {
    gap: 7px;
  }
  .credits {
    margin-top: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .card.swap,
  .tile.wrong,
  .mic.listening {
    animation: none;
  }
}

.pages {
  grid-template-columns: repeat(5, 1fr);
  width: min(790px, 100%);
}

.coachApp {
  width: min(900px, 100%);
}
.coachSetup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.coachSetup label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}
.coachSetup select {
  background: #102441;
  color: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  font: 800 0.92rem inherit;
}
.modeNotice {
  border: 1px solid #765f22;
  background: #342e1b;
  color: #ffe89b;
  border-radius: 13px;
  padding: 9px 12px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.chat {
  height: min(48vh, 430px);
  min-height: 330px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #08172d;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 16px;
  line-height: 1.45;
}
.bubble.tutor {
  align-self: flex-start;
  background: #17385d;
  border: 1px solid #2e587f;
}
.bubble.learner {
  align-self: flex-end;
  background: #0e4759;
  border: 1px solid var(--blue);
}
.bubble small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.coachControls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 11px;
}
.coachMic {
  width: 70px;
  height: 70px;
  font-size: 1.3rem;
}
.coachInput {
  width: 100%;
  background: #081b33;
  color: white;
  border: 2px solid #416285;
  border-radius: 14px;
  padding: 13px;
  font: 750 1rem inherit;
}
.coachInput:focus {
  outline: 0;
  border-color: var(--blue);
}
.coachSend {
  min-width: 100px;
}
.coachStats {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 9px 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}
.coachStats b {
  color: var(--yellow);
}
@media (max-width: 570px) {
  .coachSetup {
    grid-template-columns: 1fr;
  }
  .pages a {
    font-size: 0.63rem;
  }
  .coachControls {
    grid-template-columns: auto 1fr;
  }
  .coachSend {
    grid-column: 1/-1;
    width: 100%;
  }
  .chat {
    min-height: 300px;
  }
}

.storyCard {
  width: min(700px, 100%);
  min-height: 430px;
  justify-content: flex-start;
}
.storyTitle {
  font-size: clamp(1.45rem, 5vw, 2.2rem);
  margin: 7px 0 4px;
}
.storyStage {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.storyText {
  width: 100%;
  background: #081b33;
  border: 1px solid #294b70;
  border-radius: 15px;
  padding: 16px;
  text-align: left;
  font-size: clamp(1rem, 3.8vw, 1.18rem);
  line-height: 1.55;
  margin: 12px 0;
}
.storyQuestion {
  font-weight: 900;
  font-size: 1.08rem;
  margin: 12px 0;
}
.storyInput {
  width: 100%;
  border: 2px solid #416285;
  border-radius: 14px;
  background: #081b33;
  color: white;
  padding: 13px;
  font: 750 1rem inherit;
  margin: 8px 0;
}
.storyInput:focus {
  outline: 0;
  border-color: var(--blue);
}
.storyActions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  align-items: center;
}
.storyMic {
  width: 94px;
  height: 94px;
}
.levelProgress {
  color: var(--yellow);
  font-weight: 900;
  font-size: 0.8rem;
  margin-top: 5px;
}
.storyAnswer {
  min-height: 36px;
  margin: 8px 0;
  font-weight: 800;
}
.choice:disabled {
  cursor: default;
}
@media (max-width: 520px) {
  .pages a {
    font-size: 0.7rem;
    padding: 9px 2px;
  }

  .storyCard {
    padding: 20px 13px;
  }
  .storyText {
    padding: 12px;
  }
  .storyMic {
    width: 88px;
    height: 88px;
  }
}

.matchApp {
  width: min(1040px, 100%);
}
.matchApp .board {
  gap: 14px 22px;
}
.matchApp .column {
  gap: 13px;
}
.matchApp .tile {
  min-height: 78px;
  font-size: clamp(1.08rem, 3vw, 1.38rem);
  border-radius: 18px;
  padding: 12px 38px 12px 16px;
}
.matchApp .levelbar {
  flex-wrap: wrap;
}
.matchApp .levelbar select {
  min-width: 210px;
}
@media (max-width: 520px) {
  .matchApp .tile {
    min-height: 70px;
    font-size: 1.05rem;
    padding: 10px 28px 10px 9px;
  }
  .matchApp .board {
    gap: 10px;
  }
  .matchApp .column {
    gap: 10px;
  }
  .matchApp .levelbar {
    display: grid;
    grid-template-columns: 1fr;
  }
  .matchApp .levelbar label {
    display: block;
  }
  .matchApp .levelbar select {
    width: 100%;
    min-width: 0;
  }
}

.pages {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
}
.pages a {
  flex: 1 0 102px;
}
.careerApp,
.domainApp {
  width: min(960px, 100%);
}
.careerIntro {
  text-align: center;
  margin: 18px auto 20px;
  max-width: 680px;
}
.careerIntro h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  margin: 0 0 7px;
  letter-spacing: -0.045em;
}
.careerIntro p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
.trackGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.track {
  position: relative;
  min-height: 145px;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--track);
  border-radius: 20px;
  background: linear-gradient(145deg, #153354, #0d1f39);
  color: white;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 12px 30px #0003;
  transition: 0.18s;
}
.track:hover,
.track:focus-visible {
  transform: translateY(-3px);
  border-color: var(--track);
  box-shadow: 0 14px 35px #0005,
    0 0 22px color-mix(in srgb, var(--track) 30%, transparent);
}
.track b {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.track span {
  color: var(--muted);
  line-height: 1.4;
}
.track.chef {
  --track: #ff9f43;
}
.track.hvac {
  --track: #24d8ff;
}
.track.coding {
  --track: #a98bff;
}
.track.medical {
  --track: #ff657d;
}
.track.music {
  --track: #f5c84c;
}
.track.math {
  --track: #55e6a5;
}
.track.medicines {
  --track: #ff86b6;
}
.track.sports {
  --track: #67e8a5;
}
.track.nutrition {
  --track: #b7e45c;
}
.track.stocks {
  --track: #67c9ff;
}
.track.rocketry {
  --track: #ff915e;
}
.careerNote {
  text-align: center;
  color: #8499b4;
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 17px auto 3px;
}
.domainNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 4px 0 15px;
}
.domainNav a {
  color: #9feaff;
  text-decoration: none;
  font-weight: 900;
}
.domainNav select {
  min-width: 230px;
  background: #102441;
  color: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  font: 800 0.9rem inherit;
}
.domainSettings {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.domainSettings label {
  display: grid;
  gap: 4px;
  color: #9eb5d0;
  font-size: 0.72rem;
  font-weight: 900;
}
.domainSettings label select {
  min-width: 150px;
  padding: 10px;
}
.domainHead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--domain);
  background: linear-gradient(145deg, #163657, #0c1f39);
  border-radius: 22px;
  padding: 18px 20px;
}
.domainIcon {
  font-size: 2.7rem;
}
.domainHead h1 {
  margin: 0 0 4px;
  font-size: clamp(1.55rem, 5vw, 2.4rem);
}
.domainHead p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}
.domainScore {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-align: right;
}
.domainScore b {
  display: block;
  color: var(--domain);
  font-size: 1.45rem;
}
.domainTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 7px;
  margin: 13px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #081a34;
}
.domainTabs button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  padding: 11px 7px;
  font: 900 0.88rem inherit;
  cursor: pointer;
}
.domainTabs button.active {
  background: #1a3b61;
  color: white;
  box-shadow: 0 0 18px color-mix(in srgb, var(--domain) 25%, transparent);
}
.domainWork {
  min-height: 430px;
  display: grid;
  place-items: center;
}
.careerCard,
.quizPanel {
  width: min(680px, 100%);
  min-height: 350px;
  border: 2px solid var(--domain);
  border-radius: 25px;
  background: linear-gradient(155deg, #17365b, #0c1e37);
  box-shadow: 0 20px 55px #0005,
    0 0 28px color-mix(in srgb, var(--domain) 18%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  cursor: pointer;
}
.cardCount,
.practiceLabel {
  color: var(--domain);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.careerTerm {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 950;
  margin: 15px 0 4px;
  overflow-wrap: anywhere;
}
.careerEnglish {
  color: var(--yellow);
  font-size: 1.12rem;
  font-weight: 850;
}
.careerDefinition {
  max-width: 540px;
  font-size: 1.08rem;
  line-height: 1.55;
  margin-top: 18px;
}
.flipHint {
  color: var(--muted);
  margin-top: 25px;
}
.careerActions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-top: 14px;
}
.domainButton {
  border: 1px solid #416285;
  border-radius: 12px;
  background: #132d4d;
  color: white;
  padding: 11px 15px;
  font: 850 0.88rem inherit;
  cursor: pointer;
}
.primaryMini {
  background: var(--domain);
  color: #07152b;
  border-color: transparent;
}
.quizPanel {
  cursor: default;
}
.quizPanel h2 {
  font-size: clamp(1.2rem, 4vw, 1.75rem);
  line-height: 1.4;
  max-width: 620px;
}
.domainChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}
.domainChoice {
  min-height: 58px;
  border: 1px solid #416285;
  border-radius: 14px;
  background: #132d4d;
  color: white;
  padding: 11px;
  font: 850 1rem inherit;
  cursor: pointer;
}
.domainChoice.correct {
  border-color: var(--blue);
  background: #0e4056;
  box-shadow: 0 0 15px #24d8ff88;
}
.domainChoice.wrong {
  border-color: var(--red);
  background: #5c1730;
}
.skillExplain {
  color: var(--muted);
  min-height: 44px;
  line-height: 1.4;
}
.codeEditor {
  width: 100%;
  min-height: 180px;
  background: #050d1b;
  color: #c8f7ff;
  border: 1px solid #365477;
  border-radius: 13px;
  padding: 15px;
  font: 700 1rem/1.55 ui-monospace, SFMono-Regular, monospace;
  text-align: left;
  resize: vertical;
  margin: 10px 0;
}
.codeOutput {
  width: 100%;
  text-align: left;
  background: #081629;
  color: #9feaff;
  border-radius: 11px;
  padding: 12px;
  white-space: pre-wrap;
}
.domainStatus {
  text-align: center;
  min-height: 42px;
  color: var(--muted);
  font-weight: 800;
}
.domainStatus.good {
  color: var(--blue);
}
.coachPanel {
  width: min(900px, 100%);
  border: 1px solid #3a597a;
  border-radius: 22px;
  background: linear-gradient(155deg, #123152, #08192f);
  box-shadow: 0 18px 50px #0005;
  overflow: hidden;
}
.coachHeader {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid #31506e;
}
.coachHeader h2 {
  margin: 6px 0;
  font-size: clamp(1.3rem, 4vw, 2rem);
}
.coachHeader p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.coachBadges {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.coachBadges span {
  border: 1px solid var(--domain);
  border-radius: 999px;
  padding: 7px 10px;
  color: white;
  background: #152c48;
  font-size: 0.75rem;
  font-weight: 900;
}
.coachQuick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid #263f5b;
}
.coachPrompt {
  border: 1px solid #3d6387;
  border-radius: 999px;
  background: #102946;
  color: #d8e9f8;
  padding: 8px 12px;
  font: 800 0.78rem inherit;
  cursor: pointer;
}
.coachPrompt:hover,
.coachPrompt:focus-visible {
  border-color: var(--domain);
  color: white;
}
.coachLog {
  height: 330px;
  overflow: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #07172a;
}
.coachMessage {
  max-width: 82%;
  border: 1px solid #31506e;
  border-radius: 16px;
  padding: 11px 13px;
  background: #102945;
  align-self: flex-start;
}
.coachMessage.user {
  align-self: flex-end;
  background: #203d61;
  border-color: var(--domain);
}
.coachMessage b {
  display: block;
  color: var(--domain);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.coachMessage.user b {
  color: white;
}
.coachMessage p {
  margin: 5px 0 0;
  line-height: 1.5;
  white-space: pre-wrap;
}
.coachHear {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #9feaff;
  font: 800 0.75rem inherit;
  cursor: pointer;
  padding: 3px;
}
.coachComposer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 18px;
}
.coachComposer textarea {
  min-height: 70px;
  resize: vertical;
  background: #07172a;
  color: white;
  border: 1px solid #365878;
  border-radius: 13px;
  padding: 12px;
  font: 700 1rem/1.4 inherit;
}
.coachComposer button {
  align-self: stretch;
  min-width: 86px;
}
.coachBoundary {
  margin: 0;
  padding: 0 18px 15px;
  color: #8499b4;
  font-size: 0.75rem;
  line-height: 1.4;
}
.matchSentence {
  margin: 20px 0 4px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 20px;
  background: linear-gradient(145deg, #123052, #0b1d36);
  padding: 18px;
}
.matchSentenceHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.matchSentenceHead span {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}
.matchSentenceHead h2 {
  margin: 3px 0;
  font-size: 1.25rem;
}
.sentenceWordRow {
  margin: 16px 0 8px;
  text-align: center;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 900;
  line-height: 1.8;
}
.sentenceWord {
  border: 0;
  border-bottom: 2px solid #42698e;
  background: transparent;
  color: white;
  font: inherit;
  padding: 2px 3px;
  cursor: pointer;
}
.sentenceWord:hover,
.sentenceWord:focus {
  color: var(--yellow);
  border-color: var(--yellow);
}
.sentenceTapHint {
  min-height: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.sentenceTranslateLabel {
  display: block;
  color: #a9bdd5;
  font-size: 0.78rem;
  font-weight: 850;
  margin-bottom: 5px;
}
.sentencePracticeActions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.matchSentence .sentenceResult {
  text-align: center;
  margin-top: 10px;
}
.visualPanel {
  width: min(680px, 100%);
  min-height: 390px;
  border: 2px solid var(--domain);
  border-radius: 25px;
  background: linear-gradient(155deg, #17365b, #0c1e37);
  box-shadow: 0 20px 55px #0005;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 25px;
}
.visualMode {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}
.visualMode .active {
  border-color: var(--domain);
  background: #244c73;
}
.visualMnemonic {
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  margin: 8px 0 15px;
  border-radius: 38px;
  background: radial-gradient(circle at 40% 30%, #2b5c85, #0a1c33 70%);
  border: 1px solid #42688d;
  box-shadow: inset 0 0 30px #24d8ff18,
    0 0 25px color-mix(in srgb, var(--domain) 28%, transparent);
}
.visualMnemonic span {
  font-size: 6rem;
  filter: drop-shadow(0 12px 10px #0006);
  animation: visualFloat 2.4s ease-in-out infinite;
}
.visualAnswer {
  width: 100%;
  max-width: 560px;
  margin: 10px 0;
}
.visualAnswer .typeInput {
  display: inline-block;
  width: calc(100% - 110px);
  margin-right: 8px;
}
.visualAnswer .domainChoices {
  margin-top: 0;
}
.speakVisual {
  width: 130px;
  height: 130px;
  margin: 5px auto 8px;
  border-radius: 30px;
  background: radial-gradient(circle at 40% 30%, #315f86, #0b1d36);
  display: grid;
  place-items: center;
  border: 1px solid #42688d;
}
.speakVisual span {
  font-size: 4.8rem;
  filter: drop-shadow(0 10px 9px #0006);
  animation: visualFloat 2.4s ease-in-out infinite;
}
@keyframes visualFloat {
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}
.toolApp {
  width: min(1080px, 100%);
}
.toolIntro {
  text-align: center;
  max-width: 720px;
  margin: 20px auto;
}
.toolIntro h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  margin: 0 0 7px;
}
.toolIntro p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.translatorPanel,
.dictionaryPanel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, #123154, #091b33);
  padding: 20px;
  box-shadow: 0 18px 50px #0004;
}
.languagePair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.languagePair label {
  display: grid;
  gap: 6px;
  color: #9eb5d0;
  font-size: 0.8rem;
  font-weight: 900;
}
.languagePair select {
  width: 100%;
  background: #0b213d;
  color: white;
  border: 1px solid #385a7d;
  border-radius: 13px;
  padding: 12px;
  font: 800 0.95rem inherit;
}
.swapButton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  background: #103154;
  color: var(--blue);
  font-size: 1.4rem;
  cursor: pointer;
}
.translateGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.translateBox {
  min-height: 310px;
  border: 1px solid #355577;
  border-radius: 18px;
  background: #081a31;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.resultBox {
  background: linear-gradient(145deg, #102d4b, #0a1b32);
}
.boxLabel {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.translateBox textarea {
  flex: 1;
  min-height: 170px;
  resize: vertical;
  background: transparent;
  color: white;
  border: 0;
  padding: 18px 0;
  font: 850 clamp(1.35rem, 4vw, 2rem) / 1.4 inherit;
}
.translateBox textarea:focus {
  outline: 0;
}
.translatedText {
  flex: 1;
  padding: 18px 0 8px;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.translationNote {
  color: var(--muted);
  min-height: 34px;
}
.toolActions {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.compactMic {
  width: 78px;
  height: 60px;
  border-radius: 16px;
  font-size: 1.35rem;
}
.compactMic span {
  font-size: 0.7rem;
}
.toolStatus {
  text-align: center;
  color: var(--muted);
  min-height: 32px;
  font-weight: 800;
}
.dictionaryPanel {
  max-width: 850px;
  margin: auto;
}
.dictionaryPanel .languagePair {
  grid-template-columns: 1fr 1fr;
}
.dictionarySearch {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.dictionarySearch .typeInput {
  margin: 0;
}
.dictionaryResult {
  min-height: 300px;
  display: grid;
  place-items: center;
}
.emptyDictionary {
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}
.wordCard {
  text-align: center;
  width: 100%;
  padding: 25px;
}
.wordLanguages {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}
.wordCard h2 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  margin: 12px 0 3px;
}
.wordArrow {
  font-size: clamp(1.7rem, 6vw, 3rem);
  color: var(--yellow);
  font-weight: 950;
}
.wordCard p {
  max-width: 620px;
  margin: 18px auto;
  line-height: 1.55;
  font-size: 1.05rem;
}
.wordEnglish {
  color: var(--muted);
}
.suggestion {
  display: block;
  margin: 14px auto;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background: #123456;
  color: white;
  padding: 11px 15px;
  font: 850 0.9rem inherit;
  cursor: pointer;
}
[data-domain="coding"] .domainTabs {
  grid-template-columns: repeat(5, 1fr);
}
.cloudModeBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border: 1px solid #3a597a;
  border-radius: 14px;
  background: #10243d;
}
.cloudModeBar label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b7c9dd;
  font-weight: 900;
}
.cloudModeBar select {
  background: #07172b;
  color: white;
  border: 1px solid var(--domain);
  border-radius: 10px;
  padding: 9px;
  font: 850 0.9rem inherit;
}
.cloudModeBar span,
.cloudNote {
  color: var(--muted);
  font-size: 0.82rem;
}
.ideShell {
  width: 100%;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items: stretch;
}
.ideLesson,
.ideWindow {
  border: 1px solid #3a597a;
  border-radius: 18px;
  background: #0a1a30;
  overflow: hidden;
}
.ideLesson {
  padding: 22px;
}
.ideLesson h2 {
  font-size: 1.45rem;
  margin: 10px 0;
}
.ideLesson p {
  color: var(--muted);
  line-height: 1.5;
}
.ideGoal {
  border-left: 4px solid var(--domain);
  background: #142943;
  border-radius: 8px;
  padding: 12px;
  margin: 18px 0;
  line-height: 1.45;
}
.ideGoal b {
  display: block;
  color: var(--domain);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.ideHintText {
  color: #d8caff !important;
}
.ideBar {
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 13px;
  background: #111d2c;
  border-bottom: 1px solid #324862;
}
.ideBar span {
  display: flex;
  gap: 6px;
}
.ideBar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff657d;
}
.ideBar i:nth-child(2) {
  background: #f5c84c;
}
.ideBar i:nth-child(3) {
  background: #55e6a5;
}
.ideBar b {
  font: 750 0.82rem ui-monospace, monospace;
}
.ideBar em {
  text-align: right;
  color: var(--muted);
  font: 700 0.72rem inherit;
}
.ideEditor {
  display: block;
  width: 100%;
  min-height: 240px;
  resize: vertical;
  border: 0;
  background: #06101f;
  color: #d9f5ff;
  padding: 18px;
  font: 700 1rem/1.55 ui-monospace, SFMono-Regular, monospace;
}
.ideEditor:focus {
  outline: 2px solid var(--domain);
  outline-offset: -2px;
}
.ideButtons {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #0d2037;
  flex-wrap: wrap;
}
.ideConsoleLabel {
  padding: 8px 14px 0;
  color: #8299b5;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.ideConsole {
  min-height: 90px;
  margin: 0;
  padding: 10px 14px 16px;
  color: #bdf5ff;
  background: #071426;
  white-space: pre-wrap;
}
.ideConsole.error {
  color: #ff94a8;
}
.ideConsole.passed {
  color: #55e6a5;
  box-shadow: inset 0 0 20px #55e6a522;
}
.ideFrame {
  display: none;
}
.ideProgress {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 15px;
}
.ideProgress span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #426080;
  color: var(--muted);
  font-weight: 900;
}
.ideProgress span.current {
  border-color: var(--domain);
  color: white;
  box-shadow: 0 0 14px #a98bff88;
}
.ideProgress span.done {
  background: #22534d;
  color: #8ff0bd;
  border-color: #55e6a5;
}
.toolApp {
  width: min(1080px, 100%);
}
.toolIntro {
  text-align: center;
  max-width: 720px;
  margin: 20px auto;
}
.toolIntro h1 {
  font-size: clamp(1.8rem, 6vw, 3rem);
  margin: 0 0 7px;
}
.toolIntro p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.translatorPanel,
.dictionaryPanel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, #123154, #091b33);
  padding: 20px;
  box-shadow: 0 18px 50px #0004;
}
.languagePair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.languagePair label {
  display: grid;
  gap: 6px;
  color: #9eb5d0;
  font-size: 0.8rem;
  font-weight: 900;
}
.languagePair select {
  width: 100%;
  background: #0b213d;
  color: white;
  border: 1px solid #385a7d;
  border-radius: 13px;
  padding: 12px;
  font: 800 0.95rem inherit;
}
.swapButton {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  background: #103154;
  color: var(--blue);
  font-size: 1.4rem;
  cursor: pointer;
}
.translateGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.translateBox {
  min-height: 310px;
  border: 1px solid #355577;
  border-radius: 18px;
  background: #081a31;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.resultBox {
  background: linear-gradient(145deg, #102d4b, #0a1b32);
}
.boxLabel {
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.translateBox textarea {
  flex: 1;
  min-height: 170px;
  resize: vertical;
  background: transparent;
  color: white;
  border: 0;
  padding: 18px 0;
  font: 850 clamp(1.35rem, 4vw, 2rem) / 1.4 inherit;
}
.translateBox textarea:focus {
  outline: 0;
}
.translatedText {
  flex: 1;
  padding: 18px 0 8px;
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 950;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.translationNote {
  color: var(--muted);
  min-height: 34px;
}
.toolActions {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.compactMic {
  width: 78px;
  height: 60px;
  border-radius: 16px;
  font-size: 1.35rem;
}
.compactMic span {
  font-size: 0.7rem;
}
.toolStatus {
  text-align: center;
  color: var(--muted);
  min-height: 32px;
  font-weight: 800;
}
.dictionaryPanel {
  max-width: 850px;
  margin: auto;
}
.dictionaryPanel .languagePair {
  grid-template-columns: 1fr 1fr;
}
.dictionarySearch {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.dictionarySearch .typeInput {
  margin: 0;
}
.dictionaryResult {
  min-height: 300px;
  display: grid;
  place-items: center;
}
.emptyDictionary {
  text-align: center;
  color: var(--muted);
  font-weight: 800;
}
.wordCard {
  text-align: center;
  width: 100%;
  padding: 25px;
}
.wordLanguages {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}
.wordCard h2 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  margin: 12px 0 3px;
}
.wordArrow {
  font-size: clamp(1.7rem, 6vw, 3rem);
  color: var(--yellow);
  font-weight: 950;
}
.wordCard p {
  max-width: 620px;
  margin: 18px auto;
  line-height: 1.55;
  font-size: 1.05rem;
}
.wordEnglish {
  color: var(--muted);
}
.suggestion {
  display: block;
  margin: 14px auto;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background: #123456;
  color: white;
  padding: 11px 15px;
  font: 850 0.9rem inherit;
  cursor: pointer;
}
[data-domain="coding"] .domainTabs {
  grid-template-columns: repeat(5, 1fr);
}
.cloudModeBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 14px;
  border: 1px solid #3a597a;
  border-radius: 14px;
  background: #10243d;
}
.cloudModeBar label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b7c9dd;
  font-weight: 900;
}
.cloudModeBar select {
  background: #07172b;
  color: white;
  border: 1px solid var(--domain);
  border-radius: 10px;
  padding: 9px;
  font: 850 0.9rem inherit;
}
.cloudModeBar span,
.cloudNote {
  color: var(--muted);
  font-size: 0.82rem;
}
.ideShell {
  width: 100%;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items: stretch;
}
.ideShell.liveBuild {
  grid-template-columns: 250px minmax(320px, 1fr) minmax(300px, 1fr);
}
.ideLesson,
.ideWindow,
.livePreviewWindow {
  border: 1px solid #3a597a;
  border-radius: 18px;
  background: #0a1a30;
  overflow: hidden;
}
.ideLesson {
  padding: 22px;
}
.ideLesson h2 {
  font-size: 1.45rem;
  margin: 10px 0;
}
.ideLesson p {
  color: var(--muted);
  line-height: 1.5;
}
.ideGoal {
  border-left: 4px solid var(--domain);
  background: #142943;
  border-radius: 8px;
  padding: 12px;
  margin: 18px 0;
  line-height: 1.45;
}
.ideGoal b {
  display: block;
  color: var(--domain);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.ideHintText {
  color: #d8caff !important;
}
.ideBar {
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 13px;
  background: #111d2c;
  border-bottom: 1px solid #324862;
}
.ideBar span {
  display: flex;
  gap: 6px;
}
.ideBar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff657d;
}
.ideBar i:nth-child(2) {
  background: #f5c84c;
}
.ideBar i:nth-child(3) {
  background: #55e6a5;
}
.ideBar b {
  font: 750 0.82rem ui-monospace, monospace;
}
.ideBar em {
  text-align: right;
  color: var(--muted);
  font: 700 0.72rem inherit;
}
.ideEditor {
  display: block;
  width: 100%;
  min-height: 240px;
  resize: vertical;
  border: 0;
  background: #06101f;
  color: #d9f5ff;
  padding: 18px;
  font: 700 1rem/1.55 ui-monospace, SFMono-Regular, monospace;
}
.ideShell.liveBuild .ideEditor {
  min-height: 430px;
}
.ideEditor:focus {
  outline: 2px solid var(--domain);
  outline-offset: -2px;
}
.ideButtons {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: #0d2037;
  flex-wrap: wrap;
}
.ideConsoleLabel {
  padding: 8px 14px 0;
  color: #8299b5;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.ideConsole {
  min-height: 90px;
  margin: 0;
  padding: 10px 14px 16px;
  color: #bdf5ff;
  background: #071426;
  white-space: pre-wrap;
}
.ideConsole.error {
  color: #ff94a8;
}
.ideConsole.passed {
  color: #55e6a5;
  box-shadow: inset 0 0 20px #55e6a522;
}
.ideFrame {
  display: none;
}
.previewBar {
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  background: #f4f7fb;
  color: #24354a;
  border-bottom: 1px solid #c8d3df;
  font-size: 0.72rem;
}
.previewBar span {
  color: #ff657d;
  letter-spacing: 0.2em;
}
.previewBar b {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.previewBar em {
  text-align: right;
  color: #318669;
  font-style: normal;
  font-weight: 850;
}
.livePreviewFrame {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  background: white;
}
.ideProgress {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 15px;
}
.ideProgress span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #426080;
  color: var(--muted);
  font-weight: 900;
}
.ideProgress span.current {
  border-color: var(--domain);
  color: white;
  box-shadow: 0 0 14px #a98bff88;
}
.ideProgress span.done {
  background: #22534d;
  color: #8ff0bd;
  border-color: #55e6a5;
}
.instructorApp {
  width: min(1180px, 100%);
}
.marketMode {
  border: 1px solid #f5c84c;
  border-radius: 999px;
  background: #3a3111;
  color: #ffe88d;
  padding: 9px 13px;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.marketIntro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.7fr);
  gap: 18px;
  align-items: center;
  margin: 22px 0;
}
.marketIntro h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  letter-spacing: -0.045em;
  line-height: 1.03;
  margin: 7px 0 10px;
}
.marketIntro p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.eyebrow {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}
.privacyCard {
  border: 1px solid #365d80;
  border-left: 5px solid var(--blue);
  border-radius: 18px;
  background: linear-gradient(145deg, #143657, #0b203a);
  padding: 17px;
}
.privacyCard b,
.privacyCard span {
  display: block;
}
.privacyCard span {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 6px;
}
.marketTabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 12px 0 18px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #081a34;
}
.marketTabs button {
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  padding: 12px 8px;
  font: 900 0.88rem inherit;
  cursor: pointer;
}
.marketTabs button.active {
  background: #1a4269;
  color: white;
  box-shadow: 0 0 20px #24d8ff25;
}
.marketTabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #254b6f;
  color: #9feaff;
  margin-left: 4px;
}
.marketView {
  display: none;
}
.marketView.active {
  display: block;
}
.marketFilters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0a1e38;
}
.marketFilters label,
.teacherForm > label {
  display: grid;
  gap: 6px;
  color: #9eb5d0;
  font-size: 0.78rem;
  font-weight: 900;
}
.marketFilters select,
.teacherForm input,
.teacherForm select,
.teacherForm textarea,
.bookingForm select,
.consentBox input[type="text"],
#meetingPoint input {
  width: 100%;
  background: #07182e;
  color: white;
  border: 1px solid #365a7d;
  border-radius: 12px;
  padding: 11px;
  font: 750 0.94rem inherit;
}
.distanceTools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 11px 0 16px;
  color: var(--muted);
  font-size: 0.82rem;
}
.instructorGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}
.instructorCard {
  border: 1px solid #345675;
  border-radius: 21px;
  background: linear-gradient(150deg, #143657, #091c34);
  padding: 19px;
  box-shadow: 0 15px 38px #0003;
}
.mentorTop {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.mentorAvatar {
  width: 53px;
  height: 53px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #24d8ff, #7d8cff);
  color: #07152b;
  font-size: 1.1rem;
  font-weight: 950;
  box-shadow: 0 0 20px #24d8ff38;
}
.mentorTop h2 {
  margin: 0;
  font-size: 1.2rem;
}
.mentorTop p {
  margin: 3px 0 0;
  color: #9feaff;
  font-size: 0.82rem;
  font-weight: 800;
}
.mentorLevel {
  border: 1px solid #526d89;
  border-radius: 999px;
  padding: 6px 9px;
  color: #d8e8f7;
  font-size: 0.7rem;
  font-weight: 900;
}
.mentorBio {
  min-height: 66px;
  color: #c4d3e3;
  line-height: 1.48;
}
.mentorMeta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 12px 0;
  border-top: 1px solid #2a4866;
  color: #91a9c2;
  font-size: 0.76rem;
  font-weight: 750;
}
.mentorBottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}
.mentorBottom div b {
  font-size: 1.45rem;
  color: white;
}
.mentorBottom div span {
  color: var(--muted);
  font-size: 0.76rem;
  margin-left: 4px;
}
.emptyMarket,
.emptyBookings {
  text-align: center;
  border: 1px dashed #3d5b79;
  border-radius: 18px;
  padding: 35px;
  color: var(--muted);
}
.teacherStudio,
.rateGuide,
.bookingList {
  border: 1px solid #345675;
  border-radius: 23px;
  background: linear-gradient(150deg, #123353, #081a31);
  overflow: hidden;
}
.studioHead {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 21px;
  border-bottom: 1px solid #2f4d6a;
}
.studioHead h2,
.rateGuideHead h2,
.bookingListHead h2 {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  margin: 6px 0;
}
.studioHead p,
.rateGuideHead p,
.bookingListHead p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.connectStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  border: 1px solid #745f25;
  border-radius: 14px;
  background: #332d19;
  padding: 11px;
}
.connectStatus i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5c84c;
  flex: none;
}
.connectStatus span,
.connectStatus b {
  display: block;
}
.connectStatus span {
  font-size: 0.73rem;
  color: #d8c994;
  line-height: 1.35;
}
.connectStatus b {
  color: #fff1b9;
  font-size: 0.78rem;
}
.connectStatus.prepared {
  border-color: #2f7b68;
  background: #123a35;
}
.connectStatus.prepared i {
  background: #55e6a5;
}
.connectStatus.prepared span {
  color: #aee8d5;
}
.connectStatus.prepared b {
  color: #c8ffec;
}
.teacherForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  padding: 21px;
}
.teacherForm .wide {
  grid-column: 1/-1;
}
.teacherForm textarea {
  min-height: 105px;
  resize: vertical;
}
.teacherForm fieldset {
  border: 1px solid #355575;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 22px;
}
.teacherForm legend {
  padding: 0 6px;
  color: #9eb5d0;
  font-size: 0.78rem;
  font-weight: 900;
}
.checkLine {
  display: flex !important;
  grid-template-columns: auto 1fr !important;
  align-items: center;
  gap: 8px !important;
  color: #d9e8f6 !important;
  font-size: 0.88rem !important;
}
.checkLine input {
  width: auto !important;
}
.locationSetup {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
  font-size: 0.78rem;
}
.studioActions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
}
.teacherNotice {
  display: flex;
  gap: 12px;
  padding: 15px 21px;
  background: #08182b;
  border-top: 1px solid #2e4d69;
}
.teacherNotice b {
  color: #f5c84c;
  white-space: nowrap;
}
.teacherNotice span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.82rem;
}
.rateGuideHead,
.bookingListHead {
  padding: 22px;
}
.rateTable {
  border-top: 1px solid #2f4d69;
  border-bottom: 1px solid #2f4d69;
}
.rateRow {
  display: grid;
  grid-template-columns: 0.7fr 0.8fr 1.8fr;
  gap: 13px;
  align-items: center;
  padding: 15px 22px;
  border-top: 1px solid #243f5b;
}
.rateRow:first-child {
  border-top: 0;
}
.rateHeader {
  background: #091a30;
  color: #91a9c2;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.rateRow strong {
  color: #9feaff;
}
.rateRow span {
  line-height: 1.4;
}
.rateNotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px;
}
.rateNotes div {
  border: 1px solid #31516f;
  border-radius: 14px;
  background: #0a1f39;
  padding: 14px;
}
.rateNotes b,
.rateNotes span {
  display: block;
}
.rateNotes span {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 5px;
  font-size: 0.82rem;
}
.bookingList {
  min-height: 310px;
}
.bookingRow {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border-top: 1px solid #2d4b68;
}
.bookingRow div b,
.bookingRow div span {
  display: block;
}
.bookingRow span {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 4px;
}
.bookingRow strong {
  color: #8ff0bd;
  border: 1px solid #2f7b68;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 0.72rem;
}
.bookingDialog {
  width: min(620px, calc(100% - 24px));
  max-height: 90vh;
  border: 1px solid #496887;
  border-radius: 22px;
  background: #0b203a;
  color: white;
  padding: 0;
  box-shadow: 0 30px 80px #000b;
}
.bookingDialog::backdrop {
  background: #020a14cc;
  backdrop-filter: blur(5px);
}
.dialogClose {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #1a3552;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}
.dialogMentor {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 22px;
  border-bottom: 1px solid #31516d;
}
.dialogMentor h2 {
  margin: 4px 0;
}
.dialogMentor p {
  margin: 0;
  color: var(--muted);
}
.bookingForm {
  display: grid;
  gap: 13px;
  padding: 21px;
}
.bookingForm label {
  display: grid;
  gap: 6px;
  color: #9eb5d0;
  font-size: 0.78rem;
  font-weight: 900;
}
.bookingPrice {
  border: 1px solid #3a607f;
  border-radius: 15px;
  background: #08182c;
  padding: 14px;
}
.bookingPrice div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.bookingPrice b {
  font-size: 1.45rem;
  color: #9feaff;
}
.bookingPrice small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.paymentNotice {
  border-left: 4px solid #f5c84c;
  background: #302b19;
  border-radius: 8px;
  padding: 11px;
  color: #eadca8;
  font-size: 0.78rem;
  line-height: 1.4;
}
.testSuccess {
  text-align: center;
  padding: 28px;
}
.successMark {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  background: #173f3a;
  border: 2px solid #55e6a5;
  color: #8ff0bd;
  font-size: 2rem;
}
.testSuccess p {
  color: var(--muted);
  line-height: 1.5;
}
.consentBox {
  text-align: left;
  border: 1px solid #3a5977;
  border-radius: 15px;
  background: #08182c;
  padding: 15px;
  margin: 17px 0;
}
.consentBox > b {
  display: block;
  margin-bottom: 10px;
}
.consentBox label {
  margin: 8px 0;
}
#meetingPoint {
  border-top: 1px solid #2d4b68;
  margin-top: 12px;
  padding-top: 12px;
}
#meetingPoint p {
  font-size: 0.75rem;
}
.onlineReady {
  border: 1px solid #315c72;
  border-radius: 13px;
  padding: 13px;
  margin: 16px 0;
  color: #bfe9f2;
}
.emptyBookings {
  margin: 22px;
}
body[data-domain="coding"] .domainTabs {
  grid-template-columns: repeat(3, 1fr);
}
.marketTabs {
  grid-template-columns: repeat(5, 1fr);
}
.testPill {
  height: auto !important;
  min-width: 0 !important;
  padding: 3px 6px !important;
  border: 1px solid #8c742b;
  background: #3a3111 !important;
  color: #ffe88d !important;
  font-size: 0.62rem !important;
}
.profileImageStudio {
  border: 1px solid #345675;
  border-radius: 23px;
  background: linear-gradient(150deg, #123353, #081a31);
  overflow: hidden;
}
.profileImageChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px;
}
.profileImageChoice {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: start;
  border: 1px solid #345675;
  border-radius: 19px;
  background: #0a1f39;
  padding: 17px;
}
.profileImageChoice h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 6px 0 8px;
}
.profileImageChoice p {
  color: var(--muted);
  line-height: 1.5;
}
.profileImageChoice ol {
  padding-left: 20px;
  color: #b9cade;
  line-height: 1.65;
  font-size: 0.88rem;
}
.profileImageChoice label {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  color: #9eb5d0;
  font-size: 0.82rem;
  font-weight: 900;
}
.profileImageChoice select {
  width: 100%;
  background: #07182e;
  color: white;
  border: 1px solid #365a7d;
  border-radius: 12px;
  padding: 11px;
  font: 750 0.94rem inherit;
}
.profilePreview {
  min-height: 185px;
  border: 1px solid #42698e;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, #315e8c, #10243f 68%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
}
.profilePreview > span {
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  color: #bdeeff;
}
.profileSilhouette {
  width: 82px;
  height: 82px;
  border-radius: 30px 30px 36px 36px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #24d8ff, #7d8cff);
  color: #07152b;
  font-size: 1.35rem;
  font-weight: 950;
  box-shadow: 0 0 28px #24d8ff55;
}
.animatedPreview .profileSilhouette {
  border-radius: 50%;
  background: linear-gradient(145deg, #ff4b8b, #8a78ff);
  animation: avatarFloat 2.8s ease-in-out infinite;
}
@keyframes avatarFloat {
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}
.profileImageChoice button.prepared {
  border-color: #55e6a5;
  background: #173f3a;
  color: #bfffe2;
}
.profilePrivacyNotice {
  display: flex;
  gap: 13px;
  padding: 16px 21px;
  border-top: 1px solid #2e4d69;
  background: #08182b;
}
.profilePrivacyNotice b {
  color: #f5c84c;
  white-space: nowrap;
}
.profilePrivacyNotice span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
@media (max-width: 850px) {
  .profileImageChoices {
    grid-template-columns: 1fr;
  }
  .profileImageChoice {
    grid-template-columns: 130px 1fr;
  }
}
@media (max-width: 650px) {
  .marketTabs {
    grid-template-columns: 1fr 1fr;
  }
  .profileImageChoice {
    grid-template-columns: 1fr;
  }
  .profilePreview {
    min-height: 140px;
  }
  .profilePrivacyNotice {
    flex-direction: column;
  }
  .profileImageChoice button {
    width: 100%;
  }
}
@media (max-width: 650px) {
  .trackGrid {
    grid-template-columns: 1fr;
  }
  .track {
    min-height: 115px;
  }
  .domainNav {
    align-items: stretch;
    flex-direction: column;
  }
  .domainNav select {
    width: 100%;
  }
  .domainSettings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .domainSettings > select,
  .domainSettings label select {
    min-width: 0;
    width: 100%;
  }
  .coachHeader {
    flex-direction: column;
  }
  .coachBadges {
    justify-content: flex-start;
  }
  .coachLog {
    height: 360px;
    padding: 13px;
  }
  .coachMessage {
    max-width: 92%;
  }
  .coachComposer {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .coachComposer button {
    min-height: 48px;
  }
  .marketIntro {
    grid-template-columns: 1fr;
  }
  .marketTabs {
    grid-template-columns: 1fr 1fr;
  }
  .marketFilters,
  .instructorGrid,
  .teacherForm,
  .rateNotes {
    grid-template-columns: 1fr;
  }
  .teacherForm .wide {
    grid-column: auto;
  }
  .mentorTop {
    grid-template-columns: auto 1fr;
  }
  .mentorLevel {
    grid-column: 1/-1;
    width: max-content;
  }
  .mentorMeta {
    grid-template-columns: 1fr;
  }
  .studioHead {
    align-items: stretch;
    flex-direction: column;
  }
  .teacherForm fieldset,
  .locationSetup,
  .teacherNotice {
    align-items: stretch;
    flex-direction: column;
  }
  .studioActions {
    justify-content: stretch;
  }
  .studioActions button {
    width: 100%;
  }
  .rateRow {
    grid-template-columns: 1fr;
  }
  .rateHeader {
    display: none;
  }
  .bookingRow {
    grid-template-columns: 1fr;
  }
  .bookingRow strong {
    width: max-content;
  }
  .distanceTools {
    align-items: stretch;
    flex-direction: column;
  }
  .marketMode {
    font-size: 0.68rem;
    padding: 7px;
  }
  .mentorBottom {
    align-items: stretch;
    flex-direction: column;
  }
  .mentorBottom button {
    width: 100%;
  }
  .domainHead {
    grid-template-columns: auto 1fr;
  }
  .domainScore {
    grid-column: 1/-1;
    text-align: center;
  }
  .domainScore b {
    display: inline;
    margin-left: 6px;
  }
  .domainTabs {
    grid-template-columns: 1fr 1fr;
  }
  .domainChoices {
    grid-template-columns: 1fr;
  }
  .domainWork {
    min-height: 400px;
  }
  .careerCard,
  .quizPanel,
  .visualPanel {
    min-height: 330px;
    padding: 21px 14px;
  }
  .visualMnemonic {
    width: 145px;
    height: 145px;
  }
  .visualMnemonic span {
    font-size: 4.8rem;
  }
  .visualAnswer .typeInput {
    width: 100%;
    margin-right: 0;
  }
  .speakVisual {
    width: 110px;
    height: 110px;
  }
  .speakVisual span {
    font-size: 4rem;
  }
  .translateGrid,
  .languagePair,
  .dictionaryPanel .languagePair,
  .ideShell {
    grid-template-columns: 1fr;
  }
  .swapButton {
    margin: auto;
    transform: rotate(90deg);
  }
  .dictionarySearch {
    grid-template-columns: 1fr 1fr;
  }
  .dictionarySearch .typeInput {
    grid-column: 1/-1;
  }
  .translateBox {
    min-height: 245px;
  }
  [data-domain="coding"] .domainTabs {
    grid-template-columns: 1fr 1fr;
  }
  .cloudModeBar {
    align-items: stretch;
    flex-direction: column;
  }
  .cloudModeBar label {
    justify-content: space-between;
  }
  .cloudModeBar select {
    max-width: 62%;
  }
  .ideLesson {
    padding: 16px;
  }
  .ideEditor {
    min-height: 220px;
  }
  .ideBar em {
    display: none;
  }
  body[data-domain="coding"] .domainTabs {
    grid-template-columns: 1fr 1fr;
  }
}
.newsApp {
  width: min(1240px, 100%);
}
.newsDate {
  border: 1px solid #416589;
  border-radius: 999px;
  background: #102b49;
  color: #bdeeff;
  padding: 9px 13px;
  font-size: 0.76rem;
  font-weight: 950;
}
.newsIntro {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.65fr);
  gap: 18px;
  align-items: center;
  margin: 22px 0;
}
.newsIntro h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 7px 0 10px;
}
.newsIntro p {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}
.newsSourceNote {
  border: 1px solid #355b7b;
  border-left: 5px solid var(--yellow);
  border-radius: 17px;
  background: linear-gradient(145deg, #173656, #0a1f38);
  padding: 16px;
}
.newsSourceNote b,
.newsSourceNote span {
  display: block;
}
.newsSourceNote span {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 5px;
  font-size: 0.84rem;
}
.newsControls {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr auto;
  gap: 10px;
  align-items: end;
  border: 1px solid #355574;
  border-radius: 18px;
  background: #0a1e37;
  padding: 14px;
}
.newsControls label {
  display: grid;
  gap: 6px;
  color: #9eb5d0;
  font-size: 0.78rem;
  font-weight: 900;
}
.newsControls select,
.newsControls input {
  width: 100%;
  background: #07182d;
  color: white;
  border: 1px solid #365a7d;
  border-radius: 12px;
  padding: 11px;
  font: 750 0.94rem inherit;
}
.newsStatus {
  min-height: 37px;
  padding: 10px 2px;
  color: #93aac3;
  font-size: 0.82rem;
  font-weight: 800;
}
.newsLayout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: start;
}
.headlineColumn,
.readerPanel,
.excerptPanel,
.newsCoach {
  border: 1px solid #345675;
  border-radius: 21px;
  background: linear-gradient(150deg, #123353, #081a31);
  overflow: hidden;
}
.headlineColumn {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
}
.headlineHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 17px;
  border-bottom: 1px solid #2e4c68;
}
.headlineHead h2 {
  font-size: 1.25rem;
  margin: 5px 0;
}
.headlineList {
  overflow: auto;
  padding: 10px;
  display: grid;
  gap: 9px;
}
.headlineCard {
  border: 1px solid #31516f;
  border-radius: 15px;
  background: #0b2039;
  padding: 13px;
  transition: 0.15s;
}
.headlineCard:hover {
  border-color: #4c769a;
  transform: translateY(-1px);
}
.headlineMeta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #7fddef;
  font-size: 0.69rem;
  font-weight: 900;
}
.headlineMeta span {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.headlineMeta time {
  color: #8299b4;
}
.headlineCard h3 {
  font-size: 1rem;
  line-height: 1.4;
  margin: 9px 0 12px;
}
.headlineButtons {
  display: flex;
  align-items: center;
  gap: 9px;
}
.headlineButtons a {
  color: #9feaff;
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
}
.readerColumn {
  display: grid;
  gap: 13px;
}
.readerPanel {
  min-height: 430px;
}
.readerEmpty {
  min-height: 430px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 30px;
}
.readerEmpty > span {
  font-size: 4rem;
}
.readerEmpty h2 {
  margin: 10px 0;
}
.readerEmpty p {
  color: var(--muted);
}
.readerSource {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 19px;
  border-bottom: 1px solid #2f4d6a;
}
.readerSource h2 {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  line-height: 1.35;
  margin: 6px 0;
}
.readerSourceActions,
.readerActions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.readerSourceActions {
  justify-content: flex-end;
  flex: none;
}
.readerSourceActions a {
  text-decoration: none;
}
.readerActions {
  padding: 12px 19px;
  background: #091a30;
  border-bottom: 1px solid #294660;
}
.micRead.listening,
.compactMic.listening {
  animation: pulse 1s infinite;
  border-color: var(--red);
  box-shadow: 0 0 18px #ff4b6e88;
}
.interactiveText {
  min-height: 160px;
  padding: 24px;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.9;
  word-spacing: 0.08em;
}
.readerWord {
  display: inline;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: white;
  padding: 1px 2px;
  font: inherit;
  cursor: pointer;
  border-radius: 5px;
}
.readerWord:hover,
.readerWord:focus-visible {
  color: var(--yellow);
  border-color: var(--yellow);
}
.readerWord.selected {
  background: #3a3118;
  color: #ffe794;
}
.readerWord.reading {
  background: #0d4a61;
  color: #bff6ff;
  box-shadow: 0 0 10px #24d8ff66;
}
.wordHelper {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 13px 19px;
  background: #07182b;
  border-top: 1px solid #2d4b67;
}
.wordHelper > div {
  display: grid;
  flex: 1;
}
.wordHelper b {
  font-size: 1.15rem;
  color: #9feaff;
}
.wordHelper span {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 3px;
}
.wordHelper a {
  text-decoration: none;
}
.excerptPanel details {
  padding: 16px;
}
.excerptPanel summary {
  cursor: pointer;
  font-weight: 900;
  color: #9feaff;
}
.excerptPanel p {
  color: var(--muted);
  font-size: 0.82rem;
}
.excerptPanel textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  border: 1px solid #365a7d;
  border-radius: 13px;
  background: #07182c;
  color: white;
  padding: 12px;
  font: 700 0.96rem/1.5 inherit;
  margin-bottom: 9px;
}
.newsCoach {
  padding: 17px;
}
.coachMiniHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.coachMiniHead h2 {
  margin: 5px 0;
}
.coachMiniHead > span {
  border: 1px solid #42698e;
  border-radius: 999px;
  padding: 7px 10px;
  color: #bdefff;
  font-size: 0.72rem;
  font-weight: 900;
}
.newsCoachQuick {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.newsCoachQuick button {
  border: 1px solid #3a607f;
  border-radius: 999px;
  background: #0b2541;
  color: #d8e8f7;
  padding: 8px 11px;
  font: 800 0.75rem inherit;
  cursor: pointer;
}
.newsCoachLog {
  height: 220px;
  overflow: auto;
  background: #07182b;
  border: 1px solid #2d4d69;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.newsCoachMessage {
  max-width: 87%;
  align-self: flex-start;
  border: 1px solid #31516f;
  border-radius: 13px;
  background: #102b48;
  padding: 10px;
}
.newsCoachMessage.user {
  align-self: flex-end;
  border-color: #6871af;
  background: #282f5d;
}
.newsCoachMessage b {
  color: #9feaff;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.newsCoachMessage p {
  margin: 4px 0 0;
  line-height: 1.45;
}
.newsCoachForm {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.newsCoachForm > input {
  height: 48px;
  border: 1px solid #365a7d;
  border-radius: 12px;
  background: #07182c;
  color: white;
  padding: 11px;
  font: 750 0.94rem inherit;
}
.newsCoachForm .compactMic {
  height: 48px;
  width: 66px;
}
.newsCredit {
  text-align: center;
  color: #7890aa;
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 18px;
}
@media (max-width: 650px) {
  .newsIntro,
  .newsLayout {
    grid-template-columns: 1fr;
  }
  .newsControls {
    grid-template-columns: 1fr 1fr;
  }
  .headlineColumn {
    position: static;
    max-height: none;
  }
  .headlineList {
    max-height: 520px;
  }
  .readerSource {
    flex-direction: column;
  }
  .readerSourceActions {
    justify-content: flex-start;
  }
  .wordHelper {
    align-items: stretch;
    flex-direction: column;
  }
  .wordHelper .domainButton {
    width: 100%;
    text-align: center;
  }
  .newsCoachForm {
    grid-template-columns: 1fr auto;
  }
  .newsCoachForm > input {
    grid-column: 1/-1;
  }
  .newsDate {
    font-size: 0.68rem;
    padding: 7px;
  }
}
.newsModeTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 14px 0;
}
.newsModeTabs button {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid #365878;
  border-radius: 16px;
  background: #0a1e37;
  color: white;
  padding: 14px 16px;
  cursor: pointer;
}
.newsModeTabs button b {
  font-size: 1rem;
}
.newsModeTabs button span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.newsModeTabs button.active {
  border-color: var(--blue);
  background: #11395a;
  box-shadow: 0 0 20px #24d8ff22;
}
@media (max-width: 650px) {
  .newsModeTabs {
    grid-template-columns: 1fr;
  }
}
.episodeArt.music {
  background: linear-gradient(145deg, #b53b89, #452269);
}
.episodeArt.culture {
  background: linear-gradient(145deg, #d16c33, #5a2922);
}
.episodeArt.nature {
  background: linear-gradient(145deg, #4a9b55, #163f39);
}
.podcastApp {
  width: min(1240px, 100%);
}
.podcastSignal {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #365878;
  border-radius: 999px;
  padding: 9px 12px;
  color: #9feaff;
  font-size: 0.78rem;
  font-weight: 950;
}
.podcastSignal i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff4b8b;
  box-shadow: 0 0 14px #ff4b8b;
}
.podcastIntro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.4fr);
  gap: 18px;
  align-items: center;
  margin: 22px 0;
}
.podcastIntro h1 {
  font-size: clamp(2.2rem, 7vw, 4.3rem);
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 7px 0 12px;
}
.podcastIntro p {
  max-width: 760px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.soundOrb {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #3a5d7e;
  border-radius: 24px;
  background: radial-gradient(circle at center, #29496e, #091b32 66%);
  overflow: hidden;
}
.soundOrb span {
  width: 9px;
  border-radius: 999px;
  background: linear-gradient(#ff4b8b, #24d8ff);
  box-shadow: 0 0 15px #24d8ff55;
  animation: podWave 1.25s ease-in-out infinite;
}
.soundOrb span:nth-child(1),
.soundOrb span:nth-child(5) {
  height: 38px;
}
.soundOrb span:nth-child(2),
.soundOrb span:nth-child(4) {
  height: 76px;
  animation-delay: 0.18s;
}
.soundOrb span:nth-child(3) {
  height: 112px;
  animation-delay: 0.34s;
}
@keyframes podWave {
  50% {
    transform: scaleY(0.48);
    opacity: 0.72;
  }
}
.podcastControls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 1px solid #355574;
  border-radius: 18px;
  background: #0a1e37;
  padding: 14px;
  margin-bottom: 14px;
}
.podcastControls label {
  display: grid;
  gap: 6px;
  color: #9eb5d0;
  font-size: 0.88rem;
  font-weight: 900;
}
.podcastControls select {
  width: 100%;
  background: #07182d;
  color: white;
  border: 1px solid #365a7d;
  border-radius: 12px;
  padding: 12px;
  font: 750 0.95rem inherit;
}
.podcastWorkspace {
  display: grid;
  grid-template-columns: minmax(290px, 0.68fr) minmax(0, 1.32fr);
  gap: 14px;
  align-items: start;
}
.episodeShelf,
.podcastPlayer,
.listeningChallenge,
.podcastCoach {
  border: 1px solid #345675;
  border-radius: 21px;
  background: linear-gradient(150deg, #123353, #081a31);
  overflow: hidden;
}
.episodeShelf {
  position: sticky;
  top: 10px;
}
.episodeShelfHead {
  padding: 18px;
  border-bottom: 1px solid #2e4c68;
}
.episodeShelfHead h2 {
  margin: 6px 0 0;
}
.episodeList {
  padding: 10px;
  display: grid;
  gap: 9px;
}
.episodeChoice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid #31516f;
  border-radius: 15px;
  background: #0b2039;
  color: white;
  padding: 13px;
  text-align: left;
  cursor: pointer;
}
.episodeChoice:hover,
.episodeChoice.active {
  border-color: #24d8ff;
  background: #103252;
  box-shadow: 0 0 18px #24d8ff18;
}
.episodeChoice b,
.episodeChoice small {
  display: block;
}
.episodeChoice b {
  font-size: 0.95rem;
  line-height: 1.35;
}
.episodeChoice small {
  color: #8fa8c2;
  margin-top: 5px;
  font-size: 0.78rem;
}
.episodeNumber {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #42698e;
  border-radius: 13px;
  color: #9feaff;
  font-weight: 950;
}
.podcastStage {
  display: grid;
  gap: 13px;
}
.podcastPlayer {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 20px;
}
.episodeArt {
  position: relative;
  min-height: 190px;
  border-radius: 19px;
  background: linear-gradient(145deg, #1a7f96, #0c2749);
  overflow: hidden;
  padding: 18px;
  box-shadow: inset 0 0 0 1px #ffffff22;
}
.episodeArt:after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border: 22px solid #ffffff16;
  border-radius: 50%;
  right: -42px;
  bottom: -48px;
}
.episodeArt.space {
  background: linear-gradient(145deg, #5c4fc4, #121d52);
}
.episodeArt.health {
  background: linear-gradient(145deg, #0c987e, #123d55);
}
.episodeArt span {
  position: relative;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.16em;
}
.episodeArt b {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 12px;
  font-size: 4.5rem;
  line-height: 1;
  color: #ffffffdd;
}
.episodeNow {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.episodeNow h2 {
  font-size: clamp(1.35rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin: 7px 0;
}
.episodeNow p {
  color: var(--muted);
  margin: 0 0 15px;
}
.audioTrack {
  height: 7px;
  border-radius: 999px;
  background: #061325;
  overflow: hidden;
  margin: 3px 0 18px;
}
.audioTrack div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4b8b, #24d8ff);
  transition: width 0.25s;
}
.playerButtons,
.recapActions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.podcastPlay {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  background: #24d8ff;
  color: #06172c;
  padding: 12px 16px;
  font: 950 0.9rem inherit;
  cursor: pointer;
  box-shadow: 0 0 20px #24d8ff33;
}
.podcastPlay.playing {
  background: #ff4b8b;
  color: white;
}
.listeningChallenge,
.podcastCoach {
  padding: 18px;
}
.challengeHead {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}
.challengeHead h2 {
  margin: 5px 0;
}
.challengeHead > span {
  border: 1px solid #436a8b;
  border-radius: 999px;
  padding: 8px 11px;
  color: #9feaff;
  font-size: 0.78rem;
  font-weight: 900;
}
.listeningChallenge > p {
  color: var(--muted);
  line-height: 1.5;
}
.recapMic {
  min-width: 150px;
  height: 48px;
}
.recapMic.listening {
  animation: pulse 1s infinite;
  border-color: #ff4b8b;
  box-shadow: 0 0 22px #ff4b8b66;
}
.recapResult,
.summaryPanel,
.transcriptPanel {
  border: 1px solid #31516f;
  border-radius: 15px;
  background: #07182b;
  padding: 15px;
  margin-top: 12px;
  line-height: 1.55;
}
.recapResult > span {
  color: var(--muted);
}
.recapResult p {
  margin: 6px 0;
}
.recapResult strong,
.recapResult small {
  display: block;
}
.recapResult strong {
  color: #9feaff;
}
.recapResult small {
  color: var(--muted);
  margin-top: 5px;
}
.ideaMeter {
  height: 7px;
  background: #132b43;
  border-radius: 999px;
  overflow: hidden;
  margin: 11px 0;
}
.ideaMeter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ff4b8b, #24d8ff);
}
.keywordChips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.keywordChips span {
  border: 1px solid #365878;
  border-radius: 999px;
  padding: 5px 9px;
  color: #819ab5;
  font-size: 0.78rem;
}
.keywordChips span.hit {
  border-color: #24d8ff;
  color: #bdf5ff;
  background: #0c3d52;
}
.summaryPanel p,
.transcriptPanel p {
  font-size: 1rem;
  line-height: 1.75;
  margin: 7px 0;
}
.summaryPanel small {
  display: block;
  border-top: 1px solid #294660;
  color: #9fb3c8;
  margin-top: 10px;
  padding-top: 10px;
  line-height: 1.5;
}
.podcastCoach .newsCoachLog {
  height: 190px;
}
@media (max-width: 760px) {
  .podcastIntro,
  .podcastWorkspace {
    grid-template-columns: 1fr;
  }
  .soundOrb {
    height: 100px;
  }
  .podcastControls {
    grid-template-columns: 1fr;
  }
  .episodeShelf {
    position: static;
  }
  .podcastPlayer {
    grid-template-columns: 1fr;
  }
  .episodeArt {
    min-height: 145px;
  }
  .challengeHead {
    flex-direction: column;
  }
  .recapActions > * {
    width: 100%;
  }
}

/* Optional home-page daily language cards */
.dailyHome{margin-top:20px;border:1px solid #304d6d;border-radius:22px;background:linear-gradient(145deg,#07182d,#0a2036);padding:18px;color:#eef9ff}.dailyHomeHead{display:flex;justify-content:space-between;align-items:end;gap:18px}.dailyHomeHead span,.dailyWidgetTitle small{color:#67e6ff;font-size:.74rem;font-weight:900;letter-spacing:.12em}.dailyHomeHead h2{margin:4px 0}.dailyHomeHead p{margin:0;color:#9fb4c8;line-height:1.45}.dailyHomeControls{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.dailyHomeControls label,.dailyPreferences>label{display:grid;gap:5px;color:#a8bdcf;font-size:.8rem;font-weight:800}.dailyHomeControls select,.dailyPreferences select,.weatherSearch input,.dailyNoteLabel input{min-height:42px;border:1px solid #3d6380;border-radius:10px;background:#061322;color:white;padding:8px 10px}.dailyPreferences{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin:15px 0 0;border:1px solid #294863;border-radius:13px;background:#061426;padding:12px}.dailyPreferences>label:has(input[type=checkbox]){display:flex;align-items:center;gap:7px}.dailyPreferences input[type=checkbox]{width:19px;height:19px;accent-color:#20c8ee}.dailyWidgetGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.dailyWidget{border:1px solid #315676;border-radius:17px;background:#071527;padding:14px;min-width:0}.dailyWidget[hidden]{display:none}.dailyWidgetTitle{display:flex;align-items:center;gap:10px}.dailyWidgetTitle>span{font-size:1.65rem}.dailyWidgetTitle>div{min-width:0;flex:1}.dailyWidgetTitle h3{margin:3px 0;line-height:1.25}.dailySpeak{width:38px;height:38px;border:1px solid #3b6684;border-radius:11px;background:#0e2d46;color:white;cursor:pointer}.dailySpeak:disabled{opacity:.45}.weekStrip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:14px 0}.weekStrip div{display:grid;gap:3px;text-align:center;border-radius:9px;background:#0b2941;padding:8px 2px;color:#91aac0}.weekStrip .today{background:#0d6682;color:white;box-shadow:0 0 0 2px #32d9ff inset}.weekStrip b{font-size:.72rem}.weekStrip span{font-size:1rem;font-weight:900}.dailyNoteLabel{display:grid;gap:5px;color:#91aac0;font-size:.76rem}.dailyNoteLabel input{width:100%}.weatherCurrent{display:flex;align-items:center;gap:12px;margin:14px 0;border-radius:13px;background:#0c2b43;padding:12px}.weatherCurrent strong{font-size:2rem;color:#67e6ff}.weatherCurrent span{color:#bed3e1}.weatherDays{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.weatherDays div{display:grid;text-align:center;gap:3px;border:1px solid #274961;border-radius:10px;padding:7px 3px}.weatherDays span{font-size:1.2rem}.weatherDays small{font-size:.7rem;color:#abc0cf}.weatherDays em{font-size:.65rem;color:#67e6ff;font-style:normal;overflow:hidden;text-overflow:ellipsis}.weatherSearch{display:grid;grid-template-columns:minmax(100px,1fr) auto auto;gap:6px;margin-top:12px}.dailyPrivacy{display:block;color:#839db2;margin-top:8px}.dailyHeadlines{display:grid;gap:7px;margin-top:13px}.dailyHeadlines>p{color:#9eb5c8}.dailyHeadlines article{display:flex;align-items:center;gap:7px;border:1px solid #294b66;border-radius:11px;background:#0a2338;padding:9px}.dailyHeadlines article>div{display:grid;gap:4px;min-width:0;flex:1}.dailyHeadlines small{color:#8eaabd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dailyHeadlines a{color:#f4fbff;text-decoration:none;line-height:1.3}.dailyHeadlines article>button{border:0;background:transparent;color:#65e5ff;font-size:1.05rem;cursor:pointer}.dailyNewsLink{display:flex!important;justify-content:center;margin-top:10px;text-decoration:none}.dailyHome>footer{margin-top:11px;color:#718da3;font-size:.72rem;text-align:right}
@media(max-width:1050px){.dailyWidgetGrid{grid-template-columns:1fr 1fr}.dailyNews{grid-column:1/-1}}
@media(max-width:700px){.dailyHomeHead{align-items:stretch;flex-direction:column}.dailyHomeControls{display:grid;grid-template-columns:1fr auto}.dailyHomeControls label{min-width:0}.dailyHomeControls select{width:100%}.dailyWidgetGrid{grid-template-columns:1fr}.dailyNews{grid-column:auto}.weatherSearch{grid-template-columns:1fr 1fr}.weatherSearch input{grid-column:1/-1}.weekStrip b{font-size:.65rem}.dailyHome>footer{text-align:left}}

.moneyApp{max-width:1180px}.moneyHero{display:flex;justify-content:space-between;gap:24px;align-items:end;margin:22px 0;border:1px solid #315374;border-radius:22px;background:linear-gradient(135deg,#09213b,#0b1830);padding:22px;color:white}.moneyHero h1{margin:5px 0;font-size:clamp(1.8rem,4vw,3.2rem)}.moneyHero p{margin:0;color:#a9bfd2;max-width:680px;line-height:1.5}.moneyHero label,.moneyInputPanel label{display:grid;gap:6px;color:#9eb5c9;font-weight:850;font-size:.82rem}.moneyHero select,.moneyInputPanel select,.moneyInputPanel input{min-height:46px;border:1px solid #416985;border-radius:11px;background:#061628;color:white;padding:9px 11px;font:800 1rem inherit}.moneyConverter{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(340px,1.2fr);gap:14px}.moneyInputPanel,.moneyResultPanel,.moneyCoach,.moneyVocabulary{border:1px solid #315675;border-radius:19px;background:#07182c;color:white;padding:19px}.moneyInputPanel h2,.moneyLearning h2{margin:5px 0 16px}.moneyCurrencyRow{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;margin:10px 0}.moneySwap{width:46px;height:46px;border:1px solid #3e6c89;border-radius:12px;background:#0e314c;color:#68e6ff;font-size:1.35rem;cursor:pointer}.moneyInputPanel>.primary{width:100%;margin-top:8px}.moneyStatus{min-height:42px;color:#8ea9bd;line-height:1.4}.moneyResultPanel{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 80% 20%,#103f5f,#07182c 55%)}.moneyResult{font-size:clamp(1.65rem,4vw,3.2rem);font-weight:950;color:#f2fbff;line-height:1.2;margin:12px 0}.moneyRateLine{color:#68e6ff;font-weight:800}.moneyActions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 12px}.moneyResultPanel>small{color:#8ca5b8;line-height:1.45}.moneyLearning{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}.moneyCoachHead{display:flex;justify-content:space-between;gap:12px}.moneyCoachHead>span{align-self:start;border:1px solid #4f5a78;border-radius:999px;padding:5px 8px;color:#aebad0;font-size:.66rem;font-weight:900}.moneyCoach p,.moneyCoach li,.moneyVocabulary p{color:#a8bdcd;line-height:1.55}.moneyCoach details{margin-top:14px;border-top:1px solid #294960;padding-top:12px}.moneyCoach summary{color:#67e6ff;font-weight:900;cursor:pointer}.moneyExamples{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.moneyExamples div{display:grid;gap:4px;border:1px solid #2e506b;border-radius:11px;background:#0b263d;padding:10px}.moneyExamples span{color:#93aabd;font-size:.75rem}.moneyExamples b{font-size:.9rem}.moneyWordGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.moneyWordGrid button{display:grid;gap:3px;text-align:left;border:1px solid #315b77;border-radius:11px;background:#0a2841;color:white;padding:10px;cursor:pointer}.moneyWordGrid button:hover,.moneyWordGrid button:focus-visible{border-color:#66e6ff}.moneyWordGrid span{color:#90a9bc;font-size:.75rem}.savedMoney{margin-top:17px;border-top:1px solid #294960;padding-top:10px}.savedMoney h3{margin:0 0 8px}.savedMoneyList,.savedMoney>div{display:grid;gap:6px}.savedMoney>div>div{display:flex;border:1px solid #294d66;border-radius:9px;overflow:hidden}.savedMoney>div button{border:0;background:#0a243a;color:white;padding:8px;cursor:pointer}.savedMoney>div button:first-child{display:flex;justify-content:space-between;gap:8px;flex:1}.savedMoney>div button span{color:#91a8ba}.moneyCredit{text-align:center;color:#7992a7;font-size:.78rem;margin:18px}.moneyCredit a{color:#65e5ff}@media(max-width:800px){.moneyHero{align-items:stretch;flex-direction:column}.moneyConverter,.moneyLearning{grid-template-columns:1fr}.moneyExamples{grid-template-columns:1fr 1fr}}@media(max-width:520px){.moneyCurrencyRow{grid-template-columns:1fr 44px}.moneyCurrencyRow label:last-child{grid-column:1/-1}.moneySwap{grid-column:2;grid-row:1}.moneyWordGrid{grid-template-columns:1fr}.moneyCoachHead{display:block}.moneyCoachHead>span{display:inline-block;margin-bottom:8px}}

/* Music Performance Studio */
.musicStudio{display:grid;gap:18px;color:#eaf8ff}.musicStudioHead,.auv3Bridge{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #304e73;border-radius:18px;background:linear-gradient(120deg,#07182f,#10233d);padding:18px}.musicStudioHead h2,.musicStudio h3{margin:4px 0}.musicStudioHead p,.musicStudio p{line-height:1.45}.studioMeters{display:flex;gap:8px}.studioMeters span{min-width:82px;border:1px solid #335d7e;border-radius:13px;background:#081426;padding:10px;text-align:center;color:#91abc2}.studioMeters b{display:block;color:#64e6ff;font-size:1.35rem}.studioGrid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.65fr);gap:16px}.studioMain,.cultureLab,.recordLab,.musicCoach,.promptSoundLab{border:1px solid #2d506f;border-radius:18px;background:#06172b;padding:16px}.studioToolbar,.careerActions,.coachActions{display:flex;flex-wrap:wrap;gap:8px;align-items:end}.studioToolbar label{display:grid;gap:5px;color:#a9bed1;font-size:.85rem}.studioToolbar select,.styleSelect,.soundPromptForm input{min-height:42px;border:1px solid #3c6482;border-radius:10px;background:#071121;color:white;padding:8px 11px}.musicKeyboard{position:relative;display:flex;height:210px;margin:18px 0 8px;overflow-x:auto;padding-bottom:4px}.pianoKey{position:relative;flex:1 0 46px;min-width:46px;border:1px solid #7389a2;border-radius:0 0 8px 8px;background:linear-gradient(#fff,#dce8ee);color:#17314a;cursor:pointer}.pianoKey.black{z-index:2;flex:0 0 30px;min-width:30px;height:63%;margin:0 -15px;background:linear-gradient(#15283c,#02060a);color:#e7f8ff;border-color:#40617c}.pianoKey span{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);font-size:.74rem}.pianoKey.playing,.pianoKey:active{background:linear-gradient(#6ff5ff,#168bd7);box-shadow:0 0 24px #24d8ff}.keyboardHint{color:#92a9bf;font-size:.83rem}.padRows{display:grid;grid-template-columns:1fr 1fr;gap:14px}.soundPads{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.soundPads button,.coachActions button{min-height:48px;border:1px solid #476886;border-radius:11px;background:#102d47;color:white;text-transform:capitalize;cursor:pointer}.soundPads button:active,.coachActions button:active{background:#14a9d2;transform:scale(.97)}.texturePads button{background:#172c47}.cultureLab{background:radial-gradient(circle at 85% 0,#213c56,#081528 55%)}.cultureLab small,.cultureNote,.musicCoach small{color:#8fa8bd}.cultureLab p{color:#c6d5e1}.cultureNote{border-top:1px solid #29445d;padding-top:12px;font-size:.78rem}.studioLower{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fileButton{position:relative;overflow:hidden;display:inline-flex;align-items:center}.fileButton input{position:absolute;inset:0;opacity:0;cursor:pointer}.recordLab audio,.promptSoundLab audio{width:100%;margin-top:12px}.recordState,.musicCoachReply,.promptResult{min-height:52px;border-radius:11px;background:#0d2941;padding:11px;color:#cfe7f4}.promptSoundLab{display:grid;grid-template-columns:minmax(240px,1fr) minmax(270px,.9fr);gap:14px;align-items:center}.soundPromptForm{display:flex;gap:8px}.soundPromptForm input{width:100%}.promptResult,.promptSoundLab audio,.promptSoundLab>.downloadPrompt{grid-column:2}.auv3Bridge{border-color:#735a27;background:linear-gradient(120deg,#171a2b,#2b2112)}.auv3Bridge span{white-space:nowrap;border:1px solid #9b7832;border-radius:999px;background:#33260e;color:#ffd77a;padding:8px 12px}.musicStudio button:focus-visible,.musicStudio select:focus-visible,.musicStudio input:focus-visible{outline:3px solid #24d8ff;outline-offset:2px}
@media(max-width:900px){.studioGrid,.studioLower{grid-template-columns:1fr}.cultureLab{order:-1}.promptSoundLab{grid-template-columns:1fr}.promptResult,.promptSoundLab audio,.promptSoundLab>.downloadPrompt{grid-column:1}}
@media(max-width:620px){.musicStudioHead,.auv3Bridge{align-items:flex-start;flex-direction:column}.studioMeters{width:100%}.studioMeters span{flex:1}.padRows{grid-template-columns:1fr}.musicKeyboard{height:170px}.pianoKey{flex-basis:39px;min-width:39px}.pianoKey.black{flex-basis:26px;min-width:26px;margin:0 -13px}.soundPromptForm{flex-direction:column}}
.anatomyViewer {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(320px, 1fr) minmax(
      260px,
      0.65fr
    );
  min-height: 680px;
  overflow: hidden;
  border: 1px solid #496480;
  border-radius: 22px;
  background: #061426;
  box-shadow: 0 20px 55px #0005;
}
.anatomyAreaRail,
.anatomyDetail {
  padding: 18px;
  background: linear-gradient(160deg, #123553, #081a30);
}
.anatomyAreaRail {
  max-height: 820px;
  overflow: auto;
  border-right: 1px solid #355570;
}
.anatomyAreaRail h2,
.anatomyDetail h2 {
  margin: 5px 0;
}
.anatomyAreaRail > p,
.anatomyDetail > p,
.medicalJobFocus p {
  color: #a7bbcf;
  line-height: 1.5;
}
.medicalJobPicker {
  display: grid;
  gap: 5px;
  margin: 9px 0;
  color: #a9bdd1;
  font-size: 0.82rem;
  font-weight: 900;
}
.medicalJobPicker select {
  width: 100%;
  border: 1px solid #456683;
  border-radius: 11px;
  background: #07182d;
  color: white;
  padding: 10px;
  font: 800 0.88rem inherit;
}
.medicalJobFocus {
  margin: 9px 0 17px;
  border: 1px solid #3c5f7c;
  border-radius: 13px;
  background: #0a223a;
  padding: 11px;
}
.medicalJobFocus > b {
  color: #8feafa;
}
.medicalJobFocus p {
  margin: 6px 0 9px;
  font-size: 0.83rem;
}
.medicalJobFocus > div,
.anatomyAreaButtons,
.anatomyTermButtons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.medicalFocusChip,
.anatomyAreaButton,
.anatomyTermButton {
  border: 1px solid #3d617e;
  border-radius: 999px;
  background: #0c2945;
  color: #d6e7f4;
  padding: 7px 9px;
  font: 800 0.78rem inherit;
  cursor: pointer;
}
.medicalFocusChip {
  padding: 5px 7px;
  color: #9feaff;
}
.anatomyAreaButton.active,
.anatomyTermButton.active {
  border-color: #24d8ff;
  background: #154760;
  box-shadow: 0 0 12px #24d8ff44;
}
.anatomyAreaButtons {
  margin-bottom: 12px;
}
.anatomyTermButtons {
  max-height: 285px;
  overflow: auto;
}
.anatomyStage {
  position: relative;
  align-self: start;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: radial-gradient(circle at 42% 25%, #17436b, #061326 66%);
}
.anatomyStage img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.anatomyStage > span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  border: 1px solid #54718f;
  border-radius: 999px;
  background: #061426df;
  color: #b9cee1;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 800;
}
.anatomyHotspots {
  position: absolute;
  inset: 0;
}
.anatomyHotspot {
  position: absolute;
  width: 29px;
  height: 29px;
  transform: translate(-50%, -50%);
  border: 2px solid #d9fbff;
  border-radius: 50%;
  background: #24d8ff66;
  box-shadow: 0 0 0 5px #24d8ff22, 0 0 20px #24d8ff;
  cursor: pointer;
  animation: anatomyPulse 1.8s ease-in-out infinite;
}
.anatomyHotspot.active {
  border-color: #fff39b;
  background: #f5c84caa;
  box-shadow: 0 0 0 7px #f5c84c33, 0 0 24px #f5c84c;
}
@keyframes anatomyPulse {
  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}
.anatomyDetail {
  border-left: 1px solid #355570;
}
.anatomyDetail > small {
  color: #91a9c0;
}
.anatomyExample {
  margin: 16px 0;
  border-left: 4px solid #f5c84c;
  border-radius: 10px;
  background: #172b45;
  color: #d8e6f3;
  padding: 13px;
  line-height: 1.55;
}
.anatomyDetailActions {
  display: grid;
  gap: 8px;
}
@media (max-width: 980px) {
  .anatomyViewer {
    grid-template-columns: 230px 1fr;
  }
  .anatomyDetail {
    grid-column: 1/-1;
    border-top: 1px solid #355570;
    border-left: 0;
  }
}
@media (max-width: 680px) {
  .anatomyViewer {
    grid-template-columns: 1fr;
  }
  .anatomyAreaRail {
    max-height: none;
    border-right: 0;
  }
  .anatomyStage {
    min-height: 0;
  }
  .anatomyDetail {
    grid-column: auto;
  }
}
.pathwayViewer {
  display: grid;
  grid-template-columns: minmax(210px, 0.5fr) minmax(360px, 1.2fr) minmax(
      250px,
      0.6fr
    );
  min-height: 590px;
  overflow: hidden;
  border: 1px solid #42627e;
  border-radius: 22px;
  background: #061426;
  box-shadow: 0 18px 48px #0005;
}
.pathwayRoleRail,
.pathwayViewerDetail {
  padding: 18px;
  background: linear-gradient(155deg, #123552, #081a30);
}
.pathwayRoleRail {
  border-right: 1px solid #355570;
}
.pathwayRoleRail h2,
.pathwayViewerDetail h2 {
  margin: 5px 0;
}
.pathwayRoleRail > p,
.pathwayViewerDetail > p {
  color: #a7bbcf;
  line-height: 1.5;
}
.pathwayRoleButtons {
  display: grid;
  gap: 7px;
  max-height: 430px;
  overflow: auto;
}
.pathwayRoleButton {
  border: 1px solid #395d7b;
  border-radius: 11px;
  background: #0b2742;
  color: #d8e7f4;
  padding: 9px 10px;
  text-align: left;
  font: 800 0.84rem inherit;
  cursor: pointer;
}
.pathwayRoleButton.active {
  border-color: var(--domain);
  background: #16405d;
  box-shadow: inset 4px 0 var(--domain);
}
.pathwayConceptWindow {
  background: radial-gradient(circle at 50% 32%, #163e61, #061426 68%);
}
.pathwayConceptWindow > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #355570;
  background: #102943;
}
.pathwayConceptWindow > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pathwayConceptWindow > header > span,
.pathwayConceptWindow > small {
  color: #94abc1;
  font-size: 0.78rem;
  font-weight: 800;
}
.pathwayConceptWindow > small {
  display: block;
  padding: 9px 12px;
}
.pathwayConceptMap {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 10px;
  max-height: 540px;
  overflow: auto;
  padding: 14px;
}
.pathwayConceptNode {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 2px 9px;
  min-height: 82px;
  border: 1px solid #3a607e;
  border-radius: 15px;
  background: linear-gradient(145deg, #123653, #0a2038);
  color: white;
  padding: 11px;
  text-align: left;
  cursor: pointer;
}
.pathwayConceptNode > span {
  grid-row: 1/3;
  font-size: 1.75rem;
}
.pathwayConceptNode > b {
  overflow-wrap: anywhere;
}
.pathwayConceptNode > small {
  color: #8fa8bf;
}
.pathwayConceptNode.active {
  border-color: var(--domain);
  box-shadow: 0 0 18px color-mix(in srgb, var(--domain) 42%, transparent);
  transform: translateY(-2px);
}
.pathwayViewerDetail {
  border-left: 1px solid #355570;
}
.pathwayConceptIcon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border: 1px solid #4e7595;
  border-radius: 20px;
  background: #0d2d49;
  font-size: 2.5rem;
  box-shadow: 0 0 22px #24d8ff22;
}
.pathwayViewerDetail > small {
  color: #8fa8bf;
}
.pathwayGeneratedExample {
  margin: 16px 0;
  border-left: 4px solid var(--domain);
  border-radius: 11px;
  background: #172b45;
  color: #d8e6f3;
  padding: 13px;
  line-height: 1.55;
}
@media (max-width: 980px) {
  .pathwayViewer {
    grid-template-columns: 220px 1fr;
  }
  .pathwayViewerDetail {
    grid-column: 1/-1;
    border-top: 1px solid #355570;
    border-left: 0;
  }
}
@media (max-width: 680px) {
  .pathwayViewer {
    grid-template-columns: 1fr;
  }
  .pathwayRoleRail {
    border-right: 0;
  }
  .pathwayRoleButtons {
    display: flex;
    max-height: none;
    overflow-x: auto;
  }
  .pathwayRoleButton {
    flex: 0 0 180px;
  }
  .pathwayConceptMap {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .pathwayViewerDetail {
    grid-column: auto;
  }
}

/* Quest Path is intentionally a separate destination; the Match home layout is unchanged. */
.pathwayApp {
  width: min(1180px, 100%);
}
.pathLevel {
  border: 1px solid #705cf0;
  border-radius: 999px;
  background: #24234d;
  color: #c9c2ff;
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}
.pathSetup {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 22px;
  align-items: center;
  min-height: 510px;
  margin-top: 18px;
  padding: clamp(24px, 5vw, 54px);
  border: 1px solid #385b7c;
  border-radius: 28px;
  background: radial-gradient(
    circle at 18% 25%,
    #253e6e 0,
    #102745 42%,
    #08182d 75%
  );
  box-shadow: 0 24px 70px #0005;
}
.pathSetupIntro h1 {
  max-width: 680px;
  margin: 10px 0 14px;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.pathSetupIntro p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.pathSelectors {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #3e6083;
  border-radius: 22px;
  background: #081a31cc;
  box-shadow: 0 20px 45px #0004;
}
.pathSelectors label {
  display: grid;
  gap: 6px;
  color: #a9bdd2;
  font-size: 0.8rem;
  font-weight: 900;
}
.pathSelectors select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #416487;
  border-radius: 12px;
  background: #0d2947;
  color: white;
  padding: 11px;
  font: 800 0.95rem inherit;
}
.pathStart {
  min-height: 54px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, #24d8ff, #8876ff);
  color: #06152c;
  padding: 13px 17px;
  font: 950 1rem inherit;
  cursor: pointer;
  box-shadow: 0 0 28px #24d8ff33;
}
.pathStart span {
  float: right;
  font-size: 1.2rem;
}
.pathStart:disabled {
  opacity: 0.55;
  cursor: wait;
}
.pathRun {
  margin-top: 17px;
}
.pathMap {
  position: relative;
  padding: 21px 24px;
  margin-bottom: 13px;
  border: 1px solid #345776;
  border-radius: 20px;
  background: #091d35;
}
.pathRail {
  position: absolute;
  left: 45px;
  right: 45px;
  top: 39px;
  height: 6px;
  border-radius: 999px;
  background: #203c58;
  overflow: hidden;
}
.pathRail i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24d8ff, #8a78ff);
  transition: width 0.35s ease;
}
.pathNodes {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.pathNode {
  display: grid;
  justify-items: center;
  gap: 5px;
  color: #7088a2;
  font-size: 0.7rem;
  font-weight: 900;
}
.pathNode b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #35516e;
  border-radius: 50%;
  background: #0c213b;
  color: #829ab5;
  font-size: 1rem;
}
.pathNode.current b {
  border-color: #24d8ff;
  background: #123b58;
  color: white;
  box-shadow: 0 0 20px #24d8ff66;
}
.pathNode.done b {
  border-color: #8b7aff;
  background: #342e6b;
  color: white;
}
.pathLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.pathChallenge,
.pathGuide,
.pathComplete {
  border: 1px solid #355878;
  border-radius: 24px;
  background: linear-gradient(150deg, #123454, #081a31);
  box-shadow: 0 18px 50px #0004;
}
.pathChallenge {
  min-height: 545px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.pathChallengeHead {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
}
.pathChallengeHead h2 {
  margin: 5px 0;
  font-size: clamp(1.3rem, 4vw, 2rem);
}
.pathRunScore {
  text-align: right;
  color: #8ca3bc;
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.09em;
}
.pathRunScore b {
  display: block;
  color: #9feaff;
  font-size: 1.75rem;
  letter-spacing: 0;
}
.pathPrompt {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 17px;
}
.pathPrompt > span {
  font-size: 4rem;
  line-height: 1;
}
.pathPrompt > b {
  max-width: 720px;
  margin-top: 13px;
  font-size: clamp(1.55rem, 5vw, 2.75rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pathPrompt > small {
  margin-top: 7px;
  color: #8fa7c1;
  font-weight: 800;
}
.listenPulse {
  width: 90px;
  height: 90px;
  border: 1px solid #24d8ff;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  color: #9feaff;
  box-shadow: 0 0 30px #24d8ff44;
  animation: pulse 1.6s ease-in-out infinite;
}
.pathChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pathChoices button {
  min-height: 64px;
  border: 1px solid #416487;
  border-radius: 14px;
  background: #102c4b;
  color: white;
  padding: 11px 14px;
  font: 850 1rem/1.3 inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pathChoices button:hover,
.pathChoices button:focus-visible {
  border-color: #24d8ff;
  background: #143858;
}
.pathChoices button.correct {
  border-color: #24d8ff;
  background: #0e465a;
  box-shadow: 0 0 19px #24d8ff66;
}
.pathChoices button.wrong {
  border-color: #ff4b6e;
  background: #5a1930;
  box-shadow: 0 0 16px #ff4b6e44;
}
.pathChoices button:disabled {
  cursor: default;
}
.pathSpeak {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}
.pathSpeak[hidden] {
  display: none;
}
.pathMic {
  width: 112px;
  height: 76px;
  border-radius: 18px;
}
.pathSpeak input {
  height: 54px;
  min-width: 0;
  border: 1px solid #416487;
  border-radius: 13px;
  background: #07192f;
  color: white;
  padding: 12px;
  font: 800 1rem inherit;
}
.pathFeedback {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 3px;
  margin-top: auto;
  padding: 13px 16px;
  border: 1px solid #294862;
  border-radius: 14px;
  background: #08182c;
  color: #8fa7bf;
}
.pathFeedback b,
.pathFeedback span {
  display: block;
}
.pathFeedback.correct {
  border-color: #24d8ff;
  background: #0b3549;
  color: #c2f7ff;
}
.pathFeedback.wrong {
  border-color: #ff4b6e;
  background: #441629;
  color: #ffd0d9;
}
.pathGuide {
  position: sticky;
  top: 10px;
  padding: 19px;
}
.guideTop {
  display: flex;
  align-items: center;
  gap: 11px;
}
.guideTop > span {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #8a78ff, #24d8ff);
  color: #07152b;
  font-size: 1.4rem;
}
.guideTop div {
  display: grid;
}
.guideTop small {
  color: #9baec3;
  margin-top: 3px;
}
.pathGuide > p {
  min-height: 94px;
  color: #b2c3d5;
  line-height: 1.55;
}
.guideActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.guideActions button {
  min-height: 44px;
  border: 1px solid #4a6683;
  border-radius: 11px;
  background: #102a47;
  color: white;
  font: 850 0.82rem inherit;
  cursor: pointer;
}
.guideActions button:hover {
  border-color: #8a78ff;
}
.pathStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid #2d4c68;
}
.pathStats div {
  text-align: center;
}
.pathStats span {
  display: block;
  color: #829ab4;
  font-size: 0.69rem;
  font-weight: 900;
}
.pathStats b {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
}
.pathComplete {
  max-width: 760px;
  margin: 35px auto;
  padding: clamp(25px, 6vw, 54px);
  text-align: center;
}
.pathCompleteMark {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border: 2px solid #24d8ff;
  border-radius: 50%;
  background: #11445a;
  color: #bdf7ff;
  font-size: 2.5rem;
  box-shadow: 0 0 30px #24d8ff55;
}
.pathComplete h2 {
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  margin: 9px 0;
}
.pathComplete > p {
  color: var(--muted);
  line-height: 1.55;
}
.pathCompleteStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 22px 0;
}
.pathCompleteStats div {
  border: 1px solid #345777;
  border-radius: 14px;
  background: #081b31;
  padding: 13px;
}
.pathCompleteStats span {
  display: block;
  color: #8fa6be;
  font-size: 0.75rem;
  font-weight: 900;
}
.pathCompleteStats b {
  display: block;
  margin-top: 5px;
  color: #9feaff;
  font-size: 1.45rem;
}
.pathCompleteActions {
  display: grid;
  gap: 9px;
  max-width: 420px;
  margin: auto;
}
@media (max-width: 800px) {
  .pathSetup,
  .pathLayout {
    grid-template-columns: 1fr;
  }
  .pathSetup {
    min-height: 0;
  }
  .pathGuide {
    position: static;
  }
  .pathGuide > p {
    min-height: 0;
  }
  .pathChallenge {
    min-height: 510px;
  }
}
@media (max-width: 560px) {
  .pathSetup {
    padding: 22px 15px;
  }
  .pathSetupIntro h1 {
    font-size: 2.25rem;
  }
  .pathMap {
    padding: 17px 10px;
  }
  .pathRail {
    left: 29px;
    right: 29px;
    top: 35px;
  }
  .pathNode b {
    width: 35px;
    height: 35px;
  }
  .pathNode span {
    display: none;
  }
  .pathChallenge {
    padding: 17px 12px;
  }
  .pathChoices {
    grid-template-columns: 1fr;
  }
  .pathPrompt {
    min-height: 155px;
  }
  .pathSpeak {
    grid-template-columns: 1fr 1fr;
  }
  .pathMic {
    grid-column: 1/-1;
    width: 100%;
    height: 70px;
  }
  .pathSpeak input {
    width: 100%;
  }
  .pathCompleteStats {
    grid-template-columns: 1fr;
  }
  .pathLevel {
    font-size: 0.62rem;
    padding: 7px;
  }
}

.videoApp {
  width: min(1240px, 100%);
}
.videoControls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 12px;
  padding: 14px;
  border: 1px solid #355777;
  border-radius: 18px;
  background: #091d35;
}
.videoControls label {
  display: grid;
  gap: 6px;
  color: #a8bad0;
  font-size: 0.88rem;
  font-weight: 900;
}
.videoControls select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #406282;
  border-radius: 12px;
  background: #07182d;
  color: white;
  padding: 11px;
  font: 800 0.95rem inherit;
}
.videoTabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 14px;
  padding: 5px;
  border: 1px solid #345574;
  border-radius: 16px;
  background: #07192e;
}
.videoTabs button {
  min-height: 48px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #9bb0c7;
  padding: 10px;
  font: 900 0.9rem inherit;
  cursor: pointer;
}
.videoTabs button.active {
  background: #193e61;
  color: white;
  box-shadow: 0 0 20px #24d8ff25;
}
.videoView {
  display: none;
}
.videoView.active {
  display: block;
}
.videoWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.75fr);
  gap: 14px;
}
.miniViewer,
.videoLessonPanel,
.freeVideoLayout,
.uploadStudio,
.videoOffer,
.subscriptionNote {
  border: 1px solid #355777;
  border-radius: 22px;
  background: linear-gradient(150deg, #123454, #081a31);
  box-shadow: 0 18px 50px #0004;
}
.miniViewer {
  padding: 16px;
}
.infographicStage {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  border: 1px solid #426789;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 35%, #244e76, #0a1b32 68%);
}
.motionRings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.motionRings i {
  position: absolute;
  width: 170px;
  height: 170px;
  border: 1px solid #24d8ff33;
  border-radius: 50%;
  animation: infoOrbit 5s linear infinite;
}
.motionRings i:nth-child(2) {
  width: 260px;
  height: 260px;
  border-color: #8a78ff30;
  animation-duration: 8s;
  animation-direction: reverse;
}
.motionRings i:nth-child(3) {
  width: 350px;
  height: 350px;
  border-color: #ff4b8b25;
  animation-duration: 11s;
}
@keyframes infoOrbit {
  to {
    transform: rotate(360deg);
  }
}
.infoIcon {
  position: relative;
  font-size: 7rem;
  filter: drop-shadow(0 18px 13px #0007);
}
.infoWords {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: 15px;
}
.infoWords b {
  font-size: clamp(2.3rem, 7vw, 4.5rem);
  line-height: 1.05;
}
.infoWords span {
  margin-top: 7px;
  color: #b6c8db;
  font-size: 1.15rem;
  font-weight: 850;
}
.infoProgress {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 20px;
  height: 7px;
  border-radius: 999px;
  background: #071529;
  overflow: hidden;
}
.infoProgress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24d8ff, #8a78ff);
  transition: width 0.45s;
}
.scenePop .infoIcon,
.scenePop .infoWords {
  animation: scenePop 0.55s ease;
}
@keyframes scenePop {
  0% {
    transform: scale(0.78);
    opacity: 0.15;
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.viewerControls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.videoPlay {
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #24d8ff;
  color: #06152b;
  padding: 11px 16px;
  font: 950 0.9rem inherit;
  cursor: pointer;
  box-shadow: 0 0 20px #24d8ff33;
}
.videoCaption {
  color: #92a9c1;
  line-height: 1.45;
}
.videoLessonPanel {
  padding: 22px;
}
.videoLessonPanel h1,
.libraryHeader h1,
.uploadDrop h1,
.instructorVideoIntro h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
  margin: 9px 0;
}
.videoLessonPanel > p,
.libraryHeader p,
.uploadDrop p,
.instructorVideoIntro p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.videoQuiz,
.videoHelper {
  margin-top: 17px;
  border: 1px solid #375a79;
  border-radius: 16px;
  background: #07192e;
  padding: 15px;
}
.videoQuiz > b,
.videoHelper > b {
  display: block;
  font-size: 1.03rem;
  line-height: 1.4;
}
.videoQuiz > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 12px 0;
}
.videoQuiz button,
.helperQuick button {
  min-height: 43px;
  border: 1px solid #3c6182;
  border-radius: 10px;
  background: #102c4a;
  color: white;
  padding: 8px;
  font: 800 0.84rem inherit;
  cursor: pointer;
}
.videoQuiz button.correct {
  border-color: #24d8ff;
  background: #0f485d;
}
.videoQuiz button.wrong {
  border-color: #ff4b6e;
  background: #55172c;
}
.videoQuiz > p,
.videoHelper > p {
  min-height: 43px;
  color: #a8bbce;
  line-height: 1.4;
}
.helperQuick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.helperQuick button {
  flex: 1;
  min-width: 95px;
}
.libraryHeader {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin: 20px 2px;
}
.libraryHeader > div {
  max-width: 750px;
}
.sourceSafety {
  max-width: 240px;
  border: 1px solid #3d6682;
  border-radius: 14px;
  background: #0d2943;
  color: #bdefff;
  padding: 12px;
  font-size: 0.83rem;
  font-weight: 900;
  line-height: 1.4;
}
.freeVideoLayout {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 560px;
  overflow: hidden;
}
.resourceList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-right: 1px solid #2f4d69;
  background: #08192e;
}
.resourceCard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  width: 100%;
  border: 1px solid #315270;
  border-radius: 15px;
  background: #0b223d;
  color: white;
  padding: 13px;
  text-align: left;
  cursor: pointer;
}
.resourceCard > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #24d8ff, #7b73f6);
  color: #07152b;
  font-size: 0.85rem;
  font-weight: 950;
}
.resourceCard small,
.resourceCard b,
.resourceCard p {
  display: block;
}
.resourceCard small {
  color: #7fddec;
  font-size: 0.75rem;
  font-weight: 900;
}
.resourceCard b {
  margin-top: 4px;
  font-size: 1rem;
}
.resourceCard p {
  margin: 6px 0 0;
  color: #98adc3;
  font-size: 0.85rem;
  line-height: 1.35;
}
.resourceCard.active {
  border-color: #24d8ff;
  background: #103656;
}
.webVideoViewer {
  min-width: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.webVideoViewer iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  background: black;
}
.viewerEmpty,
.sourceOpen {
  min-height: 500px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 25px;
}
.viewerEmpty > span,
.sourceOpen > span {
  font-size: 4rem;
  color: #24d8ff;
}
.viewerEmpty h2,
.sourceOpen h2 {
  margin: 10px 0;
}
.viewerEmpty p,
.sourceOpen p {
  max-width: 560px;
  color: var(--muted);
  line-height: 1.5;
}
.sourceOpen small {
  color: #7fe5f5;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.sourceOpen em {
  max-width: 500px;
  margin-top: 16px;
  color: #7f96af;
  font-size: 0.8rem;
  line-height: 1.4;
}
.resourceCredit {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 17px;
}
.resourceCredit div {
  display: grid;
}
.resourceCredit span {
  color: #8fa6bd;
  font-size: 0.82rem;
  margin-top: 3px;
}
.resourceCredit a {
  color: #9feaff;
  font-weight: 900;
  text-decoration: none;
}
.uploadStudio {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 0;
  overflow: hidden;
}
.uploadDrop {
  padding: 28px;
  border-right: 1px solid #2f4d69;
}
.uploadButton {
  display: block;
  margin-top: 20px;
  border: 1px solid #24d8ff;
  border-radius: 14px;
  background: #103955;
  color: #bff6ff;
  padding: 15px;
  text-align: center;
  font-weight: 950;
  cursor: pointer;
}
.uploadButton input {
  display: none;
}
.uploadDrop small {
  display: block;
  margin-top: 12px;
  color: #8199b2;
  line-height: 1.4;
}
.uploadPreview {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  background: #061426;
}
.uploadPreview video {
  width: 100%;
  max-height: 470px;
  background: black;
}
.uploadNotes {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr auto minmax(260px, 0.7fr);
  gap: 10px;
  align-items: end;
  padding: 16px;
  border-top: 1px solid #2d4a66;
}
.uploadNotes label {
  display: grid;
  gap: 6px;
  color: #adc0d3;
  font-weight: 900;
}
.uploadNotes textarea {
  min-height: 90px;
  resize: vertical;
  border: 1px solid #3a5d7d;
  border-radius: 12px;
  background: #07182d;
  color: white;
  padding: 11px;
  font: 750 0.94rem/1.4 inherit;
}
.uploadNotes > div {
  min-height: 90px;
  border: 1px solid #345674;
  border-radius: 12px;
  background: #07182d;
  color: #9db1c6;
  padding: 11px;
  line-height: 1.4;
}
.uploadNotes > div b {
  color: #9feaff;
}
.videoOfferGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.instructorVideoIntro {
  max-width: 780px;
  margin: 24px 0;
}
.videoOffer {
  padding: 19px;
}
.offerTop {
  display: flex;
  gap: 13px;
  align-items: center;
}
.offerTop > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #24d8ff, #8876ff);
  color: #07152b;
  font-weight: 950;
}
.offerTop small {
  color: #7fdef0;
  font-size: 0.76rem;
  font-weight: 900;
}
.offerTop h2 {
  margin: 3px 0;
  font-size: 1.25rem;
}
.offerTop p {
  margin: 0;
  color: #8ea6bf;
}
.offerLabels,
.mentorOfferLabels {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.offerLabels b,
.mentorOfferLabels b {
  border: 1px solid #3c6382;
  border-radius: 999px;
  background: #0b2944;
  color: #bfeefa;
  padding: 6px 9px;
  font-size: 0.75rem;
}
.offerPrice {
  margin: 17px 0;
}
.offerPrice strong {
  font-size: 1.65rem;
  color: #9feaff;
}
.offerPrice span {
  color: #90a7bd;
}
.videoOffer button {
  width: 100%;
}
.domainButton.prepared {
  border-color: #55e6a5;
  background: #173f3a;
  color: #bfffe2;
}
.subscriptionNote {
  display: flex;
  gap: 13px;
  margin-top: 14px;
  padding: 16px 19px;
}
.subscriptionNote b {
  color: #f5c84c;
  white-space: nowrap;
}
.subscriptionNote span {
  color: #9dafc2;
  line-height: 1.45;
}
.instructorLink {
  display: block;
  width: max-content;
  margin: 15px auto;
  text-decoration: none;
}
.dialogOffers {
  padding: 0 20px;
  margin-bottom: 0;
}
@media (max-width: 820px) {
  .videoWorkspace,
  .freeVideoLayout,
  .uploadStudio {
    grid-template-columns: 1fr;
  }
  .resourceList {
    border-right: 0;
    border-bottom: 1px solid #2f4d69;
    max-height: 360px;
    overflow: auto;
  }
  .uploadDrop {
    border-right: 0;
    border-bottom: 1px solid #2f4d69;
  }
  .uploadNotes {
    grid-template-columns: 1fr 1fr;
  }
  .uploadNotes label,
  .uploadNotes > div {
    grid-column: 1/-1;
  }
  .videoOfferGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .videoControls,
  .videoTabs {
    grid-template-columns: 1fr 1fr;
  }
  .infographicStage {
    min-height: 340px;
  }
  .infoIcon {
    font-size: 5.5rem;
  }
  .videoQuiz > div {
    grid-template-columns: 1fr;
  }
  .libraryHeader {
    align-items: stretch;
    flex-direction: column;
  }
  .sourceSafety {
    max-width: none;
  }
  .webVideoViewer,
  .viewerEmpty,
  .sourceOpen {
    min-height: 360px;
  }
  .uploadNotes {
    grid-template-columns: 1fr;
  }
  .subscriptionNote {
    flex-direction: column;
  }
  .viewerControls > * {
    flex: 1;
  }
  .videoTabs button {
    font-size: 0.8rem;
  }
  .mentorOfferLabels {
    margin-top: 10px;
  }
}

.questDashboard {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 11px;
  margin: 0 0 16px;
}
.questProfile,
.dailyQuest,
.continueQuest {
  min-height: 105px;
  border: 1px solid #385b7b;
  border-radius: 19px;
  background: linear-gradient(145deg, #143758, #091b32);
  padding: 15px;
}
.questProfile {
  display: flex;
  align-items: center;
  gap: 12px;
}
.questAvatar {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #24d8ff, #8876ff);
  color: #07152b;
  font-weight: 950;
}
.questProfile div {
  display: grid;
}
.questProfile small,
.dailyQuest small,
.continueQuest > span {
  color: #81dff0;
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.09em;
}
.questProfile b {
  font-size: 1.2rem;
  margin: 3px 0;
}
.questProfile div > span {
  color: #8fa6be;
  font-size: 0.82rem;
}
.dailyQuest {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 7px 12px;
}
.dailyQuest > div:first-child {
  display: grid;
}
.dailyQuest b {
  margin-top: 4px;
}
.dailyQuest strong {
  grid-column: 2;
  grid-row: 1/3;
  color: #bff6ff;
}
.dailyMeter {
  grid-column: 1;
  align-self: start;
  height: 8px;
  border-radius: 999px;
  background: #07162a;
  overflow: hidden;
}
.dailyMeter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24d8ff, #8a78ff);
}
.continueQuest {
  position: relative;
  display: grid;
  align-content: center;
  color: white;
  text-decoration: none;
}
.continueQuest b {
  margin-top: 5px;
  font-size: 1.06rem;
}
.continueQuest em {
  position: absolute;
  right: 15px;
  top: 34px;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #24d8ff;
  color: #07152b;
  font-size: 1.2rem;
  font-style: normal;
}
.track {
  overflow: hidden;
}
.track:after {
  content: "";
  position: absolute;
  right: -35px;
  top: -35px;
  width: 110px;
  height: 110px;
  border: 1px solid color-mix(in srgb, var(--track) 35%, transparent);
  border-radius: 50%;
}
.track.naval {
  --track: #43bfe8;
}
.track.architecture {
  --track: #d7a86e;
}
.track.construction {
  --track: #f2b544;
}
.track.robotics {
  --track: #8d83ff;
}
.track.flight {
  --track: #69c7ff;
}
.trackGame {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  color: #9bb0c6;
  font-size: 0.72rem;
  font-weight: 900;
}
.trackGame > div {
  height: 6px;
  border-radius: 999px;
  background: #06162a;
  overflow: hidden;
}
.trackGame i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--track);
}
.trackGame strong {
  color: white;
}
.openSourceShelf {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  align-items: center;
  margin-top: 17px;
  padding: 20px;
  border: 1px solid #345675;
  border-radius: 21px;
  background: #091c33;
}
.openSourceShelf h2 {
  margin: 6px 0;
}
.openSourceShelf p {
  color: #94aac1;
  line-height: 1.5;
}
.sourceChips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sourceChips a {
  border: 1px solid #406383;
  border-radius: 999px;
  background: #102b49;
  color: #bceef7;
  padding: 8px 11px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 900;
}
.domainMission {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  padding: 11px 14px;
  border: 1px solid #365979;
  border-radius: 15px;
  background: #091d35;
  transition: 0.25s;
}
.domainMission > div:first-child {
  display: grid;
}
.domainMission small {
  color: var(--domain);
  font-size: 0.69rem;
  font-weight: 950;
  letter-spacing: 0.09em;
}
.domainMission > div b {
  margin-top: 3px;
}
.domainMission > span {
  color: #9bb0c6;
  font-size: 0.78rem;
  font-weight: 900;
}
.domainMission > span strong {
  color: var(--domain);
}
.domainMission [data-earned] {
  color: #55e6a5;
  margin-right: 6px;
}
.missionMeter {
  height: 8px;
  border-radius: 999px;
  background: #06162a;
  overflow: hidden;
}
.missionMeter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--domain), #8876ff);
  transition: width 0.3s;
}
.domainMission.reward {
  border-color: #55e6a5;
  box-shadow: 0 0 22px #55e6a544;
  transform: translateY(-1px);
}
@media (max-width: 780px) {
  .questDashboard {
    grid-template-columns: 1fr 1fr;
  }
  .continueQuest {
    grid-column: 1/-1;
  }
  .openSourceShelf {
    grid-template-columns: 1fr;
  }
  .domainMission {
    grid-template-columns: 1fr auto;
  }
  .missionMeter {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .domainMission > span {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 520px) {
  .questDashboard {
    grid-template-columns: 1fr;
  }
  .continueQuest {
    grid-column: auto;
  }
  .dailyQuest {
    grid-template-columns: 1fr auto;
  }
  .domainMission {
    grid-template-columns: 1fr;
  }
  .domainMission > span {
    grid-column: 1;
    grid-row: auto;
  }
  .missionMeter {
    grid-column: 1;
    grid-row: auto;
  }
}

/* World Beliefs and Science learning worlds */
.beliefsApp {
  width: min(1180px, 100%);
}
.beliefStreak {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  text-align: center;
}
.beliefStreak b {
  display: block;
  color: var(--yellow);
  font-size: 1.45rem;
}
.beliefControls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 15px 0;
}
.beliefControls label {
  display: grid;
  gap: 6px;
  color: #a9bdd2;
  font-size: 0.76rem;
  font-weight: 900;
}
.beliefControls select {
  width: 100%;
  border: 1px solid #3b5e7f;
  border-radius: 12px;
  background: #0b213c;
  color: white;
  padding: 12px;
  font: 800 0.9rem inherit;
}
.beliefNotice {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid #4e568b;
  border-left: 5px solid #a98bff;
  border-radius: 15px;
  background: #161f40;
  padding: 12px 15px;
}
.beliefNotice b {
  color: #d8cbff;
  white-space: nowrap;
}
.beliefNotice span {
  color: #aabbd0;
  line-height: 1.4;
}
.scienceNotice {
  border-color: #34708a;
  border-left-color: var(--blue);
  background: #0b2a3d;
}
.scienceNotice b {
  color: #9fefff;
}
.beliefLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(285px, 0.7fr);
  gap: 15px;
  align-items: start;
}
.beliefLesson,
.beliefGuide {
  border: 1px solid #345676;
  border-radius: 22px;
  background: linear-gradient(150deg, #123252, #081a31);
  box-shadow: 0 18px 45px #0004;
  padding: 20px;
}
.beliefHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.beliefHead h1 {
  margin: 4px 0 0;
  font-size: clamp(1.6rem, 5vw, 2.55rem);
}
.eyebrow {
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.13em;
}
.beliefCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 17px 0;
}
.beliefCard {
  min-height: 145px;
  border: 1px solid #3c6384;
  border-radius: 16px;
  background: #0a213c;
  color: white;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: 0.18s;
}
.beliefCard:hover,
.beliefCard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 0 18px #24d8ff35;
}
.beliefCard b {
  display: block;
  color: #bff5ff;
  font-size: 1.1rem;
  margin-bottom: 7px;
}
.beliefCard span {
  display: block;
  color: #93a9c0;
  font-size: 0.84rem;
  line-height: 1.4;
}
.beliefCard small {
  display: block;
  color: var(--yellow);
  font-weight: 900;
  margin-top: 10px;
}
.beliefSentence,
.beliefQuiz {
  margin-top: 13px;
  border: 1px solid #365978;
  border-radius: 17px;
  background: #081a30;
  padding: 16px;
}
.beliefSentenceWords,
#beliefSentenceWords,
#scienceSentenceWords {
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 2;
  margin: 10px 0;
}
.beliefSentence button[data-word],
#beliefSentenceWords button,
#scienceSentenceWords button {
  border: 0;
  border-bottom: 2px solid #3d6f91;
  background: transparent;
  color: white;
  padding: 2px 3px;
  font: inherit;
  cursor: pointer;
}
.beliefSentence button[data-word]:hover,
#beliefSentenceWords button:hover,
#scienceSentenceWords button:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}
.beliefSentence p,
.beliefQuiz p {
  min-height: 25px;
  color: #9db2c8;
  line-height: 1.45;
}
.beliefSentenceActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.beliefQuiz > div:last-of-type,
#beliefChoices,
#scienceChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.beliefQuiz button {
  min-height: 50px;
  border: 1px solid #3d6080;
  border-radius: 12px;
  background: #112d4b;
  color: white;
  padding: 10px;
  font: 850 0.9rem inherit;
  cursor: pointer;
}
.beliefQuiz button.correct {
  border-color: var(--blue);
  background: #0d4359;
  box-shadow: 0 0 15px #24d8ff66;
}
.beliefQuiz button.wrong {
  border-color: var(--red);
  background: #59172d;
}
.beliefGuide {
  position: sticky;
  top: 12px;
  padding: 0;
  overflow: hidden;
}
.beliefGuideHead {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 17px;
  border-bottom: 1px solid #31506d;
}
.beliefGuideHead > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #24d8ff, #8f7dff);
  color: #07152b;
}
.beliefGuideHead div {
  display: grid;
}
.beliefGuideHead small {
  color: #92a9c0;
  margin-top: 3px;
}
.beliefQuick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 12px;
}
.beliefQuick button {
  border: 1px solid #3a6080;
  border-radius: 11px;
  background: #102a47;
  color: #d8e8f6;
  padding: 9px;
  font: 800 0.75rem inherit;
  cursor: pointer;
}
.beliefGuideLog {
  height: 300px;
  overflow: auto;
  background: #06172b;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.beliefGuideLog > div {
  max-width: 88%;
  border: 1px solid #31516f;
  border-radius: 14px;
  background: #102944;
  padding: 10px 12px;
}
.beliefGuideLog > div.user {
  align-self: flex-end;
  background: #253b61;
}
.beliefGuideLog b {
  color: var(--blue);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.beliefGuideLog p {
  margin: 5px 0 0;
  line-height: 1.45;
}
.beliefGuide form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
}
.beliefGuide form input {
  min-width: 0;
  border: 1px solid #385c7c;
  border-radius: 11px;
  background: #07182d;
  color: white;
  padding: 11px;
  font: 750 0.88rem inherit;
}
.beliefPrivacy {
  margin: 0;
  padding: 0 13px 14px;
  color: #8198b1;
  font-size: 0.72rem;
  line-height: 1.4;
}
.newsCredit {
  text-align: center;
  color: #7e96af;
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 15px auto;
  max-width: 850px;
}
@media (max-width: 880px) {
  .beliefLayout {
    grid-template-columns: 1fr;
  }
  .beliefGuide {
    position: static;
  }
  .beliefCards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .beliefControls {
    grid-template-columns: 1fr;
  }
  .beliefNotice {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .beliefCards {
    grid-template-columns: 1fr;
  }
  .beliefHead {
    align-items: flex-start;
    flex-direction: column;
  }
  .beliefQuiz > div:last-of-type,
  #beliefChoices,
  #scienceChoices {
    grid-template-columns: 1fr;
  }
  .beliefGuide form {
    grid-template-columns: 1fr;
  }
  .beliefStreak {
    display: none;
  }
}

/* Language Books and Writing Studio */
.bookApp {
  width: min(1220px, 100%);
}
.bookStreak {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 950;
  text-align: center;
}
.bookStreak b {
  display: block;
  color: var(--yellow);
  font-size: 1.45rem;
}
.bookControls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.bookControls label {
  display: grid;
  gap: 6px;
  color: #aabdd1;
  font-size: 0.875rem;
  font-weight: 900;
}
.bookControls select,
.chapterRail input {
  width: 100%;
  border: 1px solid #3b5e7f;
  border-radius: 12px;
  background: #0b213c;
  color: white;
  padding: 12px;
  font: 800 0.95rem inherit;
}
.bookTabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 14px;
  border: 1px solid #2e4f6e;
  border-radius: 16px;
  background: #071a31;
  padding: 6px;
}
.bookTabs button {
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #9eb2c8;
  padding: 12px;
  font: 900 0.9rem inherit;
  cursor: pointer;
}
.bookTabs button.active {
  background: linear-gradient(135deg, #1b4d6d, #343f7d);
  color: white;
  box-shadow: 0 0 18px #24d8ff2d;
}
.bookView {
  display: none;
}
.bookView.active {
  display: block;
}
.bookLayout {
  display: grid;
  grid-template-columns: minmax(225px, 0.55fr) minmax(0, 1.45fr) minmax(
      275px,
      0.65fr
    );
  gap: 14px;
  align-items: start;
}
.bookShelf,
.bookReader,
.bookGuide,
.writingCanvas,
.revisionCoach,
.chapterRail,
.chapterEditor {
  border: 1px solid #345676;
  border-radius: 22px;
  background: linear-gradient(150deg, #123252, #081a31);
  box-shadow: 0 18px 45px #0004;
}
.bookShelf {
  overflow: hidden;
}
.bookShelfHead {
  padding: 18px;
  border-bottom: 1px solid #304e6a;
}
.bookShelfHead h2 {
  margin: 5px 0;
}
.bookShelfHead p,
.readerBookHead p,
.writingHead p {
  color: #9eb1c6;
  line-height: 1.45;
  margin: 7px 0 0;
}
.catalogStatus {
  display: inline-block;
  margin-top: 10px;
  border: 1px solid #3b6384;
  border-radius: 999px;
  background: #0a2945;
  color: #a9effa;
  padding: 6px 9px;
  font-size: 0.78rem;
  font-weight: 900;
}
.bookList {
  display: grid;
  padding: 10px;
  gap: 7px;
}
.bookList > button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #0a203a;
  color: white;
  padding: 11px;
  text-align: left;
  cursor: pointer;
}
.bookList > button > span {
  font-size: 1.8rem;
}
.bookList > button div {
  display: grid;
  gap: 3px;
}
.bookList small {
  color: #8da4bb;
}
.bookList > button.active {
  border-color: var(--blue);
  background: #103451;
  box-shadow: 0 0 15px #24d8ff35;
}
.emptyBookShelf {
  display: grid;
  gap: 6px;
  border: 1px dashed #496a87;
  border-radius: 14px;
  padding: 15px;
  color: #a9bdd1;
}
.emptyBookShelf b {
  color: white;
}
.emptyBookPage {
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #647286;
  text-align: center;
}
.openLibraryLinks {
  display: grid;
  gap: 8px;
  border-top: 1px solid #304e6a;
  padding: 16px;
}
.openLibraryLinks a {
  color: #a9effa;
  font-weight: 850;
  text-decoration: none;
}
.openLibraryLinks small {
  color: #8198b0;
  line-height: 1.4;
}
.bookReader {
  padding: 20px;
}
.readerBookHead {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: start;
}
.readerBookHead h1 {
  margin: 4px 0;
  font-size: clamp(1.65rem, 5vw, 2.6rem);
}
.readerBookActions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bookPage {
  min-height: 300px;
  margin: 18px 0;
  border: 1px solid #3d5e7c;
  border-radius: 18px;
  background: #f5eddc;
  color: #182234;
  padding: clamp(20px, 5vw, 42px);
  font: 600 clamp(1.2rem, 3vw, 1.5rem) / 1.85 Georgia, serif;
  box-shadow: inset 0 0 40px #8e6d3a1c;
}
.bookPage button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: inherit;
  padding: 0 2px;
  font: inherit;
  cursor: pointer;
}
.bookPage button:hover,
.bookPage button:focus-visible {
  color: #005a78;
  border-bottom-color: #008db7;
  background: #c7eff5;
}
.bookPageNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
}
.bookPageNav span {
  color: #a8bdd1;
  font-weight: 850;
}
.bookWordHelper {
  margin-top: 13px;
}
.bookWordHelper b {
  font-size: 1.15rem;
}
.bookWordHelper span {
  margin-left: 8px;
}
.bookGuide {
  position: sticky;
  top: 12px;
  overflow: hidden;
}
.writingLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 14px;
  align-items: start;
}
.writingCanvas,
.revisionCoach,
.chapterEditor {
  padding: 21px;
}
.writingHead {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.writingHead h1 {
  margin: 4px 0;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
}
.writingHead p {
  color: #9eb1c6;
  line-height: 1.45;
  margin: 7px 0 0;
}
.essayPrompt {
  margin: 16px 0;
  border-left: 5px solid var(--yellow);
  border-radius: 12px;
  background: #192b45;
  padding: 15px;
  font-size: 1.05rem;
  line-height: 1.5;
}
.essayPlan {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.essayPlan label:first-child {
  grid-column: 1/-1;
}
.essayPlan label,
.writingAreaLabel,
.chapterRail label {
  display: grid;
  gap: 6px;
  color: #a8bbcf;
  font-weight: 850;
}
.essayPlan input {
  border: 1px solid #3a5d7d;
  border-radius: 11px;
  background: #07182d;
  color: white;
  padding: 11px;
  font: 750 0.95rem inherit;
}
.writingAreaLabel {
  margin-top: 14px;
}
.writingAreaLabel textarea,
.chapterDraft {
  width: 100%;
  min-height: 330px;
  resize: vertical;
  border: 1px solid #3c6081;
  border-radius: 15px;
  background: #06172b;
  color: white;
  padding: 16px;
  font: 600 1.05rem/1.65 inherit;
}
.writingFooter,
.authorFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #9bb0c4;
  font-weight: 850;
}
.writingFooter > div {
  display: flex;
  gap: 8px;
}
.revisionCoach {
  position: sticky;
  top: 12px;
}
.revisionCoach h2 {
  margin: 5px 0 16px;
}
.revisionScore {
  display: grid;
  gap: 12px;
}
.revisionScore > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px;
  color: #a9bdd0;
  font-weight: 850;
}
.revisionScore i {
  height: 9px;
  border-radius: 999px;
  background: #061528;
  overflow: hidden;
}
.revisionScore b {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #a98bff);
  transition: width 0.25s;
}
.revisionButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 18px 0;
}
.revisionButtons button {
  border: 1px solid #3d6080;
  border-radius: 11px;
  background: #102b48;
  color: white;
  padding: 10px;
  font: 800 0.82rem inherit;
  cursor: pointer;
}
.revisionFeedback,
.chapterHint {
  min-height: 115px;
  border: 1px solid #3c5e7d;
  border-radius: 14px;
  background: #07192e;
  color: #c2d2e2;
  padding: 14px;
  line-height: 1.55;
}
.coachBoundary {
  color: #8299b2;
  font-size: 0.8rem;
  line-height: 1.45;
}
.authorLayout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
}
.chapterRail {
  padding: 18px;
}
.chapterRail h2 {
  margin: 5px 0 15px;
}
.chapterList {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}
.chapterList button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid #345573;
  border-radius: 11px;
  background: #0a2039;
  color: white;
  padding: 9px;
  text-align: left;
  cursor: pointer;
}
.chapterList button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #183a5a;
  color: #a9effa;
}
.chapterList button.active {
  border-color: var(--blue);
  background: #103552;
}
.chapterTitle {
  width: min(520px, 100%);
  border: 0;
  border-bottom: 2px solid #426789;
  background: transparent;
  color: white;
  padding: 6px 0;
  font: 950 clamp(1.5rem, 5vw, 2.35rem) inherit;
}
.chapterDraft {
  min-height: 430px;
  margin-top: 16px;
}
.chapterHint {
  min-height: 0;
  margin-top: 12px;
}
.courseShelfHead {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin: 20px 0;
}
.courseShelfHead h1 {
  margin: 5px 0;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
}
.courseShelfHead p {
  color: #9fb3c8;
  line-height: 1.5;
  max-width: 680px;
}
.courseBookGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.courseBook {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  border: 1px solid #365b7a;
  border-radius: 20px;
  background: linear-gradient(145deg, #123454, #091b32);
  padding: 19px;
}
.courseBook > span {
  font-size: 3.2rem;
}
.courseBook div {
  display: grid;
  justify-items: start;
}
.courseBook small {
  color: var(--blue);
  font-weight: 950;
  letter-spacing: 0.08em;
}
.courseBook h2 {
  margin: 5px 0;
}
.courseBook p {
  color: #a1b4c8;
  margin: 0 0 12px;
}
.courseBook b {
  color: #d9e7f4;
}
.courseBook em {
  color: var(--yellow);
  font-style: normal;
  margin: 5px 0 14px;
}
.courseBook button {
  width: 100%;
}
@media (max-width: 1000px) {
  .bookLayout {
    grid-template-columns: 250px 1fr;
  }
  .bookGuide {
    grid-column: 1/-1;
    position: static;
  }
  .bookGuide .beliefGuideLog {
    height: 220px;
  }
}
@media (max-width: 760px) {
  .bookControls,
  .bookTabs {
    grid-template-columns: 1fr 1fr;
  }
  .bookLayout,
  .writingLayout,
  .authorLayout {
    grid-template-columns: 1fr;
  }
  .bookShelf {
    order: 2;
  }
  .bookReader {
    order: 1;
  }
  .bookGuide {
    order: 3;
  }
  .revisionCoach {
    position: static;
  }
  .courseBookGrid {
    grid-template-columns: 1fr;
  }
  .readerBookHead,
  .courseShelfHead {
    flex-direction: column;
  }
  .readerBookActions {
    justify-content: flex-start;
  }
  .chapterRail {
    order: 2;
  }
  .chapterEditor {
    order: 1;
  }
}
@media (max-width: 520px) {
  .bookControls,
  .bookTabs,
  .essayPlan {
    grid-template-columns: 1fr;
  }
  .essayPlan label:first-child {
    grid-column: auto;
  }
  .bookReader,
  .writingCanvas,
  .revisionCoach,
  .chapterEditor {
    padding: 14px;
  }
  .bookPage {
    padding: 20px 16px;
  }
  .bookPageNav {
    flex-wrap: wrap;
  }
  .bookPageNav span {
    order: -1;
    width: 100%;
    text-align: center;
  }
  .writingHead,
  .writingFooter,
  .authorFooter {
    align-items: stretch;
    flex-direction: column;
  }
  .writingFooter > div {
    display: grid;
  }
  .courseBook {
    grid-template-columns: 1fr;
  }
  .bookStreak {
    display: none;
  }
}
.liveWritingWindow {
  margin: -5px -5px 20px;
  border: 1px solid #426887;
  border-radius: 15px;
  background: #061527;
  overflow: hidden;
  box-shadow: 0 10px 28px #0005;
}
.liveWritingWindow header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 11px;
  background: #102943;
  border-bottom: 1px solid #355776;
}
.liveWritingWindow header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.liveDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #55e6a5;
  box-shadow: 0 0 10px #55e6a5;
}
.liveWritingWindow header button {
  width: 34px;
  height: 30px;
  border: 1px solid #47708f;
  border-radius: 9px;
  background: #0a2037;
  color: white;
  cursor: pointer;
}
.livePreviewPage {
  height: 180px;
  overflow: auto;
  background: #f4ecdb;
  color: #182234;
  padding: 15px;
  font: 600 1rem/1.65 Georgia, serif;
  white-space: pre-wrap;
}
.livePreviewPage > span {
  color: #6f7580;
}
.livePreviewPage button {
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: inherit;
  padding: 0 1px;
  font: inherit;
  cursor: pointer;
}
.livePreviewPage button:hover,
.livePreviewPage button:focus-visible {
  color: #005a78;
  border-color: #008db7;
  background: #c7eff5;
}
.liveWritingWindow > small {
  display: block;
  padding: 7px 11px;
  color: #8fa6bd;
}
.chapterWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 12px;
  align-items: start;
  margin-top: 16px;
}
.chapterWorkspace .chapterDraft {
  margin-top: 0;
}
.chapterPreviewWindow {
  position: sticky;
  top: 12px;
  margin: 0;
}
.chapterPreviewWindow h3 {
  margin: 0;
  padding: 12px 14px 0;
  color: #f5c84c;
}
.chapterPreviewWindow .livePreviewPage {
  height: 360px;
  background: #f7efdf;
}
@media (max-width: 850px) {
  .chapterWorkspace {
    grid-template-columns: 1fr;
  }
  .chapterPreviewWindow {
    position: static;
  }
  .chapterPreviewWindow .livePreviewPage {
    height: 220px;
  }
}
.scienceWorkbench {
  margin-top: 16px;
  border: 1px solid #355b79;
  border-radius: 22px;
  background: linear-gradient(145deg, #102f4e, #07182d);
  padding: 19px;
  box-shadow: 0 18px 45px #0004;
}
.workbenchHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.workbenchHead h2 {
  margin: 4px 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
}
.workbenchHead p {
  margin: 0;
  color: #9cb1c6;
}
.scienceWindowGrid {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 13px;
}
.workflowWindow,
.cadWindow {
  border: 1px solid #42627e;
  border-radius: 17px;
  background: #07182c;
  overflow: hidden;
}
.workflowWindow > header,
.cadWindow > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: #102943;
  border-bottom: 1px solid #355673;
}
.workflowWindow > header > div,
.cadWindow > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.workflowWindow > header > span,
.cadWindow > header > span {
  color: #8fe7f4;
  font-size: 0.8rem;
  font-weight: 900;
}
.workflowSteps {
  display: grid;
  gap: 7px;
  padding: 12px;
}
.workflowSteps button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 9px;
  border: 1px solid #345674;
  border-radius: 12px;
  background: #0c223b;
  color: white;
  padding: 9px;
  text-align: left;
  cursor: pointer;
}
.workflowSteps button span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #183b5c;
  color: #9feaff;
  font-weight: 950;
}
.workflowSteps button.done {
  border-color: #55e6a5;
  background: #123a39;
}
.workflowSteps button.done span {
  background: #55e6a5;
  color: #07182d;
}
.workflowWindow label {
  display: grid;
  gap: 6px;
  padding: 0 12px;
  color: #a9bdcf;
  font-weight: 850;
}
.workflowWindow textarea {
  min-height: 105px;
  resize: vertical;
  border: 1px solid #385b79;
  border-radius: 11px;
  background: #051426;
  color: white;
  padding: 11px;
  font: 700 0.95rem/1.45 inherit;
}
.workflowActions {
  display: flex;
  gap: 8px;
  padding: 12px;
  flex-wrap: wrap;
}
.cadProjectLibrary {
  margin: 10px 10px 0;
  border: 1px solid #386582;
  border-radius: 13px;
  background: linear-gradient(145deg, #0d2944, #091b30);
  padding: 11px;
}
.cadProjectHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.cadProjectHeading > div {
  display: grid;
  gap: 2px;
}
.cadProjectHeading small {
  color: #8fa8bf;
  font-size: 0.72rem;
}
.cadProjectHeading > span {
  border: 1px solid #38a77b;
  border-radius: 999px;
  background: #0d3a36;
  color: #8ff2c6;
  padding: 4px 7px;
  font-size: 0.67rem;
  font-weight: 950;
}
.cadProjectControls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cadProjectControls label {
  display: grid;
  gap: 4px;
  color: #a7bbcf;
  font-size: 0.76rem;
  font-weight: 900;
}
.cadProjectControls input,
.cadProjectControls select {
  min-width: 0;
  width: 100%;
  border: 1px solid #3a607e;
  border-radius: 9px;
  background: #051527;
  color: white;
  padding: 8px;
  font: 800 0.84rem inherit;
}
.cadProjectActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.cadProjectActions button {
  border: 1px solid #3b617f;
  border-radius: 8px;
  background: #0c2945;
  color: #d8e8f5;
  padding: 7px 9px;
  font: 850 0.75rem inherit;
  cursor: pointer;
}
.cadProjectActions button.primaryMini {
  border-color: #24d8ff;
  background: #12445d;
}
.cadProjectActions button.hasChanges {
  box-shadow: 0 0 13px #24d8ff66;
}
.cadProjectActions button.dangerMini {
  border-color: #8d4050;
  color: #ffc1ca;
}
.cadProjectActions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cadProjectLibrary > p {
  margin: 8px 0 0;
  color: #87a3ba;
  font-size: 0.72rem;
}
.cadToolbar {
  display: flex;
  gap: 6px;
  padding: 10px;
  overflow-x: auto;
}
.cadToolbar button {
  flex: 0 0 auto;
  border: 1px solid #385d7c;
  border-radius: 9px;
  background: #0c2945;
  color: #d4e7f4;
  padding: 8px 10px;
  font: 850 0.8rem inherit;
  cursor: pointer;
}
.cadToolbar button.active {
  border-color: var(--blue);
  background: #164560;
  box-shadow: 0 0 12px #24d8ff44;
}
.cadDimensions {
  display: grid;
  grid-template-columns: 100px 100px 1fr;
  gap: 8px;
  padding: 0 10px 10px;
  align-items: end;
}
.cadDimensions label {
  display: grid;
  gap: 4px;
  color: #9eb2c6;
  font-size: 0.8rem;
  font-weight: 850;
}
.cadDimensions input {
  width: 100%;
  border: 1px solid #385b7a;
  border-radius: 9px;
  background: #051527;
  color: white;
  padding: 9px;
  font: 800 0.9rem inherit;
}
.cadCanvasWrap {
  margin: 0 10px;
  border: 1px solid #375b79;
  border-radius: 10px;
  overflow: hidden;
  background: #07182a;
}
.cadCanvasWrap canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}
.cad3dWindow {
  margin: 10px;
  overflow: hidden;
  border: 1px solid #4e6597;
  border-radius: 13px;
  background: #030914;
}
.cad3dWindow > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid #40527b;
  background: #111f42;
}
.cad3dWindow > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cad3dWindow > header > span {
  color: #a8d8ff;
  font-size: 0.72rem;
  font-weight: 900;
}
.cad3dControls {
  display: flex;
  align-items: end;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 11px;
  background: #091733;
}
.cad3dControls label {
  display: grid;
  gap: 3px;
  color: #a9bdd1;
  font-size: 0.72rem;
  font-weight: 900;
}
.cad3dControls input {
  width: 145px;
  accent-color: #24d8ff;
}
.cad3dWindow canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: grab;
}
.cad3dWindow canvas:active {
  cursor: grabbing;
}
.cad3dWindow > small {
  display: block;
  padding: 7px 11px;
  color: #829ab4;
}
.cadWindow > p {
  margin: 9px 12px 12px;
  color: #839bb2;
  font-size: 0.8rem;
  line-height: 1.4;
}
@media (max-width: 850px) {
  .scienceWindowGrid {
    grid-template-columns: 1fr;
  }
  .workbenchHead {
    align-items: flex-start;
    flex-direction: column;
  }
  .cadDimensions {
    grid-template-columns: 1fr 1fr;
  }
  .cadDimensions button {
    grid-column: 1/-1;
  }
}
@media (max-width: 520px) {
  .cadProjectControls {
    grid-template-columns: 1fr;
  }
  .cadProjectActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cadProjectActions button {
    min-height: 40px;
  }
  .cadProjectActions button:last-child {
    grid-column: 1/-1;
  }
  .cad3dControls > * {
    width: 100%;
  }
  .cad3dControls input {
    width: 100%;
  }
}
.skyWindow {
  grid-column: 1/-1;
  border: 1px solid #4b5d91;
  border-radius: 17px;
  background: #050d1c;
  overflow: hidden;
}
.skyWindow > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: #111f42;
  border-bottom: 1px solid #3c4f78;
}
.skyWindow > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.skyWindow time {
  color: #a9cfff;
  font: 800 0.8rem ui-monospace, monospace;
}
.skyControls {
  display: flex;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  background: #091733;
  flex-wrap: wrap;
}
.skyControls label {
  display: grid;
  gap: 4px;
  color: #aabbd0;
  font-size: 0.8rem;
  font-weight: 900;
}
.skyControls select {
  min-width: 210px;
  border: 1px solid #485c8a;
  border-radius: 10px;
  background: #071329;
  color: white;
  padding: 9px;
  font: 800 0.9rem inherit;
}
.skyStage {
  position: relative;
  border-block: 1px solid #293b62;
  background: #020713;
}
.skyStage canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}
.skyLegend {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: flex;
  gap: 10px;
  border: 1px solid #405177;
  border-radius: 999px;
  background: #030915cc;
  padding: 6px 10px;
  color: #aebed5;
  font-size: 0.75rem;
}
.skyLegend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.skyLegend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.scienceKey {
  background: #24d8ff;
}
.cultureKey {
  background: #a98bff;
}
.skyObjectCard {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  background: #0a1831;
}
.skyObjectCard h3 {
  margin: 3px 0;
  font-size: 1.45rem;
  color: #dcecff;
}
.skyObjectCard p {
  margin: 0;
  color: #adbed1;
  line-height: 1.45;
}
.skyAccuracy {
  margin: 0;
  padding: 10px 15px 13px;
  color: #8196ae;
  font-size: 0.78rem;
  line-height: 1.45;
}
@media (max-width: 600px) {
  .skyControls > * {
    width: 100%;
  }
  .skyControls select {
    width: 100%;
  }
  .skyObjectCard {
    grid-template-columns: 1fr;
  }
  .skyLegend {
    position: static;
    border: 0;
    border-radius: 0;
  }
  .skyWindow time {
    font-size: 0.7rem;
  }
}
.cadOptions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 0 10px 10px;
}
.cadOptions label {
  display: grid;
  gap: 4px;
  color: #9eb2c6;
  font-size: 0.8rem;
  font-weight: 850;
}
.cadOptions select {
  width: 100%;
  border: 1px solid #385b7a;
  border-radius: 9px;
  background: #051527;
  color: white;
  padding: 9px;
  font: 800 0.9rem inherit;
}
.cadCheck {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  min-height: 38px;
}
.cadCheck input {
  width: 18px;
  height: 18px;
}
.skyControls input[type="range"] {
  width: 160px;
  accent-color: #24d8ff;
}
.skyStage canvas {
  touch-action: none;
}
.dragHint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  border: 1px solid #405177;
  border-radius: 999px;
  background: #030915cc;
  padding: 6px 10px;
  color: #aebed5;
  font-size: 0.75rem;
}
.engineeringSources {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) 1.45fr;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
  border: 1px solid #355777;
  border-radius: 18px;
  background: #071a30;
  padding: 17px;
}
.engineeringSources h2 {
  margin: 5px 0;
}
.engineeringSources p {
  margin: 0;
  color: #93a9bf;
  line-height: 1.45;
}
.engineeringSourceGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.engineeringSourceGrid a {
  display: grid;
  gap: 3px;
  border: 1px solid #365b79;
  border-radius: 11px;
  background: #0c2945;
  color: white;
  padding: 10px 12px;
  text-decoration: none;
}
.engineeringSourceGrid a:hover,
.engineeringSourceGrid a:focus-visible {
  border-color: #24d8ff;
  background: #123a58;
}
.engineeringSourceGrid span {
  color: #91a9c0;
  font-size: 0.8rem;
}
@media (max-width: 760px) {
  .cadOptions,
  .engineeringSources {
    grid-template-columns: 1fr;
  }
  .engineeringSourceGrid {
    grid-template-columns: 1fr;
  }
  .skyLegend,
  .dragHint {
    position: static;
    border: 0;
    border-radius: 0;
    display: flex;
  }
  .skyStage {
    display: flex;
    flex-direction: column;
  }
  .skyControls input[type="range"] {
    width: 100%;
  }
}
.pronunciationBar{margin:12px 0;border:1px solid #3d6684;border-radius:14px;background:#071c32;color:#e8f5ff;padding:12px;font-size:1rem}.pronunciationToggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700}.pronunciationToggle input{width:22px;height:22px;accent-color:#38ceff}.pronunciationBody[hidden]{display:none}.pronunciationBody form{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:12px}.pronunciationBody label{display:grid;gap:4px;font-size:.9rem;flex:1;min-width:150px}.pronunciationBody input,.pronunciationBody select,.pronunciationBody button{font:inherit;min-height:44px;border:1px solid #4c708c;background:#0b2942;color:white;border-radius:9px;padding:8px;max-width:100%}.pronunciationBody button{cursor:pointer}.pronunciationBody p{margin:10px 0;overflow-wrap:anywhere;line-height:1.5}.pronunciationBody p span{unicode-bidi:isolate}.pronunciationBody small{display:block;color:#afc6d7;font-size:.875rem;line-height:1.5}.pronunciationBody a{display:inline-block;color:#70ddff;margin-top:10px}.tile[lang=he-IL],.tile[lang=yi]{font-size:1.45rem;line-height:1.6;letter-spacing:normal}
.soundOptions{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}.soundOptions label{display:grid;flex:1;min-width:160px;gap:5px;font-size:.95rem}.soundOptions select{width:100%;min-width:0}.soundExample{padding:10px;border-left:3px solid #42cfff;background:#0a2941;color:#c9e7fa;font-size:.95rem;line-height:1.5}
.signControls{display:flex;flex-wrap:wrap;gap:14px;margin:20px 0}.signControls label{display:grid;gap:6px;flex:1;min-width:200px}.signControls select,.signPractice textarea{min-height:44px;border:1px solid #496f8a;background:#082238;color:white;border-radius:9px;padding:10px;font:inherit}.signLayout{display:grid;grid-template-columns:1fr 1fr;gap:18px}.signLesson,.signPractice{border:1px solid #315a79;background:#071c31;border-radius:18px;padding:20px}.signApp p{line-height:1.6;color:#b6cedf}.signWords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.signWords button{min-height:48px;border:1px solid #3d6c8c;border-radius:9px;background:#10304b;color:white;font:inherit;cursor:pointer}.signWords button.active{border-color:#3edcff;box-shadow:0 0 8px #25bde955}.signActions{display:flex;flex-wrap:wrap;gap:9px}.signPractice h3{font-size:2rem}.signPractice textarea{width:100%;margin:8px 0}.signPractice small{line-height:1.5;color:#adc5d6;font-size:.9rem}#signViewer{margin-top:20px}#signViewer iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px}@media(max-width:750px){.signLayout{grid-template-columns:1fr}.signWords{grid-template-columns:repeat(2,1fr)}}
.signMini[hidden]{display:none}.signMini{position:fixed;right:16px;bottom:16px;z-index:80;width:min(480px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:2px solid #42cfff;border-radius:16px;background:#06192b;box-shadow:0 12px 48px #0009;padding:12px;color:white}.signMini header{display:flex;justify-content:space-between;gap:12px;align-items:center}.signMini button,.signMini select{background:#103853;color:white;border:1px solid #53778f;border-radius:8px;min-height:40px;padding:8px;font:inherit}.signMini>label{display:grid;gap:5px;margin:10px 0}.signMini iframe,.signMini video{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}.signMini p{font-size:.875rem;line-height:1.5}.signMiniControls{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.signMiniControls label{display:grid;gap:4px;min-width:0}.signMiniControls input{max-width:240px}.signAiOption{margin-top:16px;padding:12px;border:1px solid #395c77;border-radius:10px}.signAiOption summary{cursor:pointer}.signAiOption button{padding:10px;opacity:.65}
.notesHero{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:24px 0 18px}.notesHero h1{margin:6px 0;font-size:clamp(2rem,5vw,3rem)}.notesHero p{max-width:650px;color:#b8cfe0;line-height:1.55}.notesHero label,.notesPanel label,.roomWindow label{display:grid;gap:6px;color:#c5d9e8}.notesHero select,.notesPanel input,.notesPanel textarea,.notesHero input,.roomWindow textarea{font:inherit;color:white;background:#08243d;border:1px solid #456b86;border-radius:9px;padding:10px;min-height:44px}.eyebrow{font-size:.74rem;letter-spacing:.13em;color:#5de0ff;font-weight:800}.notesGrid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.notesPanel,.savedNotes,.lounge,.avatarPanel{border:1px solid #315a79;background:#071c31;border-radius:18px;padding:20px;margin-top:16px}.notesPanel h2,.savedNotes h2,.lounge h2,.avatarPanel h2{margin:4px 0 12px}.notesPanel label{margin:12px 0}.notesActions,.roomControls{display:flex;gap:9px;flex-wrap:wrap}.notesStatus{min-height:1.4em;color:#70ddff}.helperPrompt{color:#dbeeff;line-height:1.5}.helperAnswer{margin:14px 0;padding:13px;border-left:3px solid #42cfff;background:#0a2941;line-height:1.55;min-height:72px}.notesPanel small,.safetyNote{display:block;color:#9eb8cb;line-height:1.5}.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:15px}.savedNotes{margin-top:16px}.notesList{display:grid;gap:10px}.emptyState{color:#9eb8cb}.savedNote{display:flex;justify-content:space-between;gap:14px;padding:14px;border:1px solid #2e526d;background:#0a2841;border-radius:12px}.savedNote h3{margin:4px 0}.savedNote p{white-space:pre-wrap;color:#c7ddeb;line-height:1.5}.savedNote small{color:#96b1c4}.noteLang{color:#60dcff;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.iconButton{align-self:start;border:0;background:transparent;color:#ff8da6;font-size:1.6rem;cursor:pointer}.lounge{margin-top:16px}.testPill{padding:7px 10px;border:1px solid #e4ad44;border-radius:999px;color:#ffd36f;font-size:.75rem;font-weight:800;white-space:nowrap}.loungeGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.loungeCard{padding:16px;border:1px solid #2f5571;border-radius:14px;background:#0a2841}.personRow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #23445e}.personRow:last-child{border-bottom:0}.personRow strong,.personRow span{display:block}.personRow span{font-size:.86rem;color:#a9c4d4;margin-top:4px}.safetyNote{margin-top:14px}.roomWindow{margin-top:16px;padding:14px;border:1px solid #3a6784;border-radius:12px;background:#061c30}.roomAvatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#204b77,#20bdd4);font-size:2rem;margin-bottom:8px}.roomWindow textarea{width:100%;margin:8px 0}.messageLog{display:grid;gap:7px;margin-top:12px}.messageBubble{padding:9px 11px;border-radius:10px;background:#123b57;color:#e8f7ff}.avatarPanel{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.avatarPanel>div:first-child{flex:1;min-width:240px}.avatarPanel p{color:#b6cedf;line-height:1.5}.avatarCard{display:flex;align-items:center;gap:10px;border:1px solid #3d7694;background:#0d3450;border-radius:14px;padding:10px 14px}.avatarCircle{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#5ee6ff,#7a6cff);font-size:1.4rem}.avatarCard span{display:block;color:#b1cada;font-size:.8rem;margin-top:3px}@media(max-width:760px){.notesHero,.sectionHead{align-items:stretch;flex-direction:column}.notesGrid,.loungeGrid{grid-template-columns:1fr}.notesHero label{width:100%}.personRow{align-items:flex-start;flex-direction:column}}
.musicSaveLab{margin-top:18px;padding:18px;border:1px solid #315a79;border-radius:16px;background:#071c31}.musicSaveControls{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.musicSaveControls input,.musicSaveControls select{min-height:42px;border:1px solid #496f8a;border-radius:8px;background:#08243d;color:white;padding:9px;font:inherit}.musicIdeasList{display:grid;gap:9px;margin-top:14px}.musicIdeasList article{padding:12px;border:1px solid #2f5571;border-radius:11px;background:#0a2841}.musicIdeasList article span{display:block;color:#71dcff;font-size:.82rem;margin-top:4px}.musicIdeasList article p{color:#c5dbe9;line-height:1.45}.musicCoach label{display:grid;gap:5px;margin:8px 0;color:#b8d0df}.musicCoach select{max-width:200px;background:#08243d;border:1px solid #496f8a;border-radius:8px;color:white;padding:8px}

/* Browser DAW practice lab */
.dawLab{display:grid;gap:14px;padding:18px;border:1px solid #496b9c;border-radius:20px;background:linear-gradient(145deg,#07172b,#101733);box-shadow:inset 0 1px #ffffff0a}.dawHead{display:flex;justify-content:space-between;gap:18px;align-items:start}.dawHead h2{font-size:clamp(1.65rem,4vw,2.4rem);margin:5px 0}.dawHead p{max-width:770px;color:#b4cad9}.dawStatus{display:grid;grid-template-columns:auto 1fr;gap:2px 7px;min-width:150px;padding:10px 13px;border:1px solid #365e80;border-radius:13px;background:#071e35}.dawStatus i{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#668094}.dawStatus i.live{background:#56eca8;box-shadow:0 0 12px #56eca8}.dawStatus span{grid-column:1/-1;color:#8faabd;font-size:.76rem}.dawTransport{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:11px;border:1px solid #2e506d;border-radius:13px;background:#061426}.dawTransport label{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:7px;color:#bad1df}.dawTransport select,.dawProjects input,.dawCoach select{min-height:42px;border:1px solid #486f8b;border-radius:9px;background:#08243d;color:white;padding:8px 10px;font:inherit}.dawScroller{overflow-x:auto;padding-bottom:5px}.dawSequencer{min-width:930px;display:grid;gap:5px;padding:9px;border:1px solid #2c516d;border-radius:14px;background:#040f1e}.dawBeatHeader,.dawTrack{display:grid;grid-template-columns:205px repeat(16,minmax(32px,1fr));gap:4px;align-items:stretch}.dawBeatHeader span{padding-left:6px;color:#7994a8;font-size:.72rem;font-weight:800;letter-spacing:.08em}.dawBeatHeader b{display:grid;place-items:center;color:#718da2;font-size:.7rem}.dawBeatHeader b.bar{color:#62dffb}.dawTrackInfo{grid-column:1;display:grid;grid-template-columns:62px 1fr;gap:4px 7px;align-items:center;padding:6px;border-left:4px solid var(--track);border-radius:8px;background:#0b263f}.dawTrackInfo strong{font-size:.88rem}.dawTrackInfo select{min-width:0;border:1px solid #3d617b;border-radius:6px;background:#06182a;color:white;padding:5px}.dawTrackInfo>div{grid-column:1/-1;display:flex;gap:4px;align-items:center}.dawTrackInfo button{width:28px;height:25px;border:1px solid #42647e;border-radius:5px;background:#0b1b2d;color:#a9c3d4;cursor:pointer}.dawTrackInfo button.active{background:#e6a64d;color:#111}.dawTrackInfo label{display:flex;align-items:center;gap:4px;margin-left:auto;color:#8faabd;font-size:.68rem}.dawTrackInfo input{width:62px}.dawSteps{grid-column:2/-1;display:grid;grid-template-columns:repeat(16,1fr);gap:4px}.dawStep{min-height:55px;border:1px solid #25455e;border-radius:7px;background:#092039;cursor:pointer;transition:background .12s,box-shadow .12s,transform .12s}.dawStep.bar{border-left-color:#527893}.dawStep:hover{transform:translateY(-1px);border-color:#6393b1}.dawStep.on{border-color:var(--track);background:color-mix(in srgb,var(--track) 72%,#092039);box-shadow:inset 0 0 0 2px #ffffff22,0 0 12px color-mix(in srgb,var(--track) 35%,transparent)}.dawStep.playhead{outline:2px solid #fff;outline-offset:-3px}.dawBottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dawCoach,.dawProjects{padding:15px;border:1px solid #315875;border-radius:14px;background:#071c31}.dawCoach p,.dawProjectStatus{min-height:48px;color:#bdd3e1;line-height:1.45}.dawProjects>div{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}.dawCollaborate{display:inline-block;color:#73e9ff;text-decoration:none}.dawReferences{padding:10px 13px;border:1px solid #294c66;border-radius:11px;background:#06182a}.dawReferences summary{cursor:pointer;font-weight:800}.dawReferences p{color:#a9c2d2}.dawReferences a{color:#72e3ff}.collabDaw{display:grid;gap:8px;margin-top:12px;padding:12px;border:1px solid #315875;border-radius:12px;background:#06182b}.collabDawTransport{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.collabDawGrid{min-width:650px;display:grid;gap:4px}.collabDawRow{display:grid;grid-template-columns:68px repeat(16,1fr);gap:3px}.collabDawRow span{font-size:.72rem;color:#a9c6d7}.collabDawRow button{min-height:31px;border:1px solid #31536c;border-radius:4px;background:#0b2841}.collabDawRow button.on{background:var(--track);box-shadow:0 0 8px color-mix(in srgb,var(--track) 40%,transparent)}.collabDawRow button.playhead{outline:2px solid #fff;outline-offset:-2px}.collabDawScroll{overflow-x:auto}.collabDawNote{color:#98b5c8;font-size:.82rem}
@media(max-width:800px){.dawHead{flex-direction:column}.dawStatus{width:100%}.dawBottom{grid-template-columns:1fr}}@media(max-width:540px){.dawLab{padding:12px}.dawTransport>*{width:100%}.dawTransport label{grid-template-columns:auto 1fr auto}.dawProjects>div{display:grid}.dawProjects>div button{width:100%}}
.academicApp,.calculatorApp{width:min(1100px,100%)}.academicHead{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:24px 0}.academicHead h1{font-size:clamp(2rem,5vw,3.6rem);margin:5px 0}.academicHead p{max-width:720px;color:#b8cfe0;line-height:1.55}.academicXp{border:1px solid #3d6d8d;border-radius:14px;padding:10px 15px;color:#9fc4d9}.academicXp strong{display:block;color:#55ddff;font-size:1.7rem}.academicControls{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:end;padding:14px;border:1px solid #315a79;background:#071c31;border-radius:16px}.academicControls label,.programExplorer label,.calculatorMain label,.calcGuide label{display:grid;gap:5px;color:#c2d9e7}.academicControls select,.programExplorer select,.calculatorMain input,.calculatorMain select,.calcGuide select{min-height:44px;background:#08243d;border:1px solid #496f8a;border-radius:9px;color:white;padding:9px;font:inherit}.academicDashboard{display:grid;grid-template-columns:1.3fr .8fr;gap:16px;margin-top:16px}.academicLesson,.academicQuiz,.programShelf,.programExplorer,.calculatorMain,.calcGuide,.calcHistory{border:1px solid #315a79;background:#071c31;border-radius:18px;padding:20px}.academicLesson h2,.academicQuiz h2{margin:7px 0 12px}.academicLesson>p{color:#c4d9e7;line-height:1.55}.academicTerms{display:grid;gap:8px;margin:15px 0}.academicTerms button,.academicQuiz button{border:1px solid #315a79;background:#0a2942;color:white;border-radius:11px;padding:12px;text-align:left;font:inherit;cursor:pointer}.academicTerms b,.academicTerms span{display:block}.academicTerms span{color:#afc7d8;margin-top:4px}.academicActions{display:flex;gap:8px;flex-wrap:wrap}.academicQuiz #quizChoices{display:grid;gap:8px}.academicQuiz button:hover,.academicQuiz button:focus-visible{border-color:#45dfff}.programShelf,.programExplorer{margin-top:16px}.academicResources{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.academicResources a,.catalogLinks a{display:grid;gap:4px;border:1px solid #315a79;border-radius:11px;background:#0a2942;color:white;padding:12px;text-decoration:none}.academicResources span{color:#7dddff;font-size:.86rem}.sourceBoundary{color:#9fb9cb;line-height:1.5}.programExplorer .sectionHead label{min-width:280px}.programPathways{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.programPathways article{display:flex;gap:12px;padding:13px;border:1px solid #2e526d;border-radius:12px;background:#0a2841}.programPathways article>span{color:#58dcff;font-weight:800}.programPathways b{font-size:1rem}.programPathways p{margin:5px 0 0;color:#a9c3d4;line-height:1.4}.catalogLinks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.academicViewer[hidden]{display:none}.academicViewer{position:fixed;z-index:90;right:16px;bottom:16px;width:min(560px,calc(100vw - 32px));max-height:88vh;overflow:auto;background:#06192b;border:2px solid #42cfff;border-radius:16px;padding:12px;box-shadow:0 18px 60px #000b}.academicViewer header{display:flex;justify-content:space-between;align-items:center}.academicViewer header button{font-size:1.6rem;border:0;background:transparent;color:white}.academicViewer iframe{width:100%;aspect-ratio:16/9;border:0;margin-top:10px}.viewerSteps{line-height:1.55;color:#c5dbea}.calculatorShell{display:grid;grid-template-columns:1fr 1fr;gap:16px}.calculatorMain label{margin-bottom:12px}.calculatorMain #calcInputs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.calcResult{margin-top:18px;padding:16px;border-left:4px solid #45dfff;background:#0a2942}.calcResult span{display:block;font-size:.75rem;color:#93b2c7}.calcResult strong{display:block;margin-top:5px;font-size:1.8rem}.calcGuide #calcSteps{line-height:1.55}.calcGuide label{margin:14px 0}.calcHistory{margin-top:16px}.calcHistory article{padding:12px;border-bottom:1px solid #294d68}.calcHistory article span{display:block;color:#8eb1c6;font-size:.8rem;margin-top:4px}.calcHistory article p{color:#c3d9e6;line-height:1.5}.track.academics{background:linear-gradient(145deg,#2a2340,#102e48)}@media(max-width:780px){.academicControls{grid-template-columns:1fr 1fr}.academicDashboard,.calculatorShell{grid-template-columns:1fr}.academicResources,.programPathways,.catalogLinks{grid-template-columns:1fr}.calculatorMain #calcInputs{grid-template-columns:1fr}}@media(max-width:520px){.academicControls{grid-template-columns:1fr}.academicHead{align-items:flex-start;flex-direction:column}}
.programPathways button{display:flex;gap:12px;padding:13px;border:1px solid #2e526d;border-radius:12px;background:#0a2841;color:white;text-align:left;font:inherit;cursor:pointer}.programPathways button:hover,.programPathways button:focus-visible{border-color:#45dfff}.programPathways button>span{color:#58dcff;font-weight:800}.pathwayBadge{padding:24px;border-radius:12px;background:linear-gradient(135deg,#153f62,#2b315e);text-align:center;color:#7ee8ff;font-weight:800;letter-spacing:.08em}
.worldLanguageCallout{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;margin:12px 0;border:1px solid #3b708f;border-radius:13px;background:#0a2942;color:white;text-decoration:none}.worldLanguageCallout span{color:#b4cada}.worldLangControls{display:grid;grid-template-columns:2fr 1fr;gap:10px}.worldLangControls label,.languageDetail label{display:grid;gap:5px;color:#c1d8e6}.worldLangControls input,.worldLangControls select,.languageDetail input{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:9px;font:inherit}.worldLanguageGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.worldLanguageGrid button{display:grid;gap:4px;min-height:68px;border:1px solid #315a79;border-radius:11px;background:#0a2841;color:white;text-align:left;padding:11px;font:inherit;cursor:pointer}.worldLanguageGrid button:hover,.worldLanguageGrid button:focus-visible{border-color:#46dfff}.worldLanguageGrid small{color:#8eb4c9}.languageDetail[hidden]{display:none}.languageDetail{position:fixed;right:16px;bottom:16px;z-index:95;width:min(460px,calc(100vw - 32px));padding:16px;border:2px solid #45dcff;border-radius:16px;background:#06192b;box-shadow:0 18px 55px #000b}.languageDetail header{display:flex;justify-content:space-between}.languageDetail header button{border:0;background:transparent;color:white;font-size:1.6rem}.languageDetail label{margin:12px 0}.languageDetail>div{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:720px){.worldLanguageGrid{grid-template-columns:repeat(2,1fr)}.worldLangControls{grid-template-columns:1fr}}@media(max-width:430px){.worldLanguageGrid{grid-template-columns:1fr}.worldLanguageCallout{flex-direction:column}}
.academicPath{margin-top:16px;padding:20px;border:1px solid #315a79;border-radius:18px;background:#071c31}.pathHead{display:grid;grid-template-columns:1fr minmax(180px,34%);gap:18px;align-items:center}.pathHead h2{margin:5px 0}.pathHead p{margin:0;color:#a9c3d4}.pathMeter{height:12px;border-radius:999px;background:#0b2a43;overflow:hidden}.pathMeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#26d7ff,#8a76ff);transition:width .25s}.pathNodes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}.pathNodes button{min-width:0;min-height:106px;display:grid;align-content:start;gap:5px;border:1px solid #315a79;border-radius:13px;background:#0a2841;color:white;text-align:left;padding:10px;font:inherit;cursor:pointer}.pathNodes button>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#153b57;color:#64e2ff;font-weight:800}.pathNodes button b{font-size:.86rem;line-height:1.25}.pathNodes button small{color:#91afc2}.pathNodes button.active{border-color:#4de1ff;box-shadow:0 0 0 2px #24d8ff33}.pathNodes button.complete>span{background:#137d72;color:white}.pathActivity{border:1px solid #375f7c;border-radius:15px;background:#0a2841;padding:18px}.pathActivityHead{display:flex;justify-content:space-between;color:#68ddff;font-size:.78rem;font-weight:800;letter-spacing:.09em}.pathActivity h3{font-size:1.45rem;margin:9px 0}.pathActivity>p{color:#bfd5e3;line-height:1.5}.pathActivity fieldset{border:0;padding:0;margin:16px 0;display:grid;gap:8px}.pathActivity legend{font-weight:700;margin-bottom:10px;line-height:1.45}.pathActivity fieldset label{display:block;padding:11px;border:1px solid #315a79;border-radius:10px;background:#071c31;cursor:pointer}.pathActivity fieldset input{margin-right:7px;accent-color:#24d8ff}.pathActivity #pathPractice>label{display:grid;gap:9px;font-weight:700;line-height:1.45}.pathActivity textarea{width:100%;border:1px solid #496f8a;border-radius:9px;background:#071c31;color:white;padding:11px;font:inherit;resize:vertical}.pathActivityActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}#pathFeedback{min-height:1.5em;color:#78e2ff}@media(max-width:860px){.pathNodes{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.pathHead{grid-template-columns:1fr}.pathNodes{grid-template-columns:repeat(2,1fr)}.pathNodes button{min-height:92px}}
.collegeCareerTracks{margin-top:18px;padding:20px;border:1px solid #315a79;border-radius:18px;background:#071c31}.collegeCareerTracks .sectionHead p{color:#aec7d7;line-height:1.5}.collegeTrackGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.collegeTrackGrid a{display:grid;gap:7px;min-height:112px;padding:14px;border:1px solid #315a79;border-radius:13px;background:linear-gradient(145deg,#0d2f4a,#131f3b);color:white;text-decoration:none}.collegeTrackGrid a:hover,.collegeTrackGrid a:focus-visible{border-color:#45dcff;transform:translateY(-1px)}.collegeTrackGrid span{color:#aac5d6;line-height:1.4}.programLanguageApp{width:min(1100px,100%)}.programHead{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:24px 0}.programIcon{width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#173f63,#292d64);font-size:2rem}.programHead h1{margin:4px 0;font-size:clamp(2rem,4.5vw,3.2rem)}.programHead p{margin:0;color:#b3ccdc;line-height:1.5}.programControls{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px;align-items:end;padding:14px;border:1px solid #315a79;border-radius:15px;background:#071c31}.programControls label{display:grid;gap:5px;color:#bfd5e3}.programControls select,.programActivity textarea,.programSupportGrid input{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:9px;font:inherit}.programPathBoard{margin-top:16px;padding:20px;border:1px solid #315a79;border-radius:18px;background:#071c31}.programPathBoard>header{display:grid;grid-template-columns:1fr minmax(180px,35%);gap:18px;align-items:center}.programPathBoard h2{margin:5px 0}.programPathBoard header p{margin:0;color:#a9c3d4}.programPathNodes{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:18px 0}.programPathNodes button{min-height:108px;display:grid;align-content:start;gap:5px;border:1px solid #315a79;border-radius:12px;background:#0a2841;color:white;padding:10px;text-align:left;font:inherit;cursor:pointer}.programPathNodes button span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#153b57;color:#63e1ff;font-weight:800}.programPathNodes button b{font-size:.86rem;line-height:1.25}.programPathNodes button small{color:#92aec1}.programPathNodes button.active{border-color:#45dfff}.programPathNodes button.complete span{background:#147c72;color:white}.programActivity{padding:18px;border:1px solid #375f7c;border-radius:14px;background:#0a2841}.programActivity>p{color:#bfd5e3;line-height:1.5}.programActivity fieldset{border:0;padding:0;display:grid;gap:8px}.programActivity fieldset label{padding:11px;border:1px solid #315a79;border-radius:9px;background:#071c31}.programActivity #programExercise>label{display:grid;gap:9px;font-weight:700;line-height:1.5}.programActivity textarea{width:100%;resize:vertical}.programSupportGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.programSupportGrid article{padding:20px;border:1px solid #315a79;border-radius:16px;background:#071c31}.programSupportGrid form{display:flex;gap:8px}.programSupportGrid input{flex:1}.programSources{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.programSources a{padding:10px;border:1px solid #315a79;border-radius:9px;background:#0a2841;color:#7fe4ff;text-decoration:none}.programSupportGrid article>p{color:#a9c2d2;line-height:1.5}#programViewerContent{line-height:1.55}#programViewerContent .domainButton{margin:5px}@media(max-width:900px){.collegeTrackGrid{grid-template-columns:repeat(2,1fr)}.programControls{grid-template-columns:1fr 1fr}.programPathNodes{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.collegeTrackGrid,.programSupportGrid{grid-template-columns:1fr}.programHead{grid-template-columns:auto 1fr}.programHead .domainScore{grid-column:1/-1}.programPathBoard>header{grid-template-columns:1fr}.programPathNodes{grid-template-columns:repeat(2,1fr)}.programSupportGrid form{flex-direction:column}}@media(max-width:460px){.programControls{grid-template-columns:1fr}}
.programVocabularyCard{margin-top:16px;padding:20px;border:1px solid #315a79;border-radius:16px;background:#071c31}.programVocabulary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.programVocabulary span{display:grid;gap:4px;padding:10px;border:1px solid #315a79;border-radius:10px;background:#0a2841}.programVocabulary b{font-size:1rem}.programVocabulary small{color:#91afc2}@media(max-width:700px){.programVocabulary{grid-template-columns:repeat(2,1fr)}}
.schoolExplorer{margin-top:16px;padding:20px;border:1px solid #315a79;border-radius:18px;background:#071c31}.schoolExplorerHead{display:grid;grid-template-columns:1fr minmax(260px,.65fr);gap:18px;align-items:start}.schoolExplorerHead h2{margin:6px 0}.schoolExplorerHead p,.schoolSafety{color:#aac5d6;line-height:1.5}.schoolDirectoryLinks{display:grid;gap:8px}.schoolDirectoryLinks a,.schoolCardLinks a{padding:11px;border:1px solid #3a6987;border-radius:10px;background:#0a2942;color:#77e2ff;text-decoration:none}.schoolFilters{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:end;margin:18px 0}.schoolFilters label{display:grid;gap:5px;color:#bfd5e3}.schoolFilters select,.schoolFilters input{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:9px;font:inherit}.schoolDeck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:stretch}.schoolArrow{width:48px;border:1px solid #3c6f8e;border-radius:14px;background:#0a2942;color:#64e3ff;font-size:2.4rem;cursor:pointer}.schoolCard{min-height:290px;padding:20px;border:1px solid #4c7da0;border-radius:16px;background:linear-gradient(145deg,#0c3150,#171f42);box-shadow:inset 0 1px #ffffff12}.schoolCardTop{display:flex;justify-content:space-between;color:#77ddfb;font-size:.82rem;font-weight:800;letter-spacing:.06em}.schoolCard h3{margin:20px 0 4px;font-size:clamp(1.5rem,4vw,2.2rem)}.schoolLocation{color:#a9c7d8}.schoolMatchReason{margin:16px 0;padding:13px;border-left:4px solid #47dcff;background:#071c31}.schoolMatchReason p{margin:5px 0 0;line-height:1.45}.schoolCardLinks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.schoolCard small{color:#99b6c8;line-height:1.4}.schoolDeckActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}.schoolDeckActions>span{margin-right:auto;color:#9fc0d3}.savedSchools{margin-top:14px}.savedSchools>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.savedSchools span{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #315a79;border-radius:999px;background:#0a2942}.savedSchools a{color:#bcefff;text-decoration:none}.savedSchools button{border:0;background:transparent;color:#ff88a1;font-size:1.15rem}.careerReadiness{margin-top:18px;border:1px solid #315a79;border-radius:14px;background:#0a2841;padding:14px}.careerReadiness summary{cursor:pointer;font-weight:800;font-size:1.1rem}.careerReadiness>p{color:#a9c5d6}.careerReadiness form{display:grid;gap:10px}.careerReadiness fieldset{border:1px solid #315a79;border-radius:11px;padding:12px;background:#071c31}.careerReadiness legend{font-weight:700;line-height:1.4}.careerReadiness fieldset label{display:inline-flex;gap:5px;margin:9px 16px 0 0}.readinessResult{margin-top:12px;padding:13px;border-left:4px solid #8a76ff;background:#071c31;line-height:1.5}@media(max-width:760px){.schoolExplorerHead{grid-template-columns:1fr}.schoolFilters{grid-template-columns:1fr 1fr}.schoolFilters button{grid-column:1/-1}.schoolCardLinks{grid-template-columns:1fr}}@media(max-width:520px){.schoolFilters{grid-template-columns:1fr}.schoolFilters button{grid-column:auto}.schoolDeck{grid-template-columns:38px minmax(0,1fr) 38px}.schoolArrow{width:38px}.schoolCard{padding:15px}.schoolCard h3{font-size:1.35rem}}
.track.government{--track:#6fc7ff;background:linear-gradient(145deg,#173854,#18253f)}.track.economics{--track:#58dfa5;background:linear-gradient(145deg,#133f3d,#12283c)}.track.business{--track:#f6c35d;background:linear-gradient(145deg,#41351c,#172a42)}.track.history{--track:#df9f70;background:linear-gradient(145deg,#453022,#222541)}
.track.law{--track:#ef7e83;background:linear-gradient(145deg,#43252c,#172940)}.track.trades{--track:#f0a64b;background:linear-gradient(145deg,#49351d,#15283e)}.track.mechanical{--track:#7fdae9;background:linear-gradient(145deg,#153b47,#202743)}.careerDesignStudio{margin-top:16px;padding:20px;border:1px solid #315a79;border-radius:18px;background:#071c31}.careerDesignHead{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}.careerDesignHead h2{margin:6px 0}.careerDesignHead p,.careerDesignHint,.subscriptionPreview{color:#aac4d5;line-height:1.5}.careerDesignTabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 10px}.careerDesignTabs button{min-height:42px;padding:8px 14px;border:1px solid #396a89;border-radius:10px;background:#0a2942;color:#d8eff9;font:inherit;font-weight:750;cursor:pointer}.careerDesignTabs button.active{border-color:#55e2ff;background:#154765;box-shadow:0 0 18px #32d8ff24}.careerDesignControls{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end;margin-bottom:10px}.careerDesignControls label,.careerDesignSave label{display:grid;gap:5px;color:#bfd5e3}.careerDesignControls select,.careerDesignControls input,.careerDesignSave select,.careerDesignSave input{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:9px;font:inherit}.careerDesignControls input{padding:0}.careerDesignStudio canvas{display:block;width:100%;min-height:270px;border:1px solid #427391;border-radius:14px;background:#071c31;touch-action:none}.careerDesignSave{display:grid;grid-template-columns:1.3fr 1.4fr repeat(3,auto);gap:8px;align-items:end;margin-top:14px;padding:13px;border:1px solid #315a79;border-radius:13px;background:#0a2841}.careerDesignCoach{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin-top:14px;padding:14px;border-left:4px solid #8e78ff;background:#0a2841}.careerDesignCoach p{margin:5px 0;color:#bdd4e2;line-height:1.45}.subscriptionPreview{margin:9px 0 0;font-size:.9rem}@media(max-width:850px){.careerDesignHead{grid-template-columns:1fr}.careerDesignControls{grid-template-columns:1fr 1fr}.careerDesignSave{grid-template-columns:1fr 1fr}.careerDesignCoach{grid-template-columns:1fr}.careerDesignCoach button{width:100%}}@media(max-width:540px){.careerDesignControls,.careerDesignSave{grid-template-columns:1fr}.careerDesignStudio{padding:14px}}

/* Anatomy 3D study lab */
.anatomy3dLab{border:1px solid #315a79;border-radius:20px;background:#071c31;padding:20px}.anatomy3dHead{display:flex;justify-content:space-between;gap:18px;align-items:start}.anatomy3dHead h2{margin:5px 0;font-size:clamp(1.7rem,4vw,2.5rem)}.anatomy3dHead p,.anatomy3dDetail p{color:#b8d0df;line-height:1.55;max-width:760px}.anatomy3dBadge{padding:10px 13px;border:1px solid #45e2ff;border-radius:999px;color:#79e9ff;box-shadow:0 0 22px #2fddff33;white-space:nowrap}.anatomy3dControls{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end;margin:18px 0}.anatomy3dControls label{display:grid;gap:5px;color:#bdd5e4}.anatomy3dControls select,.anatomy3dControls input{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:8px;font:inherit}.anatomy3dGrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.7fr);gap:14px}.anatomyCanvasWrap{position:relative}.anatomyCanvasWrap canvas{display:block;width:100%;aspect-ratio:900/650;border:1px solid #3c7292;border-radius:16px;background:#061629;touch-action:none;cursor:grab}.anatomyCanvasWrap canvas:active{cursor:grabbing}.anatomyOrientation{position:absolute;left:12px;bottom:12px;padding:7px 10px;border-radius:999px;background:#04121dcc;color:#8feaff;font-size:.75rem;font-weight:800;letter-spacing:.08em}.anatomy3dDetail{padding:18px;border:1px solid #315a79;border-radius:15px;background:#0a2841}.anatomy3dDetail h3{font-size:1.55rem;margin:9px 0}.anatomy3dDetail small{display:block;margin-top:15px;color:#91adbf;line-height:1.45}.anatomyQuestion{margin-top:14px;padding:14px;border-left:4px solid #8d79ff;background:#0a2841;line-height:1.5}.track.veterinary{--track:#71dfae;background:linear-gradient(145deg,#153f38,#17283f)}.track.survival{--track:#f3c364;background:linear-gradient(145deg,#49391b,#182941)}.track.laboratory{--track:#b08aff;background:linear-gradient(145deg,#332653,#142b43)}.track.fire{--track:#ff826f;background:linear-gradient(145deg,#51261f,#162b42)}.track.property{--track:#68d7d0;background:linear-gradient(145deg,#15413f,#192941)}.track.management{--track:#c39cff;background:linear-gradient(145deg,#372951,#162a43)}.track.philosophy{--track:#f0a2db;background:linear-gradient(145deg,#472643,#172a45)}

/* Collaboration Lab */
.collaborationCallout{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:16px 0;padding:18px;border:1px solid #5772d8;border-radius:17px;background:linear-gradient(135deg,#13284c,#291f50);color:white;text-decoration:none}.collaborationCallout b{display:block;font-size:1.2rem;margin:5px 0}.collaborationCallout p{margin:0;color:#bcd1e4;line-height:1.45}.collaborationCallout>span{white-space:nowrap;color:#7be6ff;font-weight:800}.collabHero{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:28px 0 18px}.collabHero h1{font-size:clamp(2.2rem,6vw,4.2rem);margin:6px 0}.collabHero p{max-width:760px;color:#b9d0df;line-height:1.55}.collabLive{display:grid;grid-template-columns:auto auto;gap:2px 8px;align-items:center;padding:12px 15px;border:1px solid #3e718f;border-radius:14px;background:#0a2942}.collabLive i{width:10px;height:10px;border-radius:50%;background:#50e89a;box-shadow:0 0 10px #50e89a}.collabLive strong{font-size:1.5rem}.collabLive span{grid-column:1/-1;color:#9fb9ca;font-size:.8rem}.collabModeSwitch{display:grid;grid-template-columns:1fr 1fr;gap:8px}.collabModeSwitch button{min-height:58px;border:1px solid #315a79;border-radius:13px;background:#0a2841;color:#c9deeb;font:inherit;font-weight:800;cursor:pointer}.collabModeSwitch button.active{border-color:#4ce2ff;background:#154765;box-shadow:0 0 22px #28d9ff22}.collabSetup{display:grid;grid-template-columns:1.2fr 1.2fr 1fr 1fr auto;gap:9px;align-items:end;margin:14px 0;padding:14px;border:1px solid #315a79;border-radius:15px;background:#071c31}.collabSetup label{display:grid;gap:5px;color:#bed5e3}.collabSetup select,.collabSetup input,.collabPanel textarea{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:9px;font:inherit}.collabBoundary{padding:11px 14px;border-left:4px solid #f0b957;background:#2e281c;color:#f0d9a3;line-height:1.45}.collabGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.collabPanel{margin-top:14px;padding:18px;border:1px solid #315a79;border-radius:17px;background:#071c31}.collabPanel header{display:flex;justify-content:space-between;gap:12px;align-items:start}.collabPanel h2{margin:5px 0 12px}.collabPanel textarea{display:block;width:100%;resize:vertical}.collabChat form>div,.collabActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.collabMessages{height:250px;overflow:auto;display:grid;align-content:start;gap:8px;margin:10px 0;padding:10px;border:1px solid #274b65;border-radius:11px;background:#06182a}.collabMessage{padding:9px 11px;border-radius:10px;background:#103650}.collabMessage b{color:#64e1ff}.collabMessage p{margin:4px 0 0;line-height:1.45}.moderationStatus{color:#9db9cb;line-height:1.45;font-size:.88rem}.moderationStatus.warning{color:#ffb0a4}.toolPanel{margin-bottom:22px}.collabToolGrid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,.6fr);gap:14px}.collabToolGrid canvas{display:block;width:100%;aspect-ratio:900/430;border:1px solid #3b6c89;border-radius:13px;background:#07192d;touch-action:none}.collabToolGrid aside{padding:15px;border:1px solid #315a79;border-radius:13px;background:#0a2841}.collabToolGrid aside p{color:#b6cddd;line-height:1.5}.musicKey{display:inline-grid;place-items:end center;width:52px;height:140px;margin:2px;border:1px solid #657b8d;border-radius:5px 5px 9px 9px;background:linear-gradient(#fff,#cfe4ec);color:#082238;font:inherit;font-weight:800;cursor:pointer;padding-bottom:12px}.musicKey:active{transform:translateY(3px);background:#83eaff}.collabSafety{display:flex;gap:16px;margin:18px 0;padding:15px;border:1px solid #8b594d;border-radius:13px;background:#2c1f24}.collabSafety strong{color:#ffb1a1;white-space:nowrap}.collabSafety span{color:#d5bdc0;line-height:1.45}
@media(max-width:900px){.anatomy3dControls,.collabSetup{grid-template-columns:1fr 1fr}.anatomy3dGrid,.collabToolGrid{grid-template-columns:1fr}.collabSetup>button{grid-column:1/-1}}@media(max-width:700px){.anatomy3dHead,.collabHero,.collabSafety{flex-direction:column;align-items:stretch}.collabGrid{grid-template-columns:1fr}.collabLive{align-self:start}.collaborationCallout{align-items:flex-start;flex-direction:column}.anatomy3dControls,.collabSetup{grid-template-columns:1fr}.collabSetup>button{grid-column:auto}.musicKey{width:42px;height:110px}}
.collegeHandoff{margin-bottom:18px}.collegeHandoff header p{max-width:760px;color:#b6cedd;line-height:1.5}.handoffGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}.handoffGrid label,.handoffSummary{display:grid;gap:5px;color:#bed5e3}.handoffGrid input,.handoffGrid select{min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:9px;font:inherit}.handoffChecks{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0;color:#c2d8e5}.handoffChecks input{width:20px;height:20px;vertical-align:middle;accent-color:#3bdcff}.collegeHandoff button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:700px){.handoffGrid{grid-template-columns:1fr}.collegeHandoff header{flex-direction:column}}

/* MRI technologist touch simulator */
.mriLaunchCard{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px;padding:14px 16px;border:1px solid #426f91;border-radius:14px;background:linear-gradient(135deg,#0b3150,#242552)}.mriLaunchCard h3{margin:4px 0;font-size:1.2rem}.mriLaunchCard p{margin:0;color:#b8d1df;line-height:1.45}.mriLaunchCard button{white-space:nowrap}.mriSimulatorDialog{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:#020912d9;backdrop-filter:blur(5px)}.mriSimulatorDialog[hidden]{display:none}.mriSimulatorWindow{width:min(1180px,100%);max-height:94vh;overflow:auto;padding:18px;border:2px solid #4bdcff;border-radius:20px;background:#06182b;box-shadow:0 24px 90px #000c,0 0 40px #2dd9ff24}.mriSimulatorWindow>header{display:flex;align-items:center;justify-content:space-between;gap:18px}.mriSimulatorWindow h2{margin:5px 0;font-size:clamp(1.7rem,4vw,2.5rem)}.mriClose{width:48px;height:48px;border:1px solid #52748c;border-radius:12px;background:#0d2d47;color:white;font:inherit;font-size:2rem;cursor:pointer}.mriProgress{position:relative;height:36px;margin:12px 0 16px;border:1px solid #325c79;border-radius:999px;background:#081f35;overflow:hidden}.mriProgress i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#168fd1,#4be4ce);transition:width .25s}.mriProgress span{position:relative;z-index:1;display:grid;place-items:center;height:100%;font-weight:800;font-size:.88rem}.mriSimulatorLayout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.65fr);gap:14px}.mriCanvasWrap{position:relative}.mriCanvas{display:block;width:100%;aspect-ratio:860/420;border:1px solid #3f7393;border-radius:16px;background:#051527;touch-action:none;cursor:grab}.mriCanvas:active{cursor:grabbing}.mriCanvasHint{position:absolute;left:10px;right:10px;bottom:10px;padding:7px 10px;border-radius:9px;background:#03101dcc;color:#c8eff9;text-align:center;font-size:.82rem}.mriViewActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.mriViewActions .mriCheck{margin-left:auto}.mriControlPanel{padding:16px;border:1px solid #315b78;border-radius:15px;background:#0a2841}.mriControlPanel>label{display:grid;gap:6px;color:#c6dce8}.mriControlPanel select{width:100%;min-height:44px;border:1px solid #52768e;border-radius:9px;background:#061c30;color:white;padding:9px;font:inherit}.mriControlPanel fieldset{display:grid;gap:9px;margin:14px 0;padding:13px;border:1px solid #365e79;border-radius:11px}.mriControlPanel legend{font-weight:800;padding:0 5px}.mriControlPanel fieldset label{display:flex;gap:9px;align-items:flex-start;line-height:1.4}.mriControlPanel input{width:20px;height:20px;accent-color:#3edcff;flex:0 0 auto}.mriControlPanel>small{display:block;margin-top:14px;color:#95afc0;line-height:1.5}.mriCoach{display:grid;gap:5px;margin:15px 0;padding:13px;border-left:4px solid #55cfff;background:#071b30}.mriCoach span{color:#70e2ff;font-size:.73rem;font-weight:800;letter-spacing:.08em}.mriCoach b{font-size:1.08rem}.mriCoach p{margin:0;color:#bed4e2;line-height:1.45}.mriCoach.needsWork{border-color:#ff9c75}.mriCoach.needsWork span{color:#ffb498}.mriCoach.progressing{border-color:#a98dff}.mriCoach.approved{border-color:#56e6a4;box-shadow:0 0 22px #2ae49b1c}.mriCoach.approved span{color:#65e9ac}@media(max-width:850px){.mriSimulatorLayout{grid-template-columns:1fr}.mriLaunchCard{align-items:stretch;flex-direction:column}.mriLaunchCard button{width:100%}}@media(max-width:540px){.mriSimulatorDialog{padding:5px}.mriSimulatorWindow{padding:12px;border-radius:14px}.mriCanvasHint{position:static;border-radius:0 0 10px 10px}.mriCanvas{border-radius:10px 10px 0 0}.mriViewActions{display:grid;grid-template-columns:1fr 1fr}.mriViewActions .mriCheck{grid-column:1/-1;margin-left:0}.mriSimulatorWindow>header{align-items:flex-start}}

/* AR Learning Studio */
.arBody{background:#030a13;color:#e9f8ff}.arApp{width:min(1500px,96vw);max-width:none}.arTop{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 0}.arTop h1{margin:4px 0;font-size:clamp(1.8rem,4vw,3rem)}.arBack{color:#8beaff;text-decoration:none;font-weight:800}.arBadge{padding:10px 14px;border:1px solid #55e4ff;border-radius:999px;color:#83eeff;box-shadow:0 0 24px #21d9ff33;font-weight:900}.arModes{display:flex;gap:8px;overflow-x:auto;padding:8px 0 14px}.arModes button{min-height:46px;padding:8px 15px;border:1px solid #315975;border-radius:12px;background:#081e31;color:#cce5f1;font:inherit;font-weight:800;white-space:nowrap;cursor:pointer}.arModes button.active{border-color:#61e9ff;background:#13405a;box-shadow:0 0 18px #23ddff24;color:white}.arWorkspace{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(440px,1.65fr) minmax(250px,.65fr);gap:12px;align-items:start}.arControls,.arInspector{min-height:620px;padding:17px;border:1px solid #315974;border-radius:17px;background:#06182a}.arControls h2,.arInspector h2{margin:5px 0}.arControls>div>p,.arInspector>p{color:#b7cfdd;line-height:1.5}.arControls>label,.arCardInputs label{display:grid;gap:5px;margin:13px 0;color:#bed5e2}.arControls select,.arControls input,.arCardInputs input{width:100%;min-height:44px;border:1px solid #496f88;border-radius:9px;background:#08233a;color:white;padding:8px;font:inherit}.arControls input[type=range]{min-height:28px;padding:0}.arControls label>b{color:#65e7ff;font-size:.8rem}.arControlButtons{display:grid!important;grid-template-columns:1fr 1fr;gap:7px}.arCamera{width:100%;margin-top:10px}.arControls>small{display:block;margin-top:9px;color:#8ea9ba;line-height:1.45}.arCardInputs{margin-top:13px;padding-top:12px;border-top:1px solid #294a62}.arStage{position:relative;min-height:620px;overflow:hidden;border:1px solid #467a98;border-radius:18px;background:#030b14;box-shadow:0 20px 60px #0007}.arStage video,.arStage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.arStage video{display:none;transform:scaleX(-1)}.arStage.cameraOn video{display:block}.arStage.cameraOn canvas{background:transparent}.arStageHud{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;pointer-events:none}.arStageHud span,.arStageHelp{padding:7px 10px;border:1px solid #4d7b94;border-radius:999px;background:#02101dcc;color:#a8ecff;font-size:.76rem;font-weight:850;letter-spacing:.06em}.arStageHelp{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}.arInspector dl{display:grid;grid-template-columns:auto 1fr;gap:8px;margin:18px 0;padding:13px;border:1px solid #2f536d;border-radius:11px;background:#09243a}.arInspector dt{color:#65e8ff;font-weight:800}.arInspector dd{margin:0;color:#c3d9e5;line-height:1.45}.arInspectorActions{display:flex;gap:7px;flex-wrap:wrap}.arPrompt{margin-top:16px;padding:13px;border-left:4px solid #a18bff;background:#0b263e}.arSafety{display:flex;gap:17px;margin:14px 0;padding:14px;border:1px solid #775f35;border-radius:13px;background:#2a2115}.arSafety b{color:#ffd479;white-space:nowrap}.arSafety span{color:#d7c9a9;line-height:1.45}.arSources{padding:12px;border:1px solid #284b63;border-radius:12px;background:#06182a}.arSources summary{cursor:pointer;font-weight:850}.arSources p{color:#a8c2d1;line-height:1.5}.arSources a{color:#76e7ff}.arCallout{border-color:#397e8c;background:linear-gradient(135deg,#0d3946,#241d50)}.arMotion{background:#152e4a!important;color:#9feeff!important}
@media(max-width:1050px){.arWorkspace{grid-template-columns:260px minmax(0,1fr)}.arInspector{grid-column:1/-1;min-height:0}.arControls{min-height:560px}.arStage{min-height:560px}}@media(max-width:720px){.arTop{grid-template-columns:1fr auto}.arTop>div{grid-column:1/-1;grid-row:2}.arWorkspace{grid-template-columns:1fr}.arControls,.arStage{min-height:0}.arStage{aspect-ratio:4/5}.arInspector{grid-column:auto}.arSafety{flex-direction:column}.arStageHelp{max-width:92%;white-space:normal;text-align:center}.arControlButtons{grid-template-columns:1fr!important}}

/* Career specialty labs: sports, nutrition, markets, and medicines */
.specialLab{display:grid;gap:16px;color:#eaf8ff}.specialLabHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px;border:1px solid #315a79;border-radius:18px;background:linear-gradient(135deg,#071c31,#102b48)}.specialLabHead h2{margin:5px 0;font-size:clamp(1.7rem,4vw,2.6rem)}.specialLabHead p{margin:0;color:#b7cedd;line-height:1.5}.specialLabControls{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:9px;align-items:end;padding:13px;border:1px solid #315a79;border-radius:15px;background:#071c31}.specialLabControls label,.paperOrder label{display:grid;gap:5px;color:#bdd4e2;font-size:.84rem;font-weight:750}.specialLabControls select,.specialLabControls input,.specialTools select,.specialCoach input,.paperOrder input{width:100%;min-height:44px;border:1px solid #496f8a;border-radius:9px;background:#08243d;color:white;padding:8px 10px;font:inherit}.specialLabControls input[type=range]{min-height:28px;padding:0}.specialLabMain{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,.65fr);gap:14px}.specialCanvasWrap{position:relative;min-width:0}.specialCanvasWrap canvas{display:block;width:100%;aspect-ratio:1000/590;border:1px solid #4782a1;border-radius:17px;background:#061629;touch-action:none;cursor:grab;box-shadow:0 20px 50px #0004}.specialCanvasWrap canvas:active{cursor:grabbing}.specialCanvasWrap>span{position:absolute;left:12px;bottom:12px;padding:7px 10px;border-radius:999px;background:#03111dcc;color:#a9efff;font-size:.76rem;font-weight:800}.specialInspector,.specialPractice,.specialLinks,.specialCoach{padding:17px;border:1px solid #315a79;border-radius:16px;background:#071c31}.specialInspector h3,.specialPractice h3,.specialLinks h3,.specialCoach h3{margin:6px 0;font-size:1.35rem}.specialInspector p,.specialPractice p,.specialLinks small,.specialCoach p{color:#b4cbda;line-height:1.5}.specialInspector #specialExtra{margin:12px 0;padding:10px;border-left:3px solid #69dffb;background:#092741}.specialLower{display:grid;grid-template-columns:1fr 1fr;gap:14px}.specialTools{display:grid;gap:10px}.specialResources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.specialResources a{display:grid;gap:4px;padding:11px;border:1px solid #3c6c88;border-radius:11px;background:#0a2942;color:white;text-decoration:none}.specialResources a:hover,.specialResources a:focus-visible{border-color:#65e4ff}.specialResources span{color:#70ddff;font-size:.76rem}.specialCoach{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr) auto;gap:13px;align-items:center}.specialCoach form{display:flex;gap:7px}.specialCoach small{grid-column:1/-1;color:#8faabb}.foodBuilder{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.foodBuilder button{min-height:46px;border:1px solid #476b83;border-radius:10px;background:#0a2942;color:white;cursor:pointer}.foodBuilder button.active{border-color:#8be568;background:#28553f;box-shadow:0 0 18px #75e58a22}.paperOrder{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.watchlistBoundary{padding:11px;border-left:4px solid #e8bd55;background:#302819;color:#f1deb0!important}.medicinesLab .specialLabHead{background:linear-gradient(135deg,#351b35,#102b48)}.sportsLab .specialLabHead{background:linear-gradient(135deg,#103f3a,#102b48)}.nutritionLab .specialLabHead{background:linear-gradient(135deg,#30411b,#102b48)}.stocksLab .specialLabHead{background:linear-gradient(135deg,#153b58,#211f4e)}
@media(max-width:980px){.specialLabControls{grid-template-columns:1fr 1fr 1fr}.specialLabControls button{width:100%}.specialCoach{grid-template-columns:1fr}.specialCoach small{grid-column:auto}.paperOrder{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.specialLabHead{flex-direction:column}.specialLabHead>a{width:100%;text-align:center}.specialLabControls,.specialLabMain,.specialLower{grid-template-columns:1fr}.specialCanvasWrap>span{position:static;display:block;border-radius:0 0 10px 10px;text-align:center}.specialCanvasWrap canvas{border-radius:12px 12px 0 0}.specialCoach form{flex-direction:column}.foodBuilder{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.paperOrder,.foodBuilder{grid-template-columns:1fr}.specialResources{grid-template-columns:1fr}}
.rocketryLab .specialLabHead{background:linear-gradient(135deg,#552a1b,#172d4b)}

/* Publisher podcast episodes */
.podcastFullShelf{margin:20px 0 26px;border:1px solid #365c7d;border-radius:20px;background:#071c31;padding:20px;color:#e9f8ff}.podcastFullHead{display:flex;justify-content:space-between;align-items:start;gap:18px}.podcastFullHead h2{margin:5px 0}.podcastFullHead p{color:#aac6d8;line-height:1.5;max-width:720px;margin:0}.podcastFullHead>span{color:#75e3fa;font-weight:800;white-space:nowrap}.podcastFullList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.podcastFullChoice{display:grid;gap:7px;min-height:105px;text-align:left;padding:14px;border:1px solid #365c7d;border-radius:13px;background:#0b2a42;color:white;font:inherit;cursor:pointer}.podcastFullChoice small{color:#73def7;font-weight:800}.podcastFullChoice span{color:#9dbbd0;font-size:.8rem}.podcastFullChoice:hover,.podcastFullChoice:focus-visible,.podcastFullChoice.active{border-color:#5be3ff;box-shadow:0 0 20px #29cfff25}.podcastFullViewer[hidden]{display:none}.podcastFullViewer{max-width:750px;border:1px solid #64dfff;border-radius:15px;background:#06192c;padding:16px}.podcastViewerHead{display:flex;justify-content:space-between;gap:12px;align-items:start}.podcastViewerHead small{color:#68dcff}.podcastViewerHead h3{margin:4px 0 12px}.podcastViewerHead button{width:42px;height:42px;border:1px solid #416d89;border-radius:9px;background:#0e3551;color:white;font-size:1.7rem;cursor:pointer}.podcastFullViewer iframe{display:block;width:100%;min-height:190px;border:0;border-radius:10px;background:#eaf6ff}.podcastFullViewer #podcastFullMedia>p{color:#bed3e1;line-height:1.5}.podcastFullViewer #podcastFullPrompt{color:#d2e9f4;line-height:1.5}.podcastFullViewer a{display:inline-block;min-height:44px;padding:11px 14px;border:1px solid #4edaf9;border-radius:9px;background:#0d3954;color:#a8edff;text-decoration:none;font-weight:800}.podcastFullViewer #podcastFullFallback{display:block;color:#91aebf;margin-top:10px}
@media(max-width:960px){.podcastFullList{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.podcastFullList{grid-template-columns:1fr}.podcastFullHead{flex-direction:column}.podcastFullHead>span{white-space:normal}}
.track.banking{border-color:rgba(53,205,226,.28)}
.bankingLab .specialLabHead{border-color:rgba(53,205,226,.24)}

.marketWindow{display:grid;gap:15px;color:#eaf8ff}.marketWindowHead,.marketPanel{border:1px solid #355a76;background:#081c31;border-radius:16px;padding:16px}.marketWindowHead{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(120deg,#09253b,#13254d)}.marketWindowHead h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:5px 0}.marketWindowHead p,.marketBoundary,.marketPanelHead span,.marketStudy p{color:#b9d1e1;line-height:1.5}.marketSymbol{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.marketSymbol label{font-weight:700}.marketSymbol input,.marketStudy textarea{background:#071a2d;color:#fff;border:1px solid #53829e;border-radius:10px;padding:11px 13px;font:inherit;min-height:46px}.marketSymbol input{width:min(235px,100%)}.marketSymbol span{color:#c2d9e5;font-size:.88rem}.marketTypes,.marketExamples,.marketPrompts{display:flex;gap:8px;flex-wrap:wrap}.marketTypes button,.marketExamples button,.marketPrompts button{background:#103552;border:1px solid #48738c;border-radius:10px;padding:10px 14px;min-height:44px;color:#fff;font:inherit;cursor:pointer}.marketTypes button.active,.marketPrompts button.active{border-color:#78e6fb;background:#195275}.marketGrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr);gap:13px}.marketBottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:13px}.marketPanel{min-width:0;display:grid;gap:10px;align-content:start}.marketPanel h3{margin:2px 0;font-size:1.3rem}.marketPanel>a{color:#8fe5fb;min-height:28px}.marketPanelHead{display:grid;gap:3px}.marketChart iframe{width:100%;height:435px;background:#071629;border:0;border-radius:10px}.marketExternal{min-height:430px;overflow:auto}.marketExternal .tradingview-widget-container{min-height:430px;width:100%}.marketExternal .tradingview-widget-container__widget{min-height:420px;width:100%}.marketExternal tv-market-overview,.marketExternal tv-world-market-summary{display:block;min-height:430px}.marketNewsBody{min-height:0}.marketNewsBody:has(.tradingview-widget-container){min-height:400px}.marketStudy label{display:block;font-weight:700}.marketStudy textarea{width:100%;resize:vertical}.marketBoundary{font-size:.88rem;margin:0}.marketWindow :focus-visible{outline:3px solid #8df0ff;outline-offset:2px}@media(max-width:850px){.marketGrid,.marketBottom{grid-template-columns:1fr}.marketWindowHead{align-items:stretch;flex-direction:column}.marketChart iframe{height:400px}}@media(max-width:510px){.marketSymbol input{flex:1 1 100%}.marketSymbol button{flex:1}.marketChart iframe{height:350px}}

.track.logistics{border-color:#32b88555;background:linear-gradient(125deg,#103c3b,#102740)}.track.taxes{border-color:#e1b45855;background:linear-gradient(125deg,#3b2c28,#152744)}
.operationsLab{display:grid;gap:16px;color:#edf9ff}.operationsLab>header,.opsViewer,.opsEditor,.opsCoach{background:#081f34;border:1px solid #345a76;border-radius:17px;padding:18px}.operationsLab>header{background:linear-gradient(125deg,#11374b,#132c43)}.operationsLab h2{font-size:clamp(1.65rem,4vw,2.5rem);margin:4px 0}.operationsLab h3{margin:8px 0;font-size:1.4rem}.operationsLab p{line-height:1.55;color:#bfd7e4}.opsMain{display:grid;grid-template-columns:minmax(210px,.75fr) minmax(0,1.55fr);gap:14px;align-items:start}.opsEditor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.opsEditor label,.opsCoach label{display:grid;gap:6px;font-weight:700;font-size:.9rem}.opsEditor input,.opsEditor select,.opsCoach select{width:100%;min-height:46px;background:#06182c;color:white;border:1px solid #597e97;border-radius:10px;padding:9px;font:inherit}.opsEditor small{grid-column:1/-1;color:#bed7e6;line-height:1.5}.opsSteps{display:flex;gap:7px;overflow-x:auto;padding-bottom:7px}.opsSteps button{flex:0 0 auto;min-height:46px;padding:10px 12px;border-radius:10px;border:1px solid #496f85;background:#10314c;color:white;font:inherit;cursor:pointer}.opsSteps button.active{border-color:#8cecff;box-shadow:inset 0 0 0 1px #8cecff;background:#195471}.opsScene{min-height:280px;padding:17px;border:1px solid #376782;border-radius:12px;background:#09293e}.opsScene strong{color:#a8f5ff}.opsStepNav{display:flex;justify-content:space-between;gap:8px;margin-top:10px}.opsStepNav button,.opsCoach button{min-height:44px;background:#154768;color:#fff;border:1px solid #61a5bf;border-radius:10px;padding:9px 14px;cursor:pointer;font:inherit}.opsStepNav button:disabled{opacity:.45;cursor:default}.opsCoach{display:grid;grid-template-columns:1.5fr 1fr;gap:17px}.opsCoach>div{display:grid;gap:8px;align-content:start}.opsCoach p{margin:0}.opsBoundary{margin:0;padding:14px;border-left:3px solid #6bc5cf;background:#09263d;font-size:.9rem}.opsSources{display:flex;flex-wrap:wrap;gap:10px}.opsSources a{color:#83e3ff;padding:9px;background:#10314b;border-radius:9px}.opsBrackets{display:grid;gap:7px}.opsBrackets>div{display:grid;grid-template-columns:1fr auto;gap:5px;padding:7px 0}.opsBrackets i{grid-column:1/-1;display:block;height:7px;border-radius:6px;background:#5addf0}.opsTotals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.opsTotals>div{display:grid;gap:4px;border:1px solid #41728e;border-radius:9px;padding:9px}.opsTotals small{color:#b3d5e5}.opsTotals strong{font-size:1rem}.operationsLab :focus-visible{outline:3px solid #98efff;outline-offset:2px}@media(max-width:850px){.opsMain,.opsCoach{grid-template-columns:1fr}}@media(max-width:490px){.opsEditor,.opsTotals{grid-template-columns:1fr 1fr}.opsEditor{padding:13px}.opsViewer{padding:13px}}
.opsEditor .opsGenerate{grid-column:1/-1;min-height:44px;border:1px solid #65c7d5;border-radius:10px;background:#15556a;color:white;font:inherit;cursor:pointer}
.opsVocabulary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#bcd8e7}.opsVocabulary button{border:1px solid #467e9a;border-radius:999px;padding:9px 12px;background:#113750;color:#edf9ff;font:inherit;cursor:pointer;min-height:42px}
.track.accounting{border-color:#96a7ee66;background:linear-gradient(125deg,#272a50,#152e45)}.opsWorkbook{display:grid;gap:12px}.opsWorkbook>button{justify-self:start}.careerWorkbook{display:grid;gap:14px;color:#ecf8ff}.careerWorkbook>header,.workbookFoot section{border:1px solid #3f6683;border-radius:16px;padding:16px;background:#0a243a}.careerWorkbook>header h2{margin:4px 0;font-size:clamp(1.5rem,3vw,2rem)}.careerWorkbook>header p,.workbookBoundary,.workbookFoot p{color:#c0d7e5;line-height:1.5}.workbookToolbar{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.workbookToolbar label,.workbookFoot label{display:grid;gap:5px;font-size:.88rem;font-weight:700}.workbookToolbar label{flex:1 1 155px}.workbookToolbar label.bookImport{flex:0 1 auto;position:relative;background:#165075;border:1px solid #66bad8;border-radius:9px;padding:10px 12px;min-height:44px;cursor:pointer}.bookImport input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.workbookToolbar input:not([type=file]),.workbookToolbar select,.workbookFoot select{min-height:44px;border:1px solid #6288a0;border-radius:8px;background:#07182b;color:white;font:inherit;padding:8px}.workbookToolbar button,.workbookFoot button{min-height:44px;border:1px solid #69b9d1;border-radius:9px;background:#145071;color:white;padding:8px 12px;font:inherit;cursor:pointer}.workbookStatus{min-height:1.5em;color:#a7ebeb;margin:0}.workbookGridWrap{overflow:auto;max-height:590px;border:1px solid #496b84;border-radius:12px;background:#081b2d}.workbookGrid{border-collapse:separate;border-spacing:0;min-width:925px;width:100%;font-size:.9rem}.workbookGrid th{position:sticky;top:0;z-index:2;background:#174661;color:#fff;min-width:108px;height:35px}.workbookGrid tr>th:first-child{position:sticky;left:0;min-width:45px;width:45px;z-index:3}.workbookGrid td{padding:0;border-right:1px solid #32516b;border-bottom:1px solid #32516b}.workbookGrid input{width:100%;min-width:100px;height:39px;min-height:39px;box-sizing:border-box;border:0;background:transparent;color:#edfaff;padding:6px;font:inherit}.workbookGrid tr:nth-child(2) input{font-weight:750;background:#143451}.workbookGrid input:focus{background:#1a4c6b;outline:2px solid #78eaff;outline-offset:-2px}.workbookGrid input.formulaError{color:#ff9d9d}.workbookFoot{display:grid;grid-template-columns:1fr 1fr;gap:12px}.workbookFoot h3{margin:0 0 8px}.workbookFoot code{color:#86e9fb;white-space:nowrap}.workbookFoot section{display:grid;gap:7px;align-content:start}.workbookBoundary{border-left:3px solid #70b9d5;padding:12px;background:#092c44;margin:0}.workbookLinks{display:flex;gap:10px;flex-wrap:wrap}.workbookLinks a{padding:9px 12px;border-radius:8px;background:#103951;color:#8ce9ff}.careerWorkbook :focus-visible{outline:3px solid #8ce9ff;outline-offset:2px}@media(max-width:700px){.workbookFoot{grid-template-columns:1fr}.workbookToolbar button{flex:1 1 150px}.workbookGridWrap{max-height:450px}}
.updatesApp{max-width:1280px}.updatesIntro{margin:25px 0 16px;display:flex;align-items:end;justify-content:space-between;gap:22px}.updatesIntro h1{font-size:clamp(2rem,4vw,3.2rem);margin:8px 0}.updatesIntro p{max-width:660px;color:#b3c3d7;font-size:1rem;line-height:1.55}.updatesStatus{color:#9bcce0;margin:16px 0;min-height:1.6rem}.updatesLayout{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);align-items:start;gap:20px}.updatesSources,.updatesFeed,.updatesMore{border:1px solid #2c4463;border-radius:20px;background:#0c2039;padding:20px}.updatesSources h2,.updatesMore h2{margin:0 0 16px;font-size:1.2rem}.updatesSources label{display:flex;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid #233b57;cursor:pointer;line-height:1.4}.updatesSources input{width:20px;height:20px;accent-color:#4ad8f2;flex:none}.updatesSources p{color:#a6bacf;font-size:.875rem;line-height:1.5}.updatesTabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.updatesTabs button{border:1px solid #3a5772;background:#132d48;color:#d9e9f6;padding:10px 16px;border-radius:25px;cursor:pointer;font:inherit}.updatesTabs button.active{background:#147caa;border-color:#55c9ea;color:white}.updatesCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.updatesCard{background:#112b47;border:1px solid #37506a;border-radius:16px;padding:18px;min-width:0}.updatesMeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;color:#aac1d5;font-size:.875rem}.updatesCard h3{font-size:1.07rem;line-height:1.4;margin:10px 0 18px;overflow-wrap:anywhere}.updatesCard a,.updatesMore a,.podcastFullHead a{color:#7be2f6;text-decoration:underline;text-underline-offset:3px}.updatesBadge{background:#15a7ce;color:#061a2b;padding:2px 7px;border-radius:6px;font-size:.75rem;font-weight:800}.updatesBadge[hidden]{display:none}.updatesMore{margin-top:18px;display:grid;gap:11px}.updatesEmpty{padding:25px;color:#b2c9de;line-height:1.5}@media(max-width:730px){.updatesIntro{align-items:start;flex-direction:column}.updatesLayout{grid-template-columns:1fr}.updatesCards{grid-template-columns:1fr}}
.beliefMedia{margin:24px 0;border:1px solid #3c5874;border-radius:22px;background:#0c2039;padding:24px}.beliefMedia h2,.songsApp h2{margin:7px 0 12px;font-size:1.45rem}.beliefMedia p,.songsApp p{line-height:1.55}.beliefMedia>div:first-child>p{max-width:850px;color:#b9cde0}.beliefMediaLinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.beliefMediaLinks article{background:#142d49;border:1px solid #3a5874;border-radius:15px;padding:17px;display:flex;flex-direction:column;gap:9px;min-width:0}.beliefMediaLinks small{color:#7be1f4;font-size:.85rem}.beliefMediaLinks b{line-height:1.35}.beliefMediaLinks p{font-size:.9rem;color:#b9cde0;margin:0;flex:1}.beliefMediaLinks a,.songResults a{color:#82e4f4;text-decoration:underline;text-underline-offset:3px}.beliefMediaQuestion{border-top:1px solid #35516a;padding-top:17px;display:grid;gap:10px}.beliefMediaQuestion textarea,.songMaker textarea{min-height:96px;resize:vertical}.beliefMediaQuestion label{color:#bed3e4}.beliefMediaQuestion textarea,.songMaker textarea,.songMaker input,.songMaker select,.songConfig input,.songConfig select,.songSearch input{width:100%;background:#102940;border:1px solid #43637c;border-radius:10px;color:white;padding:12px;font:inherit;font-size:1rem}.beliefMediaQuestion button{justify-self:start}.beliefMediaQuestion p{margin:0;color:#90dbea}.songsApp{max-width:1280px}.songIntro{margin:27px 0 20px}.songIntro h1{font-size:clamp(1.9rem,4vw,3rem);margin:8px 0}.songIntro p{max-width:760px;color:#b7cbdf}.songConfig{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:20px}.songConfig label,.songMaker label{display:grid;gap:8px;color:#c2d5e5}.songLayout{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.songPane,.songVoice,.songCoach{border:1px solid #375570;background:#0c2039;border-radius:20px;padding:22px}.songSearch{display:flex;gap:8px}.songSearch input{flex:1;min-width:0}.songPane>p{color:#aebfd2;font-size:.9rem}.songResults{max-height:460px;overflow:auto;display:grid;gap:9px;margin:16px 0}.songResults article{border:1px solid #36516e;background:#142e4b;border-radius:12px;padding:13px;display:grid;gap:6px}.songResults span{color:#b8cada;font-size:.92rem}.songMaker{display:grid;gap:13px}.songMaker button{justify-self:start}.songMaker p{font-size:.9rem;color:#b8cada;margin:0}.songActions{display:flex;flex-wrap:wrap;gap:9px}.songWords{display:flex;gap:8px;flex-wrap:wrap}.songWords button{background:#143651;border:1px solid #4d7994;color:white;padding:9px 13px;border-radius:20px;cursor:pointer;font:inherit}.songVoice,.songCoach{margin-top:17px}.songVoice audio{max-width:100%;margin:14px 0}.songVoiceStatus,.songHelp{margin-top:14px;color:#a6e1ed}.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:960px){.beliefMediaLinks{grid-template-columns:repeat(2,minmax(0,1fr))}.songConfig{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.songLayout{grid-template-columns:1fr}.songConfig{grid-template-columns:repeat(2,minmax(0,1fr))}.beliefMediaLinks{grid-template-columns:1fr}.songSearch{flex-wrap:wrap}}
.bookingForm #voiceScheduleLabel[hidden],.bookingForm #voiceScheduleNote[hidden]{display:none!important}.voiceScheduleNote{margin:0;color:#b8d5e8;font-size:.92rem}.voiceBooking{grid-column:1/-1;border-top:1px solid #35526c;padding-top:13px;margin-top:8px}.voiceBooking p{margin:0 0 8px;color:#c4dae8}.voiceBooking>span{display:block;color:#84dcee;margin-bottom:10px;font-size:.94rem}.voiceBookingActions{display:flex;gap:8px;flex-wrap:wrap}.voiceBookingActions button:disabled{opacity:.55;cursor:not-allowed}.voiceCallDialog{width:min(980px,95vw);max-height:95vh;overflow:auto;padding:20px;border:1px solid #41637d;border-radius:22px;background:#0b223c;color:white}.voiceCallDialog::backdrop{background:rgba(0,5,13,.82)}.voiceCallHead{display:flex;align-items:start;justify-content:space-between;gap:15px}.voiceCallHead h2{margin:5px 0}.voiceCallHead p{color:#7ee1ef}.voiceCallDialog #voiceCallFrame{height:min(65vh,620px);min-height:380px;background:#142c43;border-radius:12px;overflow:hidden}.voiceCallDialog iframe{width:100%;height:100%;border:0}.voiceCallDialog>p{font-size:.89rem;color:#b7cbdc;line-height:1.45}.voiceCallDialog>a{color:#83e2ef}@media(max-width:600px){.voiceCallHead{flex-direction:column}.voiceCallDialog #voiceCallFrame{height:55vh;min-height:350px}}
.songConfig label:has(#songLanguageSearch){min-width:0}.songConfig #songLanguageSearch{margin-bottom:5px}.songConsent{display:flex;align-items:flex-start;gap:11px;margin:17px 0;color:#d4e6ef;line-height:1.45}.songConsent input{accent-color:#37c9eb;width:22px;height:22px;flex:none;margin-top:1px}.songMixDownload{display:inline-block;margin:12px 0;color:#84e8f5;text-decoration:underline;text-underline-offset:3px}.songMixDownload[hidden]{display:none}.songVoice .songActions button:disabled{opacity:.5;cursor:not-allowed}
.songCustomFields{display:flex;gap:12px;flex-wrap:wrap;border:1px solid #355571;border-radius:14px;padding:15px;margin:-5px 0 18px;background:#102940}.songCustomFields[hidden]{display:none}.songCustomFields label{display:grid;gap:7px;flex:1;min-width:190px;color:#bed3e2}.songCustomFields input{width:100%;background:#0c2039;border:1px solid #45627b;border-radius:10px;color:white;padding:11px;font:inherit}.songVoicePrivacy{font-size:.89rem;color:#adc9d8;margin:13px 0}
.screenApp{max-width:1250px}.screenHero{margin:22px 0;padding:28px;border:1px solid #244466;border-radius:22px;background:linear-gradient(130deg,#0e2545,#142a48 65%,#13345d)}.screenHero h1{font-size:clamp(1.8rem,4vw,3rem);margin:8px 0}.screenHero p{max-width:68ch;color:#c4d4e6;line-height:1.6}.screenFilters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}.screenFilters label,.screenPlayerTools label,.screenQuiz label{display:grid;gap:7px;color:#c4d4e6;font-size:.9rem;font-weight:650}.screenFilters select,.screenPlayerTools select,.screenQuiz textarea{min-width:155px;border:1px solid #406080;border-radius:12px;padding:11px;background:#071a31;color:#f2f9ff;font:inherit}.screenLayout{display:grid;grid-template-columns:minmax(220px,315px) minmax(0,1fr);gap:20px;align-items:start}.screenCatalog{display:grid;gap:9px;max-height:700px;overflow:auto}.screenCard,.screenEmpty{padding:17px;text-align:left;background:#102744;border:1px solid #31506b;border-radius:15px;color:#edf7ff}.screenCard{cursor:pointer;display:grid;gap:6px}.screenCard:hover,.screenCard:focus-visible,.screenCard.selected{border-color:#5ed9f5;box-shadow:0 0 0 2px #5ed9f547}.screenCard small{color:#bdd3e7}.screenPractice{min-width:0}.screenPlayer{display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:#020b16;border:1px solid #375777;border-radius:17px;color:#d1dfed}.screenPlayer iframe{width:100%;height:100%;border:0}.screenPlayerTools{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:12px 0}.screenPlayerTools button,.screenQuiz button{background:#143f66;color:#f3fbff;border:1px solid #5186a8;border-radius:12px;padding:11px 15px;cursor:pointer;font:inherit}.screenPlayerTools a{color:#83dcff;padding:11px}.screenNote{color:#c1d6e6;font-size:.88rem;line-height:1.5}.screenQuiz{border:1px solid #31506b;border-radius:18px;background:#102744;padding:20px;margin-top:18px}.screenQuiz h2{margin:8px 0}.screenQuiz #screenAnswers{display:flex;flex-wrap:wrap;gap:8px}.screenQuiz button.correct{background:#10636a;border-color:#65deda}.screenQuiz button.incorrect{background:#763449;border-color:#ed8195}.screenQuiz textarea{width:100%;min-height:85px;resize:vertical}.screenQuiz label{margin:15px 0 10px}.screenQuiz #screenFeedback{min-height:1.4em;color:#d4e9f6}@media(max-width:740px){.screenLayout{grid-template-columns:1fr}.screenCatalog{display:flex;overflow-x:auto;max-height:none;padding-bottom:8px}.screenCard{min-width:190px}.screenHero{padding:19px}.screenFilters label{flex:1 1 155px}.screenFilters select{width:100%}}
.teamQuest,.bundlePage{max-width:1160px}.tqHero,.bundleHero{margin:20px 0;padding:28px;border-radius:23px;border:1px solid #35557b;background:linear-gradient(130deg,#122950,#0a1d35 65%,#18416b)}.tqHero h1,.bundleHero h1{font-size:clamp(2rem,5vw,3.3rem);margin:8px 0}.tqHero p,.bundleHero p{max-width:75ch;line-height:1.6;color:#c4d8e9}.tqSetup,.tqChallenge,.tqFinish,.bundleGrid section{padding:23px;border:1px solid #33536e;border-radius:18px;background:#102844}.tqSetupGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.tqSetupGrid label,.tqFinish label{display:grid;gap:7px;font-weight:700;color:#c9ddef}.tqSetupGrid input,.tqSetupGrid select,.tqFinish textarea,.tqChallenge textarea,.tqChallenge input{min-width:0;width:100%;box-sizing:border-box;border:1px solid #51708c;border-radius:11px;padding:12px;background:#071b33;color:#effaff;font:inherit}.tqActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.tqActions button,.tqChallenge button,.tqFinish button{background:#17486d;color:#f0faff;border:1px solid #5484a4;border-radius:12px;padding:12px 18px;cursor:pointer;font:inherit;font-weight:700}.tqActions button:hover,.tqChallenge button:hover,.tqFinish button:hover{border-color:#58e3f3}.tqActions .tqPrimary,.tqChallenge .tqPrimary{background:#17aec0;color:#062033;border:0}.tqRunHeader{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px}.tqProgress{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}.tqProgress span{border-radius:30px;padding:7px 10px;background:#163657;color:#b8cddd;font-size:.8rem}.tqProgress .current{background:#55dcf0;color:#041c32;font-weight:800}.tqProgress .done{background:#126b75;color:white}.tqChallenge{min-height:290px}.tqChallenge h2{margin:10px 0}.tqChallenge #tqAnswer{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.tqChallenge #tqAnswer button{min-height:49px}.tqChallenge #tqAnswer input,.tqChallenge #tqAnswer textarea{flex:1 1 240px}.tqChallenge #tqFeedback{min-height:1.5em}.tqChallenge #tqFeedback.success{color:#72ecdf}.tqChallenge #tqFeedback.retry{color:#ffb9b5}.tqTurnHint{color:#b5cce0;font-size:.9rem}.tqResultNumbers{display:flex;gap:20px;margin:18px 0}.tqResultNumbers div{display:grid;gap:5px;padding:13px 22px;background:#143858;border-radius:13px}.tqResultNumbers b{font-size:1.5rem}.tqFinish label{margin:14px 0 8px}.tqFinish textarea{resize:vertical}.tqReward{padding:16px;background:#183f52;border:1px solid #48dbe0;border-radius:14px;margin:15px 0}.bundleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.bundleGrid section{display:flex;flex-direction:column;align-items:start}.bundleGrid section>span{color:#6fdfff;font-weight:800}.bundleGrid section h2{margin:13px 0}.bundleGrid section p{color:#c3d4e6;line-height:1.55;flex:1}.bundleGrid .bundleLink{display:inline-block;padding:12px 15px;background:#49d7e9;color:#071b32;text-decoration:none;font-weight:800;border-radius:11px}.bundleGrid .bundleLink:hover{background:#95f3ff}@media(max-width:750px){.tqSetupGrid,.bundleGrid{grid-template-columns:1fr}.tqHero,.bundleHero{padding:20px}.tqChallenge #tqAnswer{display:grid}.tqActions button{flex:1 1 180px}}

.bundleGrid button.bundleLink{border:0;cursor:pointer;font:inherit}.bundleGrid button.bundleLink:disabled{opacity:.65;cursor:wait}#downloadStatus{display:block;margin-top:10px;color:#c3d9e8;line-height:1.4}

.bundleShare{display:flex;align-items:end;flex-wrap:wrap;gap:12px;padding:18px;margin-bottom:17px;border:1px solid #3b6780;border-radius:15px;background:#11324f}.bundleShare label{display:grid;gap:7px;min-width:min(100%,350px);flex:1;color:#d1e8f4;font-weight:700}.bundleShare input{width:100%;box-sizing:border-box;border-radius:9px;border:1px solid #6095ab;background:#061e34;color:#f1fbff;padding:11px;font:inherit}.bundleShare button{padding:12px 18px;border:0;border-radius:10px;background:#50d7ed;color:#072035;font:inherit;font-weight:800;cursor:pointer}.bundleShare small{color:#afe5f3}
.creativeApp{max-width:1370px}.creativeIntro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(245px,.8fr);gap:22px;margin:20px 0;padding:26px;border:1px solid #385777;border-radius:22px;background:linear-gradient(130deg,#112746,#182b48)}.creativeIntro h1{font-size:clamp(2rem,4.5vw,3.2rem);margin:8px 0}.creativeIntro p{max-width:65ch;color:#cfdef0;line-height:1.55}.creativeSelectors{display:grid;gap:10px}.creativeSelectors label,.creativeToolbar label,.creativeEditorFooter label,.creativeSaveBar label{display:grid;gap:6px;color:#d0e3f5;font-weight:700;font-size:.9rem}.creativeSelectors select,.creativeEditorFooter input,.creativeSaveBar input{border:1px solid #60849d;border-radius:10px;background:#071d33;color:#f5fbff;padding:11px;font:inherit;min-width:0}.creativeLayout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.9fr);align-items:start;gap:20px}.creativeStudio,.creativePanel{border:1px solid #34536c;border-radius:18px;background:#102744;padding:18px}.creativeHeader{display:flex;justify-content:space-between;align-items:center;gap:10px}.creativeHeader h2{margin:5px 0 14px}.creativeHeader>span{color:#b8d7e8;font-size:.84rem}.creativeToolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:7px 0 14px}.creativeToolbar button,.creativeSaveBar button,.creativePanel button,.creativeSaved button{border:1px solid #5384a3;border-radius:10px;background:#164565;color:#f3faff;padding:10px 12px;cursor:pointer;font:inherit;font-weight:700}.creativeToolbar button:hover,.creativePanel button:hover,.creativeSaveBar button:hover{border-color:#71e7f2}.creativeToolbar input[type=color]{padding:1px;width:42px;height:35px;border:0;border-radius:7px;background:none;cursor:pointer}.creativeCanvasWrap{width:100%;overflow:hidden;background:#fff;border-radius:14px;border:3px solid #57a6bd;box-sizing:border-box}.creativeCanvasWrap svg{display:block;width:100%;aspect-ratio:10/7;touch-action:none}.creativeCanvasWrap svg:focus-visible{outline:3px solid #ffb560;outline-offset:-3px}.creativeEditorFooter{display:grid;grid-template-columns:minmax(140px,1fr) minmax(140px,1fr);gap:10px;margin-top:15px}.creativeEditorFooter p{grid-column:1/-1;color:#bed5e4;font-size:.85rem;line-height:1.4;margin:0}.creativeSaveBar{display:flex;align-items:end;flex-wrap:wrap;gap:9px;margin:22px 0 13px}.creativeSaveBar label{flex:1 1 180px}.creativeSaveBar p{width:100%;margin:0;color:#94efde;min-height:1.2em}.creativeProjects h3{margin:16px 0 8px}.creativeSaved{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid #294965}.creativeSaved span{flex:1 1 200px}.creativeSaved button{padding:7px 10px}.creativeLearn{display:grid;gap:16px}.creativePanel h2{margin:6px 0 10px;font-size:1.25rem}.creativePanel p{color:#c0d8e8;line-height:1.5}.creativeWords{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.creativeWords .creativeWord{display:grid;text-align:left;gap:4px;min-height:59px}.creativeWord small{font-weight:400;color:#bbd6e9}.creativePathSteps{display:grid;gap:7px;margin:13px 0}.creativePathSteps span{padding:9px;border-radius:9px;background:#163a5b;color:#cce0ed}.creativePathSteps span.active{border-left:3px solid #5fe3e3}.creativePathSteps span.done{color:#7deed2}.creativeAnswers{display:grid;gap:7px}.creativeAnswers button{text-align:left}.creativePanel textarea{width:100%;box-sizing:border-box;min-height:90px;resize:vertical;border-radius:10px;border:1px solid #54768e;padding:11px;background:#071d33;color:#eefaff;font:inherit}.creativePanel #creativeQuizFeedback,.creativePanel #creativeLessonFeedback,.creativePanel #creativeReflectionStatus{min-height:1.3em}@media(max-width:900px){.creativeLayout,.creativeIntro{grid-template-columns:1fr}}@media(max-width:530px){.creativeEditorFooter{grid-template-columns:1fr}.creativeWords{grid-template-columns:repeat(2,minmax(0,1fr))}.creativeToolbar button{flex:1 1 auto}}
.fluentWelcome{margin:8px 0 16px;padding:15px 19px;border:1px solid #396686;border-left:4px solid #f5c84c;border-radius:14px;background:linear-gradient(115deg,#12304e,#102441);color:#d4e4f3;line-height:1.45}.fluentWelcome p{margin:0 0 6px;font-size:.88rem}.fluentWelcome p:last-child{margin-bottom:0}.fluentWelcome .fluentWelcomeLead{font-size:1.18rem;font-weight:900;color:#fff}.fluentWelcome .fluentWelcomeClose{font-weight:800;color:#9deeff}@media(max-width:520px){.fluentWelcome{padding:12px 14px}.fluentWelcome p{font-size:.83rem}}
/* Projection dashboard: lightweight embedded learning workspace */
.projectionEmbed{display:block;width:100%;height:min(850px,82vh);min-height:520px;border:1px solid #48738c;border-radius:16px;background:#081c30}.projectionApp{max-width:1240px;margin:auto;padding:clamp(14px,2.6vw,30px);color:#eaf8ff;font-family:system-ui,sans-serif}.projectionHeader,.projectionSectionHead{display:flex;justify-content:space-between;align-items:center;gap:12px}.projectionHeader h1{font-size:clamp(1.8rem,3vw,2.6rem);margin:6px 0}.projectionApp p{color:#c2d6e6;line-height:1.5}.projectionTools{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:15px 0}.projectionTools label{display:grid;gap:5px;min-width:140px;flex:1 1 150px}.projectionApp label{font-weight:600;font-size:.9rem}.projectionApp input,.projectionApp select,.projectionApp textarea{display:block;width:100%;box-sizing:border-box;min-height:43px;padding:8px 10px;border:1px solid #6b96aa;border-radius:8px;background:#091b2e;color:white;font:inherit}.projectionApp textarea{resize:vertical}.projectionApp button,.projectionApp .domainButton{min-height:42px;padding:9px 13px;border:1px solid #69c9db;border-radius:9px;background:#13516d;color:white;font:inherit;cursor:pointer;text-decoration:none}.projectionApp button:hover,.projectionApp .domainButton:hover{background:#1b6987}.projectionApp :focus-visible{outline:3px solid #7febf9;outline-offset:2px}.projectionLayout{display:grid;grid-template-columns:minmax(260px,390px) minmax(0,1fr);gap:13px}.projectionPanel{border:1px solid #3b6680;border-radius:16px;padding:clamp(13px,2vw,20px);background:#0b253b;margin:0 0 14px}.projectionPanel h2{margin:0 0 8px}.projectionInputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.projectionPanel>label{display:grid;gap:7px}.projectionMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.projectionMetrics>div{display:grid;gap:4px;min-height:75px;padding:10px;background:#123b55;border:1px solid #406b80;border-radius:11px}.projectionMetrics strong{font-size:clamp(1rem,2vw,1.3rem);color:#80ebf9;overflow-wrap:anywhere}.projectionMetrics span{font-size:.76rem;color:#c7dce8}.projectionChart{height:125px;display:flex;gap:5px;align-items:stretch;margin:18px 0 8px;border-bottom:1px solid #63859b}.projectionBar{flex:1;display:flex;justify-content:center;align-items:end;gap:2px;position:relative;padding-bottom:19px}.projectionBar i{display:block;width:38%;max-width:25px;border-radius:3px 3px 0 0;background:#48d9f3}.projectionBar i+i{background:#ad94f1}.projectionBar small{position:absolute;bottom:1px;left:0;right:0;text-align:center;color:#bcd6e7}.projectionTableWrap{overflow:auto;max-height:410px}.projectionTable{border-collapse:collapse;min-width:880px;width:100%}.projectionTable th,.projectionTable td{padding:9px;border-bottom:1px solid #42647a;text-align:right;white-space:nowrap}.projectionTable th:first-child,.projectionTable td:first-child{text-align:left}.projectionTable th{position:sticky;top:0;background:#17425d}.projectionApp .workbookBoundary{margin:12px 0}.projectionApp .workbookLinks{margin-top:10px}@media(max-width:760px){.projectionLayout{grid-template-columns:1fr}.projectionMetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.projectionHeader{align-items:start;flex-direction:column}.projectionEmbed{height:720px}.projectionInputs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Collaborative project preferences and deeper working windows */
.collabSetup{grid-template-columns:repeat(4,minmax(0,1fr))}.collabSetup label{min-width:0}.collabSetup select,.collabSetup input{width:100%;box-sizing:border-box}.collabSetup>button{min-height:46px}.collabGroupSummary{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}.collabGroupSummary p,.collabDashboard p{color:#b9d1df;line-height:1.5}.collabGroupSummary ul{margin:9px 0;padding-left:23px;max-height:160px;overflow:auto}.collabDashboard header .collabActions{align-items:end;margin:0}.collabDashboard label{display:grid;gap:5px;color:#c3dbe8}.collabDashboard select{min-height:43px;background:#09263c;color:#fff;border:1px solid #5d8298;border-radius:8px;padding:8px;font:inherit}.collabDashboard .projectionEmbed{margin-top:14px}.cadInspector{border:1px solid #446b85;background:#0b2a40;padding:14px;border-radius:11px;margin:12px 0}.cadInspector h3{margin:0 0 5px}.cadInspector p{color:#bbd8e5}.cadInspectorGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:8px;align-items:end}.cadInspectorGrid label{display:grid;gap:5px}.cadInspectorGrid input,.cadInspectorGrid select{width:100%;box-sizing:border-box;min-height:43px;border:1px solid #6189a3;border-radius:8px;background:#081c30;color:#fff;padding:8px}.cadInspectorGrid button,.cadImport{min-height:43px;padding:8px;border:1px solid #b28686;border-radius:8px;background:#402a36;color:#fff;cursor:pointer;font:inherit}.cadImport{display:inline-flex;align-items:center;position:relative}.cadImport input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.cadWorkspaceLinks a{color:#85e8ff}.graphApp{width:min(1350px,96%);margin:0 auto;padding:clamp(12px,2.5vw,28px);color:#e9f8ff;font-family:system-ui,sans-serif}.graphApp>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.graphApp h1{font-size:clamp(1.9rem,4vw,2.8rem);margin:5px 0}.graphApp p{color:#b9d1e1;line-height:1.5}.graphControls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:12px 0}.graphControls label{display:grid;gap:5px;flex:1 1 135px}.graphApp input,.graphApp select{box-sizing:border-box;min-height:43px;width:100%;background:#09263d;color:#fff;border:1px solid #607f95;padding:8px;border-radius:8px;font:inherit}.graphApp button,.graphApp .domainButton,.graphFile{min-height:43px;display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border:1px solid #65bed4;border-radius:9px;background:#155073;color:#fff;font:inherit;cursor:pointer;text-decoration:none}.graphFile{position:relative;cursor:pointer}.graphFile input{position:absolute;inset:0;opacity:0;cursor:pointer}.graphMain{display:grid;grid-template-columns:minmax(270px,.85fr) minmax(0,1.4fr);gap:14px}.graphPanel{padding:15px;border:1px solid #3c6886;border-radius:16px;background:#0a233b}.graphPanel h2{margin:0 0 8px}.graphRows{max-height:390px;overflow:auto;display:grid;gap:6px}.graphRow{display:grid;grid-template-columns:1.1fr 1fr 1fr 42px;gap:6px}.graphRow button{padding:5px}.graphCanvas{overflow:auto;border:1px solid #426a82;border-radius:12px;background:#081a2e}.graphCanvas svg{display:block;width:100%;min-width:400px;height:auto}.graphInsights{margin:10px 0;padding:10px;background:#123a55;border-radius:8px;color:#a9eaf5}.graphApp :focus-visible,.collabDashboard :focus-visible,.collabSetup :focus-visible{outline:3px solid #76e8ff;outline-offset:2px}@media(max-width:920px){.collabSetup{grid-template-columns:repeat(2,minmax(0,1fr))}.cadInspectorGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.graphMain{grid-template-columns:1fr}}@media(max-width:620px){.collabSetup,.collabGroupSummary,.cadInspectorGrid{grid-template-columns:1fr}.collabDashboard header,.graphApp>header{flex-direction:column;align-items:start}}
/* Isolated web project IDE */
.codeStudio{width:min(1490px,97%);margin:0 auto;padding:clamp(12px,2vw,25px);color:#e9f8ff;font-family:system-ui,sans-serif}.codeStudio>header{display:flex;justify-content:space-between;align-items:center;gap:16px}.codeStudio h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:4px 0}.codeStudio p{color:#b8d1e2;line-height:1.5}.codeStudio button,.codeStudio .domainButton,.codeStudio .graphFile{min-height:42px;padding:8px 12px;border:1px solid #68c0d8;border-radius:8px;background:#16516e;color:white;font:inherit;cursor:pointer;text-decoration:none}.studioToolbar,.studioControls{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:12px 0}.studioToolbar label{display:grid;gap:5px;flex:1 1 160px}.studioToolbar input,.studioToolbar select,.studioGuide textarea{box-sizing:border-box;width:100%;min-height:42px;padding:8px;border:1px solid #59849f;border-radius:8px;background:#091e34;color:#fff;font:inherit}.studioLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}.studioCode,.studioOutput{padding:12px;border:1px solid #386b88;border-radius:13px;background:#081e32;min-width:0}.studioTabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}.studioTabs button.active{background:#187995;border-color:#6ee5fc}.studioEditorLabel{display:flex;justify-content:space-between;color:#a6d9e9;font-weight:700;margin-bottom:6px}.studioCode textarea#studioEditor{display:block;width:100%;height:420px;box-sizing:border-box;resize:vertical;border:1px solid #446e85;border-radius:8px;padding:12px;background:#040f1d;color:#e5f8ff;font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.studioControls label{display:inline-flex;align-items:center;gap:5px}.studioControls input{accent-color:#60e5fa}.studioPreviewBar,.studioConsoleHead{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:8px;color:#b6def0}.studioOutput iframe{display:block;width:100%;height:420px;border:1px solid #577d90;border-radius:7px;background:white}.studioOutput pre{height:132px;overflow:auto;margin:0;padding:12px;border:1px solid #38617d;border-radius:7px;background:#030f1c;color:#c3f6e7;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.84rem}.studioGuide{padding:10px;border:1px solid #356078;border-radius:8px}.studioGuide summary{cursor:pointer}.studioGuide label{display:grid;gap:6px}.codeStudioEmbed{height:1020px;max-height:none}.codeStudio :focus-visible{outline:3px solid #80ebfa;outline-offset:2px}@media(max-width:850px){.studioLayout{grid-template-columns:1fr}.codeStudioEmbed{height:1100px}.codeStudio>header{align-items:start;flex-direction:column}}@media(max-width:550px){.codeStudioEmbed{height:1250px}.studioCode textarea#studioEditor,.studioOutput iframe{height:330px}}
/* Deeper 3D study viewers */
.cad3dControls{display:flex;flex-wrap:wrap;align-items:end;gap:9px}.cad3dControls label{display:grid;gap:4px;min-width:125px;flex:1 1 140px}.cad3dControls select,.cad3dControls input[type=range]{width:100%;min-height:40px;box-sizing:border-box;background:#0c2940;color:#fff;border:1px solid #61849a;border-radius:7px}.cadFaceInspector{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;border:1px solid #477690;border-radius:12px;margin:10px;padding:13px;background:#09243c}.cadFaceInspector h3,.cadFaceInspector p{grid-column:1/-1;margin:3px 0}.cadFaceInspector p{line-height:1.5;color:#bcdbe7}.cadFaceInspector label{display:grid;gap:4px}.cadFaceInspector input,.cadFaceInspector textarea{box-sizing:border-box;width:100%;min-height:42px;padding:8px;border:1px solid #60849d;border-radius:8px;background:#061d30;color:#fff;font:inherit}.cadFaceInspector button{grid-column:1/-1;justify-self:start}.anatomy3dControls{grid-template-columns:repeat(4,minmax(0,1fr))}.anatomy3dControls .anatomyCheck{display:flex;align-items:center;gap:7px}.anatomyCheck input{width:18px;height:18px;accent-color:#69e2ff}.anatomyStructureShelf{padding:15px;margin-top:12px;background:#0a2943;border:1px solid #315f7e;border-radius:14px}.anatomyStructureShelf h3{margin:0 0 9px}.anatomyStructureShelf p{color:#bcd7e4}.anatomyStructureShelf a{color:#83eaff}.anatomyStructureButtons,.anatomyRelated{display:flex;flex-wrap:wrap;gap:8px}.anatomyStructureButtons button{min-height:40px;padding:8px 10px;border:1px solid #5687a0;border-radius:9px;background:#103953;color:#e8f7ff;cursor:pointer;font:inherit}.anatomyStructureButtons button[aria-pressed=true]{background:#1a718a;outline:2px solid #b3f2ff}.anatomy3dDetail h4{margin:17px 0 9px}.anatomyRelated .domainButton{padding:7px 10px}.anatomyPersonal{display:grid;gap:5px;margin:13px 0}.anatomyPersonal textarea{width:100%;box-sizing:border-box;border:1px solid #577e98;border-radius:9px;background:#092840;color:#fff;font:inherit;padding:9px}.anatomy3dControls select{width:100%;box-sizing:border-box}.anatomy3dControls button{min-height:44px}@media(max-width:920px){.anatomy3dControls{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.anatomy3dControls,.cadFaceInspector{grid-template-columns:1fr}.cadFaceInspector button{grid-column:auto}}
.skyStudyControls{display:grid;grid-template-columns:minmax(150px,1fr) minmax(220px,2fr) auto;gap:9px;align-items:end;margin-top:13px}.skyStudyControls label{display:grid;gap:5px}.skyStudyControls select,.skyStudyControls textarea{width:100%;box-sizing:border-box;min-height:44px;padding:9px;border:1px solid #5c8099;border-radius:8px;background:#09243c;color:#eaf8ff;font:inherit}.skyStudyControls textarea{resize:vertical}.skyStudyControls span{grid-column:1/-1;color:#9de6ef;min-height:1.3em}@media(max-width:750px){.skyStudyControls{grid-template-columns:1fr}}
/* Creative project studio */
.designLaunch,.designIntro{display:flex;justify-content:space-between;gap:22px;align-items:center;padding:22px;margin:18px 0;background:linear-gradient(120deg,#0b304c,#164464);border:1px solid #427997;border-radius:18px}.designLaunch h2,.designIntro h1{margin:8px 0}.designLaunch p,.designIntro p{color:#c2dce9;line-height:1.5}.designIntro>div:first-child{max-width:610px}.designSettings{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:10px;flex:1}.designSettings label,.designBar label,.designSidebar label{display:grid;gap:5px;font-size:.9rem;color:#c8e2eb}.designStudio input,.designStudio select,.designStudio button{font:inherit}.designStudio input,.designStudio select{min-height:42px;padding:8px;border:1px solid #56859f;border-radius:8px;background:#071f35;color:#f2faff;box-sizing:border-box;min-width:0}.designStudio button,.designLaunch .domainButton{min-height:43px;padding:8px 12px;border:1px solid #49809e;border-radius:9px;background:#13435f;color:#ecfaff;cursor:pointer;text-decoration:none}.designStudio button:hover,.designLaunch .domainButton:hover,.designStudio button.active{background:#276e87;border-color:#7de9fd}.designStudio button:disabled{opacity:.45;cursor:not-allowed}.designStudio :focus-visible{outline:3px solid #9be8fc;outline-offset:2px}.designWorkspace{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);gap:17px;align-items:start}.designMain,.designSidebar .creativePanel{min-width:0;background:#081c31;border:1px solid #365e7b;border-radius:15px;padding:16px}.designSidebar{display:grid;gap:12px}.designBar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:8px 0 14px}.designBar>label{flex:1 1 125px}.designBar input[type=number]{width:95px}.designCanvasFrame{overflow:auto;border:2px solid #5790a8;border-radius:12px;background:#fff;touch-action:none}.designCanvasFrame svg{display:block;width:100%;min-width:450px;aspect-ratio:800 / 520;touch-action:none;cursor:crosshair}.designCanvasFrame svg [data-id]{cursor:grab}.designCanvasFrame svg [data-id]:active{cursor:grabbing}.designSidebar h2,.designSaved h2{font-size:1.17rem;margin:2px 0 12px}.designSidebar p,.designSidebar small,.designMain>p{color:#bad3de;line-height:1.5}.designLayers{max-height:230px;overflow:auto;display:grid;gap:5px}.designLayer{display:flex;align-items:center;gap:4px;border:1px solid #355e78;border-radius:8px;padding:3px}.designLayer.active{border-color:#8be9f6;background:#123c56}.designLayer button{min-height:35px;padding:4px 7px}.designLayer button:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.designInspector{display:grid;grid-template-columns:1fr 1fr;gap:10px}.designInspector label:first-child,.designInspector label:nth-child(2),.designInspector label:nth-child(11),.designInspector button,.designInspector small{grid-column:1/-1}.designInspector input,.designInspector select{width:100%}.designSavedRow{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #355e78}.designSavedRow span{flex:1;overflow-wrap:anywhere}.designFile input{max-width:185px;padding:5px}.designSidebar .creativePanel{margin:0}.designSidebar .creativePanel>label{display:grid;gap:5px;margin-bottom:10px}.designSidebar .creativePanel>label input{width:100%}@media(max-width:1050px){.designWorkspace{grid-template-columns:1fr}.designSidebar{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.designIntro,.designLaunch{display:block}.designSettings,.designSidebar{grid-template-columns:1fr}.designSettings{margin-top:15px}.designLaunch .domainButton{display:inline-flex;align-items:center}.designCanvasFrame svg{min-width:340px}.designSavedRow{flex-wrap:wrap}.designSavedRow span{flex-basis:100%}}
/* Trades workshop */
.tradeWorkshop{color:#eff8ff}.tradeHero{margin:18px 0;padding:24px;border:1px solid #39859a;border-radius:18px;background:linear-gradient(115deg,#102e4b,#12515e)}.tradeHero h1{margin:7px 0;font-size:clamp(1.7rem,4vw,2.7rem)}.tradeHero p{color:#c7e4ed;max-width:850px;line-height:1.55}.tradeControls,.tradeViewInputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.tradeControls label,.tradeViewInputs label,.tradeCosts label{display:grid;gap:5px;color:#c9e1eb;font-size:.9rem}.tradeControls input,.tradeControls select,.tradeCosts input{min-height:43px;padding:9px;border:1px solid #4e8095;background:#09283e;color:white;border-radius:8px;min-width:0;width:100%;box-sizing:border-box;font:inherit}.tradeGrid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);align-items:start;gap:16px}.tradeMain,.tradeSide section{background:#081e34;border:1px solid #365e77;border-radius:16px;padding:16px;min-width:0}.tradeViewerHead,.tradeSteps header{display:flex;justify-content:space-between;gap:12px;align-items:start}.tradeViewerHead h2,.tradeSteps h2{margin:7px 0}.tradeViewerHead p{margin:3px 0 12px;color:#afd0dc}.tradeViewerButtons{display:flex;flex-wrap:wrap;gap:8px}.tradeWorkshop button{min-height:43px;background:#143d55;border:1px solid #568fa5;border-radius:9px;padding:7px 12px;color:#f5fbff;cursor:pointer;font:inherit}.tradeWorkshop button:hover,.tradeWorkshop button[aria-pressed=true]{background:#23647b;border-color:#91e1ec}.tradeWorkshop button:disabled{opacity:.45;cursor:not-allowed}.tradeWorkshop :focus-visible{outline:3px solid #8ee9f4;outline-offset:2px}#twScene{display:block;width:100%;aspect-ratio:860/510;border:1px solid #456a82;border-radius:12px;touch-action:none;background:#081b31}#twScene polygon[data-part]{cursor:pointer}.tradeViewInputs{grid-template-columns:repeat(3,1fr)}.tradeViewInputs input{width:100%;accent-color:#55dcf1}.tradeParts>div,.tradeStepButtons{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.tradeParts button,.tradeStepButtons button{font-size:.87rem;min-height:37px}.tradeParts article{border-left:3px solid #62dbec;background:#102f49;padding:9px 14px;border-radius:6px}.tradeParts h4,.tradeParts p{margin:5px 0}.tradeSteps{margin-top:17px;padding-top:14px;border-top:1px solid #3c6178}.tradeSteps>p{line-height:1.6}.tradeStepMeta{display:flex;flex-wrap:wrap;gap:9px}.tradeStepMeta span{padding:6px 10px;border-radius:20px;background:#1d425c}.tradeCaution{color:#f5d4a6!important;border-left:3px solid #ffb45d;padding:8px 12px;background:#43351e55;line-height:1.55}.tradeSide{display:grid;gap:13px}.tradeSide section h2{margin-top:0}.tradeSide section p,.tradeSide dd,.tradeSide small{color:#c2d9e4;line-height:1.55}.tradeSide dt{color:#8ee0ea;font-weight:700;margin-top:10px}.tradeSide dd{margin:3px 0 8px}.tradeSide a{display:block;color:#88eaff;margin:8px 0;overflow-wrap:anywhere}.tradeCosts{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tradeJobLinks{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}@media(max-width:1050px){.tradeGrid{grid-template-columns:1fr}.tradeSide{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.tradeControls,.tradeSide{grid-template-columns:1fr 1fr}.tradeViewerHead,.tradeSteps header{display:block}.tradeControls label:last-child{grid-column:1/-1}}@media(max-width:520px){.tradeControls,.tradeSide,.tradeJobLinks{grid-template-columns:1fr}.tradeViewInputs{grid-template-columns:1fr 1fr}.tradeViewInputs label:last-child{grid-column:1/-1}.tradeMain,.tradeSide section{padding:12px}}
.tradeTerms{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}.tradeTerms button{font-size:.9rem;min-height:37px}.tradeLanguageNote{color:#b6dbe4;font-size:.91rem}.tradeReady{display:grid;gap:8px;margin:12px 0;padding:12px;background:#102d43;border-radius:10px}.tradeReady label{display:flex;gap:9px;align-items:flex-start;color:#d3eaf1;font-size:.9rem}.tradeReady input{width:19px;height:19px;accent-color:#44c5e4;flex:0 0 auto}.tradeReady p{margin:3px 0}
/* Optional lesson explanation viewer, loaded on demand. */
.explainerLaunch{position:fixed;z-index:96;right:16px;bottom:16px;padding:11px 15px;min-height:48px;border:2px solid #7de6f3;border-radius:999px;background:#103f60;color:#f4fdff;box-shadow:0 8px 30px #02121caa;font:700 .95rem system-ui;cursor:pointer}.explainerLaunch:focus-visible,.explainerPanel :focus-visible{outline:3px solid #a8eefa;outline-offset:2px}.explainerPanel{position:fixed;z-index:95;right:14px;bottom:75px;width:min(495px,calc(100vw - 28px));max-height:min(82vh,900px);overflow:auto;background:#071e32;border:2px solid #55b7cd;border-radius:17px;padding:15px;box-sizing:border-box;color:#eaf9ff;box-shadow:0 18px 55px #000b;font:15px/1.5 system-ui}.explainerPanel[hidden]{display:none}.explainerPanel header{display:flex;justify-content:space-between;align-items:start;gap:12px}.explainerPanel h2{font-size:1.2rem;margin:2px 0 7px}.explainerPanel p{color:#c8dfeb}.explainerPanel button{min-height:38px;padding:7px 10px;border:1px solid #608ea4;border-radius:8px;background:#15445e;color:#edfaff;cursor:pointer;font:inherit}.explainerPanel button:disabled{opacity:.45;cursor:not-allowed}#evClose{font-size:1.5rem;line-height:1;padding:2px 10px}.explainerDisclosure{margin:4px 0 12px;font-size:.86rem}.explainerMedia{position:relative;overflow:hidden;border:1px solid #6bb4c6;border-radius:10px;background:#0a2740}.explainerMedia canvas,.explainerMedia video{display:block;width:100%;aspect-ratio:16/9}.explainerMedia canvas[hidden],.explainerMedia video[hidden]{display:none}.explainerCaption{padding:8px 10px;min-height:35px;background:#041520;color:#f6fcff;font-size:.9rem}.explainerTopic{font-weight:700;margin:9px 0}.explainerActions{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0;align-items:center}.explainerActions label{display:flex;align-items:center;gap:5px;font-size:.88rem}.explainerPanel details{margin-top:10px;padding:9px;border:1px solid #3b6b82;border-radius:9px}.explainerPanel summary{cursor:pointer;font-weight:700}.explainerPanel details>label{display:grid;gap:5px;margin:9px 0}.explainerPanel input[type=file],.explainerPanel textarea{width:100%;box-sizing:border-box;border:1px solid #64849a;border-radius:8px;padding:7px;background:#0a2a41;color:white;font:inherit}.explainerPanel textarea{resize:vertical}#evStatus{min-height:20px;font-size:.89rem}@media(max-width:540px){.explainerLaunch{bottom:12px;right:12px}.explainerPanel{right:8px;bottom:68px;width:calc(100vw - 16px);max-height:76vh}}
/* Radio language lab */
.radioHero{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:23px;margin:18px 0;background:linear-gradient(120deg,#102b4b,#18536a);border:1px solid #4a89a0;border-radius:18px}.radioHero h1{margin:7px 0}.radioHero p,.radioPlayer p,.radioStations p{color:#bed9e4;line-height:1.55}.radioFilters{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:8px;min-width:48%}.radioFilters label,.radioStationHeader label,.radioPlayer label{display:grid;gap:5px;color:#cbe4ed;font-size:.9rem}.radioFilters select,.radioStationHeader input,.radioPlayer textarea{min-height:42px;padding:8px;box-sizing:border-box;width:100%;border:1px solid #5a859c;border-radius:8px;background:#09283f;color:#f1fbff;font:inherit}.radioLayout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.75fr);gap:16px;align-items:start}.radioStations,.radioPlayer>section{background:#081e34;border:1px solid #365e78;border-radius:15px;padding:16px}.radioStationHeader{display:flex;justify-content:space-between;align-items:end;gap:12px}.radioStationHeader h2{margin:7px 0}.radioStationHeader label{min-width:190px}.radioList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.radioCard{padding:14px;border:1px solid #355f78;border-radius:12px;background:#0d2b44}.radioCard.selected{border-color:#74e6f0;box-shadow:0 0 0 2px #48cee955}.radioCard h3{margin:0 0 6px;color:#f3fbff}.radioCard p{font-size:.9rem;margin:0 0 12px}.radioCardActions,.radioPlayerActions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.radioApp button,.radioCardActions a{min-height:40px;padding:8px 11px;border:1px solid #568da5;border-radius:8px;background:#15435d;color:#f3fcff;cursor:pointer;font:inherit;text-decoration:none}.radioApp button:hover,.radioCardActions a:hover{background:#246a81;border-color:#89eaf1}.radioPlayer{display:grid;gap:13px}.radioPlayer>section h2{margin-top:0}.radioPlayer audio{width:100%;margin:8px 0}.radioPlayer textarea{resize:vertical}.radioPlayer section>p{font-size:.9rem}.radioSources a{display:block;color:#85e7f4;margin:9px 0}.radioSources h2{margin-bottom:8px}@media(max-width:900px){.radioHero{display:block}.radioFilters{margin-top:16px}.radioLayout{grid-template-columns:1fr}}@media(max-width:600px){.radioFilters,.radioList{grid-template-columns:1fr}.radioStationHeader{display:block}.radioStationHeader label{margin-top:10px}}

.explainerModes{display:flex;gap:7px;margin:10px 0;flex-wrap:wrap}.explainerPanel .explainerModes button{flex:1 1 120px;min-width:110px;font-size:.86rem}.explainerPanel .explainerModes button[aria-pressed=true]{background:#52d6e4;color:#092032;border-color:#52d6e4;font-weight:750}.explainerSource{padding:9px;border:1px solid #416780;border-radius:9px;margin:9px 0}.explainerSource[hidden]{display:none}.explainerSource label{display:grid;gap:5px}.explainerSource input{min-width:0;width:100%;box-sizing:border-box;background:#0a2a41;color:#fff;border:1px solid #6e91aa;border-radius:8px;padding:8px;font:inherit}.explainerSource a{display:inline-block;color:#8deaff;margin:5px 10px 2px 0}.explainerSource p{margin:7px 0;font-size:.88rem}#evVideoResults{display:grid;gap:5px;max-height:135px;overflow:auto;margin:6px 0}#evVideoResults button{text-align:left;overflow-wrap:anywhere;min-height:34px;padding:6px 8px;font-size:.85rem}#evSource{font-size:.83rem}
.bookAIWriter{margin:16px 0;padding:19px;border:1px solid #3d7190;border-radius:16px;background:#102e48}.bookAIWriter h3{margin:9px 0}.bookAIWriter p{line-height:1.5}.bookAIWriter label{display:grid;gap:7px;margin:12px 0}.bookAIWriter input{width:100%;box-sizing:border-box;background:#081c32;color:#f3faff;border:1px solid #648eab;border-radius:9px;padding:12px;font:inherit}.bookAIActions{display:flex;flex-wrap:wrap;gap:9px}.bookAIActions button,.bookAIActions a{font-size:.95rem}.bookAIWriter .bookAIPrivacy{font-size:.88rem;color:#bfd5e3}.bookAIWriter #bookAIStatus{overflow-wrap:anywhere}

.bookAudioShelf{margin:18px 0 0;padding:15px;border:1px solid #44789b;border-radius:13px;background:#102c46}.bookAudioShelf h3{margin:2px 0 8px}.bookAudioShelf p,.bookAudioShelf small{line-height:1.5}.bookAudioShelf a{display:block;margin:12px 0;color:#8feaf7}.bookAudioShelf .bookAIActions{margin:10px 0}#bookSwitchLanguage{margin-top:7px}
.marketCoinPanel[hidden],#marketCoinPanel[hidden]{display:none}.coinControls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.coinControls label{display:grid;gap:5px;min-width:150px;flex:1;color:#d4e9f4}.coinControls input:not([type=checkbox]),.coinControls select{font:inherit;color:#fff;background:#071a2d;border:1px solid #53829e;border-radius:9px;padding:10px;width:100%}.coinControls button{font:inherit;color:#071629;background:#79e2ef;border:0;border-radius:9px;min-height:44px;padding:9px 14px;cursor:pointer}#coinChart{width:100%;max-width:640px;background:#071629;border-radius:11px}#coinChart circle{cursor:pointer}#coinChart circle:focus{stroke:#f5c84c;stroke-width:5}#coinPoint{color:#f5df9c}#coinLog{max-height:150px;overflow:auto;padding-left:22px}

.beliefDepth{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:18px;margin:24px 0}.beliefDepth>div{padding:20px;border:1px solid #467993;border-radius:18px;background:#0a2843}.beliefDepth p{line-height:1.55}.beliefDepth details{border:1px solid #4b7087;padding:12px;margin:10px 0;border-radius:10px;background:#123550}.beliefDepth summary{font-weight:700;cursor:pointer}.beliefDepth label{display:flex;align-items:center;gap:8px}.beliefDepth input{width:18px;height:18px}.beliefDepthCheck #beliefDepthChoices{display:grid;gap:8px}.beliefDepthCheck button{text-align:left;border-radius:10px}.beliefDepthCheck .domainButton{display:inline-flex;margin:12px 8px 0 0}.beliefDepth .correct{border-color:#5ef4e4}.beliefDepth .wrong{border-color:#f9778b}@media(max-width:850px){.beliefDepth{grid-template-columns:1fr}}
/* Community choice and guided practice on World Beliefs */
.beliefBranchPractice{margin:1rem 0;padding:1rem 1.25rem;border:1px solid #496e89;border-radius:16px;background:#102a44;color:#e8f7ff}.beliefBranchPractice h2{margin:.1rem 0 .5rem}.beliefBranchPractice p{line-height:1.55}.beliefBranchPractice small{display:block;margin-top:.7rem;line-height:1.45;color:#c0d8e6}.beliefBranchPractice label{display:block;margin:.7rem 0 .35rem}.beliefBranchPractice input{flex:1;min-width:13rem;padding:.7rem;border:1px solid #6c91ae;border-radius:10px;background:#081d32;color:#fff;font:inherit}.beliefBranchPractice .beliefSentenceActions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* Keep Match immediately accessible before optional learning shelves. */
.matchQuickNav{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}.matchQuickNav a{padding:.55rem .7rem;border:1px solid #7195ad;border-radius:.6rem;color:#e9f5ff;font-size:.95rem;text-decoration:none}.matchQuickNav a.active{background:#1f536a}.matchBrowse,.recentStudios,.matchQuickPractice{margin:.75rem 0;padding:.65rem;border:1px solid #54728c;border-radius:.7rem}.matchBrowse summary,.recentStudios summary,.matchQuickPractice summary{cursor:pointer;font-size:1rem;padding:.25rem}.matchApp .controls{margin:.7rem 0}.matchApp .status{min-height:2rem}.matchApp .board{margin-top:.7rem}

/* ==========================================================================
   Fluent Quest — Apple Spatial Bento & Gamified Learning Hub Design Skin
   Replaces the legacy dark-navy AI template look with an organized, tactile,
   Apple-inspired Human Interface layout (Light Ivory & Midnight Glass modes).
   ========================================================================== */

:root,
html[data-fq-theme="light"] {
  --fq-bg: #f5f5f7;
  --fq-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(0, 122, 255, 0.10), transparent 60%),
                  radial-gradient(1000px 500px at 88% 0%, rgba(88, 86, 214, 0.09), transparent 55%),
                  #f5f5f7;
  --fq-surface: rgba(255, 255, 255, 0.88);
  --fq-surface-solid: #ffffff;
  --fq-surface-subtle: #eef0f5;
  --fq-border: rgba(15, 23, 42, 0.09);
  --fq-border-strong: rgba(0, 122, 255, 0.28);
  --fq-text: #1d1d1f;
  --fq-muted: #515154;
  --fq-primary: #007aff;
  --fq-primary-ink: #ffffff;
  --fq-green: #28cd41;
  --fq-amber: #ff9500;
  --fq-purple: #5856d6;
  --fq-pink: #ff2d55;
  --fq-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --fq-shadow-hover: 0 16px 38px -10px rgba(0, 122, 255, 0.16), 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Override legacy variables so all 129 existing studios inherit the new skin */
  --ink: #1d1d1f;
  --muted: #515154;
  --navy: #f5f5f7;
  --panel: #ffffff;
  --line: #d2d2d7;
  --yellow: #007aff;
  --blue: #007aff;
  --red: #ff3b30;
}

html[data-fq-theme="dark"] {
  --fq-bg: #0b0f17;
  --fq-bg-accent: radial-gradient(1200px 600px at 15% -10%, rgba(10, 132, 255, 0.18), transparent 60%),
                  radial-gradient(1000px 500px at 88% 0%, rgba(94, 92, 230, 0.16), transparent 55%),
                  #0b0f17;
  --fq-surface: rgba(22, 28, 40, 0.84);
  --fq-surface-solid: #161c28;
  --fq-surface-subtle: #1e2636;
  --fq-border: rgba(255, 255, 255, 0.10);
  --fq-border-strong: rgba(10, 132, 255, 0.42);
  --fq-text: #f5f5f7;
  --fq-muted: #98a2b3;
  --fq-primary: #0a84ff;
  --fq-primary-ink: #ffffff;
  --fq-green: #30d158;
  --fq-amber: #ff9f0a;
  --fq-purple: #5e5ce6;
  --fq-pink: #ff375f;
  --fq-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.45);
  --fq-shadow-hover: 0 18px 42px -8px rgba(10, 132, 255, 0.28);

  --ink: #f5f5f7;
  --muted: #98a2b3;
  --navy: #0b0f17;
  --panel: #161c28;
  --line: #2a3447;
  --yellow: #ffd60a;
  --blue: #0a84ff;
  --red: #ff453a;
}

html, body {
  background: var(--fq-bg-accent) !important;
  color: var(--fq-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0 !important;
}

/* Hide legacy cluttered 40-link nav bars and AI boilerplate link dumps */
nav.pages,
nav.matchQuickNav,
details.matchBrowse,
details.recentStudios,
section.fluentWelcome {
  display: none !important;
}

/* Expand legacy .app containers into clean Apple Bento cards */
main.app {
  width: min(1220px, 100%) !important;
  margin: 0 auto 96px auto !important;
  padding: 20px 24px 48px 24px !important;
  background: var(--fq-surface) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--fq-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--fq-shadow) !important;
}

/* Restyle legacy cards, sections, inputs, and buttons inside the 129 studios */
html[data-fq-theme="light"] main.app section,
html[data-fq-theme="light"] main.app article,
html[data-fq-theme="light"] main.app aside,
html[data-fq-theme="light"] main.app .workspace,
html[data-fq-theme="light"] main.app .levelbar,
html[data-fq-theme="light"] main.app .hubCard,
html[data-fq-theme="light"] main.app .dailyWidget,
html[data-fq-theme="light"] main.app .timer {
  background: var(--fq-surface-solid) !important;
  color: var(--fq-text) !important;
  border-color: var(--fq-border) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html[data-fq-theme="light"] main.app input,
html[data-fq-theme="light"] main.app select,
html[data-fq-theme="light"] main.app textarea {
  background: var(--fq-surface-subtle) !important;
  color: var(--fq-text) !important;
  border: 1px solid var(--fq-border) !important;
  border-radius: 12px !important;
}

html[data-fq-theme="light"] main.app button.word,
html[data-fq-theme="light"] main.app .card {
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: 1.5px solid rgba(0, 122, 255, 0.22) !important;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.06) !important;
}

/* ==========================================================================
   Unified Apple App Shell & Top Gamification Bar
   ========================================================================== */

.fq-shell-wrapper {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 24px);
}

.fq-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--fq-surface);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--fq-border);
  padding: 10px 20px;
}

.fq-topbar-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fq-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fq-logo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--fq-text);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 12px;
}

.fq-logo-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #007aff, #5856d6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.fq-pillar-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--fq-surface-subtle);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--fq-border);
}

.fq-pillar-tab {
  border: none;
  background: transparent;
  color: var(--fq-muted);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.fq-pillar-tab:hover {
  color: var(--fq-text);
}

.fq-pillar-tab.active {
  background: var(--fq-surface-solid);
  color: var(--fq-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.fq-hud-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fq-hud-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--fq-surface-subtle);
  border: 1px solid var(--fq-border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--fq-text);
}

.fq-role-select {
  appearance: none;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--fq-surface-subtle);
  border: 1px solid var(--fq-border-strong);
  color: var(--fq-primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.fq-icon-btn {
  border: 1px solid var(--fq-border);
  background: var(--fq-surface-subtle);
  color: var(--fq-text);
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.fq-icon-btn:hover {
  border-color: var(--fq-primary);
  color: var(--fq-primary);
}

/* ==========================================================================
   Bento Command Center Container & Cards
   ========================================================================== */

.fq-hub-container {
  width: min(1220px, 100%);
  margin: 18px auto 12px auto;
  padding: 0 16px;
}

.fq-bento-hero {
  background: var(--fq-surface);
  border: 1px solid var(--fq-border);
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow: var(--fq-shadow);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.fq-bento-hero h1 {
  margin: 4px 0 6px 0;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.fq-bento-hero p {
  margin: 0;
  color: var(--fq-muted);
  font-size: 0.94rem;
  max-width: 680px;
  line-height: 1.45;
}

.fq-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fq-primary);
}

.fq-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.fq-col-12 { grid-column: span 12; }
.fq-col-8 { grid-column: span 8; }
.fq-col-7 { grid-column: span 7; }
.fq-col-6 { grid-column: span 6; }
.fq-col-5 { grid-column: span 5; }
.fq-col-4 { grid-column: span 4; }

@media (max-width: 960px) {
  .fq-col-8, .fq-col-7, .fq-col-6, .fq-col-5, .fq-col-4 {
    grid-column: span 12;
  }
}

.fq-card {
  background: var(--fq-surface);
  border: 1px solid var(--fq-border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--fq-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fq-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fq-card-head h2, .fq-card-head h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Duolingo / Mimo Interactive Skill Tree Pathway
   ========================================================================== */

.fq-track-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.fq-track-pill {
  border: 1px solid var(--fq-border);
  background: var(--fq-surface-subtle);
  color: var(--fq-text);
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.fq-track-pill.active {
  background: var(--fq-primary);
  color: #fff;
  border-color: var(--fq-primary);
  box-shadow: 0 6px 18px rgba(0, 122, 255, 0.28);
}

.fq-skill-tree {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding: 8px 4px;
}

.fq-skill-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--fq-surface-solid);
  border: 1.5px solid var(--fq-border);
  transition: all 0.18s ease;
}

.fq-skill-node:hover {
  border-color: var(--fq-primary);
  box-shadow: var(--fq-shadow-hover);
  transform: translateY(-1px);
}

.fq-skill-node.completed {
  border-color: rgba(40, 205, 65, 0.45);
}

.fq-node-orb {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: var(--fq-surface-subtle);
  flex-shrink: 0;
}

.fq-skill-node.completed .fq-node-orb {
  background: rgba(40, 205, 65, 0.15);
}

.fq-node-info {
  flex: 1;
  min-width: 0;
}

.fq-node-info small {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fq-primary);
}

.fq-node-info strong {
  display: block;
  font-size: 0.96rem;
  margin: 2px 0;
}

.fq-node-info span {
  display: block;
  font-size: 0.8rem;
  color: var(--fq-muted);
}

.fq-node-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fq-btn-primary {
  background: var(--fq-primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.fq-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.fq-btn-secondary {
  background: var(--fq-surface-subtle);
  color: var(--fq-text);
  border: 1px solid var(--fq-border);
  padding: 8px 13px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.fq-btn-secondary:hover {
  border-color: var(--fq-primary);
  color: var(--fq-primary);
}

/* ==========================================================================
   Anki Spaced-Repetition Flashcard Deck Widget
   ========================================================================== */

.fq-anki-stage {
  background: linear-gradient(145deg, rgba(0, 122, 255, 0.07), rgba(88, 86, 214, 0.08));
  border: 1.5px solid var(--fq-border-strong);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  min-height: 175px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.fq-anki-front {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fq-anki-back {
  font-size: 1.05rem;
  color: var(--fq-primary);
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px dashed var(--fq-border);
}

.fq-anki-ratings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.fq-anki-rate-btn {
  border: 1px solid var(--fq-border);
  background: var(--fq-surface-solid);
  color: var(--fq-text);
  padding: 8px 6px;
  border-radius: 11px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.fq-anki-rate-btn:hover {
  border-color: var(--fq-primary);
  background: var(--fq-surface-subtle);
}

/* ==========================================================================
   Bento Studio Directory Grid
   ========================================================================== */

.fq-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 14px;
}

.fq-studio-card {
  background: var(--fq-surface-solid);
  border: 1px solid var(--fq-border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  color: var(--fq-text);
  transition: all 0.16s ease;
}

.fq-studio-card:hover {
  border-color: var(--fq-primary);
  box-shadow: var(--fq-shadow-hover);
  transform: translateY(-2px);
}

.fq-studio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fq-studio-icon {
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--fq-surface-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fq-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--fq-surface-subtle);
  color: var(--fq-primary);
}

/* ==========================================================================
   Spotlight Modal & In-Hub Quiz Runner Modal
   ========================================================================== */

.fq-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 14, 24, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.fq-modal {
  width: min(680px, 100%);
  max-height: 86svh;
  overflow-y: auto;
  background: var(--fq-surface-solid);
  border: 1px solid var(--fq-border);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fq-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.fq-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 11px;
  border: 1px solid var(--fq-border);
  background: var(--fq-surface-subtle);
  color: var(--fq-text);
  font-size: 0.86rem;
}

.fq-active-studio-bar {
  width: min(1220px, 100%);
  margin: 8px auto 10px auto;
  padding: 10px 18px;
  background: var(--fq-surface);
  border: 1px solid var(--fq-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}