/* Readable defaults for the classroom, without a special accessibility mode. */
body {
  color: #242b43;
}
.finish-details .text-button {
  font-size: 17px;
  min-height: 48px;
}
#file-save,
#final-save {
  font-size: 18px;
  overflow-wrap: anywhere;
}
#code-time {
  font-size: 16px;
  color: #57446b;
}
#code-lines {
  font-size: 14px;
  height: 220px;
}
.code-heading {
  font-size: 15px;
}
.lesson-footer [data-state="saved"] {
  color: #27664d;
}
.lesson-footer [data-state="error"] {
  color: #9a3d20;
}
button {
  border-color: #82748e;
}
input::placeholder,
textarea::placeholder {
  color: #625b70;
  opacity: 1;
}
.primary {
  background: #6846b3;
  border-color: #6846b3;
  color: #fff;
}
.eyebrow,
.sidebar-label,
.nav-group,
.source-link,
.hero-copy > p,
.hero-features,
.entry-section p,
.breadcrumb,
.chapter-chip,
.activity-badge,
.hero-copy .small-pill {
  color: #625078;
}
.eyebrow {
  font-size: 14px;
}
.sidebar-label,
.nav-group {
  font-size: 14px;
}
.brand small,
.header-progress,
.student-badge {
  font-size: 16px;
  color: #5d526b;
}
.header-tools .icon-button {
  width: auto;
  height: auto;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 12px;
  border-color: #8f819d;
  font-size: 18px;
  color: #433653;
  white-space: nowrap;
}
.student-badge {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-step {
  font-size: 16px;
  min-height: 50px;
  color: #56475f;
  line-height: 1.7;
}
.nav-step:disabled {
  opacity: 1;
  color: #6f657b;
}
.nav-step span {
  font-size: 14px;
  min-width: 26px;
  min-height: 26px;
  border-color: #94869f;
  color: #62516d;
}
.nav-step.current {
  background: #e9e0f8;
  color: #543485;
}
.nav-step.current span {
  background: #6846b3;
  border-color: #6846b3;
  color: #fff;
}
.sidebar nav {
  max-height: 550px;
  overflow: auto;
  scrollbar-width: thin;
}
.sidebar-tip p,
.sidebar-tip small {
  font-size: 16px;
  color: #60516f;
}
.sidebar-tip > span,
.source-link {
  font-size: 16px;
  color: #634b7e;
}
.breadcrumb {
  font-size: 16px;
  flex-wrap: wrap;
}
.chapter-chip {
  font-size: 14px;
}
.hero-copy > p,
main .lesson-heading p,
main .assistant-bubble,
main textarea {
  font-size: 20px;
  color: #50445e;
}
.hero-features {
  font-size: 16px;
  gap: 10px 14px;
}
.hero-copy .small-pill {
  font-size: 15px;
}
main .activity-work button,
main .primary,
main .secondary {
  font-size: 20px;
  min-height: 56px;
}
main .hint,
main .learn-note,
main .activity-status,
main .entry-section p {
  font-size: 18px;
  color: #53475f;
  line-height: 1.8;
}
main .activity-work label,
main .prompt-panel label {
  font-size: 20px;
}
main .entry-fields input {
  font-size: 20px;
}
main .entry-fields label {
  font-size: 18px;
}
.entry-fields {
  grid-template-columns: 130px 1fr;
}
.entry-fields small,
.fineprint,
.privacy-note,
.lesson-footer > p {
  font-size: 16px;
  line-height: 1.8;
  color: #5d506c;
}
.folder-button {
  font-size: 18px;
  min-height: 56px;
  color: #563d70;
  border-color: #8e7b9e;
}
.text-button {
  font-size: 17px;
  min-height: 44px;
  color: #613d97;
}
.activity-badge {
  font-size: 15px;
}
.activity-work .selected {
  color: #51307f !important;
  background: #e9defb !important;
  border-color: #78549e !important;
}
.sticker-palette button {
  min-height: 84px;
  padding: 7px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.sticker-palette button > span {
  font-size: 28px;
  line-height: 1.2;
  color: #26324d;
}
.sticker-palette button small {
  font-size: 15px;
  color: #43354f;
  line-height: 1.4;
  word-break: keep-all;
}
.stage-tag {
  font-size: 13px;
  color: #62516e;
}
.course-map small {
  font-size: 15px;
  color: #5b5068;
}
.course-sequence > span {
  font-size: 18px;
}
.course-sequence b {
  font-size: 15px;
  color: #e5edff;
}
.course-decor {
  font-size: 18px;
  color: #5d4474;
  line-height: 1.8;
}
.assistant-heading b,
.preview-heading h2 {
  font-size: 20px;
}
.assistant-heading small,
.example-label,
.simulation-tag,
.preview-heading > span,
.config-summary small {
  font-size: 15px;
  color: #5f526f;
}
.example-prompt {
  font-size: 20px;
}
.example-prompt > span {
  font-size: 16px;
  color: #65468d;
}
.prompt-response,
.config-summary p {
  font-size: 18px;
  color: #5a4273;
  line-height: 1.8;
}
.finish-details dl {
  font-size: 18px;
}
.finish-details dt {
  color: #675773;
}
.finish-details dd {
  color: #42344f;
}
.finish-details > p,
.file-name {
  font-size: 16px;
  color: #5d4b6b;
}
.finish-heading p {
  font-size: 20px;
  color: #63526d;
}
.hero-game-label,
.hero-game-bottom > span {
  font-size: 10px;
  color: #d6e1fb;
}
.hero-game-bottom b {
  font-size: 13px;
  color: #f0efff;
}
.large-text main p,
.large-text main label,
.large-text main button,
.large-text .game-wrap button {
  font-size: 22px;
}
@media (max-width: 1200px) {
  .topbar {
    gap: 14px;
  }
  .header-tools {
    gap: 8px;
  }
  .header-progress {
    width: 180px;
  }
  .header-tools .icon-button {
    padding: 9px 11px;
  }
}
@media (max-width: 960px) {
  .header-progress {
    display: none;
  }
  .brand {
    font-size: 18px;
  }
}
@media (max-width: 680px) {
  .preview-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #file-save,
  #folder-state,
  .finish-details dd {
    overflow-wrap: anywhere;
  }
  .topbar {
    height: auto;
    min-height: 140px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 16px;
    gap: 12px;
  }
  .brand {
    width: 100%;
    font-size: 17px;
    justify-content: center;
  }
  .brand small {
    font-size: 15px;
  }
  .brand-mark {
    width: 38px;
    height: 40px;
  }
  .header-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  .header-tools .icon-button {
    font-size: 17px;
    min-height: 52px;
    padding: 9px 4px;
  }
  .student-badge {
    display: none;
  }
  main {
    padding: 20px 16px 0;
  }
  .breadcrumb {
    font-size: 15px;
    gap: 8px;
  }
  .chapter-chip {
    font-size: 13px;
  }
  .lesson-heading h1 {
    font-size: 27px;
  }
  .lesson-heading p {
    font-size: 20px;
  }
  .entry-fields {
    grid-template-columns: 110px 1fr;
  }
  .entry-fields label {
    font-size: 18px;
  }
  .lesson-footer {
    align-items: stretch;
  }
  .lesson-footer button {
    font-size: 18px;
    flex: 1;
  }
  .lesson-footer p {
    font-size: 16px;
    flex-basis: 100%;
    margin: 0;
  }
  main .activity-work button {
    font-size: 19px;
  }
  .activity-panel {
    padding: 16px;
  }
  .sticker-palette {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero-copy h1 {
    font-size: 40px;
  }
  .hero-features {
    font-size: 16px;
  }
  .finish-details dl {
    grid-template-columns: max-content minmax(0,1fr);
    gap: 14px 10px;
  }
  .finish-details {
    padding: 18px;
  }
  .coding-layout,
  .course-layout,
  .command-layout,
  .sticker-layout {
    min-width: 0;
  }
  .command-layout > div,
  .course-layout > div {
    min-width: 0;
  }
  .drawing-tools label {
    max-width: 100%;
  }
  .drawing-tools {
    align-items: stretch;
  }
}
@media (max-width: 380px) {
  .entry-fields {
    display: block;
  }
  .entry-fields label {
    margin: 12px 0 7px;
  }
  .entry-fields .folder-button {
    margin-top: 14px;
  }
  .entry-fields small {
    display: block;
    margin-top: 10px;
  }
  .hero-copy h1 {
    font-size: 36px;
  }
  .header-tools .icon-button {
    font-size: 16px;
  }
  .lesson-heading h1 {
    font-size: 25px;
  }
  .prompt-panel {
    padding: 14px;
  }
  .assistant-heading {
    flex-wrap: wrap;
  }
  .simulation-tag {
    margin-left: 0;
  }
}

.finish-details dt{white-space:nowrap}