/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/adult-test.css */
.adult-test {
  padding: 24px;
  grid-column: 2;
  min-width: 0;
}
.adult-test fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.adult-test label {
  padding: 16px;
  border: 1px solid #9a86b5;
  border-radius: 12px;
  display: flex;
  gap: 10px;
}
.adult-test button {
  min-height: 44px;
  margin: 6px;
  white-space: normal;
}
.adult-review {
  padding: 16px;
  border: 2px solid #604486;
  border-radius: 12px;
}
.adult-test ol {
  padding-left: 24px;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .adult-test {
    grid-column: 1;
    padding: 16px;
  }
}
.adult-quantity {
  max-width: 380px;
}
.adult-quantity svg {
  max-width: 100%;
  height: auto;
}
.adult-quantity .quantity-wholes {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.adult-quantity .quantity-whole,
.adult-quantity .quantity-partial {
  width: 45px;
}
.adult-quantity figcaption span {
  display: block;
  font-size: .875rem;
}
body[data-adult-student=true] .original-profile-cover {
  display: none;
}
.adult-quantity .quantity-key {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body[data-adult-student=true] .original-profile-cover {
  display: block;
}
body[data-adult-student=true] .adult-test {
  grid-column: 2/-1;
}
body[data-profile-route=profile] #adult-test,
body[data-profile-route=settings] #adult-test {
  display: none !important;
}
.student-activity {
  padding: 24px;
  border-radius: 22px;
  background: #eeead9;
  border: 1px solid #d4cfb8;
}
.student-eyebrow {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #62458c;
  font-size: .85rem;
}
.student-progress {
  font-weight: 700;
}
.student-question {
  padding: 20px 28px;
  border-radius: 24px;
  background: white;
  border: 1px solid #e1d8ec;
  box-shadow: 0 8px 24px #38214f0b;
}
.student-question h3 {
  font-size: 1.5rem;
  margin: 6px 0 16px;
}
.student-question-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.student-number {
  font-size: 1.7rem;
  font-weight: 800;
  margin: 0 0 10px;
}
.student-visual {
  padding: 18px;
  background: #f8f5fd;
  border-radius: 18px;
}
.student-question .adult-quantity {
  max-width: 100%;
}
.student-question .adult-quantity figure {
  margin: 0;
}
.student-question .adult-quantity svg {
  display: block;
  max-height: 140px;
  width: 100%;
}
.student-question .adult-quantity figcaption {
  font-size: .85rem;
}
.student-question label {
  font-size: 1.5rem;
  font-weight: 700;
  background: #faf8ff;
  cursor: pointer;
}
.student-question label:has(input:checked) {
  border: 3px solid #7552bf;
  background: #eee5ff;
}
.student-question fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
}
.student-question legend {
  font-weight: 700;
  margin-bottom: 10px;
}
.student-question input {
  width: 20px;
  height: 20px;
  accent-color: #7552bf;
}
.student-hint,
.student-policy {
  font-size: .875rem;
  line-height: 1.4;
}
.student-feedback {
  padding: 32px;
  background: #f0eadf;
  border-radius: 20px;
}
body[data-student-work=true] .pilot-strip,
body[data-student-work=true] .spark-bar,
body[data-student-work=true] #workspace-rail,
body[data-student-work=true] #original-support-rail,
body[data-student-work=true] .site-footer,
body[data-student-work=true] #account-details,
body[data-student-work=true] #privacy-disclosure,
body[data-student-work=true] .shell > p,
body[data-student-work=true] #workspace {
  display: none !important;
}
body[data-student-work=true] .shell {
  width: calc(100% - 32px);
  max-width: 1320px;
  padding: 12px 0;
  margin: auto;
}
body[data-student-work=true] .access-layout {
  display: block;
}
body[data-student-work=true] #adult-test {
  width: 100%;
  padding: 12px 20px;
  border: 0;
  background: #f6f2fb;
  box-shadow: none;
}
body[data-student-work=true] #adult-test > h2 {
  font-size: 1.5rem;
  margin: 0;
  display: inline-block;
}
body[data-student-work=true] #adult-test > button {
  float: right;
}
body[data-student-work=true] .student-status {
  font-size: .875rem;
  margin: 6px 0;
}
body[data-student-work=true] .student-progress {
  margin: 6px 0 12px;
}
@media (max-width: 760px) {
  .student-question-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .student-question {
    padding: 16px;
  }
  .student-question label {
    padding: 12px;
    font-size: 1.25rem;
  }
  .student-number {
    font-size: 1.5rem;
  }
  .student-visual {
    padding: 12px;
  }
  body[data-student-work=true] #adult-test {
    padding: 10px;
  }
  body[data-student-work=true] .shell {
    width: 100%;
  }
  .student-question .adult-quantity svg {
    max-height: 120px;
  }
}
body[data-connected=true][data-student-work=true] .access-layout {
  display: block !important;
}
body[data-student-work=true] .spark-app-bar,
body[data-student-work=true] .presentation-tools {
  display: none !important;
}
body[data-student-work=true] .access-primary {
  display: block !important;
}
body[data-adult-student=true] #saved-profile-art {
  display: block;
}
body[data-adult-student=true] .original-profile-body h2 {
  display: block;
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/profile.css */
.profile-account {
  position: relative;
  margin-left: auto;
  min-width: 0;
}
.profile-account > button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbb8e0;
  border-radius: 28px;
  padding: 5px 12px 5px 5px;
  background: #ffffff12;
  color: white;
  font: inherit;
  min-height: 44px;
  max-width: 230px;
  cursor: pointer;
}
#profile-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
}
.profile-circle {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #e7d9f6;
  color: #513479;
  font-weight: 700;
}
.profile-circle img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
#profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  background: #fff;
  border: 1px solid #d9cce5;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px #32204b33;
  min-width: 180px;
}
#profile-menu button {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: left;
  border: 0;
  background: white;
  color: #543c70;
  font: inherit;
  padding: 10px;
  border-radius: 8px;
  margin: 0;
}
#profile-menu button:hover {
  background: #f0e9f6;
}
#profile-menu button:disabled {
  color: #827b89;
  cursor: not-allowed;
}
body[data-profile-account=true] #session-controls {
  display: none;
}
button:focus-visible {
  outline: 3px solid #bd8b32;
  outline-offset: 3px;
}
#profile-screen {
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
}
.profile-panel {
  padding: 24px;
}
.profile-panel h2 {
  margin: 20px 0;
  color: #4e326d;
}
.profile-panel p {
  font-size: .9rem;
  line-height: 1.6;
}
.profile-panel label {
  display: block;
  margin: 12px 0 6px;
}
.profile-panel input[type=text],
#profile-name {
  width: 100%;
  padding: 10px;
  min-height: 44px;
  font: inherit;
  border: 1px solid #b8a3cb;
  border-radius: 8px;
}
.profile-panel fieldset {
  border: 1px solid #ded1e9;
  border-radius: 12px;
  margin: 18px 0;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profile-panel fieldset label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
}
.profile-panel fieldset img {
  width: 32px;
  height: 40px;
  object-fit: contain;
}
.profile-panel dd {
  margin: 5px 0 16px;
  overflow-wrap: anywhere;
}
.profile-panel dt {
  font-size: .8rem;
  color: #776484;
}
.profile-preview-note {
  background: #f6efcd;
  padding: 10px;
  border-radius: 8px;
}
@media (max-width: 550px) {
  .profile-account > button {
    max-width: 180px;
  }
  .profile-panel {
    padding: 18px;
  }
  .profile-panel fieldset {
    display: block;
  }
  .profile-panel button {
    min-height: 44px;
  }
  .spark-bar-inner {
    gap: 12px;
  }
  .profile-panel dd {
    font-size: .875rem;
  }
}
.zappy-composite {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}
.zappy-composite .zappy-base,
.zappy-composite .zappy-shoes {
  position: absolute;
  left: 20%;
  top: 9%;
  width: 60%;
  height: 87%;
  object-fit: contain;
  z-index: 2;
}
.zappy-shoes {
  clip-path: inset(77% 0 0);
}
.zappy-composite[data-color=rose] .zappy-base {
  filter: hue-rotate(290deg);
}
.zappy-composite[data-color=mint] .zappy-base {
  filter: hue-rotate(65deg);
}
.zappy-composite[data-color=violet] .zappy-base {
  filter: hue-rotate(220deg);
}
#profile-zappy-preview {
  width: 180px;
  height: 180px;
  margin: 12px auto;
}
.profile-panel fieldset {
  display: block;
}
.profile-panel select {
  display: block;
  width: 100%;
  min-height: 44px;
  font: inherit;
  padding: 8px;
  border: 1px solid #b8a3cb;
  border-radius: 8px;
}
.zappy-hat {
  position: absolute;
  z-index: 3;
  left: 34%;
  top: 8%;
  width: 38%;
  height: 14%;
  background: #4c307c;
  border-radius: 50% 50% 15% 15%;
  color: #fff;
  font: 700 9px/2.6 system-ui;
  text-align: center;
  box-shadow: 0 4px 0 #31204f;
}
.zappy-tie {
  position: absolute;
  z-index: 3;
  top: 55%;
  left: 46%;
  height: 23%;
  width: 9%;
  background: #d94355;
  clip-path: polygon(20% 0, 80% 0, 65% 20%, 100% 80%, 50% 100%, 0 80%, 35% 20%);
}
.zappy-bow {
  position: absolute;
  z-index: 3;
  top: 45%;
  left: 37%;
  width: 28%;
  height: 12%;
  background: #ec6a9d;
  clip-path: polygon(0 0, 50% 30%, 100% 0, 100% 100%, 50% 70%, 0 100%);
  font-size: 0;
}
.profile-circle .zappy-hat {
  font-size: 2px;
}
.zappy-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.zappy-composite[data-background=classroom] .zappy-scene {
  background: linear-gradient(#f0e6cf 70%, #b9946c 70%);
}
.zappy-composite[data-background=classroom] .zappy-scene:before {
  content: "";
  position: absolute;
  left: 15%;
  top: 22%;
  width: 70%;
  height: 38%;
  background: #3e715c;
  border: 4px solid #b68558;
}
.zappy-composite[data-background=hallway] .zappy-scene {
  background:
    repeating-linear-gradient(
      90deg,
      #a8b8dd 0 18%,
      #7186b7 18% 20%);
  border-bottom: 45px solid #d9c6b0;
}
.zappy-composite[data-background=lunchroom] .zappy-scene {
  background: linear-gradient(#fff3da 65%, #a5c7bf 65%);
}
.zappy-composite[data-background=lunchroom] .zappy-scene:before,
.zappy-composite[data-background=lunchroom] .zappy-scene:after {
  content: "";
  position: absolute;
  top: 58%;
  left: 4%;
  width: 40%;
  height: 10%;
  background: #a66b46;
  box-shadow: 0 20px 0 #d29459;
}
.zappy-composite[data-background=lunchroom] .zappy-scene:after {
  left: 56%;
}
.zappy-composite[data-background=park] .zappy-scene {
  background:
    radial-gradient(
      circle at 82% 20%,
      #ffdd70 0 10%,
      transparent 11%),
    linear-gradient(#b9dff8 65%, #83ba79 65%);
}
.zappy-composite[data-background=park] .zappy-scene:before {
  content: "";
  position: absolute;
  left: 3%;
  top: 35%;
  width: 30%;
  height: 32%;
  border-radius: 50%;
  background: #4c985c;
  box-shadow: 0 35px 0 -16px #865e42;
}
.zappy-composite[data-background=lavender] {
  background: #e7d9f6;
}
.zappy-composite[data-background=cream] {
  background: #fff3ce;
}
.zappy-composite[data-background=mint] {
  background: #dcefdc;
}
.zappy-composite[data-background=sky] {
  background: #dceaf9;
}
body[data-profile-route] main.shell,
body[data-profile-route] body > footer {
  display: none;
}
#profile-screen {
  max-width: 1180px;
  max-height: none;
  overflow: visible;
  margin: 24px auto;
  background: #fffdf7;
  border: 1px solid #ded1e9;
  border-radius: 20px;
}
#profile-screen[hidden] {
  display: none;
}
.profile-customizer {
  display: grid;
  grid-template-columns: 155px minmax(240px, 1fr) minmax(230px, 1fr);
  gap: 24px;
  align-items: start;
  margin: 24px 0;
}
.profile-categories {
  display: grid;
  gap: 8px;
  background: #ece3f8;
  border-radius: 16px;
  padding: 12px;
}
.profile-categories button {
  border: 0;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  font: inherit;
  background: transparent;
  color: #4e326d;
  min-height: 44px;
}
.profile-categories button[aria-current=true] {
  background: #54367e;
  color: white;
}
.profile-stage {
  min-width: 0;
  background: #efe7f6;
  border-radius: 18px;
  padding: 16px;
}
.profile-options {
  min-width: 0;
}
.profile-options section[hidden] {
  display: none;
}
.profile-options select {
  display: block;
  width: 100%;
  min-height: 44px;
  font: inherit;
}
.profile-asset-note {
  background: #fff3d1;
  border-radius: 12px;
  padding: 12px;
}
.profile-panel #profile-zappy-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 12px;
}
.profile-panel .zappy-composite {
  border-radius: 12px;
}
.original-profile-cover {
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
}
.original-profile-cover #saved-profile-art {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.profile-panel .zappy-hat {
  font-size: clamp(8px, 1.3vw, 15px);
}
#profile-form > label {
  max-width: 500px;
}
#profile-name {
  max-width: 500px;
}
@media (max-width: 850px) {
  .profile-customizer {
    grid-template-columns: 130px minmax(0, 1fr);
  }
  .profile-options {
    grid-column: 2;
  }
  .profile-categories {
    grid-row: 1/3;
  }
}
@media (max-width: 550px) {
  #profile-screen {
    margin: 12px;
  }
  .profile-panel {
    padding: 16px;
  }
  .profile-customizer {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .profile-categories {
    display: flex;
    overflow: auto;
    max-width: 100%;
    width: 100%;
    padding: 8px;
  }
  .profile-categories button {
    flex: none;
  }
  .profile-stage,
  .profile-options {
    width: 100%;
  }
  .profile-panel #profile-zappy-preview {
    max-width: 320px;
    margin: auto;
  }
  .profile-panel .zappy-hat {
    font-size: 12px;
  }
  .original-profile-cover {
    display: block !important;
  }
}
.zappy-composite .zappy-generated-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.zappy-composite[data-art=true] .zappy-scene {
  display: none;
}
.original-profile-cover:before,
.original-profile-cover:after {
  display: none;
}
.original-profile-cover {
  padding: 0 !important;
}
.zappy-composite .zappy-base,
.zappy-composite .zappy-shoes {
  z-index: 2;
}
@media (max-width: 760px) {
  body[data-connected=true] #workspace-rail {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }
  #workspace-rail .original-profile {
    width: 100%;
    grid-column: 1/-1;
  }
  #workspace-rail .original-profile-body h2 {
    display: block;
    width: 100%;
    margin-bottom: 6px;
  }
  #workspace-rail .original-profile-cover {
    display: block !important;
    width: 100%;
    aspect-ratio: 1;
  }
  #workspace-rail nav {
    grid-column: 1/-1;
  }
}
.zappy-composite .zappy-body-canvas,
.zappy-composite .zappy-wardrobe {
  position: absolute;
  left: 20%;
  top: 9%;
  width: 60%;
  height: 87%;
  object-fit: contain;
  z-index: 2;
}
.zappy-composite .zappy-wardrobe {
  z-index: 3;
  pointer-events: none;
}
.zappy-composite[data-selective=true] .zappy-base {
  filter: none;
}
.zappy-composite .zappy-hat,
.zappy-composite .zappy-tie,
.zappy-composite .zappy-bow {
  z-index: 4;
}
.zappy-swatches {
  display: grid;
  grid-template-columns: repeat(6, 44px);
  gap: 10px;
  max-width: 100%;
}
.zappy-swatches button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #62596b;
  border-radius: 12px;
  padding: 0;
  font: 900 23px system-ui;
  cursor: pointer;
  color: white;
  text-shadow: 0 1px 3px black, 0 -1px 3px black;
}
.zappy-swatches button[aria-pressed=true] {
  outline: 3px solid #503577;
  outline-offset: 3px;
}
.zappy-swatches button:focus-visible {
  outline: 3px dashed #503577;
  outline-offset: 4px;
}
.zappy-swatches button:disabled {
  cursor: not-allowed;
  opacity: .65;
}
#profile-current-color {
  display: inline-block;
  width: 64px;
  height: 64px;
  border: 1px solid #62596b;
  border-radius: 16px;
  vertical-align: middle;
  margin: 0 12px 12px 0;
}
#profile-current-color-name {
  font-size: .9rem;
}
@media (max-width: 1100px) and (min-width: 851px) {
  .zappy-swatches {
    grid-template-columns: repeat(5, 44px);
  }
}
@media (max-width: 380px) {
  .zappy-swatches {
    grid-template-columns: repeat(5, 44px);
  }
}
.zappy-swatches .swatch-FFD51A {
  background: #FFD51A;
}
.zappy-swatches .swatch-FFF4CF {
  background: #FFF4CF;
}
.zappy-swatches .swatch-F6A623 {
  background: #F6A623;
}
.zappy-swatches .swatch-FF7F50 {
  background: #FF7F50;
}
.zappy-swatches .swatch-E64B53 {
  background: #E64B53;
}
.zappy-swatches .swatch-FF92B2 {
  background: #FF92B2;
}
.zappy-swatches .swatch-C65390 {
  background: #C65390;
}
.zappy-swatches .swatch-9B68D5 {
  background: #9B68D5;
}
.zappy-swatches .swatch-7047B0 {
  background: #7047B0;
}
.zappy-swatches .swatch-546CDD {
  background: #546CDD;
}
.zappy-swatches .swatch-3C91DF {
  background: #3C91DF;
}
.zappy-swatches .swatch-64C9ED {
  background: #64C9ED;
}
.zappy-swatches .swatch-31B6BD {
  background: #31B6BD;
}
.zappy-swatches .swatch-318F88 {
  background: #318F88;
}
.zappy-swatches .swatch-65B886 {
  background: #65B886;
}
.zappy-swatches .swatch-A5D877 {
  background: #A5D877;
}
.zappy-swatches .swatch-C9DD76 {
  background: #C9DD76;
}
.zappy-swatches .swatch-B79064 {
  background: #B79064;
}
.zappy-swatches .swatch-8C6653 {
  background: #8C6653;
}
.zappy-swatches .swatch-E4C5A4 {
  background: #E4C5A4;
}
.zappy-swatches .swatch-FFFFFF {
  background: #FFFFFF;
}
.zappy-swatches .swatch-D8DFEA {
  background: #D8DFEA;
}
.zappy-swatches .swatch-657387 {
  background: #657387;
}
.zappy-swatches .swatch-242B36 {
  background: #242B36;
}
.wardrobe-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.wardrobe-tabs button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #78619c;
  border-radius: 10px;
  background: #fffaf2;
  color: #352747;
}
.wardrobe-tabs [aria-selected=true] {
  background: #54367e;
  color: white;
}
.wardrobe-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.wardrobe-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 104px;
  border: 2px solid #c9b9da;
  border-radius: 14px;
  background: #fffaf2;
  color: #352747;
  padding: 10px;
  font: inherit;
}
.wardrobe-item svg {
  width: 58px;
  height: 58px;
}
.wardrobe-item[aria-pressed=true] {
  border-color: #54367e;
  box-shadow: inset 0 0 0 2px #54367e;
}
.wardrobe-item[aria-pressed=true] span:before {
  content: "\2713  ";
  font-weight: 700;
}
.wardrobe-item:focus-visible,
.wardrobe-tabs button:focus-visible {
  outline: 3px dashed #54367e;
  outline-offset: 3px;
}
.wardrobe-colors[hidden],
.wardrobe-items[hidden] {
  display: none;
}
.wardrobe-colors .zappy-swatches button:disabled {
  opacity: .35;
  cursor: not-allowed;
}
@media (max-width: 550px) {
  .wardrobe-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wardrobe-item {
    font-size: .875rem;
  }
}
.profile-options [hidden] {
  display: none !important;
}
svg.zappy-hat,
svg.zappy-tie,
svg.zappy-bow {
  background: none;
  clip-path: none;
  box-shadow: none;
}
svg.zappy-hat[hidden],
svg.zappy-tie[hidden],
svg.zappy-bow[hidden] {
  display: none;
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/classes-workspace.css */
.classes-page {
  min-width: 0;
}
.classes-page-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.classes-page-heading h2 {
  font-size: 1.65rem;
  line-height: 1.2;
  color: #2d3e55;
  margin: 0;
}
.classes-page-heading .eyebrow {
  font-size: .75rem;
  color: #746383;
  margin: 0 0 6px;
}
.classes-page .pill {
  font-size: .75rem;
}
.classes-page #owner-teacher-panel {
  border: 0;
  background: none;
  box-shadow: none;
}
.classes-page #owner-teacher-panel > .panel-heading {
  display: none;
}
.classes-page #owner-teacher-panel > .panel-body {
  padding: 0;
}
.classes-page #saved-classes-title {
  font-size: 1.15rem;
}
.class-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.class-card-grid #saved-class-list,
.class-card-grid #preview-class-list {
  display: contents;
}
.class-card-grid .saved-class-card {
  margin: 0;
  padding: 20px;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid #ded6e7;
  background: #fff;
  box-shadow: 0 4px 0 #d8d0df17;
}
.class-card-grid h3,
.class-card-grid h4 {
  font-size: 1.15rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: #443454;
}
.add-class-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 24px;
  border: 2px dashed #b9a3cf;
  border-radius: 16px;
  background: #efe8f7;
  color: #5e3e7e;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.add-class-tile > span {
  display: grid;
  place-items: center;
  background: #e1d4ef;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 2rem;
}
.add-class-tile strong {
  font-size: 1.15rem;
}
.add-class-tile small {
  font-size: .8rem;
  line-height: 1.6;
}
.add-class-tile:hover:not(:disabled) {
  background: #e8ddf3;
}
.add-class-tile:disabled {
  background: #efedf1;
  border-color: #ccc5d3;
  color: #79707f;
  cursor: not-allowed;
}
.class-code-placeholder {
  border: 1px solid #e1d4ae;
  border-radius: 10px;
  background: #faf5df;
  padding: 12px;
  margin: 15px 0;
}
.class-code-placeholder strong {
  font-size: .8rem;
  color: #756039;
}
.class-code-placeholder p {
  font-size: .8rem;
  line-height: 1.6;
  color: #756340;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.class-code-placeholder .mono {
  font-size: .95rem;
  font-weight: 700;
}
.class-create-editor {
  background: #fff;
  border: 1px solid #d5c4e3;
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
}
.class-create-editor .class-create-form {
  margin: 0;
}
.class-create-editor .secondary-button {
  margin-top: 8px;
}
.classes-preview-notice {
  padding: 16px 18px;
  background: #f3eedb;
  border: 1px solid #ded3af;
  border-radius: 13px;
  color: #675838;
  font-size: .9rem;
}
.classes-preview-notice p {
  font-size: .875rem;
  line-height: 1.65;
  margin: 7px 0 0;
}
.preview-class-form {
  padding: 24px;
  max-width: 520px;
}
.preview-class-form h2 {
  font-size: 1.4rem;
  color: #49335f;
}
.preview-class-form label {
  display: block;
  margin: 15px 0 6px;
  font-size: .875rem;
  font-weight: 700;
}
.preview-class-form input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid #bca8ce;
  border-radius: 8px;
}
.preview-class-form .small-note {
  line-height: 1.65;
}
.classes-nav-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 11px 10px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: #33435a;
  font: 700 .875rem/1.5 inherit;
  font-family: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}
.classes-nav-button:before {
  content: "\25a6";
  display: grid;
  place-items: center;
  flex: none;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: #e7dfef;
  color: #795899;
  font-size: 1rem;
  margin-right: 10px;
}
.classes-nav-button[aria-current=page] {
  background: #e7ddf1;
}
.classes-nav-button:disabled {
  color: #81758c;
  cursor: not-allowed;
  opacity: .75;
}
.classes-nav-button:focus-visible,
.add-class-tile:focus-visible,
.entry-role-back:focus-visible {
  outline: 3px solid #9e6e22;
  outline-offset: 3px;
}
body[data-classes-view=true] #workspace {
  grid-column: 2;
  grid-row: 1;
}
body[data-classes-view=true] .original-support-rail {
  grid-row: 1/span 3;
}
.entry-role-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.entry-role-buttons button {
  min-height: 48px;
  justify-content: center;
  font-size: .95rem;
}
.entry-role-back {
  min-height: 44px;
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 8px 0;
  color: #694887;
  font: 700 .875rem/1.5 inherit;
  font-family: inherit;
  cursor: pointer;
}
.entry-role-back:disabled {
  color: #8d8494;
  cursor: not-allowed;
}
#student-entry h3 {
  font-size: 1.15rem;
  color: #4b375e;
  margin: 0 0 10px;
}
#student-entry p {
  font-size: .875rem;
  line-height: 1.65;
  color: #6a5978;
}
#preview-class-error {
  font-size: .875rem;
  color: #8b3d35;
}
@media (max-width: 1100px) {
  .class-card-grid {
    grid-template-columns: 1fr;
  }
  .add-class-tile {
    min-height: 170px;
  }
}
@media (max-width: 760px) {
  .classes-page-heading {
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .classes-page-heading h2 {
    font-size: 1.5rem;
  }
  .class-card-grid {
    gap: 14px;
  }
  .classes-nav-button {
    width: auto;
    padding: 7px 9px;
    min-height: 44px;
  }
  .classes-nav-button:before {
    display: none;
  }
  .classes-page #saved-classes > .small-note {
    font-size: .875rem !important;
  }
  .classes-page .saved-class-heading {
    gap: 10px;
  }
  .preview-class-form {
    padding: 20px;
  }
  .class-card-grid .saved-class-card {
    padding: 18px;
  }
  .entry-role-buttons button {
    font-size: .875rem;
  }
  .class-create-editor {
    padding: 16px;
  }
}
.saved-class-card {
  min-height: 160px !important;
  align-self: start;
}
.class-add-tile {
  min-height: 160px !important;
  align-self: start;
}
#class-detail {
  padding: 1rem;
  background: white;
  border-radius: 16px;
}
#class-detail[hidden] {
  display: none;
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/practice-view.css */
.teacher-practice-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  height: min(900px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #d9cee5;
  border-radius: 18px;
  overflow: auto;
  background: #f7f6f1;
  color: #27364d;
}
.teacher-practice-dialog::backdrop {
  background: #241a3dcc;
}
.practice-dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  background: #ece5f3;
  border-bottom: 1px solid #d9cee5;
  position: sticky;
  top: 0;
  z-index: 5;
}
.practice-dialog-bar h2 {
  font-size: 1.15rem;
  margin: 0 0 3px;
}
.practice-dialog-bar p {
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
  color: #645371;
}
.practice-dialog-bar button {
  flex: none;
  min-height: 44px;
}
.teacher-practice-host {
  min-width: 0;
  display: block;
}
.practice-dialog-bar button:focus-visible {
  outline: 3px solid #9e6e22;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .teacher-practice-dialog {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }
  .practice-dialog-bar {
    padding: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .practice-dialog-bar button {
    width: 100%;
    font-size: .875rem;
  }
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/class-styles.css */
.saved-classes {
  border: 2px solid #d9c9ec;
  border-radius: 20px;
  background: #faf8fe;
  padding: 24px;
  margin-bottom: 32px;
}
.saved-class-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.saved-class-heading h3 {
  font-size: 1.55rem;
  margin: 4px 0 12px;
}
.class-create-form {
  max-width: 640px;
  margin: 22px 0;
  padding: 20px;
  background: white;
  border-radius: 16px;
  border: 1px solid #ded5e9;
}
.class-create-form label,
.class-rename-label {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: #392353;
}
.class-create-form input,
.class-rename-label input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid #8c7b9d;
  border-radius: 9px;
  color: #2a1b3b;
  background: #fff;
  font: inherit;
  font-size: 1rem;
}
.class-create-form input:focus-visible,
.class-rename-label input:focus-visible {
  outline: 3px solid #6952a1;
  outline-offset: 2px;
}
.saved-class-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0;
}
.saved-class-card {
  border: 1px solid #d8cde6;
  border-radius: 16px;
  background: white;
  padding: 20px;
  min-width: 0;
}
.saved-class-card h4 {
  font-size: 1.25rem;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
.saved-class-card .mono {
  overflow-wrap: anywhere;
  font-size: .8rem;
}
.class-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.class-card-actions button {
  min-height: 44px;
}
.class-rename-label {
  margin-top: 18px;
}
.class-review-title {
  font-size: 1.25rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
#class-review-dialog {
  border: 0;
  border-radius: 20px;
  width: min(540px, calc(100% - 32px));
  padding: 24px;
  box-sizing: border-box;
  color: #2a1b3b;
  max-height: 85dvh;
  overflow: auto;
}
#class-review-dialog::backdrop {
  background: #1c133866;
}
#class-review-id {
  overflow-wrap: anywhere;
}
#saved-class-status,
#class-review-message {
  font-size: .95rem;
  line-height: 1.6;
}
.saved-classes .small-note {
  font-size: .8rem;
  line-height: 1.6;
  color: #65536f;
}
@media (max-width: 700px) {
  .saved-classes {
    padding: 16px;
  }
  .saved-class-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .saved-class-list {
    grid-template-columns: 1fr;
  }
  .class-create-form {
    padding: 16px;
  }
  .class-card-actions button {
    flex: 1 1 140px;
  }
}
.class-control-menu {
  margin: 20px 0 8px;
  padding: 20px;
  max-width: 1240px;
  border: 3px solid #b9a8d4;
  border-radius: 28px;
  background: #fffaf0;
  box-shadow: 0 7px 0 #d8cbe7;
  min-width: 0;
  color: #29344c;
  overflow-wrap: anywhere;
}
.class-control-menu * {
  box-sizing: border-box;
}
.class-control-back {
  min-height: 44px;
  margin-bottom: 10px;
}
.class-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.class-control-kicker {
  font-size: .7rem;
  font-weight: 850;
  color: #624282;
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.class-control-header h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 0;
  color: #422b74;
}
.class-control-header .pill {
  flex-shrink: 0;
  background: #eee6fa;
  color: #493267;
}
.class-control-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.class-control-tabs .class-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 60px;
  min-width: 0;
  border: 2px solid #cbbddd;
  border-radius: 16px;
  background: #e8f5ff;
  color: #243d59;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.25;
  font-weight: 750;
  box-shadow: 0 3px 0 #d3e2ec;
}
.class-control-tabs .class-tool.current {
  background: #624282;
  color: #fff;
  border-color: #422b74;
  box-shadow: 0 4px 0 #422b74;
}
.class-control-tabs .class-tool:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: #f2edf7;
  border-color: #d7cfe1;
  color: #70647b;
  box-shadow: none;
}
.class-control-tabs .class-tool small {
  font-size: .65rem;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}
.class-control-tabs a:hover {
  filter: brightness(1.06);
}
.class-control-menu a:focus-visible,
.class-control-menu button:focus-visible,
.class-control-menu summary:focus-visible {
  outline: 3px solid #1677a5;
  outline-offset: 4px;
}
.class-control-notice {
  font-size: .875rem;
  line-height: 1.5;
  margin: 0 0 16px;
  color: #65536f;
}
.class-control-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.class-settings-card,
.class-availability-card {
  background: #fff;
  border: 2px solid #ded3eb;
  border-radius: 20px;
  padding: 20px;
  min-width: 0;
}
.class-settings-card h4,
.class-availability-card h4 {
  font-size: 1.15rem;
  margin: 0 0 10px;
  color: #422b74;
}
.class-settings-card .class-rename-label {
  margin-top: 8px;
}
.class-settings-card .class-card-actions {
  margin-top: 12px;
}
.class-card-actions button {
  min-height: 46px;
  border-radius: 13px;
}
.class-availability-card p {
  font-size: .875rem;
  line-height: 1.5;
  margin: 0 0 14px;
  color: #65536f;
}
.class-control-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.class-control-status > div {
  padding: 10px;
  border-radius: 12px;
  background: #f5f0fb;
  border-top: 4px solid #9a7cb9;
  min-width: 0;
}
.class-control-status > div:nth-child(2) {
  background: #e8f5ff;
  border-color: #83b4ce;
}
.class-control-status > div:nth-child(3) {
  background: #fff4c9;
  border-color: #e4c65b;
}
.class-control-status dt {
  font-size: .7rem;
  line-height: 1.4;
  color: #675675;
}
.class-control-status dd {
  font-size: .85rem;
  line-height: 1.35;
  font-weight: 750;
  margin: 7px 0 0;
}
.class-control-metadata {
  margin-top: 16px;
  border: 1px solid #e1d8eb;
  border-radius: 14px;
  padding: 10px 14px;
  background: #faf8fd;
}
.class-control-metadata summary {
  font-size: .875rem;
  font-weight: 700;
  min-height: 32px;
  cursor: pointer;
}
.class-control-metadata .class-code-placeholder {
  margin-top: 12px;
}
.class-control-menu .class-rename-label input {
  min-height: 48px;
  max-width: 100%;
}
@media (max-width: 900px) {
  .class-control-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .class-control-body {
    grid-template-columns: 1fr;
  }
  .class-control-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 550px) {
  .class-control-menu {
    padding: 12px;
    border-width: 2px;
    border-radius: 22px;
  }
  .class-control-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }
  .class-control-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .class-control-tabs .class-tool {
    min-height: 58px;
    font-size: .875rem;
    padding: 9px;
  }
  .class-settings-card,
  .class-availability-card {
    padding: 15px;
    border-radius: 17px;
  }
  .class-control-status {
    grid-template-columns: 1fr;
  }
  .class-control-status > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
  }
  .class-control-status dd {
    margin: 0;
  }
  .class-card-actions button {
    flex: 1 1 120px;
  }
  .class-control-body {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .class-control-tabs a:hover {
    filter: none;
  }
}
@media (forced-colors: active) {
  .class-control-menu,
  .class-settings-card,
  .class-availability-card,
  .class-control-tabs .class-tool {
    border-color: CanvasText;
    box-shadow: none;
  }
  .class-control-tabs .current {
    outline: 3px solid Highlight;
  }
  .class-control-tabs .class-tool:disabled {
    color: GrayText;
  }
}
.class-studio-host {
  min-width: 0;
  border: 2px solid #ded3eb;
  border-radius: 20px;
  background: #fff;
}
.class-control-body[hidden],
.class-studio-host[hidden] {
  display: none;
}
.class-control-tabs button.class-tool:not(:disabled) {
  cursor: pointer;
}
.class-control-tabs button.class-tool:not(:disabled):hover {
  filter: brightness(1.06);
}
@media (max-width: 550px) {
  .class-studio-host {
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .class-control-tabs button.class-tool:not(:disabled):hover {
    filter: none;
  }
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/header.css */
.lt-header {
  --lt-navy:#102d49;
  --lt-sky:#e7f6ff;
  --lt-blue:#126ba3;
  --lt-gold:#ffda54;
  --lt-ink:#173b5a;
  font-family:
    ui-rounded,
    "Trebuchet MS",
    system-ui,
    sans-serif;
  color: var(--lt-ink);
  isolation: isolate;
}
.lt-header * {
  box-sizing: border-box;
}
.lt-header__wrap {
  width: min(1200px, calc(100% - 64px));
  margin-inline: auto;
}
.lt-header__top {
  background: var(--lt-navy);
  border-top: 4px solid var(--lt-gold);
}
.lt-header__top-inner {
  min-height: 102px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding-block: 17px;
}
.lt-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
  color: #fff;
}
.lt-header__brand img {
  flex: none;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #f4d67a80;
  box-shadow: 0 0 0 5px #ffffff09;
}
.lt-header__wordmark {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.lt-header__wordmark small {
  display: block;
  color: #e6d599;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.5;
  margin-top: 7px;
}
.lt-header__account {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
.lt-header__account a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 45px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.lt-header__signup {
  background: var(--lt-gold);
  color: #223b51;
  box-shadow: 0 3px 0 #bd9423;
}
.lt-header__signup:hover {
  background: #ffe780;
}
.lt-header__signin {
  background: #ffffff09;
  border-color: #b6d0e452 !important;
  color: white;
}
.lt-header__signin:hover {
  background: #ffffff16;
  border-color: #d3e6f1 !important;
}
.lt-header__signin svg {
  flex: none;
}
.lt-header__nav-row {
  background: var(--lt-sky);
  border-bottom: 1px solid #c9e2f2;
  box-shadow: 0 2px 5px #18375305;
}
.lt-header__nav {
  display: block;
}
.lt-header__nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 17px;
  padding: 0;
  margin: 0;
  min-height: 58px;
}
.lt-header__nav li {
  padding: 0;
  margin: 0;
  min-width: 0;
}
.lt-header__nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  min-height: 58px;
  padding: 14px 15px;
  color: var(--lt-ink);
  text-decoration: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: .9rem;
  line-height: 1.35;
  font-weight: 800;
  white-space: normal;
}
.lt-header__nav a:hover {
  background: #ffffff8c;
  border-bottom-color: #9ec5dd;
}
.lt-header__nav a[aria-current=page] {
  background: #fff;
  border-bottom-color: var(--lt-blue);
  color: #075c92;
}
.lt-header__bolt {
  color: #735cc8;
  font-size: 1.3rem;
  line-height: .8;
}
.lt-header__game-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f7c93e;
  box-shadow: 0 0 0 3px #f9d85b26;
  margin-left: 2px;
}
.lt-header a:focus-visible {
  outline: 3px solid #e49e12;
  outline-offset: 4px;
  border-radius: 4px;
}
.lt-header__top a:focus-visible {
  outline-color: #fff0ad;
}
.lt-header-skip {
  position: fixed;
  top: -120px;
  left: 15px;
  background: #fff;
  color: #102d49;
  padding: 13px 17px;
  z-index: 999;
  font: 700 16px system-ui;
  border: 2px solid #126ba3;
  border-radius: 8px;
}
.lt-header-skip:focus {
  top: 12px;
}
.lt-header__nav a.lt-header__games {
  color: #594387;
}
@media (max-width: 800px) {
  .lt-header__wrap {
    width: calc(100% - 40px);
  }
  .lt-header__nav ul {
    gap: 0 5px;
  }
  .lt-header__nav a {
    padding-inline: 12px;
    font-size: .85rem;
  }
  .lt-header__brand {
    gap: 12px;
  }
  .lt-header__wordmark {
    font-size: 1.5rem;
  }
}
@media (max-width: 580px) {
  .lt-header__wrap {
    width: calc(100% - 32px);
  }
  .lt-header__top-inner {
    min-height: 116px;
    padding-block: 15px;
    gap: 15px;
  }
  .lt-header__brand img {
    width: 48px;
    height: 48px;
  }
  .lt-header__brand {
    gap: 11px;
  }
  .lt-header__wordmark {
    font-size: 1.35rem;
    max-width: 190px;
  }
  .lt-header__wordmark small {
    font-size: .67rem;
    margin-top: 5px;
  }
  .lt-header__account {
    flex-direction: column;
    gap: 7px;
    align-items: stretch;
  }
  .lt-header__account a {
    min-height: 44px;
    font-size: .77rem;
    padding: 9px 12px;
    gap: 7px;
  }
  .lt-header__nav ul {
    justify-content: flex-start;
    gap: 0;
  }
  .lt-header__nav a {
    min-height: 47px;
    font-size: .8rem;
    padding: 11px 10px;
  }
  .lt-header__nav-row {
    padding-block: 3px;
  }
}
@media (max-width: 380px) {
  .lt-header__wordmark {
    font-size: 1.25rem;
    max-width: 118px;
  }
  .lt-header__wordmark small {
    display: none;
  }
  .lt-header__brand img {
    width: 42px;
    height: 42px;
  }
  .lt-header__brand {
    gap: 9px;
  }
  .lt-header__top-inner {
    gap: 10px;
  }
  .lt-header__account a {
    padding-inline: 10px;
  }
  .lt-header__nav a {
    font-size: .77rem;
    padding-inline: 8px;
  }
  .lt-header__bolt {
    font-size: 1.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lt-header * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/styles.css */
:root {
  font-family:
    ui-rounded,
    "Trebuchet MS",
    system-ui,
    sans-serif;
  color: #173b5a;
  background: #f5f8fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
[hidden] {
  display: none !important;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
a {
  color: #126ba3;
}
button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex="-1"]:focus-visible {
  outline: 3px solid #ac6900;
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
.pilot-strip {
  min-height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: #eef3fa;
  font-size: .68rem;
  letter-spacing: .1em;
  font-weight: 800;
  color: #46617a;
  padding: 7px 16px;
}
.pilot-dot {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #7e6cb4;
}
.strip-separator {
  color: #9dafc0;
}
.shell {
  max-width: 1200px;
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 56px 0 30px;
}
.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.eyebrow {
  font-size: .68rem;
  letter-spacing: .14em;
  font-weight: 800;
  color: #627b90;
  margin-bottom: 12px;
}
h1 {
  font-size: clamp(2.5rem, 4.8vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.055em;
  font-weight: 800;
  color: #153651;
  margin-bottom: 21px;
}
h1 em {
  font-style: normal;
  color: #396a88;
}
.lede {
  font-size: 1rem;
  color: #62778b;
  line-height: 1.75;
  margin: 0;
}
.hero-seal {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 25px;
  border: 1px solid #d8e6ed;
  border-radius: 18px;
  background: #edf5f8;
  color: #386580;
  transform: rotate(2deg);
  margin-right: 24px;
}
.hero-seal svg {
  width: 55px;
  height: 55px;
}
.hero-seal span {
  font-size: .83rem;
  line-height: 1.65;
}
.hero-seal strong {
  color: #173b5a;
}
.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 44px;
  align-items: start;
}
.panel {
  background: white;
  border: 1px solid #dbe5ed;
  border-radius: 18px;
  box-shadow: 0 8px 35px #15365107;
  overflow: hidden;
}
.panel-heading {
  padding: 26px 29px;
  display: flex;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid #edf1f5;
}
.panel-heading .eyebrow {
  font-size: .61rem;
  margin-bottom: 6px;
}
.panel h2 {
  font-size: 1.28rem;
  line-height: 1.3;
  letter-spacing: -.025em;
  margin: 0;
}
.step-tag {
  display: grid;
  place-items: center;
  width: 42px;
  height: 46px;
  border-radius: 12px;
  background: #e9f4fc;
  color: #176b9c;
  font-size: 1rem;
  font-weight: 800;
}
.pill {
  margin-left: auto;
  border: 1px solid #d9cfef;
  color: #715697;
  background: #f8f5ff;
  border-radius: 30px;
  padding: 5px 10px;
  font-size: .65rem;
  letter-spacing: .05em;
  font-weight: 800;
}
.panel-body {
  padding: 29px;
}
.intro {
  font-size: .9rem;
  line-height: 1.75;
  color: #546d82;
  margin-bottom: 25px;
}
.intro strong {
  color: #183d5c;
}
.attestation {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid #dce6ee;
  border-radius: 10px;
  background: #f8fafc;
  font-size: .83rem;
  line-height: 1.6;
  color: #3e5e76;
  margin-bottom: 20px;
  cursor: pointer;
}
.attestation input {
  margin: 3px 0 0;
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: #126ba3;
}
.google-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  border: 1px solid #b4c8d9;
  border-radius: 10px;
  color: #173b5a;
  background: #fff;
  font-weight: 800;
  font-size: .91rem;
  box-shadow: 0 3px 0 #d8e4ee;
  transition: background .15s;
}
.google-button:hover:not(:disabled) {
  background: #f0f7fc;
}
.google-button:disabled {
  opacity: .52;
  box-shadow: none;
}
.google-button svg {
  flex: none;
}
.fine-print {
  font-size: .71rem;
  line-height: 1.7;
  color: #697f91;
  margin: 13px 6px 0;
  text-align: center;
}
.auth-status {
  font-size: .81rem;
  line-height: 1.65;
  color: #385c77;
  margin: 17px 0 0;
}
.auth-status:empty {
  display: none;
}
.secondary-button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  border: 1px solid #b8cbd9;
  border-radius: 8px;
  background: #f6f9fc;
  color: #2e536e;
  padding: 10px 15px;
  font-size: .79rem;
  font-weight: 800;
  margin-top: 20px;
}
.secondary-button:hover {
  background: #edf4f8;
}
.shared-device {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid #e9eff4;
  padding-top: 21px;
  margin-top: 25px;
  color: #75889a;
  font-size: .7rem;
  line-height: 1.65;
}
.shared-device svg {
  flex: none;
  margin-top: 2px;
}
.journey {
  padding: 12px 4px 0;
}
.journey h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: -.035em;
  margin-bottom: 27px;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steps li {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 27px;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 6px;
  left: 16px;
  width: 1px;
  background: #d3e1eb;
}
.step-circle {
  width: 34px;
  height: 34px;
  border: 1px solid #cadbe7;
  background: #f3f7fa;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: .77rem;
  color: #6b8498;
  font-weight: 800;
}
.current .step-circle {
  background: #153c5a;
  border-color: #153c5a;
  color: white;
  box-shadow: 0 0 0 5px #e6eff5;
}
.steps h3 {
  font-size: .89rem;
  margin: 2px 0 7px;
}
.steps p {
  font-size: .78rem;
  line-height: 1.7;
  color: #6c8194;
  margin: 0 0 10px;
  max-width: 290px;
}
.stage-label {
  font-size: .59rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 800;
  color: #126b9c;
  background: #e8f4fb;
  border-radius: 5px;
  padding: 4px 7px;
}
.stage-label.muted {
  color: #8394a2;
  background: #eaf0f4;
}
.quiet-note {
  display: flex;
  gap: 13px;
  border-top: 1px solid #dfe8ef;
  padding: 20px 0 0;
  margin-top: 2px;
}
.quiet-note > span {
  color: #aa891e;
  font-size: 1.5rem;
}
.quiet-note p {
  font-size: .78rem;
  line-height: 1.7;
  color: #6a7f91;
  margin: 0;
  max-width: 310px;
}
.privacy-panel {
  margin-top: 42px;
  padding: 28px 31px;
  border: 1px solid #dce6ee;
  border-radius: 15px;
  background: #f0f5f8;
}
.privacy-panel .eyebrow {
  font-size: .62rem;
  margin-bottom: 8px;
}
.privacy-panel h2 {
  font-size: 1.2rem;
  letter-spacing: -.025em;
  margin-bottom: 25px;
}
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.privacy-grid h3 {
  font-size: .8rem;
  margin-bottom: 9px;
}
.privacy-grid p {
  font-size: .74rem;
  line-height: 1.8;
  color: #6a8194;
  margin: 0;
}
.footer-note {
  text-align: center;
  font-size: .65rem;
  color: #8b9baa;
  line-height: 1.8;
  margin: 26px 0 0;
}
.footer-note code {
  font-size: .65rem;
}
.site-footer {
  padding: 24px 32px;
  border-top: 1px solid #dce5ed;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  font-size: .7rem;
  color: #8394a3;
  background: #edf2f6;
}
.site-footer a {
  font-weight: 800;
  color: #3c607c;
  text-decoration: none;
}
.receipt {
  margin-top: 23px;
  border: 1px solid #cee3df;
  background: #f5fbf9;
  border-radius: 12px;
  padding: 21px;
}
.receipt-heading {
  display: flex;
  gap: 10px;
  align-items: center;
}
.receipt-heading > span {
  display: grid;
  place-items: center;
  background: #dff1e9;
  color: #29705a;
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.receipt h3 {
  font-size: 1rem;
  margin: 0;
}
.receipt p {
  font-size: .77rem;
  line-height: 1.7;
  color: #516f71;
  margin: 13px 0;
}
.receipt dl {
  margin: 20px 0;
}
.receipt dl > div {
  border-top: 1px solid #e0ece8;
  padding: 10px 0;
}
.receipt dt {
  font-size: .6rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .07em;
  color: #768d8e;
  margin-bottom: 5px;
}
.receipt dd {
  font-size: .79rem;
  margin: 0;
  color: #315655;
  overflow-wrap: anywhere;
}
.mono {
  font-family: ui-monospace, monospace;
}
.locked-note {
  padding: 12px;
  background: #ecf4f1;
  border-radius: 7px;
  font-size: .72rem;
  line-height: 1.65;
  color: #5d7a75;
}
.locked-note strong {
  display: block;
  color: #345f55;
}
.owner-note {
  border-left: 3px solid #d1ae48;
  padding-left: 11px;
}
.auth-panel[aria-busy=true] .step-tag {
  background: #eeeafa;
  color: #705ca0;
}
@media (max-width: 900px) {
  .portal-grid {
    gap: 28px;
    grid-template-columns: minmax(0, 1.1fr) minmax(265px, .9fr);
  }
  .hero-seal {
    margin: 0;
    padding: 18px;
  }
  .panel-heading,
  .panel-body {
    padding: 23px;
  }
  .hero {
    gap: 20px;
  }
  .privacy-grid {
    gap: 22px;
  }
}
@media (max-width: 700px) {
  .shell {
    width: calc(100% - 36px);
    padding-top: 36px;
  }
  .hero {
    align-items: flex-start;
    margin-bottom: 30px;
  }
  .hero-seal {
    display: none;
  }
  .portal-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero h1 {
    font-size: 2.65rem;
  }
  .lede {
    font-size: .9rem;
  }
  .journey {
    padding: 0 8px;
  }
  .journey h2 br {
    display: none;
  }
  .journey h2 {
    font-size: 1.45rem;
  }
  .steps p {
    max-width: none;
  }
  .quiet-note p {
    max-width: none;
  }
  .privacy-panel {
    padding: 24px;
    margin-top: 28px;
  }
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .privacy-panel h2 {
    font-size: 1.13rem;
  }
  .site-footer {
    flex-direction: column;
    gap: 7px;
  }
  .lt-header__account a {
    font-size: .72rem;
  }
}
@media (max-width: 380px) {
  .pilot-strip {
    font-size: .59rem;
    gap: 7px;
  }
  .panel-heading,
  .panel-body {
    padding: 19px;
  }
  .panel h2 {
    font-size: 1.1rem;
  }
  .panel-heading {
    gap: 11px;
  }
  .step-tag {
    width: 34px;
    flex: none;
  }
  .pill {
    padding: 4px 7px;
  }
  .hero h1 {
    font-size: 2.4rem;
  }
  .lt-header__account a {
    font-size: .67rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.portal-workspace {
  margin-top: 42px;
  scroll-margin-top: 24px;
}
.workspace-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 20px;
}
.workspace-heading h2 {
  font-size: 1.65rem;
  letter-spacing: -.035em;
  margin-bottom: 0;
}
.workspace-heading h3 {
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.workspace-heading .secondary-button {
  margin-top: 0;
  flex: none;
}
.portal-status {
  font-size: .83rem;
  line-height: 1.7;
  color: #57758b;
  background: #edf4f8;
  border: 1px solid #d5e4ee;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 0 0 22px;
}
.membership-panel .panel-heading {
  justify-content: space-between;
}
.membership-panel h3 {
  margin: 0;
}
.membership-panel .panel-body > p {
  font-size: .9rem;
  line-height: 1.75;
}
.primary-button,
.danger-button {
  border: 1px solid #153c5a;
  color: white;
  background: #153c5a;
  border-radius: 8px;
  min-height: 44px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
}
.primary-button:hover {
  background: #215273;
}
.danger-button {
  background: #fff5f3;
  color: #9a3f37;
  border-color: #ddb8b2;
}
.danger-button:hover {
  background: #ffe8e3;
}
.primary-button:disabled,
.danger-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.small-note {
  font-size: .73rem !important;
  line-height: 1.75;
  color: #6b8294;
  margin: 12px 0 0;
}
.owner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.owner-grid .panel-heading {
  padding: 19px 22px;
}
.owner-grid .panel-heading h3 {
  font-size: .92rem;
  margin: 0;
}
.queue-list {
  padding: 0 22px;
}
.queue-empty {
  font-size: .8rem;
  color: #6d8293;
  line-height: 1.6;
  padding: 22px 0;
  margin: 0;
}
.queue-row {
  padding: 17px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid #e7eef3;
}
.queue-row:last-child {
  border-bottom: 0;
}
.queue-row > div {
  min-width: 0;
  flex: 1;
}
.queue-row strong {
  display: block;
  font-size: .8rem;
  overflow-wrap: anywhere;
}
.queue-row small {
  display: block;
  font-size: .62rem;
  color: #7f94a4;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.queue-row .small-note {
  display: block;
  font-size: .65rem !important;
  margin-top: 6px;
}
.queue-row .secondary-button {
  margin: 0;
  flex: none;
  font-size: .7rem;
  padding: 8px 12px;
}
.demo-launch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 25px 28px;
  border: 1px solid #dce5ed;
  border-radius: 14px;
  background: #eff5f8;
  margin-top: 25px;
}
.demo-launch h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.demo-launch p:not(.eyebrow) {
  font-size: .78rem;
  color: #637f92;
  margin: 0;
}
.demo-launch .secondary-button {
  margin-top: 0;
  flex: none;
}
.sample-space {
  margin-top: 20px;
}
.sample-space h3 {
  margin: 0;
}
.sample-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}
.sample-results article {
  display: grid;
  gap: 10px;
  background: #f4f8fb;
  border: 1px solid #dfebf2;
  padding: 20px;
  border-radius: 10px;
}
.sample-results strong {
  font-size: .83rem;
}
.sample-results span {
  font-size: 1.5rem;
  color: #426a83;
  font-weight: 800;
}
.sample-results small {
  font-size: .69rem;
  color: #8193a1;
}
dialog {
  padding: 0;
  border: 1px solid #cadbe7;
  border-radius: 17px;
  max-width: 560px;
  width: calc(100% - 36px);
  color: #173b5a;
  box-shadow: 0 25px 100px #102d4950;
}
dialog::backdrop {
  background: #102d4980;
  backdrop-filter: blur(2px);
}
.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 26px;
  border-bottom: 1px solid #e6edf3;
}
.dialog-heading h2 {
  font-size: 1.4rem;
  margin: 0;
}
.dialog-heading .eyebrow {
  font-size: .6rem;
  margin-bottom: 8px;
}
.dialog-close {
  border: 1px solid #d4e1e9;
  background: #f4f8fb;
  color: #5c778b;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
}
.dialog-body {
  padding: 24px 26px;
}
.review-identity {
  margin: 0;
}
.review-identity > div {
  padding: 10px 0;
  border-bottom: 1px solid #e7eef3;
}
.review-identity dt {
  font-size: .6rem;
  color: #7791a2;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}
.review-identity dd {
  font-size: .85rem;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.review-actions .secondary-button {
  margin: 0;
}
.decision-confirmation {
  background: #f5f8fb;
  border: 1px solid #dce6ee;
  padding: 18px;
  border-radius: 10px;
  margin-top: 22px;
}
.decision-confirmation h3 {
  font-size: .95rem;
  margin: 0 0 12px;
}
.decision-confirmation p {
  font-size: .79rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
  color: #5f7a8e;
  margin: 0;
}
@media (max-width: 800px) {
  .owner-grid {
    grid-template-columns: 1fr;
  }
  .demo-launch {
    align-items: flex-start;
    flex-direction: column;
  }
  .sample-results {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .workspace-heading {
    flex-direction: column;
  }
  .workspace-heading h2 {
    font-size: 1.45rem;
  }
  .sample-results {
    grid-template-columns: 1fr;
  }
  .queue-list {
    padding-inline: 17px;
  }
  .queue-row {
    gap: 10px;
  }
  .dialog-heading,
  .dialog-body {
    padding: 21px;
  }
  .review-actions {
    flex-direction: column;
  }
  .review-actions button {
    width: 100%;
  }
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/spark-theme.css */
:root {
  color: #29344c;
  background: #f6f5f0;
  font-family:
    "Trebuchet MS",
    ui-rounded,
    system-ui,
    sans-serif;
}
body {
  background: #f6f5f0;
}
.pilot-strip {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #efecd9;
  color: #675b3f;
  border-bottom: 1px solid #e0d8ba;
  font-size: .7rem;
}
.pilot-dot {
  background: #8d7641;
}
.lt-header {
  --lt-navy:#422b74;
  --lt-sky:#422b74;
  --lt-blue:#ddebaf;
  --lt-gold:#deefaa;
  --lt-ink:#fff;
}
.lt-header__top {
  border-top: 0;
}
.lt-header__top-inner {
  min-height: 101px;
}
.lt-header__brand img {
  border-radius: 13px;
  border-color: #ffffff35;
  box-shadow: none;
}
.lt-header__wordmark {
  font-size: 2.1rem;
  letter-spacing: -.04em;
}
.lt-header__wordmark small {
  color: #ded3ef;
  font-size: .75rem;
  letter-spacing: .01em;
  max-width: 270px;
}
.lt-header__signup {
  background: #deefaa;
  color: #3a4d32;
  box-shadow: 0 3px 0 #273f1b33;
}
.lt-header__signup:hover {
  background: #eaf7c2;
}
.lt-header__signin {
  color: #fff;
  background: #ffffff08;
  border-color: #b5a0d1 !important;
}
.lt-header__nav-row {
  border-top: 1px solid #ffffff14;
  border-bottom: 0;
  box-shadow: 0 3px 8px #3e2d5610;
}
.lt-header__nav ul {
  gap: 0 8px;
}
.lt-header__nav a {
  color: #e3d9f1;
  font-size: .875rem;
  border-radius: 0;
}
.lt-header__nav a[aria-current=page] {
  background: #ffffff0a;
  border-bottom-color: #deefaa;
  color: #fff;
}
.lt-header__nav a:hover {
  background: #ffffff0d;
  border-bottom-color: #b7a2d0;
}
.lt-header__nav a.lt-header__games {
  color: #e9e0f6;
}
.shell {
  max-width: 1280px;
  padding-top: 45px;
}
.hero {
  margin-bottom: 34px;
  gap: 28px;
}
.hero h1 {
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  color: #29344c;
  letter-spacing: -.055em;
}
.hero h1 em {
  color: #70568d;
}
.hero .eyebrow {
  color: #7b658b;
  font-size: .68rem;
}
.lede {
  color: #756a7e;
  font-size: 1rem;
  line-height: 1.8;
}
.hero-seal {
  background: #e8efcf;
  border-color: #d5dfb6;
  color: #71824e;
  border-radius: 19px;
  box-shadow: 0 4px 16px #6b795308;
}
.hero-seal strong {
  color: #50603c;
}
.hero-seal span {
  font-size: .9rem;
}
.eyebrow {
  color: #73667f;
}
.panel {
  border-color: #e3deea;
  border-radius: 19px;
  box-shadow: 0 6px 20px #3e295908;
}
.panel-heading {
  border-bottom-color: #eeebf2;
}
.panel h2 {
  font-size: 1.35rem;
  color: #49355c;
}
.step-tag {
  background: #eee5f8;
  color: #806399;
}
.pill {
  font-size: .72rem;
  color: #755586;
  background: #f4eef9;
  border-color: #dacbe6;
}
.intro {
  font-size: .96rem;
  color: #70617d;
  line-height: 1.85;
}
.intro strong {
  color: #49345e;
}
.attestation {
  font-size: .9rem;
  color: #62526f;
  background: #f8f5fc;
  border-color: #ddd2e8;
  line-height: 1.75;
  padding: 17px;
}
.attestation input {
  width: 20px;
  height: 20px;
  accent-color: #78529e;
}
.google-button {
  color: #49375d;
  border-color: #c5b2d6;
  border-radius: 10px;
  min-height: 55px;
  font-size: .95rem;
  box-shadow: 0 3px 0 #e5d9ef;
}
.google-button:hover:not(:disabled) {
  background: #f6f0fc;
}
.fine-print {
  font-size: .75rem;
  color: #786787;
  line-height: 1.8;
}
.auth-status {
  font-size: .875rem;
  color: #65536f;
}
.secondary-button {
  color: #655174;
  background: #f7f3fc;
  border-color: #cbb9da;
  font-size: .8125rem;
  min-height: 44px;
}
.secondary-button:hover {
  background: #eee6f6;
}
.shared-device {
  border-top-color: #e7dfee;
  color: #73617f;
  font-size: .75rem;
}
.receipt {
  background: #f3f7ed;
  border-color: #d2dfc2;
  border-radius: 13px;
}
.receipt-heading > span {
  background: #e1eccd;
  color: #5e7945;
}
.receipt h3 {
  color: #536540;
}
.receipt p {
  color: #667454;
  font-size: .8125rem;
}
.receipt dt {
  font-size: .68rem;
  color: #6e7a5d;
}
.receipt dd {
  font-size: .875rem;
  color: #4c5f3d;
}
.receipt dl > div {
  border-top-color: #dfe7d4;
}
.locked-note {
  background: #e9efdf;
  color: #63734e;
  font-size: .8rem;
}
.locked-note strong {
  color: #4a6038;
}
.owner-note {
  border-left-color: #c8ab62;
}
.journey {
  padding-top: 15px;
}
.journey h2 {
  color: #4a385c;
  font-size: 1.85rem;
}
.steps h3 {
  font-size: .95rem;
  color: #5f496f;
}
.steps p {
  font-size: .85rem;
  color: #796887;
  line-height: 1.8;
  max-width: 340px;
}
.step-circle {
  background: #f1eaf9;
  border-color: #dacbe6;
  color: #9176a4;
}
.current .step-circle {
  background: #624282;
  border-color: #624282;
  box-shadow: 0 0 0 5px #eae1f3;
}
.steps li:not(:last-child)::after {
  background: #ded2e9;
}
.stage-label {
  font-size: .65rem;
  color: #745388;
  background: #eee4f8;
}
.stage-label.muted {
  color: #786583;
  background: #eae4ee;
}
.quiet-note {
  border-top-color: #e2dbe7;
}
.quiet-note p {
  font-size: .85rem;
  color: #7b6b85;
  line-height: 1.85;
  max-width: 350px;
}
.quiet-note > span {
  color: #b49c61;
}
.workspace-heading h2 {
  font-size: 1.75rem;
  color: #49355b;
}
.workspace-heading h3 {
  font-size: 1.25rem;
  color: #5b426e;
}
.portal-status {
  background: #eee8f4;
  border-color: #ded1e9;
  color: #6b527d;
  font-size: .875rem;
  padding: 17px 21px;
}
.membership-panel h3 {
  color: #5e4671;
}
.membership-panel .panel-body > p {
  font-size: .95rem;
  color: #6d587d;
}
.primary-button {
  background: #624282;
  border-color: #624282;
  color: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 800;
  min-height: 46px;
}
.primary-button:hover {
  background: #765397;
}
.danger-button {
  font-size: .85rem;
  min-height: 46px;
  color: #93483d;
}
.small-note {
  font-size: .8rem !important;
  color: #786687;
  line-height: 1.85;
}
.owner-grid {
  gap: 24px;
}
.owner-grid .panel-heading h3 {
  font-size: 1rem;
  color: #624b75;
}
.queue-row {
  padding: 20px 0;
  border-bottom-color: #e9e0f0;
}
.queue-row strong {
  font-size: .9rem;
  color: #5b3f70;
}
.queue-row small,
.queue-row .small-note {
  font-size: .75rem !important;
  color: #79648a;
  line-height: 1.7;
}
.queue-row .secondary-button {
  font-size: .8rem;
}
.queue-empty {
  font-size: .875rem;
  color: #7b678b;
}
.queue-list {
  padding-inline: 23px;
}
.demo-launch {
  background: #e7edcf;
  border-color: #d5dfb5;
  border-radius: 17px;
  padding: 28px;
  gap: 25px;
  align-items: center;
}
.demo-launch h3 {
  font-size: 1.3rem;
  color: #50653d;
  letter-spacing: -.035em;
}
.demo-launch .eyebrow {
  color: #6e8052;
}
.demo-launch p:not(.eyebrow) {
  font-size: .875rem;
  color: #66764e;
  line-height: 1.8;
}
.demo-launch .sample-public-note {
  font-size: .8rem !important;
  color: #586d41 !important;
  max-width: 740px;
  margin-top: 12px !important;
}
.sample-launch-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: none;
}
.samples-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  white-space: nowrap;
  padding: 13px 17px;
}
.sample-launch-actions .secondary-button {
  justify-content: center;
  background: #f2f6e7;
  border-color: #b9c7a0;
  color: #5a703e;
}
.sample-space h3 {
  font-size: 1.1rem;
  color: #634b74;
}
.sample-space .panel-body {
  padding-block: 22px;
}
.sample-space .panel-body p + p {
  margin-top: 15px;
}
.privacy-panel {
  background: #eeebe3;
  border-color: #ded8ca;
  padding: 29px 31px;
  border-radius: 16px;
}
.privacy-panel h2 {
  color: #62543e;
  font-size: 1.25rem;
}
.privacy-panel .eyebrow {
  color: #837451;
}
.privacy-grid h3 {
  color: #726147;
  font-size: .875rem;
}
.privacy-grid p {
  color: #7a6e58;
  font-size: .8125rem;
  line-height: 1.9;
}
.footer-note {
  font-size: .75rem;
  color: #84758e;
}
.footer-note code {
  font-size: .75rem;
}
.site-footer {
  background: #eeeae2;
  border-color: #dfd8cb;
  color: #87785e;
  font-size: .8rem;
}
.site-footer a {
  color: #755f42;
}
.dialog-heading h2 {
  color: #604474;
}
.dialog-heading .eyebrow {
  color: #866997;
}
.review-identity dt {
  font-size: .75rem;
  color: #80668f;
}
.review-identity dd {
  font-size: .875rem;
  color: #5d426f;
}
.decision-confirmation {
  background: #f4eef9;
  border-color: #ddcce8;
}
.decision-confirmation h3 {
  font-size: 1rem;
  color: #68467f;
}
.decision-confirmation p {
  font-size: .875rem;
  color: #6e527e;
}
.dialog-close {
  color: #7b5990;
  background: #f3eaf9;
  border-color: #dac7e7;
}
.dialog-heading {
  border-bottom-color: #e7dcef;
}
dialog {
  border-color: #d8c6e4;
  color: #59406a;
}
dialog::backdrop {
  background: #34224580;
}
@media (max-width: 900px) {
  .demo-launch {
    align-items: flex-start;
  }
  .sample-launch-actions {
    min-width: 205px;
  }
  .hero-seal {
    padding: 18px;
  }
  .hero-seal span {
    font-size: .83rem;
  }
  .owner-grid {
    grid-template-columns: 1fr;
  }
  .journey h2 {
    font-size: 1.65rem;
  }
}
@media (max-width: 700px) {
  .shell {
    padding-top: 32px;
    width: calc(100% - 36px);
  }
  .hero {
    margin-bottom: 27px;
  }
  .hero h1 {
    font-size: 2.7rem;
  }
  .hero .eyebrow {
    font-size: .61rem;
  }
  .lede {
    font-size: .9rem;
  }
  .panel-heading,
  .panel-body {
    padding: 23px;
  }
  .panel h2 {
    font-size: 1.17rem;
  }
  .step-tag {
    width: 37px;
    height: 43px;
    flex: none;
  }
  .panel-heading {
    gap: 12px;
  }
  .pill {
    font-size: .65rem;
  }
  .intro,
  .attestation {
    font-size: .875rem;
  }
  .journey {
    padding: 0 7px;
  }
  .journey h2 {
    font-size: 1.5rem;
  }
  .steps p,
  .quiet-note p {
    font-size: .84rem;
    max-width: none;
  }
  .workspace-heading h2 {
    font-size: 1.5rem;
  }
  .workspace-heading h3 {
    font-size: 1.13rem;
  }
  .portal-status {
    padding: 16px;
    font-size: .84rem;
  }
  .demo-launch {
    flex-direction: column;
    padding: 24px;
  }
  .demo-launch h3 {
    font-size: 1.2rem;
  }
  .sample-launch-actions {
    min-width: 0;
    width: 100%;
  }
  .samples-link {
    width: 100%;
    font-size: .875rem;
  }
  .small-note {
    font-size: .78rem !important;
  }
  .queue-list {
    padding-inline: 18px;
  }
  .queue-row {
    gap: 12px;
  }
  .queue-row strong {
    font-size: .875rem;
  }
  .queue-row .secondary-button {
    font-size: .75rem;
    padding: 10px 13px;
  }
  .privacy-panel {
    padding: 24px;
  }
  .privacy-grid p {
    font-size: .8rem;
  }
  .footer-note {
    font-size: .68rem;
  }
  .lt-header__wordmark {
    font-size: 1.75rem;
  }
  .lt-header__wordmark small {
    font-size: .65rem;
    max-width: 170px;
  }
  .lt-header__brand img {
    border-radius: 11px;
  }
  .lt-header__account a {
    font-size: .75rem;
  }
  .lt-header__nav a {
    font-size: .8rem;
  }
  .pilot-strip {
    font-size: .62rem;
    letter-spacing: .06em;
  }
  .review-identity dd {
    font-size: .875rem;
  }
  .review-actions {
    gap: 11px;
  }
}
@media (max-width: 380px) {
  .hero h1 {
    font-size: 2.4rem;
  }
  .panel-heading,
  .panel-body {
    padding: 19px;
  }
  .panel h2 {
    font-size: 1.06rem;
  }
  .lt-header__wordmark {
    font-size: 1.5rem;
  }
  .lt-header__wordmark small {
    display: none;
  }
  .pilot-strip {
    font-size: .57rem;
  }
  .google-button {
    font-size: .85rem;
  }
  .attestation {
    font-size: .83rem;
  }
  .pill {
    font-size: .6rem;
  }
  .queue-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .queue-row > div {
    flex-basis: 100%;
  }
}
.owner-view-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 26px;
  margin: 23px 0;
  border: 1px solid #d9cce5;
  background: #eee7f6;
  border-radius: 16px;
}
.owner-view-switch h3 {
  font-size: 1.2rem;
  color: #5b3f71;
  letter-spacing: -.035em;
  margin: 0 0 10px;
}
.owner-view-switch .eyebrow {
  font-size: .62rem;
  margin-bottom: 7px;
}
.owner-view-switch p:not(.eyebrow) {
  font-size: .8rem;
  color: #735980;
  line-height: 1.8;
  max-width: 740px;
  margin: 0;
}
.owner-view-buttons {
  display: flex;
  gap: 9px;
  flex: none;
}
.owner-view-buttons .secondary-button {
  margin: 0;
  justify-content: center;
  min-height: 46px;
}
.owner-view-buttons button[aria-pressed=true] {
  background: #68488b;
  border-color: #68488b;
  color: white;
}
.owner-teacher-panel {
  margin-top: 23px;
}
.owner-teacher-panel h3 {
  font-size: 1.25rem;
  color: #614475;
  margin: 0;
}
.owner-sample-classes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0;
}
.owner-sample-classes article {
  display: flex;
  gap: 14px;
  padding: 22px;
  border: 1px solid #dfd5e8;
  border-radius: 13px;
  background: #faf7fd;
  align-items: center;
}
.sample-class-icon {
  height: 44px;
  width: 44px;
  background: #e7d9f2;
  color: #825c9c;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-weight: 800;
  font-size: 1.2rem;
  flex: none;
}
.owner-sample-classes article:nth-child(2) .sample-class-icon {
  background: #f0dfcc;
  color: #a57b56;
}
.owner-sample-classes h4 {
  font-size: 1rem;
  color: #624976;
  margin: 0 0 8px;
}
.owner-sample-classes p {
  font-size: .8rem;
  color: #7c658b;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 900px) {
  .owner-view-switch {
    flex-direction: column;
    align-items: flex-start;
  }
  .owner-view-buttons {
    flex-wrap: wrap;
  }
}
@media (max-width: 640px) {
  .owner-view-switch {
    padding: 22px;
  }
  .owner-view-switch h3 {
    font-size: 1.1rem;
  }
  .owner-view-buttons {
    width: 100%;
  }
  .owner-view-buttons .secondary-button {
    flex: 1;
    font-size: .75rem;
  }
  .owner-sample-classes {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .owner-sample-classes article {
    padding: 19px;
  }
  .owner-teacher-panel h3 {
    font-size: 1.1rem;
  }
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/friendly-access.css */
:root {
  font-family:
    "Trebuchet MS",
    ui-rounded,
    system-ui,
    sans-serif;
  color: #302442;
  background: #f6f4ef;
}
body {
  background: #f6f4ef;
  color: #302442;
}
.pilot-strip {
  position: static;
  min-height: 30px;
  padding: 6px 14px;
  font-size: .75rem;
  letter-spacing: .02em;
  background: #ece7f4;
  color: #59476c;
  gap: 9px;
  border: 0;
}
.pilot-dot {
  background: #705295;
}
.spark-app-bar {
  background: #493079;
  color: #fff;
  box-shadow: 0 3px 0 #39206012;
}
.spark-bar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1400px;
  margin: auto;
  padding: 19px 28px;
}
.spark-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .95;
  flex: none;
}
.spark-brand small {
  display: block;
  margin-top: 7px;
  font-size: .7rem;
  letter-spacing: 0;
  font-weight: 500;
  color: #e3d7f4;
}
.spark-brand-mark {
  font-size: 2.5rem;
  color: #e5edab;
}
.spark-navigation {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-left: 25px;
  flex: 1;
}
.spark-navigation a {
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 700;
  text-decoration: none;
  color: #eee7f8;
  white-space: nowrap;
  padding: 11px 0;
}
.spark-navigation a:hover {
  text-decoration: underline;
  text-underline-offset: 7px;
}
.spark-account-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #aa94c9;
  border-radius: 9px;
  padding: 11px 15px;
  color: white;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.spark-account-link:hover {
  background: #ffffff14;
}
.shell {
  max-width: 1360px;
  width: calc(100% - 48px);
  padding-top: 28px;
}
.access-layout {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr) 250px;
  grid-template-areas: "profile primary tips";
  gap: 22px;
  align-items: start;
}
.access-primary {
  grid-area: primary;
  min-width: 0;
}
.access-profile {
  grid-area: profile;
  min-width: 0;
  display: grid;
  gap: 20px;
}
.access-tips {
  grid-area: tips;
  min-width: 0;
  display: grid;
  gap: 20px;
}
.welcome-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  background: #e1eeb6;
  border: 1px solid #cfde9f;
  border-radius: 17px;
  padding: 27px 28px;
  margin-bottom: 20px;
  min-height: 210px;
  box-shadow: 0 4px 0 #cbd89d44;
}
.welcome-panel .eyebrow {
  font-size: .7rem;
  color: #526c30;
  letter-spacing: .07em;
  margin-bottom: 9px;
}
.welcome-panel h1 {
  font-size: 2.65rem;
  line-height: 1.04;
  color: #334e28;
  letter-spacing: -.055em;
  margin: 0 0 11px;
}
.welcome-copy {
  position: relative;
  z-index: 1;
}
.welcome-copy > p:not(.eyebrow) {
  font-size: .95rem;
  line-height: 1.55;
  color: #47613c;
  margin-bottom: 16px;
}
.welcome-preview {
  display: inline-block;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  color: #334e28;
}
.welcome-preview:hover {
  text-decoration: underline;
}
.welcome-preview > span {
  margin-left: 6px;
}
.welcome-preview small {
  display: block;
  margin-top: 6px;
  font-size: .72rem;
  font-weight: 500;
  color: #50643f;
}
.welcome-doodle {
  position: relative;
  width: 140px;
  height: 165px;
  flex: none;
  align-self: center;
}
.doodle-spark {
  position: absolute;
  color: #768d42;
  font-size: 6rem;
  right: -5px;
  top: -30px;
  transform: rotate(15deg);
  opacity: .65;
}
.doodle-card {
  position: absolute;
  top: 55px;
  left: 1px;
  transform: rotate(-9deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #c1d094;
  background: #f8fbeb;
  border-radius: 15px;
  width: 112px;
  height: 106px;
  box-shadow: 7px 7px 0 #b9ce8699;
}
.doodle-card b {
  font-size: 2.25rem;
  color: #597139;
}
.doodle-card i {
  font-size: .65rem;
  color: #667b4a;
  font-style: normal;
  margin-top: 4px;
}
.doodle-dot {
  position: absolute;
  left: -5px;
  top: 27px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #b3ca7b;
}
.profile-card {
  background: #64418b;
  color: #fff;
  border-radius: 16px;
  padding: 23px 20px;
  box-shadow: 0 5px 0 #482f6822;
}
.profile-top {
  display: flex;
  align-items: center;
  gap: 11px;
}
.profile-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #492a72;
  color: #eee4ff;
  font-size: 1.4rem;
  font-weight: 800;
  border: 2px solid #8d68b1;
}
.profile-eyebrow {
  font-size: .6rem;
  line-height: 1.6;
  letter-spacing: .07em;
  color: #e5d8f4;
  margin: 0 0 4px;
  font-weight: 800;
}
.profile-card h2 {
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -.025em;
  margin: 0;
  color: #fff;
}
.profile-email {
  font-size: .8rem;
  line-height: 1.6;
  color: #ede2fa;
  margin: 17px 0;
  overflow-wrap: anywhere;
}
.profile-access {
  display: grid;
  gap: 5px;
  background: #ffffff0b;
  border: 1px solid #ffffff1c;
  border-radius: 9px;
  padding: 12px;
}
.profile-access span {
  font-size: .7rem;
  color: #e3d5ef;
}
.profile-access strong {
  font-size: .8rem;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 8px;
}
.profile-access strong:last-child {
  margin: 0;
}
.profile-jump {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  color: #f2edbd;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 20px;
}
.profile-jump:hover {
  text-decoration: underline;
}
.rail-card {
  padding: 21px 20px;
  background: #fff;
  border: 1px solid #e4dce8;
  border-radius: 14px;
  box-shadow: 0 4px 0 #ddd5e71a;
}
.rail-card h2 {
  font-size: 1rem;
  line-height: 1.35;
  color: #483355;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.rail-card p {
  font-size: .85rem;
  line-height: 1.65;
  color: #66546f;
  margin-bottom: 15px;
}
.rail-card a {
  font-size: .8rem;
  line-height: 1.5;
  color: #65428c;
  text-decoration: none;
  font-weight: 800;
}
.rail-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.learning-theater-card {
  background: #fff7e7;
  border-color: #e9dabb;
}
.learning-theater-card img {
  float: right;
  border-radius: 50%;
  margin: 0 0 10px 10px;
}
.learning-theater-card h2 {
  color: #654e2b;
}
.learning-theater-card p {
  clear: both;
  color: #6e5d43;
}
.learning-theater-card a {
  color: #755323;
}
.how-it-works ol {
  list-style: none;
  padding: 0;
  margin: 17px 0;
}
.how-it-works li {
  display: flex;
  gap: 9px;
  align-items: start;
  margin-bottom: 16px;
}
.how-it-works li > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #eae0f5;
  color: #755296;
  font-size: .7rem;
  font-weight: 800;
}
.how-it-works strong {
  font-size: .82rem;
  line-height: 1.5;
  color: #5a426b;
}
.how-it-works li p {
  font-size: .78rem;
  line-height: 1.6;
  margin: 3px 0 0;
  color: #715e7c;
}
.zappy-card {
  position: relative;
  overflow: hidden;
  background: #fce6bb;
  border: 1px solid #ecd2a3;
  border-radius: 16px;
  padding: 22px 19px 14px;
  min-height: 247px;
}
.zappy-card > div {
  position: relative;
  z-index: 1;
  max-width: 125px;
}
.zappy-card .eyebrow {
  font-size: .62rem;
  letter-spacing: .06em;
  color: #80622c;
  margin: 0 0 8px;
}
.zappy-card h2 {
  font-size: 1.55rem;
  letter-spacing: -.035em;
  color: #604720;
  margin: 0 0 10px;
}
.zappy-card p:not(.eyebrow) {
  font-size: .85rem;
  line-height: 1.7;
  color: #755d35;
}
.zappy-card img {
  position: absolute;
  right: 0;
  top: 71px;
  width: 120px;
  height: 180px;
  object-fit: contain;
  transform: rotate(-8deg);
}
.zappy-card .zappy-caption {
  position: relative;
  margin-top: 54px;
  margin-bottom: 0;
  font-size: .65rem !important;
  max-width: 102px;
}
.preview-card {
  background: #f4eefb;
  border-color: #e1d3ef;
}
.mini-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #e0d0f3;
  border-radius: 9px;
  margin-bottom: 14px;
  color: #7b52a0;
  font-size: 1.6rem;
}
.preview-card h2 {
  font-size: 1.1rem;
}
.access-primary .auth-panel {
  border-radius: 16px;
}
.access-primary .panel-heading {
  padding: 22px 24px;
  gap: 12px;
}
.access-primary .panel-heading .eyebrow {
  font-size: .65rem;
  color: #735d82;
}
.access-primary .panel h2 {
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -.03em;
  color: #483353;
}
.access-primary .step-tag {
  width: 35px;
  height: 38px;
  border-radius: 10px;
  font-size: 1.2rem;
  background: #eee5f7;
  color: #7e5b9b;
}
.access-primary .pill {
  font-size: .65rem;
  letter-spacing: 0;
  padding: 5px 9px;
  white-space: nowrap;
}
.access-primary .panel-body {
  padding: 23px 24px;
}
.access-primary .intro {
  font-size: .9rem;
  line-height: 1.65;
  color: #675472;
  margin-bottom: 17px;
}
.attestation {
  padding: 13px 14px;
  font-size: .875rem;
  line-height: 1.6;
  background: #f7f3fb;
  color: #5c476c;
  border: 1px solid #e0d5eb;
  margin-bottom: 15px;
}
.attestation input {
  height: 20px;
  width: 20px;
  accent-color: #6b438d;
}
.google-button {
  min-height: 52px;
  border: 1px solid #bca7ce;
  color: #483052;
  font-size: .95rem;
  box-shadow: 0 3px 0 #ece3f3;
}
.google-button:disabled {
  opacity: 1;
  background: #f5f1f8;
  color: #81718a;
  border-color: #ded3e7;
  box-shadow: none;
}
.google-button:disabled svg {
  opacity: .65;
}
.signin-details,
.account-details {
  margin-top: 18px;
  border-top: 1px solid #e7dfed;
  padding-top: 15px;
}
.signin-details summary,
.account-details summary,
.privacy-disclosure > summary {
  cursor: pointer;
  color: #674c7b;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.6;
  min-height: 32px;
}
.signin-details summary:focus-visible,
.account-details summary:focus-visible,
.privacy-disclosure > summary:focus-visible {
  outline: 3px solid #a87424;
  outline-offset: 4px;
}
.signin-details .fine-print {
  font-size: .78rem;
  line-height: 1.75;
  text-align: left;
  margin: 12px 0;
  color: #675273;
}
.shared-device {
  font-size: .75rem;
  line-height: 1.6;
  margin-top: 19px;
  padding-top: 17px;
  color: #71617c;
}
.auth-status {
  font-size: .875rem;
  color: #604872;
}
.receipt {
  padding: 18px;
  margin-top: 12px;
}
.receipt dt {
  font-size: .75rem;
}
.receipt dd {
  font-size: .875rem;
}
.receipt p,
.locked-note {
  font-size: .8rem;
}
.account-details .owner-note {
  font-size: .8rem;
}
.owner-view-switch {
  margin: 0 0 20px;
  padding: 20px 22px;
  display: block;
  background: #e9e0f4;
  border-color: #d8c5e6;
  border-radius: 15px;
}
.owner-view-switch h3 {
  font-size: 1.25rem;
  margin-bottom: 7px;
}
.owner-view-switch .eyebrow {
  font-size: .68rem;
}
.owner-view-switch p:not(.eyebrow) {
  font-size: .85rem;
  line-height: 1.6;
  color: #654d76;
}
.owner-view-buttons {
  display: flex;
  gap: 10px;
  margin-top: 17px;
}
.owner-view-buttons .secondary-button {
  font-size: .9rem;
  padding: 12px 18px;
  min-height: 48px;
  flex: 1;
}
.owner-view-buttons button[aria-pressed=true] {
  background: #64418b;
  border-color: #64418b;
}
.portal-workspace {
  margin-top: 32px;
}
.workspace-heading h2 {
  font-size: 1.7rem;
}
.workspace-heading .eyebrow {
  font-size: .7rem;
}
.portal-status,
.membership-panel .panel-body > p {
  font-size: .95rem;
  line-height: 1.7;
}
.queue-row strong {
  font-size: .95rem;
}
.queue-row small,
.queue-row .small-note {
  font-size: .8rem !important;
  color: #65536f;
}
.small-note {
  font-size: .85rem !important;
  color: #65536f;
}
.pill {
  font-size: .75rem;
}
.primary-button,
.secondary-button,
.danger-button {
  font-size: .875rem;
}
.privacy-disclosure {
  border: 1px solid #ded7e5;
  border-radius: 13px;
  background: #eee9e1;
  padding: 17px 22px;
  margin-top: 32px;
}
.privacy-disclosure > summary {
  font-size: .9rem;
  color: #66523b;
}
.privacy-panel {
  margin: 15px 0 0;
  border: 0;
  padding: 10px 0 0;
  background: none;
}
.privacy-panel h2 {
  font-size: 1.25rem;
}
.privacy-grid h3 {
  font-size: .9rem;
}
.privacy-grid p {
  font-size: .85rem;
  color: #665a45;
}
.footer-note {
  font-size: .75rem;
}
.site-footer {
  font-size: .875rem;
}
.site-footer a {
  font-size: .875rem;
}
.review-identity dt {
  font-size: .8rem;
}
.review-identity dd,
.decision-confirmation p {
  font-size: .95rem;
}
.dialog-heading .eyebrow {
  font-size: .75rem;
}
.saved-classes .small-note {
  font-size: .875rem !important;
}
.saved-class-card .mono {
  font-size: .8rem;
}
.saved-classes {
  scroll-margin-top: 20px;
}
body[data-connected=true] .welcome-panel,
body[data-connected=true] .access-tips,
body[data-connected=true] .learning-theater-card,
body[data-connected=true] .how-it-works {
  display: none;
}
body[data-connected=true] .access-layout {
  grid-template-columns: 230px minmax(0, 1fr);
  grid-template-areas: "profile primary";
}
body[data-connected=true] .access-primary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 22px;
  align-items: start;
}
body[data-connected=true] .owner-view-switch {
  margin: 0;
}
body[data-connected=true] .auth-panel {
  grid-column: 2;
}
body[data-connected=true] .access-primary:has(#owner-view-switch[hidden]) .auth-panel {
  grid-column: 1/-1;
}
.profile-card a:focus-visible,
.spark-app-bar a:focus-visible {
  outline: 3px solid #f1e48b;
  outline-offset: 4px;
}
@media (min-width: 1200px) {
  .welcome-panel h1 br {
    display: none;
  }
  .welcome-doodle {
    width: 105px;
  }
  .welcome-panel h1 {
    font-size: 2.35rem;
  }
  .welcome-panel {
    padding: 25px;
  }
  .welcome-preview small {
    font-size: .72rem;
  }
  .desktop-break {
    display: none;
  }
}
@media (max-width: 1150px) {
  .access-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "profile primary" "tips primary";
    gap: 20px;
  }
  .access-tips {
    grid-column: 1;
    grid-row: 2;
  }
  .access-profile {
    grid-row: 1;
  }
  .access-primary {
    grid-row: 1/3;
  }
  .spark-navigation {
    margin-left: 0;
    gap: 20px;
  }
  .spark-navigation a {
    font-size: .8rem;
  }
  .spark-bar-inner {
    gap: 20px;
  }
  .access-profile {
    gap: 18px;
  }
  .welcome-panel h1 {
    font-size: 2.45rem;
  }
  .welcome-panel {
    padding: 25px;
  }
  .how-it-works {
    display: none;
  }
  body[data-connected=true] .access-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }
  body[data-connected=true] .access-primary {
    grid-template-columns: 1fr;
  }
  body[data-connected=true] .auth-panel {
    grid-column: 1;
  }
}
@media (max-width: 760px) {
  .spark-bar-inner {
    padding: 17px 18px;
    gap: 15px;
    flex-wrap: wrap;
  }
  .spark-brand {
    font-size: 1.7rem;
  }
  .spark-brand-mark {
    font-size: 2.1rem;
  }
  .spark-brand small {
    font-size: .65rem;
  }
  .spark-account-link {
    margin-left: auto;
    padding: 10px 12px;
    font-size: .8rem;
  }
  .spark-navigation {
    flex-basis: 100%;
    order: 3;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
  }
  .spark-navigation a {
    font-size: .8rem;
    padding: 5px 0;
  }
  .shell {
    width: calc(100% - 32px);
    padding-top: 20px;
  }
  .access-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "primary" "profile" "tips";
    gap: 20px;
  }
  .access-primary {
    grid-row: 1;
  }
  .access-profile {
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .access-tips {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .welcome-panel {
    padding: 22px;
    margin-bottom: 17px;
    min-height: 190px;
  }
  .welcome-panel h1 {
    font-size: 2.2rem;
  }
  .welcome-panel .eyebrow {
    font-size: .65rem;
  }
  .welcome-copy > p:not(.eyebrow) {
    font-size: .875rem;
    line-height: 1.55;
  }
  .welcome-doodle {
    width: 105px;
    height: 140px;
  }
  .doodle-card {
    width: 91px;
    height: 88px;
    top: 48px;
    left: 0;
  }
  .doodle-card b {
    font-size: 1.8rem;
  }
  .doodle-card i {
    font-size: .6rem;
  }
  .doodle-spark {
    font-size: 4.9rem;
    top: -21px;
  }
  .welcome-preview {
    font-size: .85rem;
  }
  .welcome-preview small {
    font-size: .68rem;
  }
  .access-primary .panel-heading,
  .access-primary .panel-body {
    padding: 20px;
  }
  .access-primary .panel h2 {
    font-size: 1.2rem;
  }
  .access-primary .panel-heading .eyebrow {
    font-size: .65rem;
  }
  .access-primary .pill {
    font-size: .62rem;
  }
  .access-primary .intro,
  .attestation {
    font-size: .875rem;
  }
  .google-button {
    font-size: .95rem;
  }
  .signin-details summary,
  .account-details summary {
    font-size: .8rem;
  }
  .shared-device {
    font-size: .75rem;
  }
  .owner-view-buttons .secondary-button {
    font-size: .875rem;
  }
  .owner-view-switch {
    padding: 20px;
  }
  .profile-card {
    padding: 20px;
  }
  .rail-card {
    padding: 20px;
  }
  .how-it-works {
    display: none;
  }
  .zappy-card {
    min-height: 245px;
  }
  .portal-workspace {
    margin-top: 26px;
  }
  .workspace-heading h2 {
    font-size: 1.5rem;
  }
  .privacy-disclosure {
    padding: 17px 18px;
  }
  .privacy-panel h2 {
    font-size: 1.15rem;
  }
  .privacy-grid p {
    font-size: .875rem;
  }
  .footer-note {
    font-size: .75rem;
  }
  .pilot-strip {
    font-size: .7rem;
  }
  body[data-connected=true] .access-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "primary" "profile";
  }
  body[data-connected=true] .access-primary {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  body[data-connected=true] .profile-card {
    display: none;
  }
  body[data-connected=true] .access-profile {
    display: none;
  }
}
@media (max-width: 460px) {
  .welcome-panel {
    padding: 20px;
  }
  .welcome-panel h1 {
    font-size: 2rem;
  }
  .welcome-copy > p:not(.eyebrow) {
    font-size: .85rem;
  }
  .welcome-doodle {
    width: 70px;
    height: 130px;
    margin-right: 0;
  }
  .doodle-card {
    width: 76px;
    height: 80px;
    left: -8px;
    top: 44px;
  }
  .doodle-card b {
    font-size: 1.6rem;
  }
  .doodle-card i {
    font-size: .55rem;
  }
  .doodle-spark {
    font-size: 4rem;
    right: -13px;
    top: -10px;
  }
  .doodle-dot {
    display: none;
  }
  .desktop-break {
    display: none;
  }
  .welcome-preview small {
    font-size: .7rem;
  }
  .welcome-panel .eyebrow {
    font-size: .6rem;
    letter-spacing: .05em;
  }
  .access-primary .panel-heading {
    padding: 19px 17px;
    gap: 9px;
  }
  .access-primary .panel-body {
    padding: 19px 17px;
  }
  .access-primary .step-tag {
    display: none;
  }
  .access-primary .panel h2 {
    font-size: 1.15rem;
  }
  .access-primary .pill {
    font-size: .65rem;
  }
  .access-profile,
  .access-tips {
    grid-template-columns: 1fr;
  }
  .profile-card {
    padding: 22px;
  }
  .zappy-card {
    min-height: 210px;
  }
  .zappy-card img {
    top: 12px;
    right: 17px;
    height: 190px;
    width: 127px;
  }
  .zappy-card .zappy-caption {
    margin-top: 22px;
    max-width: 160px;
    font-size: .72rem !important;
  }
  .zappy-card > div {
    max-width: 170px;
  }
  .welcome-copy {
    max-width: 245px;
  }
  .owner-view-buttons {
    gap: 9px;
  }
  .owner-view-buttons .secondary-button {
    padding: 11px 12px;
  }
  .site-footer {
    font-size: .8rem;
  }
  .pilot-strip {
    font-size: .68rem;
    gap: 7px;
  }
  .spark-navigation a {
    font-size: .75rem;
  }
  .spark-account-link {
    font-size: .75rem;
  }
  .spark-brand small {
    max-width: 150px;
  }
  .receipt dt,
  .receipt dd {
    font-size: .8rem;
  }
}
.pill,
.profile-eyebrow,
.profile-access span,
.welcome-preview small,
.zappy-card .zappy-caption,
.spark-brand small,
.access-primary .pill,
.access-primary .panel-heading .eyebrow {
  font-size: .75rem !important;
}
.profile-email,
.rail-card p,
.rail-card a,
.how-it-works li p,
.how-it-works strong,
.profile-access strong,
.profile-jump,
.welcome-copy > p:not(.eyebrow) {
  font-size: .875rem;
}
.welcome-panel .eyebrow,
.zappy-card .eyebrow {
  font-size: .75rem;
}
.profile-eyebrow {
  letter-spacing: .025em;
}
.spark-brand small {
  line-height: 1.15;
}
.zappy-card .zappy-caption {
  line-height: 1.4;
}
@media (max-width: 460px) {
  .welcome-doodle {
    display: none;
  }
  .welcome-panel {
    min-height: 0;
    padding: 19px 20px;
  }
  .welcome-copy {
    max-width: none;
  }
  .welcome-panel h1 {
    font-size: 1.85rem;
  }
  .welcome-panel h1 br {
    display: none;
  }
  .welcome-panel .eyebrow {
    font-size: .7rem;
  }
  .welcome-copy > p:not(.eyebrow) {
    font-size: .875rem;
    margin-bottom: 12px;
  }
  .welcome-preview small {
    font-size: .75rem;
  }
  .spark-brand small {
    font-size: .7rem !important;
  }
  .spark-navigation a {
    font-size: .8rem;
  }
}
@media (max-width: 460px) {
  .spark-navigation a {
    font-size: .875rem;
  }
  .spark-brand small {
    font-size: .75rem !important;
  }
  .welcome-panel .eyebrow {
    font-size: .75rem;
  }
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/dashboard-access.css */
.teacher-dashboard {
  min-width: 0;
}
.dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 21px;
}
.dashboard-heading h2 {
  font-size: 1.95rem;
  letter-spacing: -.045em;
  line-height: 1.2;
  color: #3e2c51;
  margin: 0;
}
.dashboard-heading .eyebrow {
  font-size: .75rem;
  color: #7b608f;
  margin-bottom: 7px;
}
.dashboard-spark {
  font-size: 2.7rem;
  color: #cdb479;
  line-height: 1;
}
.approval-bubble {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 17px;
  border: 1px solid #dacf99;
  background: #fff4ce;
  border-radius: 18px;
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 0 #d9c67816;
}
.approval-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #efdfaa;
  color: #775d27;
  font-size: 1.5rem;
  font-weight: 800;
}
.approval-copy {
  flex: 1;
  min-width: 200px;
}
.approval-copy h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  color: #614b27;
  margin: 0 0 6px;
}
.approval-copy p {
  font-size: .9rem;
  line-height: 1.6;
  color: #735b33;
  margin: 0;
  max-width: 650px;
}
#dashboard-refresh-slot {
  flex: none;
}
#dashboard-refresh-slot .secondary-button {
  margin: 0;
  min-height: 44px;
  background: #fffaf0;
  color: #70572c;
  border-color: #d3be88;
  font-size: .875rem;
}
#dashboard-request-slot {
  flex-basis: 100%;
}
#dashboard-request-slot:has(#request-access[hidden]) {
  display: none;
}
#dashboard-request-slot #request-data {
  max-width: 800px;
  color: #665533;
  font-size: .8rem !important;
}
#dashboard-request-slot .primary-button {
  font-size: .875rem;
}
.approval-bubble[data-state=active],
.approval-bubble[data-state=owner] {
  background: #edf5df;
  border-color: #d1e1b8;
}
.approval-bubble[data-state=active] .approval-symbol,
.approval-bubble[data-state=owner] .approval-symbol {
  background: #dce9c6;
  color: #4c7137;
}
.approval-bubble[data-state=active] h3,
.approval-bubble[data-state=owner] h3 {
  color: #496238;
}
.approval-bubble[data-state=active] p,
.approval-bubble[data-state=owner] p {
  color: #526c41;
}
.approval-bubble[data-state=active] .secondary-button,
.approval-bubble[data-state=owner] .secondary-button {
  background: #f8fbf2 !important;
  color: #4b6839 !important;
  border-color: #bfcfa7 !important;
}
.approval-bubble[data-state=checking] {
  background: #eaf0f8;
  border-color: #cbd8e9;
}
.approval-bubble[data-state=checking] .approval-symbol {
  background: #d8e4f1;
  color: #536d8b;
}
.approval-bubble[data-state=checking] h3,
.approval-bubble[data-state=checking] p {
  color: #526b88;
}
.approval-bubble[data-state=inactive],
.approval-bubble[data-state=error] {
  background: #f7eae8;
  border-color: #e4c5c0;
}
.approval-bubble[data-state=inactive] .approval-symbol,
.approval-bubble[data-state=error] .approval-symbol {
  background: #edd3cf;
  color: #8a534b;
}
.approval-bubble[data-state=inactive] h3,
.approval-bubble[data-state=error] h3,
.approval-bubble[data-state=inactive] p,
.approval-bubble[data-state=error] p {
  color: #81544e;
}
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.dashboard-card {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  min-height: 239px;
  padding: 25px 23px;
  background: white;
  border: 1px solid #e0d8e8;
  border-radius: 16px;
  box-shadow: 0 5px 0 #e1d9e62b;
}
.launch-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 95px;
  height: 112px;
  flex: none;
}
.launch-copy {
  min-width: 0;
  flex: 1;
}
.card-kicker {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  color: #7a608a;
  margin-bottom: 8px;
}
.dashboard-card h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.025em;
  margin: 0 0 9px;
  color: #5a3c72;
}
.dashboard-card p {
  font-size: .875rem;
  line-height: 1.65;
  color: #6b5778;
  margin: 0 0 16px;
}
.dashboard-launch {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #6b478f;
  background: #6b478f;
  color: #fff;
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 800;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
}
.dashboard-launch:hover:not(:disabled) {
  background: #7a559f;
}
.dashboard-launch:focus-visible {
  outline: 3px solid #a87424;
  outline-offset: 4px;
}
.dashboard-launch:disabled {
  color: #69636f;
  border-color: #d5d0da;
  background: #e9e6ec;
  cursor: not-allowed;
}
.dashboard-card .card-availability {
  font-size: .75rem;
  line-height: 1.6;
  margin: 10px 0 0;
  color: #74657f;
}
.card-locked {
  background: #f9f8fa;
  border-color: #e0dce5;
  box-shadow: 0 4px 0 #e2dfe621;
}
.card-locked .launch-art {
  filter: grayscale(1);
  opacity: .6;
}
.card-locked h3 {
  color: #655b6f;
}
.card-locked .card-kicker {
  color: #786e80;
}
.mini-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 83px;
  height: 72px;
  border: 6px solid #b4d0a3;
  background: #eaf4df;
  color: #658450;
  border-radius: 6px;
  box-shadow: 0 12px 0 -8px #91a580;
  font-size: 1.55rem;
  font-weight: 800;
  transform: rotate(-5deg);
}
.mini-board span {
  font-size: .95rem;
  color: #789c60;
  border-top: 1px solid #c7dabb;
  padding-top: 2px;
  margin-top: 3px;
  width: 45px;
  text-align: center;
}
.art-star {
  position: absolute;
  right: -5px;
  top: 0;
  font-size: 2rem;
  color: #b1ca86;
  font-style: normal;
}
.mini-book {
  display: grid;
  place-items: center;
  width: 65px;
  height: 83px;
  background: #eed197;
  border-left: 8px solid #c9a557;
  border-radius: 4px 9px 9px 4px;
  color: #997234;
  font-size: 1.8rem;
  font-weight: 800;
  transform: rotate(-12deg);
}
.art-play {
  position: absolute;
  right: 0;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  background: #c6ddf3;
  color: #5886ae;
  border: 4px solid white;
  border-radius: 50%;
  font-size: .9rem;
}
.mini-folder {
  width: 85px;
  height: 69px;
  border-radius: 5px 10px 10px 10px;
  background: #d5bce9;
  transform: rotate(6deg);
  position: relative;
  border-bottom: 8px solid #bd9bd4;
}
.mini-folder:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 37px;
  height: 17px;
  background: #b596cf;
  border-radius: 5px 5px 0 0;
}
.folder-label {
  position: absolute;
  top: 38px;
  font-style: normal;
  color: #835c9b;
  background: #eee2f5;
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 800;
  transform: rotate(6deg);
}
.mini-chart {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 76px;
  width: 82px;
  border-left: 3px solid #b2cbdd;
  border-bottom: 3px solid #b2cbdd;
  padding: 0 0 0 8px;
}
.mini-chart i {
  display: block;
  width: 17px;
  height: 35px;
  background: #a1c6dd;
  border-radius: 4px 4px 0 0;
}
.mini-chart i:nth-child(2) {
  height: 56px;
  background: #88a8ce;
}
.mini-chart i:nth-child(3) {
  height: 69px;
  background: #baa3d2;
}
.chart-dot {
  position: absolute;
  top: 2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e7c596;
}
.resources-card {
  border-color: #e9dbc1;
}
.resources-card .card-kicker {
  color: #967449;
}
.resources-card h3 {
  color: #826035;
}
.resources-card .dashboard-launch {
  background: #96743e;
  border-color: #96743e;
}
.resources-card .dashboard-launch:hover {
  background: #a88549;
}
.classes-card .dashboard-launch:not(:disabled) {
  background: #685092;
  border-color: #685092;
}
.dashboard-public-note {
  font-size: .8rem;
  line-height: 1.75;
  color: #75657f;
  margin: 22px 3px 0;
  max-width: 900px;
}
.dashboard-public-note a {
  color: #6d478e;
  font-weight: 700;
}
.access-status-details {
  margin-top: 20px;
  border-top: 1px solid #ddd4e5;
  padding-top: 15px;
}
.access-status-details > summary {
  color: #705a7e;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 34px;
}
.access-status-details > summary:focus-visible {
  outline: 3px solid #a87424;
  outline-offset: 4px;
}
.access-status-details #teacher-access {
  margin-top: 12px;
}
.access-status-details #portal-status {
  margin: 15px 0;
}
.access-status-details .demo-launch {
  margin-top: 15px;
}
.access-status-details #demo-controls {
  display: block;
}
.access-status-details .sample-launch-actions {
  margin-top: 17px;
  align-items: flex-start;
}
.access-status-details #samples-link {
  width: auto;
}
.access-status-details .panel-heading {
  padding: 18px 20px;
}
.access-status-details .panel-body {
  padding: 20px;
}
.access-status-details #membership-copy {
  font-size: .875rem;
}
body[data-connected=true] .access-layout {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  grid-template-areas: none;
  gap: 22px;
  align-items: start;
}
body[data-connected=true] .access-primary {
  display: contents;
}
body[data-connected=true] .access-profile {
  grid-area: auto;
  grid-column: 1;
  grid-row: 1;
}
body[data-connected=true] #auth-card,
body[data-connected=true] .access-primary:has(#owner-view-switch[hidden]) #auth-card {
  grid-column: 1;
  grid-row: 2;
  margin-top: 0;
}
body[data-connected=true] #owner-view-switch {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
body[data-connected=true] #teacher-dashboard {
  grid-column: 2;
  grid-row: 1 / span 3;
}
body[data-connected=true][data-dashboard-owner=true] #teacher-dashboard {
  grid-row: 2 / span 2;
}
body[data-connected=true] #auth-card .panel-heading,
body[data-connected=true] #auth-card .signin-details,
body[data-connected=true] #auth-card .auth-status {
  display: none;
}
body[data-connected=true] #auth-card .panel-body {
  padding: 18px;
}
body[data-connected=true] #auth-card .account-details {
  margin: 0;
  border: 0;
  padding: 0;
}
body[data-connected=true] #auth-card .account-details summary {
  font-size: .8rem;
}
body[data-connected=true] #auth-card #sign-out {
  font-size: .8rem;
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
body[data-connected=true] #auth-card .shared-device {
  font-size: .75rem;
}
body[data-connected=true] .profile-card {
  padding: 20px 18px;
}
body[data-connected=true] .profile-jump {
  display: none;
}
body[data-connected=true] .profile-email {
  font-size: .8rem;
}
body[data-connected=true] .profile-access strong {
  font-size: .85rem;
}
body[data-connected=true] .portal-workspace:has(#owner-workspace[hidden]):has(#owner-teacher-panel[hidden]):has(#classes[hidden]) {
  display: none;
}
body[data-connected=true] #workspace > .workspace-heading {
  display: none;
}
body[data-connected=true] #owner-workspace > .workspace-heading {
  margin-top: 8px;
}
@media (max-width: 1150px) {
  .dashboard-card {
    gap: 16px;
    padding: 22px 18px;
    min-height: 250px;
  }
  .launch-art {
    width: 75px;
    transform: scale(.9);
    transform-origin: center;
  }
  .dashboard-card h3 {
    font-size: 1.1rem;
  }
  .dashboard-card p {
    font-size: .875rem;
  }
  .dashboard-launch {
    font-size: .8rem;
    padding: 10px 12px;
  }
  .dashboard-heading h2 {
    font-size: 1.7rem;
  }
  .approval-copy {
    min-width: 175px;
  }
  .approval-bubble {
    padding: 18px;
  }
  .approval-copy h3 {
    font-size: 1.1rem;
  }
  .approval-copy p {
    font-size: .875rem;
  }
  .dashboard-cards {
    gap: 18px;
  }
  body[data-connected=true] .access-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
  }
}
@media (max-width: 950px) {
  .dashboard-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 0;
  }
  .launch-art {
    height: 88px;
    transform: scale(.82);
    transform-origin: left center;
  }
  .dashboard-launch {
    font-size: .875rem;
  }
  .approval-copy {
    min-width: 180px;
  }
  .dashboard-heading h2 {
    font-size: 1.6rem;
  }
  .dashboard-spark {
    font-size: 2.1rem;
  }
  .card-kicker {
    font-size: .75rem;
  }
  .dashboard-card h3 {
    font-size: 1.15rem;
  }
}
@media (max-width: 760px) {
  body[data-connected=true] .access-layout {
    display: block;
  }
  body[data-connected=true] .access-primary {
    display: contents;
  }
  body[data-connected=true] #owner-view-switch {
    margin-bottom: 20px;
  }
  body[data-connected=true] #auth-card,
  body[data-connected=true] .access-primary:has(#owner-view-switch[hidden]) #auth-card {
    margin-top: 24px;
  }
  body[data-connected=true] .access-profile {
    display: none;
  }
  .dashboard-heading {
    margin-bottom: 18px;
  }
  .dashboard-heading h2 {
    font-size: 1.7rem;
  }
  .approval-bubble {
    gap: 12px;
    padding: 18px;
    margin-bottom: 20px;
    border-radius: 16px;
  }
  .approval-symbol {
    height: 36px;
    width: 36px;
    font-size: 1.25rem;
  }
  .approval-copy {
    min-width: 0;
    flex: 1;
  }
  .approval-copy h3 {
    font-size: 1.1rem;
  }
  .approval-copy p {
    font-size: .875rem;
  }
  #dashboard-refresh-slot {
    flex-basis: 100%;
    padding-left: 48px;
  }
  .dashboard-cards {
    gap: 16px;
  }
  .dashboard-card {
    padding: 20px;
  }
  .dashboard-card h3 {
    font-size: 1.15rem;
  }
  .dashboard-card p {
    font-size: .875rem;
  }
  .dashboard-card .card-availability {
    font-size: .75rem;
  }
  .dashboard-public-note {
    font-size: .8rem;
  }
  .access-status-details > summary {
    font-size: .875rem;
  }
  .dashboard-heading .eyebrow {
    font-size: .75rem;
  }
}
@media (max-width: 500px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
  }
  .dashboard-card {
    flex-direction: row;
    gap: 18px;
    align-items: center;
    padding: 22px 19px;
  }
  .launch-art {
    width: 72px;
    height: 100px;
    flex: none;
    transform: scale(.82);
    transform-origin: center;
  }
  .launch-copy {
    flex: 1;
  }
  .dashboard-card h3 {
    font-size: 1.2rem;
  }
  .dashboard-card p {
    font-size: .875rem;
  }
  .dashboard-launch {
    font-size: .875rem;
  }
  .dashboard-heading h2 {
    font-size: 1.55rem;
  }
  .dashboard-spark {
    font-size: 2rem;
  }
  .approval-copy h3 {
    font-size: 1.05rem;
  }
  .approval-bubble {
    padding: 17px;
  }
  .dashboard-card .card-kicker {
    font-size: .75rem;
  }
  .access-status-details .sample-launch-actions {
    align-items: stretch;
  }
}
.welcome-dismiss-note {
  font-size: .875rem;
  margin: 8px 0 0;
}
.welcome-dismiss-button {
  min-height: 44px;
  margin-top: 10px;
}
.dashboard-status-controls:has(button:not([hidden])) {
  margin: 0 0 18px;
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/compact-access.css */
[hidden] {
  display: none !important;
}
.spark-bar-inner {
  padding: 13px 24px;
  gap: 22px;
}
.spark-brand {
  font-size: 1.65rem;
}
.spark-brand-mark {
  font-size: 2rem;
}
.spark-brand small {
  margin-top: 4px;
}
.spark-navigation {
  gap: 24px;
}
.pilot-strip {
  min-height: 26px;
  padding: 4px 12px;
}
.shell {
  padding-top: 16px;
  max-width: 1360px;
}
.access-layout,
body[data-connected=true] .access-layout {
  display: block;
}
.access-primary,
body[data-connected=true] .access-primary {
  display: block;
}
.compact-entry-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 550px;
  margin: 14px auto 16px;
}
.compact-entry-intro img {
  object-fit: contain;
  flex: none;
}
.compact-entry-intro h1 {
  font-size: 1.4rem;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0 0 6px;
  color: #49345f;
}
.compact-entry-intro p {
  font-size: .875rem;
  line-height: 1.6;
  margin: 0;
  color: #675472;
}
#auth-card {
  max-width: 550px;
  margin: 0 auto;
  border-radius: 14px;
}
.access-primary #auth-card .panel-heading {
  padding: 16px 20px 0;
  border: 0;
}
.access-primary #auth-card h2 {
  font-size: 1.2rem;
}
.access-primary #auth-card .panel-body {
  padding: 14px 20px 18px;
}
.access-primary #auth-card .intro {
  font-size: .875rem;
  margin: 0 0 12px;
}
.attestation {
  font-size: .875rem;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.google-button {
  min-height: 46px;
}
.signin-details {
  padding-top: 10px;
  margin-top: 12px;
}
.signin-details summary {
  font-size: .8rem;
  min-height: 36px;
}
.compact-preview {
  display: block;
  color: #65418a;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 8px;
  min-height: 44px;
}
.compact-preview small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #65536f;
  margin-top: 5px;
}
.session-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #ece5f3;
  border: 1px solid #dcd0e6;
  border-radius: 10px;
}
.session-account {
  display: flex;
  align-items: center;
  gap: 9px 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.session-account strong {
  font-size: 1rem;
  color: #4c3262;
}
.session-account span {
  font-size: .875rem;
  color: #65536f;
  overflow-wrap: anywhere;
}
.session-account .session-access {
  font-size: .75rem;
  background: #fff9;
  border-radius: 99px;
  padding: 5px 10px;
}
.session-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: none;
}
.session-buttons a {
  font-size: .875rem;
  color: #64418b;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.session-buttons #sign-out {
  font-size: .875rem;
  min-height: 44px;
  margin: 0;
  padding: 9px 14px;
}
.session-feedback {
  padding: 12px 16px;
  margin: 0 0 14px;
  background: #fff2d2;
  border: 1px solid #d8be83;
  border-radius: 10px;
}
.session-feedback .auth-status {
  font-size: .875rem;
  line-height: 1.6;
  margin: 0;
  color: #614c27;
}
.workspace-rail {
  min-width: 0;
  background: #efe9f6;
  border: 1px solid #ded2e9;
  border-radius: 12px;
  padding: 15px;
}
.workspace-rail nav {
  display: grid;
  gap: 7px;
}
.workspace-rail nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff80;
  color: #5f4479;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.workspace-rail nav a:hover {
  background: white;
}
.workspace-rail a:focus-visible,
.workspace-rail select:focus-visible,
.compact-preview:focus-visible,
.session-buttons a:focus-visible {
  outline: 3px solid #9e6e22;
  outline-offset: 3px;
}
.workspace-rail #owner-view-switch {
  padding: 0;
  margin: 0 0 15px;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.workspace-rail #owner-view-title {
  display: block;
  font-size: .875rem;
  font-weight: 800;
  color: #503565;
  margin-bottom: 7px;
}
#owner-view-select {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 10px;
  border: 1px solid #a991c0;
  border-radius: 8px;
  background: #fff;
  color: #49305f;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
}
#owner-view-note {
  font-size: .75rem !important;
  margin: 7px 0 0;
  color: #685675;
}
body[data-connected=true] .access-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
body[data-connected=true] .access-primary {
  display: contents;
}
body[data-connected=true] #workspace-rail {
  grid-column: 1;
  grid-row: 1/span 3;
}
body[data-connected=true] #workspace {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-width: 0;
}
body[data-connected=true] #teacher-dashboard {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
body[data-connected=true][data-owner-view=teacher] #teacher-dashboard {
  grid-row: 2;
}
#owner-teacher-panel {
  margin: 0;
}
#owner-teacher-panel > .panel-heading {
  padding: 16px 20px;
}
#owner-teacher-panel > .panel-heading .eyebrow {
  display: none;
}
#owner-teacher-panel > .panel-body {
  padding: 18px 20px;
}
#saved-classes {
  padding: 0;
  border: 0;
  margin: 0;
}
.saved-class-heading .eyebrow {
  display: none;
}
.saved-class-heading h3 {
  font-size: 1.2rem;
}
.class-create-form {
  margin-top: 16px;
}
.owner-examples {
  border-top: 1px solid #ddd4e5;
  margin-top: 20px;
  padding-top: 12px;
}
.owner-examples > summary {
  font-size: .875rem;
  font-weight: 700;
  min-height: 44px;
  color: #64418b;
  cursor: pointer;
}
.owner-examples > h3 {
  display: none;
}
#owner-workspace > .workspace-heading {
  margin: 0 0 16px;
}
.dashboard-heading {
  margin: 0 0 12px;
}
.dashboard-heading h2 {
  font-size: 1.45rem;
}
.approval-bubble {
  border-radius: 12px;
  padding: 12px 15px;
  gap: 10px 13px;
  margin-bottom: 16px;
}
.approval-symbol {
  height: 30px;
  width: 30px;
  font-size: 1rem;
}
.approval-copy h3 {
  font-size: 1rem;
  margin: 0 0 3px;
}
.approval-copy p {
  font-size: .8rem;
  line-height: 1.5;
}
.approval-copy {
  min-width: 160px;
}
#dashboard-refresh-slot .secondary-button {
  min-height: 44px;
  font-size: .8rem;
  padding: 9px 12px;
}
.dashboard-cards {
  gap: 16px;
}
.dashboard-card {
  min-height: 205px;
  padding: 20px;
  gap: 18px;
}
.dashboard-card h3 {
  font-size: 1.15rem;
}
.dashboard-card p {
  font-size: .875rem;
}
.dashboard-card .card-availability {
  font-size: .75rem;
}
.launch-art {
  width: 80px;
  height: 100px;
}
.dashboard-launch {
  font-size: .875rem;
  min-height: 44px;
}
.dashboard-public-note {
  font-size: .8rem;
  margin-top: 16px;
}
.access-status-details {
  margin-top: 12px;
}
.access-status-details > summary {
  font-size: .875rem;
  min-height: 44px;
}
#account-details {
  margin-top: 24px;
  padding: 12px 16px;
  border: 1px solid #ddd4e5;
  border-radius: 10px;
  background: #f0ebe4;
}
#account-details > summary {
  font-size: .875rem;
  min-height: 32px;
}
#account-details .receipt {
  max-width: 850px;
}
#account-details .shared-device {
  max-width: 850px;
}
#privacy-disclosure {
  margin-top: 18px;
  padding: 12px 16px;
}
.footer-note {
  margin-top: 16px;
}
.site-footer {
  gap: 12px;
}
.site-footer img {
  border-radius: 50%;
  object-fit: contain;
}
.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.primary-button,
.secondary-button,
.danger-button,
input,
select {
  min-height: 44px;
}
@media (max-width: 1000px) {
  body[data-connected=true] .access-layout {
    grid-template-columns: 165px minmax(0, 1fr);
    gap: 15px;
  }
  .dashboard-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .launch-art {
    height: 80px;
  }
  .session-account strong {
    display: none;
  }
}
@media (max-width: 760px) {
  .spark-bar-inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .spark-navigation {
    gap: 12px;
  }
  .spark-navigation a {
    font-size: .875rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 5px 0;
  }
  .spark-account-link {
    font-size: .8rem;
    min-height: 44px;
  }
  .shell {
    width: calc(100% - 28px);
    padding-top: 12px;
  }
  .session-controls {
    flex-wrap: wrap;
    padding: 11px 12px;
    gap: 8px;
  }
  .session-account {
    flex-basis: 100%;
    gap: 6px 12px;
  }
  .session-account span {
    font-size: .875rem;
  }
  .session-buttons {
    justify-content: space-between;
    width: 100%;
  }
  body[data-connected=true] .access-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  body[data-connected=true] .access-primary {
    display: contents;
  }
  #workspace-rail,
  #workspace,
  #teacher-dashboard {
    width: 100%;
  }
  .workspace-rail {
    padding: 12px;
  }
  .workspace-rail nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .workspace-rail nav a {
    padding: 8px 12px;
  }
  .workspace-rail #owner-view-switch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px 12px;
    margin-bottom: 10px;
  }
  .workspace-rail #owner-view-title {
    margin: 0;
  }
  #owner-view-note {
    grid-column: 2;
    margin: 0;
  }
  .dashboard-heading h2 {
    font-size: 1.35rem;
  }
  .approval-bubble {
    padding: 12px;
    gap: 10px;
  }
  .approval-copy {
    min-width: 0;
  }
  .approval-copy p {
    font-size: .8rem;
  }
  #dashboard-refresh-slot {
    padding: 0;
    flex-basis: auto;
    margin-left: 40px;
  }
  .dashboard-card {
    padding: 18px;
    min-height: 0;
  }
  .compact-entry-intro {
    margin: 10px auto 14px;
    gap: 12px;
  }
  .compact-entry-intro h1 {
    font-size: 1.2rem;
  }
  .compact-entry-intro img {
    height: 60px;
    width: 40px;
  }
  .access-primary #auth-card .panel-heading {
    padding: 15px 16px 0;
  }
  .access-primary #auth-card .panel-body {
    padding: 12px 16px 16px;
  }
  .access-primary #auth-card h2 {
    font-size: 1.1rem;
  }
  #owner-teacher-panel > .panel-body {
    padding: 16px;
  }
  .saved-class-heading {
    flex-wrap: wrap;
  }
  .site-footer {
    flex-wrap: wrap;
  }
}
@media (max-width: 500px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
  }
  .dashboard-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .launch-art {
    width: 68px;
    height: 90px;
  }
  .dashboard-card h3 {
    font-size: 1.1rem;
  }
  .dashboard-card p {
    font-size: .875rem;
  }
  .dashboard-launch {
    font-size: .875rem;
  }
  .approval-copy h3 {
    font-size: 1rem;
  }
}
.spark-brand {
  flex-direction: column;
  gap: 0;
  align-items: center;
  line-height: 1;
}
.spark-brand .spark-wordmark {
  display: block;
  width: 124px;
  height: 62px;
  max-width: 100%;
  object-fit: contain;
}
.spark-brand small {
  margin: 0;
  line-height: 1.2;
  font-size: .75rem !important;
  letter-spacing: 0;
}
.spark-bar-inner {
  padding-top: 8px;
  padding-bottom: 8px;
}
@media (max-width: 760px) {
  .spark-brand .spark-wordmark {
    width: 108px;
    height: 54px;
  }
  .spark-brand small {
    font-size: .75rem !important;
  }
  .spark-bar-inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
#existing-entry {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
#show-sign-up,
#signup-sign-in,
#student-sign-in {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
#entry-role-back {
  margin-right: 14px;
}
.spark-bar-inner {
  flex-wrap: wrap;
}
#header-sign-up {
  white-space: nowrap;
}

/* ../../../../workspace/scratch/cc51ea90c5d2/firebase-pilot/math-studio-v16-staged/spark-profile-release/qa/ui-spark-profile/src/original-layout.css */
:root,
body {
  background: #f7f6f1;
  color: #27364d;
}
.shell {
  max-width: 1440px;
}
.pilot-strip {
  background: #efedce;
  color: #625a35;
}
.session-controls {
  background: #f4f0e8;
  border-color: #e6e0d6;
}
.session-account strong {
  color: #2e3c53;
}
.session-account span {
  color: #655c70;
}
.session-account .session-access {
  background: #ede6f5;
}
body[data-connected=true] .access-layout {
  grid-template-columns: 215px minmax(0, 1fr) 250px;
  gap: 24px;
  align-items: start;
}
body[data-connected=true] #workspace-rail {
  grid-column: 1;
  grid-row: 1/span 4;
}
body[data-connected=true] #original-support-rail {
  grid-column: 3;
  grid-row: 1/span 4;
}
body[data-connected=true] #workspace {
  grid-column: 2;
  grid-row: 1;
}
body[data-connected=true] #teacher-dashboard {
  grid-column: 2;
  grid-row: 1;
}
body[data-connected=true][data-owner-view=teacher] #teacher-dashboard {
  grid-row: 2;
}
.workspace-rail {
  background: none;
  border: 0;
  padding: 0;
}
.workspace-rail #owner-view-switch {
  padding: 13px 15px;
  border: 1px solid #ded5e7;
  border-radius: 14px;
  background: #eee8f7;
  margin-bottom: 14px;
}
.original-profile {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #e3e0df;
  background: #fff;
  box-shadow: 0 4px 0 #e1dcd50d;
}
.original-profile-cover {
  position: relative;
  background: #e8e1f3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px 18px;
  overflow: hidden;
}
.original-profile-cover:after {
  content: "";
  position: absolute;
  right: -25px;
  top: -43px;
  width: 105px;
  height: 105px;
  border: 1px solid #d9cde9;
  border-radius: 50%;
}
.original-avatar {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: #49317d;
  color: #fff;
  border: 5px solid #f8f5fc;
  border-radius: 50%;
  font-size: 1.8rem;
  font-weight: 800;
  font-style: italic;
  box-shadow: 0 4px 12px #64458915;
}
.original-profile-tag {
  border: 1px solid #dbcbee;
  background: #faf8ff;
  color: #73559a;
  font-size: .75rem;
  line-height: 1.5;
  border-radius: 99px;
  padding: 3px 10px;
}
.profile-orbit {
  position: absolute;
  top: 28px;
  left: 25px;
  color: #a18bc1;
  font-size: 1.7rem;
}
.small-orbit {
  left: auto;
  right: 22px;
  top: 58px;
  font-size: 1.1rem;
}
.original-profile-body {
  padding: 20px 18px;
}
.original-profile-body h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -.03em;
  color: #27364d;
  margin: 0 0 10px;
}
#original-profile-email {
  font-size: .875rem;
  line-height: 1.6;
  color: #655974;
  overflow-wrap: anywhere;
  margin: 0 0 12px;
}
.original-profile-note {
  font-size: .875rem;
  line-height: 1.6;
  color: #756681;
  margin: 0 0 18px;
}
#original-profile-access {
  border-top: 1px solid #eee9e4;
  padding-top: 14px;
}
#original-profile-access .session-access {
  font-size: .8rem;
  color: #634982;
  font-weight: 700;
  line-height: 1.5;
}
.original-shortcuts {
  font-size: .75rem;
  letter-spacing: .1em;
  font-weight: 800;
  color: #6e7484;
  margin: 24px 5px 12px;
}
.workspace-rail nav {
  gap: 6px;
}
.workspace-rail nav a {
  min-height: 46px;
  background: none;
  padding: 11px 10px;
  border-radius: 11px;
  color: #33435a;
  font-size: .875rem;
}
.workspace-rail nav a:before {
  content: "\2726";
  display: grid;
  place-items: center;
  flex: none;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: #e7dfef;
  color: #795899;
  font-size: 1rem;
  margin-right: 10px;
}
.workspace-rail nav a:nth-child(even):before {
  background: #e0eedc;
  color: #698354;
}
.workspace-rail nav a:hover {
  background: #eee9f3;
}
#owner-refresh-slot .secondary-button {
  width: 100%;
  margin: 0 0 12px;
}
.original-heading {
  margin: 0 0 15px;
}
.original-heading h2 {
  font-size: 1.55rem;
  line-height: 1.2;
  color: #293850;
  letter-spacing: -.045em;
}
.approval-bubble {
  box-shadow: none;
  border-color: #e4dbb8;
  background: #f6f0d8;
  border-radius: 13px;
  padding: 12px 15px;
}
.approval-copy h3 {
  font-size: 1rem;
}
.approval-copy p {
  font-size: .8rem;
}
.dashboard-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.classroom-card {
  grid-column: 1/-1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  background: #e5edbf;
  border-color: #d7e3a6;
  border-radius: 18px;
  padding: 25px;
  min-height: 250px;
  box-shadow: none;
}
.classroom-card.card-locked {
  background: #e8edcf;
  border-color: #dce3bb;
}
.classroom-card .launch-copy {
  flex: 1;
  min-width: 0;
}
.classroom-card .card-kicker {
  display: inline-block;
  background: #f7fae7;
  border: 1px solid #d0dea7;
  border-radius: 99px;
  padding: 5px 10px;
  font-size: .75rem;
  letter-spacing: .04em;
  color: #5e753c;
  margin-bottom: 15px;
}
.classroom-card h3,
.classroom-card.card-locked h3 {
  font-size: 1.55rem;
  line-height: 1.3;
  letter-spacing: -.035em;
  color: #41563c;
  margin: 0 0 12px;
}
.classroom-card p {
  font-size: .875rem;
  line-height: 1.65;
  color: #586e45;
  margin-bottom: 18px;
}
.classroom-card .dashboard-launch {
  background: #49317d;
  border-color: #49317d;
  min-height: 48px;
  padding: 12px 16px;
  font-size: .875rem;
}
.classroom-card .dashboard-launch:disabled {
  background: #e1dfd4;
  color: #655f6d;
  border-color: #c5c2b6;
}
.classroom-card .card-availability {
  color: #5f6b50;
  font-size: .75rem;
}
.classroom-card .classroom-art {
  width: 155px;
  height: 185px;
  transform: none;
  position: relative;
  flex: none;
  filter: none;
  opacity: 1;
}
.original-back-card {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 106px;
  height: 141px;
  border-radius: 12px;
  background: #a692cb;
  transform: rotate(13deg);
}
.original-math-card {
  position: absolute;
  left: 0;
  top: 38px;
  width: 120px;
  height: 139px;
  padding: 15px;
  background: #fffef3;
  border: 1px solid #e4dfbf;
  border-radius: 12px;
  box-shadow: 0 7px 0 #b8c98826;
  transform: rotate(-10deg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.original-math-card small {
  font-size: .48rem;
  letter-spacing: .1em;
  font-weight: 700;
  color: #687488;
  line-height: 1.4;
}
.original-math-card b {
  font-size: 3rem;
  color: #6e5493;
  line-height: 1.2;
  letter-spacing: -.07em;
  margin: 4px 0 7px;
}
.original-blocks {
  display: grid;
  grid-template-columns: repeat(5, 13px);
  gap: 4px;
}
.original-blocks i {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: #e8e2f1;
}
.original-blocks i:nth-child(-n+4) {
  background: #9b85bd;
}
.classroom-card .art-star {
  left: -9px;
  right: auto;
  top: 15px;
  color: #9ba26b;
  font-size: 1.6rem;
}
.classes-card,
.progress-card {
  display: block;
  border-radius: 15px;
  background: #fff;
  border-color: #e3dfdc;
  box-shadow: none;
  padding: 20px;
  min-height: 0;
}
.classes-card .launch-art,
.progress-card .launch-art {
  display: none;
}
.classes-card h3,
.progress-card h3 {
  font-size: 1.05rem;
  color: #38475c;
}
.classes-card p,
.progress-card p {
  font-size: .875rem;
}
.classes-card .card-kicker,
.progress-card .card-kicker {
  font-size: .75rem;
  color: #7b668c;
}
.classes-card .card-availability,
.progress-card .card-availability {
  font-size: .75rem;
  color: #6c6277;
}
.original-support-rail {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.original-session-card,
.original-help-card {
  padding: 22px 19px;
  border: 1px solid #e2dfdc;
  background: white;
  border-radius: 18px;
  box-shadow: 0 4px 0 #e1dcd50b;
}
.support-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.support-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  background: #e3efdd;
  border-radius: 10px;
  color: #6f8558;
  font-size: 1.1rem;
}
.support-heading h2 {
  font-size: 1.05rem;
  color: #2c3d55;
  line-height: 1.35;
  margin: 0;
}
.original-sample-tag {
  font-size: .75rem !important;
  display: inline-block;
  background: #f3f0e8;
  border-radius: 99px;
  padding: 5px 9px;
  color: #796447 !important;
  line-height: 1.5;
}
.original-session-card h3 {
  font-size: 1.25rem;
  letter-spacing: -.03em;
  color: #3b4b61;
  line-height: 1.35;
  margin: 16px 0 9px;
}
.original-session-card p {
  font-size: .875rem;
  line-height: 1.7;
  color: #756881;
  margin: 0 0 14px;
}
.original-sample-chart {
  display: flex;
  align-items: end;
  gap: 7px;
  height: 80px;
  padding-top: 10px;
  border-bottom: 1px solid #e6dfed;
  margin: 18px 0;
}
.original-sample-chart i {
  height: 29%;
  flex: 1;
  background: #ded4ee;
  border-radius: 5px 5px 0 0;
}
.original-sample-chart i:nth-child(2) {
  height: 44%;
}
.original-sample-chart i:nth-child(3) {
  height: 37%;
}
.original-sample-chart i:nth-child(4) {
  height: 62%;
  background: #c9b9df;
}
.original-sample-chart i:nth-child(5) {
  height: 78%;
  background: #b39bcf;
}
.original-sample-chart i:nth-child(6) {
  height: 96%;
  background: #9477b7;
}
.original-session-card .original-sample-disclosure {
  font-size: .8rem;
  line-height: 1.7;
  color: #74677e;
}
.original-session-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-top: 14px;
  color: #553880;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
.original-session-card > a:hover {
  text-decoration: underline;
}
.original-help-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 0;
}
.original-help-card .resources-art {
  height: 90px;
  width: 60px;
  transform: none;
  margin: 0;
}
.original-help-card .resources-art img {
  display: block;
  width: 60px;
  height: 90px;
  object-fit: contain;
}
.original-help-card .card-kicker {
  font-size: .75rem;
  color: #92714e;
}
.original-help-card h3 {
  font-size: 1.15rem;
  color: #3c4b5f;
}
.original-help-card p {
  font-size: .875rem;
  color: #74677b;
}
.original-help-card .dashboard-launch {
  min-height: 44px;
  background: #71548f;
  border-color: #71548f;
  font-size: .875rem;
}
.original-help-card .card-availability {
  font-size: .75rem;
  color: #706579;
}
.original-session-card a:focus-visible {
  outline: 3px solid #9e6e22;
  outline-offset: 4px;
}
#owner-teacher-panel {
  border-radius: 18px;
  border-color: #e2dfdc;
  box-shadow: none;
}
#owner-teacher-panel > .panel-heading {
  background: #ebe4f4;
  border-bottom-color: #ded3e9;
}
.saved-class-heading h3 {
  color: #33445a;
}
.owner-workspace .queue-panel {
  border-radius: 16px;
}
#account-details,
#privacy-disclosure {
  background: #f2eee6;
  border-color: #e5ded3;
}
@media (max-width: 1250px) {
  body[data-connected=true] .access-layout {
    grid-template-columns: 190px minmax(0, 1fr) 215px;
    gap: 18px;
  }
  .original-profile-body {
    padding: 18px 15px;
  }
  .original-session-card,
  .original-help-card {
    padding: 19px 16px;
  }
  .classroom-card {
    padding: 22px;
    gap: 12px;
  }
  .classroom-card .classroom-art {
    width: 125px;
    transform: scale(.88);
    transform-origin: center right;
  }
  .classroom-card h3,
  .classroom-card.card-locked h3 {
    font-size: 1.35rem;
  }
  .original-heading h2 {
    font-size: 1.45rem;
  }
}
@media (max-width: 1050px) {
  body[data-connected=true] .access-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 18px;
  }
  body[data-connected=true] #original-support-rail {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .original-support-rail {
    gap: 16px;
  }
  .classroom-card .classroom-art {
    width: 145px;
    transform: none;
  }
  .classroom-card h3,
  .classroom-card.card-locked h3 {
    font-size: 1.5rem;
  }
  .original-help-card .resources-art {
    display: none;
  }
}
@media (max-width: 760px) {
  body[data-connected=true] .access-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  body[data-connected=true] .access-primary {
    display: contents;
  }
  #original-support-rail {
    width: 100%;
  }
  body[data-connected=true] #original-support-rail {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .workspace-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .workspace-rail #owner-view-switch {
    padding: 12px;
    margin-bottom: 10px;
  }
  .original-profile {
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .original-profile-cover,
  .original-profile-note,
  .original-shortcuts {
    display: none;
  }
  .original-profile-body {
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
  }
  .original-profile-body h2 {
    display: none;
  }
  #original-profile-email {
    margin: 0;
    font-size: .875rem;
  }
  #original-profile-access {
    border: 0;
    padding: 0;
  }
  .workspace-rail nav {
    display: flex;
    gap: 6px;
  }
  .workspace-rail nav a {
    padding: 7px 9px;
    min-height: 44px;
  }
  .workspace-rail nav a:before {
    display: none;
  }
  .original-heading h2 {
    font-size: 1.35rem;
  }
  .classroom-card {
    min-height: 0;
    padding: 21px;
    gap: 12px;
  }
  .classroom-card .classroom-art {
    width: 133px;
    height: 170px;
    transform: scale(.9);
    transform-origin: center right;
  }
  .classroom-card h3,
  .classroom-card.card-locked h3 {
    font-size: 1.4rem;
  }
  .classes-card,
  .progress-card {
    padding: 18px;
  }
  .original-support-rail .original-session-card,
  .original-support-rail .original-help-card {
    padding: 20px;
  }
  .original-sample-chart {
    height: 60px;
  }
  .dashboard-cards {
    gap: 14px;
  }
}
@media (max-width: 550px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
  }
  .classroom-card {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 22px;
  }
  .classroom-card .launch-copy {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .classroom-card .classroom-art {
    position: absolute;
    right: 13px;
    top: 12px;
    width: 90px;
    height: 105px;
    transform: scale(.55);
    transform-origin: top right;
    opacity: .65;
  }
  .classroom-card .card-kicker {
    max-width: calc(100% - 65px);
    font-size: .75rem;
  }
  .classroom-card h3,
  .classroom-card.card-locked h3 {
    font-size: 1.35rem;
    max-width: 270px;
  }
  .classroom-card p {
    font-size: .875rem;
  }
  .classroom-card .dashboard-launch {
    min-height: 48px;
  }
  .classroom-card .card-availability {
    font-size: .75rem;
  }
  .classes-card,
  .progress-card {
    display: block;
  }
  .classes-card h3,
  .progress-card h3 {
    font-size: 1.1rem;
  }
  body[data-connected=true] #original-support-rail {
    grid-template-columns: 1fr;
  }
  .original-support-rail .original-help-card {
    position: relative;
    padding-right: 85px;
  }
  .original-help-card .resources-art {
    display: block;
    position: absolute;
    right: 17px;
    top: 20px;
    width: 48px;
    height: 72px;
  }
  .original-help-card .resources-art img {
    width: 48px;
    height: 72px;
  }
  .original-session-card h3 {
    font-size: 1.2rem;
  }
  .original-profile-body {
    gap: 4px 10px;
  }
}
.practice-card {
  grid-column: 1/-1;
  display: block;
  min-height: 0;
  padding: 21px 23px;
  border-radius: 15px;
  background: #f1ebf8;
  border-color: #ded1ea;
  box-shadow: none;
}
.practice-card.card-locked {
  background: #f3f0f6;
}
.practice-card h3 {
  font-size: 1.2rem;
  color: #514069;
}
.practice-card p {
  font-size: .875rem;
  color: #71627f;
}
.practice-card .card-kicker,
.practice-card .card-availability {
  font-size: .75rem;
}
.practice-card .dashboard-launch {
  min-height: 44px;
  font-size: .875rem;
}
@media (max-width: 550px) {
  .classroom-card .classroom-art {
    display: none;
  }
  .classroom-card .card-kicker {
    max-width: 100%;
  }
  .practice-card {
    padding: 20px;
  }
}

/* local.css */
#local-preview-status {
  font-size: .7rem;
  line-height: 1.45;
  color: #65536f;
  overflow-wrap: anywhere;
}
#owner-view-select {
  max-width: 100%;
}
.class-control-menu .class-local-message {
  font-size: .85rem;
  line-height: 1.5;
}
.class-local-roster {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.class-local-roster li {
  border: 1px solid #ded3eb;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.class-local-roster button {
  margin-top: 8px;
}
.class-local-assign {
  margin: 10px 0 16px;
}
.local-progress-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.local-progress-table td,
.local-progress-table th {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ded3eb;
}
.class-control-menu .local-code {
  font: 800 1.5rem ui-monospace, monospace;
  letter-spacing: .12em;
}
.class-control-menu .local-tool-content {
  min-width: 0;
}
.class-control-menu .local-table-wrap {
  overflow: auto;
}
.class-card-grid #class-detail {
  grid-column: 1/-1;
}
.class-card-grid:has(#class-detail:not([hidden])) #class-add-tile {
  display: none;
}
#session-feedback:has(#auth-status:empty) {
  display: none;
}
body[data-classes-view=true] .pilot-strip {
  display: none;
}
.classes-page #saved-classes {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.classes-page .class-card-grid {
  margin-top: 0;
}
.classes-page-heading #class-refresh {
  flex: none;
  margin: 0;
  min-height: 44px;
}
@media (min-width: 761px) {
  body[data-connected=true][data-classes-view=true] .access-layout {
    grid-template-columns: 215px minmax(0, 1fr);
  }
  body[data-connected=true][data-classes-view=true] #workspace {
    grid-column: 2/-1;
    min-width: 0;
  }
}
@media (min-width: 761px) and (max-width: 1250px) {
  body[data-connected=true][data-classes-view=true] .access-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .workspace-rail #owner-view-switch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    min-width: 0;
  }
  .workspace-rail #owner-view-title,
  .workspace-rail #owner-view-select,
  .workspace-rail #owner-view-note,
  .workspace-rail #local-preview-status {
    grid-column: 1;
    min-width: 0;
    margin: 0;
  }
  .workspace-rail #owner-view-select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
  }
  .workspace-rail #owner-view-note,
  .workspace-rail #local-preview-status {
    line-height: 1.4;
    max-width: none;
  }
}
#class-review-dialog.class-create-confirmation {
  width: min(480px, calc(100% - 32px));
  padding: clamp(20px, 5vw, 32px);
  border: 2px solid #bca4dd;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      #eee3ff 0%,
      #e1f3ff 55%,
      #fff0d1 100%);
  box-shadow: 0 22px 70px #34204d4d;
  color: #402654;
}
#class-review-dialog.class-create-confirmation h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 20px;
  letter-spacing: -.025em;
}
#class-review-dialog.class-create-confirmation .class-review-title {
  margin: 0;
  padding: 20px 16px;
  border: 2px solid #c5ade4;
  border-radius: 16px;
  background: #ffffffd9;
  color: #543375;
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#class-review-dialog.class-create-confirmation .class-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
#class-review-dialog.class-create-confirmation .class-card-actions button {
  min-width: 0;
  min-height: 48px;
  margin: 0;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 750;
}
#class-review-dialog.class-create-confirmation #class-confirm {
  background: #694192;
  border: 2px solid #694192;
  color: #fff;
}
#class-review-dialog.class-create-confirmation #class-cancel {
  background: #ffffffde;
  border: 2px solid #b697d3;
  color: #543375;
}
#class-review-dialog.class-create-confirmation #class-confirm:hover:not(:disabled) {
  background: #573478;
  border-color: #573478;
}
#class-review-dialog.class-create-confirmation #class-cancel:hover:not(:disabled) {
  background: #f3e9ff;
}
#class-review-dialog.class-create-confirmation button:focus-visible {
  outline: 3px solid #543375;
  outline-offset: 4px;
}
.class-card-grid .saved-class-card.class-launch-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: #402654;
  border: 2px solid #b59ad8;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      #ede1ff 0%,
      #e0f3ff 65%,
      #fff0cc 100%);
  box-shadow: 0 5px 0 #b7a2ce55;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.class-launch-tile .class-launch-kicker {
  display: block;
  padding-right: 48px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #63437b;
}
.class-launch-tile .class-launch-spark {
  position: absolute;
  right: 20px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: #ffdc75;
  color: #62418b;
  font-size: 1.9rem;
  line-height: 1;
  transform: rotate(10deg);
}
.class-launch-tile .class-launch-title {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
  min-width: 0;
}
.class-launch-tile .class-launch-count {
  display: block;
  font-size: .85rem;
  line-height: 1.45;
  color: #604d73;
  overflow-wrap: anywhere;
}
.class-launch-tile .class-launch-code {
  display: grid;
  gap: 5px;
  align-self: flex-start;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0;
  padding: 11px 15px;
  border: 1px solid #bea6d9;
  border-radius: 13px;
  background: #ffffffd9;
  color: #59406f;
}
.class-launch-tile .class-launch-code > span {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.4;
}
.class-launch-tile .class-launch-code-value {
  font: 800 clamp(1.1rem, 4vw, 1.35rem) ui-monospace, monospace;
  letter-spacing: .14em;
  overflow-wrap: anywhere;
  color: #4c2f6e;
}
.class-launch-tile .class-launch-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 11px 15px;
  border-radius: 12px;
  background: #694192;
  color: white;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.5;
}
.class-launch-tile .class-launch-action > span {
  font-size: 1.2rem;
  line-height: 1;
}
.class-card-grid .saved-class-card.class-launch-tile:hover:not(:disabled) {
  border-color: #77509f;
  box-shadow: 0 6px 0 #a98bc76b, 0 10px 24px #78509b1f;
}
.class-card-grid .saved-class-card.class-launch-tile:focus-visible {
  outline: 3px solid #65408b;
  outline-offset: 5px;
}
.class-card-grid .saved-class-card.class-launch-tile:disabled {
  cursor: wait;
  opacity: .7;
}
.class-card-grid .saved-class-card.class-launch-tile[data-class-status=archived] {
  background:
    linear-gradient(
      135deg,
      #eee7f4,
      #e9eff5);
  border-color: #b6a9c5;
}
@media (max-width: 420px) {
  .class-card-grid .saved-class-card.class-launch-tile {
    padding: 18px;
    gap: 11px;
  }
  .class-launch-tile .class-launch-spark {
    right: 16px;
    top: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .class-card-grid .saved-class-card.class-launch-tile {
    transition: none;
  }
}
.class-control-menu .student-roster-tool {
  min-width: 0;
  padding: clamp(14px, 2.5vw, 24px);
}
.student-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-top: 20px;
  align-items: stretch;
}
.student-game-card {
  --student-tint:#eee3ff;
  --student-border:#b89bd8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  min-height: 220px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 18px 12px;
  text-align: center;
  font: inherit;
  color: #432c61;
  border: 2px solid var(--student-border);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      var(--student-tint),
      #fffdf4);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--student-border) 45%, transparent);
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: transform .15s, box-shadow .15s;
}
.student-game-card[data-student-color=blue] {
  --student-tint:#def2ff;
  --student-border:#91bddb;
}
.student-game-card[data-student-color=green] {
  --student-tint:#e2f5dc;
  --student-border:#a4c895;
}
.student-game-card[data-student-color=orange] {
  --student-tint:#fff0cf;
  --student-border:#dfbd78;
}
.student-game-card[data-student-color=pink] {
  --student-tint:#ffe2f0;
  --student-border:#dba3c0;
}
.student-game-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  background: #ffffffd9;
  border: 2px solid var(--student-border);
  border-radius: 25px;
  flex: none;
}
.student-game-avatar img {
  width: 60px;
  height: 70px;
  object-fit: contain;
}
.student-game-number {
  position: absolute;
  right: -9px;
  bottom: -4px;
  padding: 4px 7px;
  border-radius: 9px;
  background: #6d4696;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
}
.student-game-name {
  font-size: 1.2rem;
  line-height: 1.3;
}
.student-game-membership {
  font-size: .75rem;
  font-weight: 750;
  line-height: 1.4;
}
.student-game-progress {
  font-size: .8rem;
  line-height: 1.4;
  color: #64516f;
}
.student-game-open {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 9px 10px;
  border-radius: 12px;
  background: #6d4696;
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  box-sizing: border-box;
}
.student-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--student-border) 45%, transparent);
}
.student-game-card:focus-visible {
  outline: 3px solid #5b3584;
  outline-offset: 5px;
}
.teacher-student-stats {
  min-width: 0;
  max-width: 100%;
  color: #432f58;
}
.student-stats-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.student-stats-top button {
  margin: 0;
  min-height: 44px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.student-stats-header {
  padding: 24px;
  border: 2px solid #bea6dc;
  border-radius: 22px;
  background:
    linear-gradient(
      120deg,
      #eee3ff,
      #e5f5ff 70%,
      #fff2cd);
  margin-bottom: 20px;
}
.student-stats-kicker {
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .12em;
}
.student-stats-header h4 {
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  margin: 8px 0 !important;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.student-stats-class {
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
  margin: 0 0 14px !important;
}
.student-stats-joined {
  display: inline-block;
  background: #ffffffd9;
  border: 1px solid #bda6d3;
  border-radius: 99px;
  padding: 6px 12px;
  font-size: .75rem;
  font-weight: 750;
}
.student-stat-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.student-stat-metric {
  min-width: 0;
}
.student-stat-summary > .student-stat-metric {
  border: 1px solid #d9c7e8;
  border-radius: 16px;
  background: #fcf9ff;
  padding: 16px;
}
.student-stat-metric dt {
  font-size: .75rem;
  line-height: 1.45;
  font-weight: 750;
  color: #685276;
}
.student-stat-metric dd {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 800;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: #4d2e70;
}
.student-stat-metric p {
  font-size: .7rem;
  line-height: 1.5;
  margin: 6px 0 0 !important;
  color: #6b5c76;
}
.student-stat-record-note {
  font-size: .8rem;
  line-height: 1.65;
  padding: 14px 16px;
  border: 1px solid #e4d9ec;
  border-radius: 14px;
  background: #faf7fc;
  margin: 0 0 24px !important;
}
.teacher-student-stats h5 {
  font-size: 1.1rem;
  line-height: 1.4;
  margin: 22px 0 12px;
}
.teacher-student-stats h6 {
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
.student-stat-section {
  min-width: 0;
  margin-top: 24px;
}
.student-stat-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}
.student-stat-skill {
  min-width: 0;
  border: 1px solid #d8cae5;
  border-radius: 16px;
  padding: 16px;
  background: #f4f8ff;
}
.student-stat-skill dl,
.student-stat-assignment-metrics,
.student-stat-answer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 14px;
  margin: 0;
}
.student-stat-assignment {
  border: 2px solid #cdb8e1;
  border-radius: 18px;
  overflow: hidden;
  margin: 14px 0;
  background: #fff;
}
.student-stat-assignment > summary {
  cursor: pointer;
  display: list-item;
  list-style-position: inside;
  padding: 18px;
  background:
    linear-gradient(
      120deg,
      #eee5fc,
      #eaf5ff);
  font-size: .9rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.student-stat-assignment > summary strong {
  font-size: 1.05rem;
}
.student-stat-assignment > summary span {
  display: block;
  margin: 4px 0 0 18px;
}
.student-stat-assignment-status {
  font-size: .75rem;
  font-weight: 750;
}
.student-stat-assignment > summary:focus-visible {
  outline: 3px solid #5b3584;
  outline-offset: -5px;
}
.student-stat-assignment-metrics {
  padding: 18px;
}
.student-stat-assignment > .small-note {
  padding: 0 18px;
  margin: 0 0 16px !important;
}
.student-stat-questions {
  list-style: none;
  margin: 0;
  padding: 0 18px 18px;
  display: grid;
  gap: 16px;
}
.student-stat-question {
  border: 1px solid #e1d5eb;
  border-radius: 15px;
  padding: 16px;
  background: #fffefa;
  min-width: 0;
  overflow-wrap: anywhere;
}
.student-stat-question-label {
  font-size: .7rem;
  line-height: 1.5;
  color: #786084;
  font-weight: 750;
  margin: 0 0 10px !important;
}
.student-stat-visual {
  max-width: 100%;
  margin: 12px 0;
  overflow: auto;
}
.student-stat-visual svg {
  display: block;
  max-width: 100%;
  max-height: 260px;
  width: auto;
  height: auto;
  margin: auto;
}
.student-stat-visual .column-arithmetic {
  font-size: 1.4rem;
  max-width: 200px;
  text-align: right;
  margin: auto;
}
.student-stat-choices {
  padding-left: 22px;
  font-size: .85rem;
  line-height: 1.6;
  margin: 12px 0;
}
.student-stat-choices .selected {
  color: #573580;
  font-weight: 700;
}
.student-stat-answer {
  border-top: 1px solid #e9e0ef;
  padding-top: 14px;
}
@media (max-width: 600px) {
  .student-roster-grid {
    gap: 14px;
  }
  .student-stats-header {
    padding: 18px;
  }
  .student-stats-top {
    flex-direction: column;
    align-items: stretch;
  }
  .student-stats-top button {
    width: 100%;
  }
  .student-stat-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .student-stat-questions {
    padding: 0 12px 12px;
  }
  .student-stat-question {
    padding: 12px;
  }
  .student-stat-assignment > summary {
    padding: 14px;
  }
  .student-stat-assignment-metrics {
    padding: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .student-game-card {
    transition: none;
  }
  .student-game-card:hover {
    transform: none;
  }
}
@media (max-width: 760px) {
  body[data-connected=true] #workspace-rail #owner-view-switch {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* class-appearance.css */
.spark-class-game-tile {
  --class-theme-start:#eee2ff;
  --class-theme-end:#e7f2ff;
  --class-theme-border:#b59ad8;
  --class-theme-accent:#694192;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  aspect-ratio: 1;
  min-height: 260px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 24px;
  border: 2px solid var(--class-theme-border);
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      var(--class-theme-start),
      var(--class-theme-end) 72%,
      #fff7df);
  box-shadow: 0 5px 0 #68517a25;
  text-align: left;
  color: #402654;
  font: inherit;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.class-card-grid .saved-class-card.class-launch-tile.spark-class-game-tile {
  aspect-ratio: 1;
  min-height: 300px;
  min-width: 0;
  background:
    linear-gradient(
      135deg,
      var(--class-theme-start),
      var(--class-theme-end) 72%,
      #fff7df);
  border-color: var(--class-theme-border);
}
.spark-class-game-tile .spark-class-icon {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 58px;
  height: 58px;
  flex: none;
  background: #ffffffe0;
  border: 1px solid var(--class-theme-border);
  border-radius: 18px;
  font-size: 2rem;
  line-height: 1;
}
.spark-class-game-tile .class-launch-spark {
  background: #ffffffe0;
  color: var(--class-theme-accent);
  border: 1px solid var(--class-theme-border);
}
.spark-class-game-tile .class-launch-kicker {
  font-size: .7rem;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--class-theme-accent);
}
.spark-class-game-tile .class-launch-title {
  display: block;
  min-width: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.spark-class-game-tile .class-launch-count {
  font-size: .85rem;
  line-height: 1.5;
  color: #604d73;
  overflow-wrap: anywhere;
}
.spark-class-game-tile .class-launch-code {
  max-width: 100%;
  border-color: var(--class-theme-border);
}
.spark-class-game-tile .class-launch-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 15px;
  border-radius: 12px;
  background: var(--class-theme-accent);
  color: #fff;
  font-size: .9rem;
  line-height: 1.5;
  font-weight: 750;
}
.spark-class-game-tile:focus-visible {
  outline: 3px solid var(--class-theme-accent);
  outline-offset: 5px;
}
.spark-class-game-tile:hover:not(:disabled) {
  box-shadow: 0 7px 0 #68517a35, 0 12px 24px #78509b16;
}
.spark-class-game-tile:disabled {
  cursor: wait;
  opacity: .7;
}
.class-appearance-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: 20px;
  border: 2px solid #c8b2df;
  border-radius: 20px;
  background: #fdfaff;
}
.class-appearance-editor > h4,
.class-appearance-editor > .small-note {
  margin: 0 !important;
}
.class-appearance-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  min-width: 0;
}
.class-appearance-fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #d8c8e7;
  border-radius: 16px;
  background: #fff;
}
.class-appearance-fieldset legend {
  padding: 0 6px;
  font-size: .9rem;
  font-weight: 800;
  color: #51366d;
}
.class-appearance-current-label {
  margin: 0 0 10px !important;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  color: #51366d;
}
.class-appearance-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  min-width: 0;
}
.class-appearance-current-swatch {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid #62596b;
  border-radius: 16px;
  background: #fff;
  font-size: 2rem;
  line-height: 1;
}
.class-appearance-current-name {
  font-size: .9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.class-appearance-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, 44px);
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}
.class-appearance-swatches button {
  position: relative;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  border: 1px solid #62596b;
  border-radius: 12px;
  padding: 0;
  font: 900 23px system-ui;
  cursor: pointer;
  color: white;
  text-shadow: 0 1px 3px black, 0 -1px 3px black;
}
.class-appearance-swatches button[aria-pressed=true] {
  outline: 3px solid #503577;
  outline-offset: 3px;
}
.class-appearance-swatches button:focus-visible {
  outline: 3px dashed #503577;
  outline-offset: 4px;
}
.class-appearance-swatches button:disabled {
  cursor: not-allowed;
  opacity: .65;
}
.class-appearance-icon-swatches button {
  background: #fff;
  text-shadow: none;
  font-size: 24px;
  color: #503577;
}
.class-appearance-icon-check {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #503577;
  color: white;
  font: 900 12px system-ui;
}
.class-appearance-preview {
  width: min(100%, 280px);
  min-height: 260px;
  justify-self: center;
  cursor: default;
  padding: 20px;
}
.class-appearance-preview .class-launch-title {
  font-size: 1.25rem;
}
.class-appearance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.class-appearance-actions button {
  margin: 0;
  min-height: 44px;
  max-width: 100%;
}
.class-appearance-status {
  min-height: 1.5em;
  margin: 0 !important;
  font-size: .85rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: #5e4774;
}
.class-appearance-status[data-state=error] {
  color: #8b303c;
}
.class-appearance-status[data-state=success] {
  color: #35633c;
}
@media (max-width: 600px) {
  .spark-class-game-tile {
    padding: 18px;
  }
  .class-appearance-editor {
    padding: 16px;
    gap: 14px;
  }
  .class-appearance-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .class-appearance-actions {
    flex-direction: column;
  }
  .class-appearance-actions button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spark-class-game-tile {
    transition: none;
  }
}

/* game-sidebar.css */
#workspace-rail {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 10px;
  border: 2px solid #a98bce;
  border-radius: 24px;
  background:
    linear-gradient(
      165deg,
      #f0e5ff 0%,
      #e6f3ff 58%,
      #fff4d9 100%);
  box-shadow: 0 5px 0 #b7a0d24d;
}
#workspace-rail #owner-view-switch {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 12px;
  padding: 12px 10px;
  border: 1px solid #c4adde;
  border-radius: 16px;
  background: #fffdf9d9;
  box-shadow: none;
}
#workspace-rail #owner-view-title {
  color: #543276;
  font-size: .8rem;
  letter-spacing: .04em;
}
#workspace-rail #owner-view-select {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 2px solid #b9a0d2;
  border-radius: 12px;
  background: #fff;
  color: #50326e;
  font-weight: 750;
  padding: 9px 8px;
}
#workspace-rail #owner-view-note,
#workspace-rail #local-preview-status {
  margin: 7px 0 0;
  font-size: .7rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: #685276;
}
#workspace-rail .original-profile {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  border: 2px solid #baa0d4;
  border-radius: 18px;
  background: #fffdf7;
  box-shadow: 0 4px 0 #b7a0d226;
  overflow: hidden;
}
#workspace-rail .original-profile-cover {
  box-sizing: border-box;
  display: block !important;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 0 !important;
  background: #e9ddf7;
  border: 0;
  border-bottom: 2px solid #bba2d6;
  border-radius: 0;
  overflow: hidden;
}
#workspace-rail .original-profile-cover #saved-profile-art {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
#workspace-rail .original-profile-cover #saved-profile-art .zappy-composite {
  border-radius: 0;
}
#workspace-rail .original-profile-body {
  box-sizing: border-box;
  min-width: 0;
  padding: 15px 12px;
  background: linear-gradient(#fffefa, #f6f0ff);
}
#workspace-rail .original-profile-body h2 {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: #51336e;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
#workspace-rail #original-profile-email {
  font-size: .75rem;
  line-height: 1.5;
  color: #6d597c;
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}
#workspace-rail .original-profile-note {
  font-size: .72rem;
  line-height: 1.5;
  color: #776383;
  margin: 0 0 12px;
}
#workspace-rail #original-profile-access {
  border-top: 1px solid #ded0ed;
  padding-top: 10px;
}
#workspace-rail #original-profile-access .session-access {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #dfc77e;
  border-radius: 9px;
  background: #fff1bf;
  padding: 5px 8px;
  font-size: .7rem;
  line-height: 1.4;
  font-weight: 800;
  color: #684b25;
  overflow-wrap: anywhere;
}
#workspace-rail .original-shortcuts {
  display: block;
  margin: 20px 7px 10px;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .12em;
  color: #6a4a87;
}
#workspace-rail nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
}
#workspace-rail nav a,
#workspace-rail nav button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px;
  border: 1px solid #baa1d3;
  border-radius: 13px;
  background: #fffdf7;
  color: #553773;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
  box-shadow: 0 3px 0 #bba2d33d;
  transition:
    background .15s,
    border-color .15s,
    transform .15s;
}
#workspace-rail nav a:before,
#workspace-rail nav button:before {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0 8px 0 0;
  border: 1px solid #c7b2e0;
  border-radius: 9px;
  background: #ece2fa;
  color: #704c96;
  font-size: .95rem;
}
#workspace-rail nav a:nth-of-type(even):before {
  background: #e3f2ff;
  border-color: #aecde4;
  color: #4d799a;
}
#workspace-rail nav [aria-current=page] {
  border: 2px solid #735098;
  background:
    linear-gradient(
      135deg,
      #78559e,
      #53347d);
  color: #fff;
  box-shadow: 0 4px 0 #4029603d;
}
#workspace-rail nav [aria-current=page]:before {
  border-color: #e5c77b;
  background: #ffe399;
  color: #624137;
}
#workspace-rail nav a:hover,
#workspace-rail nav button:hover:not(:disabled) {
  border-color: #8157aa;
  background: #f3eaff;
  transform: translateY(-1px);
}
#workspace-rail nav [aria-current=page]:hover {
  background:
    linear-gradient(
      135deg,
      #6f4a95,
      #49306e);
  color: #fff;
}
#workspace-rail a:focus-visible,
#workspace-rail button:focus-visible,
#workspace-rail select:focus-visible {
  outline: 3px solid #704293;
  outline-offset: 3px;
}
#workspace-rail nav button:disabled {
  cursor: not-allowed;
  opacity: .65;
}
@media (max-width: 760px) {
  #workspace-rail {
    padding: 12px;
    border-radius: 20px;
  }
  #workspace-rail #owner-view-switch {
    grid-column: 1/-1;
    grid-row: auto;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
    margin-bottom: 12px;
  }
  #workspace-rail .original-profile {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
    width: 100%;
    margin: 0;
  }
  #workspace-rail .original-profile-cover {
    width: 84px;
    height: 84px;
    aspect-ratio: 1;
    border: 0;
    border-right: 1px solid #bba2d6;
    border-bottom: 1px solid #bba2d6;
    border-radius: 0 0 12px 0;
  }
  #workspace-rail .original-profile-body {
    display: block;
    min-width: 0;
    padding: 10px 12px;
  }
  #workspace-rail .original-profile-body h2 {
    width: auto;
    font-size: .95rem;
    margin: 0 0 5px;
  }
  #workspace-rail #original-profile-email {
    font-size: .7rem;
    margin: 0 0 6px;
  }
  #workspace-rail .original-profile-note {
    display: none;
  }
  #workspace-rail #original-profile-access {
    border: 0;
    padding: 0;
  }
  #workspace-rail #original-profile-access .session-access {
    font-size: .65rem;
    padding: 3px 6px;
  }
  #workspace-rail .original-shortcuts {
    margin: 15px 5px 9px;
  }
  #workspace-rail nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 9px;
  }
  #workspace-rail nav a,
  #workspace-rail nav button {
    min-height: 48px;
    padding: 9px;
    font-size: .78rem;
  }
  #workspace-rail nav a:before,
  #workspace-rail nav button:before {
    width: 23px;
    height: 23px;
    margin-right: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #workspace-rail nav a,
  #workspace-rail nav button {
    transition: none;
  }
  #workspace-rail nav a:hover,
  #workspace-rail nav button:hover:not(:disabled) {
    transform: none;
  }
}

/* ../../math-catalog-build/lesson-runner/runner.css */
.spark-lesson {
  font: 18px/1.5 system-ui, sans-serif;
  color: #29344c;
  max-width: 980px;
  margin: auto;
}
.spark-lesson button {
  font: inherit;
  font-size: 16px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #c9bfd9;
  border-radius: 12px;
  background: #fff;
  color: #422b74;
  cursor: pointer;
}
.spark-lesson button:disabled {
  opacity: .45;
  cursor: default;
}
.spark-lesson button:focus-visible,
.spark-lesson input:focus-visible,
.spark-lesson summary:focus-visible {
  outline: 3px solid #2365bd;
  outline-offset: 3px;
}
.spark-lesson nav,
.lesson-tools,
.lesson-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.spark-lesson nav [aria-current=step],
.spark-lesson .lesson-primary {
  background: #624282;
  color: white;
}
.lesson-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.lesson-card {
  background: white;
  border: 1px solid #d8cfe6;
  border-radius: 20px;
  padding: 26px;
}
.lesson-card h3 {
  margin-top: 0;
  font-size: 26px;
}
.lesson-card h4 {
  font-size: 20px;
}
.lesson-controls {
  justify-content: space-between;
}
.lesson-visual {
  max-width: 100%;
  overflow-x: auto;
  margin: 16px 0;
}
.lesson-visual svg {
  max-width: 100%;
  height: auto;
}
.lesson-equation {
  font-size: 36px;
  font-weight: 750;
  text-align: center;
}
.lesson-card form {
  margin: 20px 0;
}
.lesson-card label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}
.lesson-card input {
  font: inherit;
  font-size: 24px;
  max-width: 100%;
  width: 220px;
  min-height: 48px;
  border: 2px solid #8b7c9b;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 10px 8px 0;
}
.lesson-feedback,
.lesson-hint {
  background: #eee8fb;
  border-radius: 12px;
  padding: 14px;
}
.lesson-feedback:empty {
  display: none;
}
.lesson-notice,
.lesson-status,
.spark-lesson details {
  font-size: 14px;
  color: #555d70;
}
.spark-lesson details {
  margin-bottom: 18px;
}
.spark-lesson summary {
  cursor: pointer;
}
.spark-lesson li {
  margin: 12px 0;
}
.lesson-tools button {
  font-size: 14px;
}
@media (max-width: 600px) {
  .lesson-card {
    padding: 18px;
  }
  .spark-lesson nav button {
    flex: 1;
    font-size: 14px;
    padding: 9px;
  }
  .lesson-card h3 {
    font-size: 23px;
  }
  .lesson-tools {
    gap: 6px;
  }
}
.lesson-card select {
  font: inherit;
  min-height: 48px;
  max-width: 100%;
  border: 2px solid #8b7c9b;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 10px 8px 0;
}
.lesson-card select:focus-visible {
  outline: 3px solid #2365bd;
  outline-offset: 3px;
}
.spark-lesson .column-arithmetic {
  font: 700 42px/1.5 ui-monospace, monospace;
  text-align: right;
  max-width: 240px;
  margin: 20px auto;
  padding: 16px;
  background: #e8f5ff;
  border-radius: 14px;
}
.spark-lesson .column-arithmetic hr {
  border: 0;
  border-top: 3px solid #29344c;
  margin: 6px 0;
}
.spark-lesson .math-equation {
  font: 700 34px/1.5 system-ui;
  text-align: center;
  margin: 20px auto;
}
.lesson-column-entry {
  display: grid;
  gap: 0 5px;
  justify-content: center;
  margin: 20px 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lesson-column-entry .column-label {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 2px;
}
.lesson-column-entry .column-value,
.lesson-column-entry .column-result {
  font-size: 36px;
  font-weight: 750;
  min-height: 58px;
  padding: 3px;
}
.lesson-column-entry .column-result {
  border-top: 3px solid #29344c;
}
.lesson-column-entry .column-place-0 {
  background: #fff2b1;
  color: #654900;
}
.lesson-column-entry .column-place-1 {
  background: #e8f5ff;
  color: #164c83;
}
.lesson-column-entry .column-place-2 {
  background: #eee8fb;
}
.lesson-column-entry input.column-answer {
  width: 100%;
  margin: 0;
  border-radius: 0 0 10px 10px;
  border-top: 3px solid #29344c;
  padding: 0;
  font-size: 36px;
  min-height: 58px;
  text-align: center;
}
.lesson-column-entry input::placeholder {
  color: inherit;
  opacity: .6;
}
.lesson-audio-settings {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
.lesson-audio-settings label,
.lesson-audio-settings span {
  font-size: 14px;
}
.lesson-audio-settings input[type=range] {
  width: 180px;
  max-width: 100%;
  min-height: 44px;
  accent-color: #624282;
}
.lesson-audio-settings button[aria-pressed=true] {
  background: #eee8fb;
  border-color: #624282;
}
.lesson-audio-settings input:focus-visible {
  outline: 3px solid #2365bd;
  outline-offset: 3px;
}
.lesson-restart-area {
  margin: 18px 0;
}
.lesson-restart-confirm {
  margin-top: 12px;
  padding: 18px;
  border: 2px solid #624282;
  border-radius: 14px;
  background: #fffaf0;
}
.lesson-restart-confirm h4 {
  margin: 0 0 10px;
}
.lesson-restart-confirm button {
  margin: 6px 10px 0 0;
}
.spark-lesson {
  width: 100%;
  min-width: 0;
  max-width: 1000px;
  box-sizing: border-box;
  padding: clamp(16px, 3vw, 28px);
  background: #fffaf0;
  border: 3px solid #b9a8d4;
  border-radius: 32px;
  box-shadow: 0 8px 0 #d8cbe7, 0 14px 28px #422b7410;
  overflow-wrap: anywhere;
}
.spark-lesson * {
  box-sizing: border-box;
}
.spark-lesson > .lesson-heading {
  display: block;
  position: static;
  padding: 0;
  margin: 0 0 18px;
  background: none;
  border: 0;
  text-align: left;
}
.lesson-heading .lesson-kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 12px;
  background: #fff2b1;
  border: 1px solid #e4cc70;
  border-radius: 999px;
  color: #654900;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1.2px;
}
.lesson-heading h2 {
  margin: 0;
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -.6px;
  color: #422b74;
}
.spark-lesson > .lesson-stage-menu {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  background: none;
  border: 0;
}
.spark-lesson .lesson-stage {
  position: relative;
  min-width: 0;
  min-height: 66px;
  padding: 13px 12px;
  border: 2px solid #cbbddd;
  border-radius: 20px;
  background: #f5efff;
  color: #422b74;
  box-shadow: 0 4px 0 #d9cce8;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.spark-lesson .lesson-stage[data-stage=practice] {
  background: #e8f5ff;
  border-color: #acc9df;
  box-shadow: 0 4px 0 #c7ddeb;
}
.spark-lesson .lesson-stage[data-stage=check] {
  background: #fff2b1;
  border-color: #deca7d;
  box-shadow: 0 4px 0 #eadca3;
  color: #654900;
}
.spark-lesson .lesson-stage[aria-current=step] {
  background: #624282;
  color: #fff;
  border-color: #422b74;
  box-shadow: 0 5px 0 #422b74, inset 0 2px 0 #ffffff26;
  padding-bottom: 17px;
}
.spark-lesson .lesson-stage[aria-current=step]::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: #ffe486;
  bottom: 7px;
  left: calc(50% - 14px);
}
.spark-lesson button:not(:disabled):hover {
  filter: brightness(.97);
}
.spark-lesson button:not(:disabled):active {
  transform: translateY(1px);
}
.spark-lesson .lesson-card {
  min-width: 0;
  padding: clamp(18px, 2.6vw, 26px);
  border: 2px solid #d7cbe5;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 0 #eee6f5;
}
.lesson-card > h3 {
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.3;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px dashed #e4d9ee;
  color: #422b74;
}
.lesson-card > p {
  max-width: 74ch;
  line-height: 1.55;
}
.lesson-card h4 {
  line-height: 1.35;
  color: #422b74;
}
.spark-lesson .lesson-primary {
  border: 2px solid #422b74;
  border-radius: 15px;
  background: #624282;
  color: #fff;
  box-shadow: 0 3px 0 #422b74;
  font-weight: 750;
  padding: 11px 18px;
  min-height: 48px;
}
.lesson-controls {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e8e0f0;
  gap: 14px;
}
.lesson-controls > button {
  min-width: 110px;
  border-radius: 15px;
  font-weight: 750;
}
.lesson-feedback,
.lesson-hint {
  border: 1px solid #d9caea;
  border-radius: 16px;
  background: #f1ebfb;
  line-height: 1.5;
}
.lesson-hint {
  background: #fff8d9;
  border-color: #e6d48a;
}
.lesson-accepted {
  padding: 12px 18px 12px 38px;
  background: #f1f7fc;
  border: 1px solid #d7e7f3;
  border-radius: 16px;
  font-size: 16px;
}
.lesson-accepted li {
  margin: 7px 0;
}
.lesson-card input:not([type=hidden]),
.lesson-card select {
  border-radius: 13px;
  border-color: #8b76aa;
  background-color: #fffdf7;
}
.lesson-card .lesson-column-entry .column-answer.column-place-0 {
  background: #fff2b1;
}
.lesson-card .lesson-column-entry .column-answer.column-place-1 {
  background: #e8f5ff;
}
.lesson-card .lesson-column-entry .column-answer.column-place-2 {
  background: #eee8fb;
}
.lesson-column-entry {
  margin: 18px auto 22px;
  max-width: 100%;
  width: max-content;
  padding: 12px;
  background: #f7f4fc;
  border: 1px solid #e4daef;
  border-radius: 20px;
}
.lesson-column-entry .column-label {
  padding: 8px 2px;
  border-radius: 10px 10px 0 0;
}
.lesson-column-entry .column-answer,
.lesson-column-entry .column-result {
  border-radius: 0 0 10px 10px;
}
.lesson-visual {
  border-radius: 16px;
}
.lesson-tools {
  margin: 22px 0 10px;
  gap: 8px;
}
.lesson-tools button {
  background: #f4eefb;
  border-color: #d7c8e7;
  border-radius: 13px;
  font-weight: 650;
  min-height: 46px;
}
.lesson-audio-settings {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px solid #dfd4eb;
  border-radius: 16px;
  background: #f8f4fd;
  gap: 10px;
}
.lesson-audio-settings button {
  font-size: 14px;
  font-weight: 650;
  background: #fff;
}
.lesson-audio-settings button[aria-pressed=true] {
  background: #624282;
  color: #fff;
  border-color: #422b74;
}
.spark-lesson details {
  padding: 8px 2px;
}
.spark-lesson summary {
  min-height: 32px;
  font-weight: 650;
}
.lesson-restart-area {
  margin-bottom: 2px;
}
.lesson-restart-area > button {
  font-size: 14px;
  background: transparent;
  border-color: #d7c8e7;
  min-height: 44px;
}
.lesson-restart-confirm {
  border-radius: 20px;
}
@media (max-width: 600px) {
  .spark-lesson {
    padding: 14px;
    border-width: 2px;
    border-radius: 24px;
    box-shadow: 0 5px 0 #d8cbe7;
  }
  .spark-lesson > .lesson-stage-menu {
    gap: 7px;
    margin-bottom: 19px;
  }
  .spark-lesson .lesson-stage {
    min-height: 72px;
    padding: 11px 6px;
    font-size: 13px;
    border-radius: 15px;
  }
  .spark-lesson .lesson-stage[aria-current=step] {
    padding-bottom: 17px;
  }
  .spark-lesson .lesson-card {
    padding: 16px 13px;
    border-radius: 19px;
  }
  .lesson-heading h2 {
    font-size: 25px;
  }
  .lesson-heading .lesson-kicker {
    font-size: 10px;
    letter-spacing: .8px;
  }
  .lesson-card > h3 {
    font-size: 21px;
  }
  .lesson-column-entry {
    padding: 8px;
    margin-left: auto;
    margin-right: auto;
  }
  .lesson-column-entry .column-value,
  .lesson-column-entry .column-result,
  .lesson-column-entry input.column-answer {
    font-size: 32px;
    min-height: 54px;
  }
  .lesson-controls {
    gap: 10px;
  }
  .lesson-controls > button {
    min-width: 0;
    flex: 1;
    padding: 10px;
    font-size: 15px;
  }
  .lesson-tools button {
    flex: 1 1 130px;
    font-size: 13px;
    padding: 9px 10px;
  }
  .lesson-audio-settings {
    padding: 10px;
    gap: 8px;
  }
  .lesson-audio-settings input[type=range] {
    width: 150px;
  }
  .lesson-card input:not(.column-answer):not([type=hidden]),
  .lesson-card select {
    width: 100%;
    margin-right: 0;
  }
  .lesson-card form > button {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spark-lesson button:not(:disabled):active {
    transform: none;
  }
}
@media (forced-colors: active) {
  .spark-lesson .lesson-stage[aria-current=step] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .spark-lesson .lesson-stage[aria-current=step]::after {
    background: Highlight;
  }
}
.spark-lesson {
  max-width: 1280px;
}
@media (min-width: 1100px) {
  .spark-lesson {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: auto auto repeat(5, auto);
    column-gap: 18px;
    row-gap: 8px;
    padding: 18px 22px;
    border-radius: 28px;
    align-items: start;
  }
  .spark-lesson > .lesson-heading {
    grid-column: 1/-1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 6px;
  }
  .lesson-heading .lesson-kicker {
    margin: 0;
    padding: 5px 10px;
    font-size: 10px;
    flex: none;
  }
  .lesson-heading h2 {
    font-size: 28px;
    line-height: 1.15;
    margin: 0;
    flex: 1;
  }
  .spark-lesson > .lesson-stage-menu {
    grid-column: 1/-1;
    grid-row: 2;
    gap: 12px;
    margin: 0 0 10px;
  }
  .spark-lesson .lesson-stage {
    min-height: 54px;
    padding: 10px 12px;
    font-size: 17px;
    border-radius: 17px;
  }
  .spark-lesson .lesson-stage[aria-current=step] {
    padding-bottom: 16px;
  }
  .spark-lesson > .lesson-card {
    grid-column: 1;
    grid-row: 3/8;
    min-width: 0;
    padding: 18px 20px;
    border-radius: 22px;
    align-self: start;
  }
  .lesson-card > h3 {
    font-size: 23px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .lesson-card > p {
    margin: 9px 0 13px;
  }
  .lesson-card h4 {
    margin: 14px 0 10px;
  }
  .lesson-card form {
    margin: 14px 0;
  }
  .lesson-visual {
    margin: 12px 0;
  }
  .lesson-column-entry {
    margin: 12px auto 16px;
    padding: 9px 12px;
  }
  .lesson-controls {
    margin-top: 18px;
    padding-top: 14px;
  }
  .lesson-feedback,
  .lesson-hint {
    padding: 11px 13px;
    margin: 10px 0;
  }
  .lesson-accepted {
    margin: 10px 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .spark-lesson > .lesson-tools {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    background: #f4eefb;
    border: 1px solid #dfd4eb;
    border-radius: 18px;
    align-self: start;
  }
  .lesson-tools button {
    width: 100%;
    min-height: 44px;
    padding: 9px 10px;
    background: white;
  }
  .spark-lesson > .lesson-audio-settings {
    grid-column: 2;
    grid-row: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    margin: 0;
    padding: 12px;
    border-radius: 18px;
    align-self: start;
  }
  .lesson-audio-settings > button,
  .lesson-audio-settings > label {
    grid-column: 1/-1;
  }
  .lesson-audio-settings button {
    min-height: 44px;
    padding: 9px 10px;
  }
  .lesson-audio-settings input[type=range] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
  }
  .lesson-audio-settings > span {
    font-size: 12px;
    white-space: nowrap;
  }
  .spark-lesson > .lesson-status {
    grid-column: 2;
    grid-row: 5;
    font-size: 13px;
    line-height: 1.4;
    margin: 0;
    padding: 0 4px;
    align-self: start;
  }
  .spark-lesson > .lesson-status:empty {
    display: none;
  }
  .spark-lesson > details {
    grid-column: 2;
    grid-row: 6;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1.45;
    align-self: start;
  }
  .spark-lesson > details summary {
    min-height: 44px;
    display: list-item;
    padding: 12px 0;
    line-height: 1.4;
  }
  .spark-lesson > .lesson-restart-area {
    grid-column: 2;
    grid-row: 7;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-self: start;
  }
  .lesson-restart-area > button {
    width: 100%;
    min-height: 44px;
  }
  .lesson-restart-confirm {
    padding: 12px;
    border-radius: 16px;
    font-size: 14px;
  }
  .lesson-restart-confirm button {
    width: 100%;
    min-height: 44px;
    margin: 6px 0 0;
    font-size: 14px;
  }
}
@media (max-width: 1099px) {
  .spark-lesson {
    display: block;
  }
}
.lesson-work-layout,
.lesson-problem-area,
.lesson-response-area {
  min-width: 0;
}
.lesson-problem-prompt {
  font-weight: 650;
  line-height: 1.45;
  margin: 0 0 12px;
}
.lesson-step-history,
.lesson-check-directions {
  border-bottom: 1px solid #e4d9ee;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.lesson-step-history summary,
.lesson-check-directions summary {
  min-height: 44px;
  line-height: 1.4;
  padding: 11px 0;
  font-size: 14px;
}
.lesson-step-history .lesson-accepted {
  margin: 0 0 10px;
}
.lesson-diagram-caption {
  font-size: 15px;
  line-height: 1.4;
  margin: 8px 0 0;
  color: #3f485b;
}
.lesson-response-area > h4 {
  margin: 0 0 12px;
}
@media (min-width: 1100px) {
  .spark-lesson {
    padding: 14px 18px;
    column-gap: 14px;
    row-gap: 6px;
  }
  .spark-lesson > .lesson-heading {
    gap: 12px;
    margin: 0;
  }
  .lesson-heading h2 {
    font-size: 25px;
  }
  .lesson-heading .lesson-kicker {
    font-size: 9px;
    padding: 4px 8px;
  }
  .spark-lesson > .lesson-stage-menu {
    margin-bottom: 7px;
    gap: 10px;
  }
  .spark-lesson .lesson-stage {
    min-height: 48px;
    padding: 8px 10px;
    font-size: 16px;
  }
  .spark-lesson .lesson-stage[aria-current=step] {
    padding-bottom: 14px;
  }
  .spark-lesson > .lesson-card {
    padding: 14px 16px;
  }
  .lesson-card > h3 {
    font-size: 21px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    line-height: 1.3;
  }
  .lesson-work-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(225px, .85fr);
    gap: 18px;
    align-items: start;
  }
  .lesson-problem-prompt {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 8px;
  }
  .lesson-response-area {
    padding-left: 16px;
    border-left: 1px solid #e6ddee;
  }
  .lesson-response-area > h4 {
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 10px;
  }
  .lesson-response-area form {
    margin: 10px 0;
  }
  .lesson-response-area form label {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .lesson-response-area form input:not([type=hidden]),
  .lesson-response-area form select {
    width: 100%;
    margin: 0 0 9px;
    font-size: 23px;
    min-height: 48px;
  }
  .lesson-response-area form > button {
    width: 100%;
    min-height: 46px;
    padding: 9px 12px;
  }
  .lesson-response-area .lesson-feedback,
  .lesson-response-area .lesson-hint {
    font-size: 16px;
    line-height: 1.4;
    padding: 9px 11px;
    margin: 9px 0;
  }
  .lesson-response-area > button {
    min-height: 44px;
    padding: 8px 12px;
  }
  .lesson-problem-area .lesson-visual {
    margin: 6px 0 0;
    overflow: visible;
  }
  .lesson-problem-area .lesson-visual svg,
  .lesson-problem-area .lesson-plot svg {
    display: block;
    max-height: 260px;
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .lesson-diagram-caption {
    font-size: 14px;
    line-height: 1.35;
    margin: 5px 0 0;
  }
  .lesson-problem-area .lesson-column-entry {
    margin: 8px auto;
    padding: 7px 9px;
  }
  .lesson-column-entry .column-label {
    padding: 5px 2px;
  }
  .lesson-column-entry .column-value,
  .lesson-column-entry .column-result,
  .lesson-column-entry input.column-answer {
    font-size: 34px;
    min-height: 50px;
  }
  .lesson-controls {
    margin-top: 12px;
    padding-top: 10px;
  }
  .lesson-controls > button {
    min-height: 44px;
    padding: 9px 13px;
  }
  .lesson-check-directions,
  .lesson-step-history {
    margin-bottom: 9px !important;
  }
  .lesson-check-directions summary,
  .lesson-step-history summary {
    font-size: 13px;
    padding: 10px 0;
  }
}
@media (max-width: 1099px) {
  .lesson-work-layout {
    display: block;
  }
  .lesson-response-area {
    margin-top: 16px;
  }
  .lesson-problem-area .lesson-visual svg,
  .lesson-problem-area .lesson-plot svg {
    max-height: none;
  }
}
.lesson-addition-worked {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  margin: 20px auto 28px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.lesson-addition-worked .worked-column {
  flex: 0 1 106px;
  min-width: 0;
  border: 2px solid #364967;
  border-radius: 14px;
  box-shadow: 0 4px 0 #26394f;
  overflow: hidden;
  background: #eee8fb;
  color: #342254;
}
.lesson-addition-worked .column-place-0 {
  background: #fff2b1;
  color: #654900;
}
.lesson-addition-worked .column-place-1 {
  background: #e8f5ff;
  color: #164c83;
}
.lesson-addition-worked .worked-label {
  display: block;
  padding: 8px 2px;
  font-size: 13px;
  font-weight: 800;
}
.lesson-addition-worked .worked-carry,
.lesson-addition-worked .worked-operand,
.lesson-addition-worked .worked-result {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  font-size: 36px;
  font-weight: 800;
}
.lesson-addition-worked .worked-carry {
  height: 64px;
  font-size: 24px;
}
.lesson-addition-worked .worked-result {
  border-top: 3px solid #364967;
  min-height: 86px;
  padding-top: 24px;
}
.lesson-addition-worked .worked-carry:has(.worked-cue) {
  padding-top: 24px;
}
.lesson-addition-worked .worked-cue {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.lesson-addition-worked .worked-arrow {
  color: #b91c1c;
  font-size: 22px;
  font-weight: 900;
  order: 2;
}
.lesson-addition-worked .worked-cue-text {
  color: #752020;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}
.lesson-addition-worked .worked-operator {
  align-self: flex-start;
  margin-top: 157px;
  font-size: 30px;
  font-weight: 800;
}
.worked-practice-carry {
  font-size: 24px;
  font-weight: 800;
  color: #164c83;
  background: #e8f5ff;
  border: 2px solid #164c83;
  border-radius: 8px;
  margin: 4px 12px;
  text-align: center;
}
@media (max-width: 480px) {
  .lesson-addition-worked {
    gap: 4px;
  }
  .lesson-addition-worked .worked-column {
    flex-basis: 86px;
  }
  .lesson-addition-worked .worked-label {
    font-size: 11px;
  }
  .lesson-addition-worked .worked-operand,
  .lesson-addition-worked .worked-result {
    font-size: 30px;
  }
}
.lesson-addition-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 740px;
  margin: 0 auto;
}
.lesson-addition-comparison > section {
  min-width: 0;
}
.lesson-addition-comparison h4 {
  text-align: center;
  margin: 16px 0 0;
}
@media (max-width: 600px) {
  .lesson-addition-comparison {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.aw-board {
  margin: 20px auto;
  padding: 18px;
  max-width: 760px;
  border: 2px solid #334e70;
  border-radius: 18px;
  background: #f3f8ff;
  box-shadow: 0 5px 0 #c1cfe0;
  color: #173652;
  font-variant-numeric: tabular-nums;
}
.aw-board * {
  box-sizing: border-box;
}
.aw-quantities,
.aw-products,
.aw-columns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.aw-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px solid #657d9d;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 8px;
  min-width: 92px;
  background: #fff2b1;
  color: #4a3600;
}
.aw-label {
  font-weight: 800;
  font-size: 13px;
}
.aw-value {
  font-size: 28px;
}
.aw-equation {
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 800;
  text-align: center;
  padding: 12px;
  overflow-wrap: anywhere;
}
.aw-arrow {
  display: block;
  color: #a91c1c;
  font-weight: 800;
  font-size: 13px;
  text-align: center;
}
.aw-focus {
  border-color: #a91c1c;
}
.aw-part-whole {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 420px;
  margin: auto;
}
.aw-part-whole > .aw-tile:first-child {
  grid-column: 1/-1;
  background: #e8f5ff;
  color: #164c83;
}
.aw-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
  border: 2px solid #334e70;
  border-radius: 12px;
  padding: 10px;
  background: #e8f5ff;
  color: #164c83;
}
.aw-place-1 {
  background: #fff2b1;
  color: #654900;
}
.aw-number,
.aw-result {
  font-size: 32px;
  min-height: 44px;
}
.aw-result {
  border-top: 3px solid #334e70;
  align-self: stretch;
  text-align: center;
}
.aw-exchange {
  font-size: 23px;
  min-height: 28px;
  font-weight: 800;
}
.aw-crossed {
  text-decoration: line-through;
  text-decoration-color: #9a1f1f;
}
.aw-array {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  margin: 12px;
}
.aw-dot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border: 2px solid #7b94b2;
  border-radius: 8px;
  background: #e8f5ff;
  max-width: 100%;
}
.aw-dot {
  color: #194a7a;
  font-size: 20px;
}
.aw-highlight {
  background: #fff2b1;
  border-color: #a66d00;
}
.aw-long-division {
  text-align: center;
  font-size: 32px;
  max-width: 300px;
  margin: auto;
}
.aw-quotient {
  display: block;
  border-bottom: 3px solid #173652;
  padding: 10px 0 8px 30px;
}
.aw-dividend {
  padding: 8px;
}
.aw-division-stage {
  border-left: 4px solid #164c83;
  margin: 12px 0;
  padding-left: 8px;
}
.aw-division-stage .aw-tile {
  display: inline-flex;
}
.aw-division-stage .aw-equation {
  display: inline-block;
}
@media (max-width: 480px) {
  .aw-board {
    padding: 10px;
  }
  .aw-tile {
    margin: 4px;
    padding: 10px;
    min-width: 70px;
  }
  .aw-value {
    font-size: 24px;
  }
  .aw-dot-row {
    gap: 4px;
  }
  .aw-dot {
    font-size: 17px;
  }
  .aw-column {
    min-width: 78px;
  }
}
@media (forced-colors: active) {
  .aw-board,
  .aw-tile,
  .aw-column,
  .aw-dot-row {
    border-color: CanvasText;
  }
  .aw-arrow,
  .aw-crossed {
    color: CanvasText;
    text-decoration-color: CanvasText;
  }
}
.fw-frame {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  align-items: start;
  margin: 20px 0;
  color: #182e4d;
}
.fw-panel {
  min-width: 0;
  background: #f7fbff;
  border: 2px solid #305475;
  border-radius: 16px;
  box-shadow: 0 5px 0 #203b54;
  padding: 16px;
}
.fw-label {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 12px;
}
.fw-equation {
  font-size: clamp(18px, 3vw, 25px);
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
  margin: 0;
}
.fw-grid {
  display: grid;
  gap: 0;
  max-width: 380px;
  min-height: 42px;
  border: 2px solid #27445f;
  background: #fff;
}
.fw-cell {
  aspect-ratio: 1;
  min-height: 8px;
  border: 1px solid #47647f;
  background: #fff;
}
.fw-grid[style*="repeat(1,"] .fw-cell {
  max-height: 100px;
  aspect-ratio: auto;
}
.fw-selected {
  background: #ffdf70;
}
.fw-row-mark {
  background: #ffecaa;
}
.fw-column-mark {
  background: #c2e8ff;
}
.fw-row-mark.fw-column-mark {
  background:
    repeating-linear-gradient(
      45deg,
      #ffecaa 0 6px,
      #c2e8ff 6px 12px);
}
.fw-overlap {
  background: #6453ba !important;
  border: 2px solid #31236b;
}
.fw-focus {
  display: block;
  color: #a11c1c;
  font-size: 13px;
  font-weight: 800;
  margin: 10px 0 0;
}
.fw-columns {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fw-columns th {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.fw-columns td {
  height: 48px;
  border: 2px solid #31516c;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 800;
  overflow-wrap: anywhere;
  background: #fff1b8;
}
.fw-columns .fw-place-2 {
  background: #d9efff;
}
.fw-columns .fw-place-3 {
  background: #e6dcff;
}
.fw-columns .fw-carry td {
  font-size: 17px;
  height: 28px;
  border-style: dashed;
}
.fw-columns tbody tr:last-child:not(:first-child) td {
  border-bottom-width: 4px;
}
@media (max-width: 480px) {
  .fw-frame {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .fw-panel {
    padding: 12px;
  }
  .fw-columns {
    border-spacing: 2px;
  }
  .fw-columns td {
    font-size: 22px;
  }
  .fw-columns th {
    font-size: 11px;
  }
}
@media (forced-colors: active) {
  .fw-selected {
    border: 3px solid Highlight;
  }
  .fw-row-mark {
    border-top: 4px solid Highlight;
  }
  .fw-column-mark {
    border-left: 4px solid Highlight;
  }
  .fw-overlap {
    outline: 2px solid Highlight;
  }
  .fw-panel {
    box-shadow: none;
  }
  .fw-focus {
    color: CanvasText;
  }
}
.fw-other-share {
  background: #fff;
  border: 3px dashed #745c24;
}
.fw-columns td.fw-exchanged {
  text-decoration: line-through;
  text-decoration-color: #a11c1c;
  text-decoration-thickness: 3px;
  color: #5c6570;
}
.fw-exchange-label {
  font-size: 14px;
  font-weight: 800;
  color: #7b2020;
  margin: 0 0 10px;
}
@media (forced-colors: active) {
  .fw-columns td.fw-exchanged {
    text-decoration-color: CanvasText;
  }
  .fw-other-share {
    border-color: Highlight;
  }
}
.spatial-worked {
  margin: 18px auto;
  max-width: 740px;
  border: 3px solid #2b4563;
  border-radius: 20px;
  background: #e8f5ff;
  box-shadow: 0 5px 0 #20334e;
  padding: 14px;
  color: #173b63;
}
.spatial-figure {
  overflow: hidden;
  border: 2px solid #9fb9d5;
  border-radius: 12px;
  background: white;
}
.spatial-figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.spatial-cues {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.spatial-cues p {
  flex: 1 1 180px;
  margin: 12px 0 0;
  padding: 12px;
  border: 2px solid #987728;
  border-radius: 12px;
  background: #fff2b1;
  color: #654900;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  .spatial-worked {
    padding: 8px;
    border-radius: 14px;
  }
  .spatial-cues p {
    flex-basis: 100%;
    font-size: 15px;
  }
}
@media (forced-colors: active) {
  .spatial-worked,
  .spatial-figure,
  .spatial-cues p {
    border-color: CanvasText;
  }
  .spatial-figure svg path,
  .spatial-figure svg line,
  .spatial-figure svg circle {
    stroke: CanvasText;
  }
}
.spark-lesson .lesson-card {
  border: 3px solid #334e70;
  border-radius: 22px;
  box-shadow: 0 6px 0 #b4c6da;
  background:
    linear-gradient(
      155deg,
      #fff,
      #f0f6ff);
}
.spark-lesson .lesson-problem-area {
  min-width: 0;
  border: 2px solid #b0c7dd;
  border-radius: 16px;
  background: #f4f9ff;
  padding: 14px;
}
.spark-lesson .lesson-response-area {
  min-width: 0;
  border: 2px solid #d5bb74;
  border-radius: 16px;
  background: #fffaf0;
  padding: 14px;
}
.spark-lesson .lesson-primary {
  border: 2px solid #174a77;
  box-shadow: 0 4px 0 #123353;
  border-radius: 14px;
  font-weight: 800;
}
.lesson-accepted-work {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.lesson-accepted-part {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 2px solid #96b6a6;
  border-radius: 12px;
  background: #effbf3;
  color: #1d5035;
}
.lesson-accepted-label {
  font-size: 13px;
}
.lesson-accepted-value {
  font-size: 22px;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .spark-lesson .lesson-card {
    border-radius: 15px;
  }
  .spark-lesson .lesson-problem-area,
  .spark-lesson .lesson-response-area {
    padding: 10px;
  }
  .lesson-accepted-work {
    grid-template-columns: 1fr;
  }
}
@media (forced-colors: active) {
  .spark-lesson .lesson-card,
  .spark-lesson .lesson-problem-area,
  .spark-lesson .lesson-response-area,
  .lesson-accepted-part {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .spark-lesson .lesson-primary {
    border-color: ButtonText;
    box-shadow: none;
  }
}

/* student-local.css */
#adult-test .student-join-card {
  margin-top: 18px;
}
#adult-test .student-join-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#adult-test .student-join-form label {
  border: 0;
  padding: 0;
  font-weight: 700;
}
#adult-test .student-join-form input {
  min-height: 44px;
  max-width: 260px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #9a86b5;
  border-radius: 10px;
  font: inherit;
}
#adult-test .student-class-list {
  margin: 18px 0;
}
#adult-test .student-activity + .student-activity {
  margin-top: 18px;
}
#adult-test .student-question-grid-no-visual {
  grid-template-columns: minmax(0, 1fr);
}
#adult-test .student-general-visual svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
}
#adult-test .student-general-visual:has(.number-line-plot) svg {
  max-height: none;
}
#adult-test .student-question .student-typed-label {
  display: block;
  border: 0;
  background: none;
  padding: 0;
  font-size: 1rem;
  cursor: default;
}
#adult-test .student-question input.student-typed-answer {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  min-height: 52px;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid #9a86b5;
  border-radius: 10px;
  font: inherit;
  font-size: 1.2rem;
}
#adult-test .student-question-navigation {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
#adult-test .student-assigned-lessons {
  margin: 16px 0;
}
#adult-test #student-lesson-runner {
  margin-top: 12px;
}
@media (max-width: 760px) {
  #adult-test .student-join-form {
    align-items: stretch;
    flex-direction: column;
  }
  #adult-test .student-join-form input {
    max-width: none;
  }
  #adult-test .student-join-form button {
    margin-left: 0;
    margin-right: 0;
  }
  #adult-test .student-general-visual svg {
    max-height: none;
  }
}
#adult-test.student-room-menu {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 3px solid #b9a8d4;
  border-radius: 30px;
  background: #fffaf0;
  box-shadow: 0 7px 0 #d8cbe7, 0 16px 30px #422b7410;
  color: #422b74;
  overflow-wrap: anywhere;
}
#adult-test.student-room-menu * {
  box-sizing: border-box;
  min-width: 0;
}
.student-room-header {
  margin: 0 0 20px;
}
.student-room-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.student-room-kicker {
  display: inline-block;
  padding: 6px 12px;
  background: #fff2b1;
  border: 1px solid #e4cc70;
  border-radius: 999px;
  color: #654900;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .1em;
}
.student-room-player {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid #cbbddd;
  border-radius: 999px;
  background: #eee6fa;
  color: #624282;
  font-size: .8rem;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#adult-test .student-room-header h2 {
  margin: 0;
  color: #422b74;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.student-room-welcome {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(18px, 3vw, 28px);
  border: 2px solid #d4c5e7;
  border-radius: 24px;
  background:
    linear-gradient(
      120deg,
      #f1eaff,
      #f6fbff 65%,
      #fffdf5);
  box-shadow: 0 4px 0 #eee6f5;
}
.student-room-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  background:
    radial-gradient(
      ellipse at center,
      #e4d6f7 0%,
      #e4d6f7 57%,
      transparent 58%);
  isolation: isolate;
}
.student-room-art img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 8px 0 #82659c13);
}
.student-room-spark,
.student-room-small-spark {
  position: absolute;
  color: #a36b10;
  line-height: 1;
  z-index: -1;
}
.student-room-spark {
  font-size: 2.5rem;
  left: 0;
  top: 16px;
  transform: rotate(-12deg);
}
.student-room-small-spark {
  font-size: 2rem;
  right: 1px;
  bottom: 15px;
  color: #75549a;
}
.student-room-welcome-label {
  display: block;
  margin: 0 0 10px;
  color: #75549a;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
}
#adult-test .student-room-message h3 {
  margin: 0 0 12px;
  color: #422b74;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.student-room-message p {
  max-width: 34ch;
  margin: 0;
  color: #635674;
  font-size: 1rem;
  line-height: 1.6;
}
.student-room-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 3px;
}
#adult-test .student-room-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 22px;
  border: 2px solid #422b74;
  border-radius: 16px;
  background: #624282;
  color: #fff;
  box-shadow: 0 4px 0 #422b74;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.4;
  white-space: normal;
}
#adult-test .student-room-back::before {
  content: "\2190";
  font-size: 1.2rem;
  line-height: 1;
}
#adult-test .student-room-back:hover {
  background: #543771;
}
#adult-test .student-room-back:focus-visible {
  outline: 3px solid #2365bd;
  outline-offset: 5px;
}
#adult-test .student-room-status {
  margin: 18px 0 0;
  color: #645274;
  font-size: .8rem;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  #adult-test.student-room-menu {
    padding: 16px;
    border-width: 2px;
    border-radius: 24px;
    box-shadow: 0 5px 0 #d8cbe7;
  }
  .student-room-header {
    margin-bottom: 16px;
  }
  .student-room-topline {
    gap: 8px;
    margin-bottom: 12px;
  }
  .student-room-welcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 18px 14px;
    border-radius: 20px;
    text-align: center;
  }
  .student-room-art {
    width: 160px;
    max-width: 100%;
    min-height: 170px;
    margin: 0 auto;
  }
  .student-room-art img {
    width: 130px;
    height: 160px;
  }
  .student-room-spark {
    font-size: 2rem;
    left: 0;
    top: 10px;
  }
  .student-room-small-spark {
    font-size: 1.6rem;
    bottom: 10px;
  }
  .student-room-message p {
    margin: 0 auto;
    font-size: .95rem;
  }
  .student-room-welcome-label {
    margin-bottom: 8px;
  }
  .student-room-controls {
    margin-top: 20px;
  }
  #adult-test .student-room-back {
    width: 100%;
    padding: 12px 14px;
    font-size: .95rem;
  }
}

/* compact-class-tiles.css */
.classes-page #class-card-grid,
#adult-test .student-class-list {
  grid-template-columns: repeat(auto-fill, minmax(0, min(100%, 240px)));
  justify-content: start;
  align-items: start;
  gap: 16px;
}
.classes-page #class-card-grid:has(#class-detail:not([hidden])) {
  grid-template-columns: minmax(0, 1fr);
}
.classes-page #class-card-grid #class-detail {
  width: 100%;
  min-width: 0;
  max-width: none;
}
.classes-page #class-add-tile,
.classes-page #class-card-grid .spark-class-game-tile,
#adult-test .student-class-list .spark-class-game-tile {
  width: 100%;
  max-width: 240px;
  min-width: 0;
  min-height: min-content !important;
  height: auto;
  aspect-ratio: 1;
  box-sizing: border-box;
  align-self: start;
  padding: 12px;
  gap: 6px;
  border-radius: 20px;
  overflow: visible;
}
.classes-page #class-add-tile {
  justify-content: center;
}
.classes-page #class-add-tile > span {
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-kicker {
  padding-right: 38px;
  font-size: .6rem;
  line-height: 1.3;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-spark {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 1.4rem;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-title {
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-count {
  font-size: .7rem;
  line-height: 1.4;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-code {
  padding: 5px 8px;
  gap: 2px;
  margin: 0;
  border-radius: 10px;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-code > span {
  font-size: .6rem;
  line-height: 1.3;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-code-value {
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: .1em;
}
:is(.classes-page #class-card-grid, #adult-test .student-class-list) .spark-class-game-tile .class-launch-action {
  min-height: 36px;
  padding: 7px 10px;
  font-size: .8rem;
  line-height: 1.4;
  border-radius: 10px;
}

/* class-settings-local.css */
.classes-page .class-control-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.classes-page .class-control-top button {
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
}
.classes-page .class-control-top #class-settings-open {
  margin-left: auto;
  border: 2px solid #7664cb;
  background: #f0eaff;
  color: #392b75;
  border-radius: 14px;
  font-weight: 800;
}
.classes-page .class-control-top #class-settings-open[aria-expanded=true] {
  background: #5140a5;
  color: #fff;
}
.classes-page .class-control-body {
  grid-template-columns: minmax(0, 1fr);
}
.classes-page #class-settings-panel {
  min-width: 0;
  padding: 20px;
  border: 2px solid #baa8f2;
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      #f5efff,
      #eef8ff);
  box-shadow: 0 5px 0 #d5caee;
}
.classes-page #class-settings-panel[hidden] {
  display: none;
}
.classes-page #class-settings-title {
  font-size: 1.35rem;
  color: #382966;
  margin: 0 0 12px;
}
.classes-page #class-settings-panel > .secondary-button {
  margin: 0 0 14px;
}
.classes-page #class-settings-panel .class-rename-label {
  max-width: 600px;
  margin: 8px 0 12px;
}
.classes-page #class-settings-panel button:not([data-appearance-field]) {
  min-height: 44px;
  padding: 10px 16px;
  line-height: 1.3;
  border-radius: 12px;
}
.classes-page #class-settings-panel .class-card-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.classes-page #class-settings-panel .class-card-actions button {
  margin: 0;
  flex: 0 1 auto;
}
.classes-page #class-settings-panel > [data-class-action=delete] {
  display: block;
  margin: 18px 0 8px;
  background: #fff0f2;
  border: 2px solid #b54361;
  color: #8a2342;
}
.classes-page .deleted-classes-panel {
  margin: 22px 0;
  padding: 18px;
  border: 1px solid #cfc3e7;
  border-radius: 20px;
  background: #f8f5fc;
}
.classes-page .deleted-classes-panel[hidden] {
  display: none;
}
.classes-page .deleted-classes-panel h3 {
  margin: 0 0 8px;
  color: #493669;
}
.classes-page .deleted-class-card {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d8cee8;
  border-radius: 14px;
  min-width: 0;
}
.classes-page .deleted-class-card h4 {
  margin: 0;
  flex: 1 1 180px;
  overflow-wrap: anywhere;
}
.classes-page .deleted-class-card p {
  margin: 0;
  font-size: .85rem;
  flex: 1 1 220px;
}
.classes-page .deleted-class-card button {
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
}
#class-delete-dialog {
  box-sizing: border-box;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 3px solid #af87d7;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      #fff7fa,
      #f4f0ff);
  color: #362753;
  box-shadow: 0 16px 60px #24104455;
}
#class-delete-dialog::backdrop {
  background: #201538a8;
}
#class-delete-dialog h2 {
  margin: 0 0 14px;
  font-size: 1.45rem;
  line-height: 1.2;
}
#class-delete-dialog .class-delete-class-title {
  font-size: 1.2rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dfcaea;
}
#class-delete-dialog label {
  display: block;
  font-weight: 750;
  margin-top: 16px;
}
#class-delete-dialog input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px;
  border: 2px solid #a98ac5;
  border-radius: 10px;
  font: inherit;
}
#class-delete-dialog .class-delete-message {
  min-height: 1.4em;
  font-size: .9rem;
  overflow-wrap: anywhere;
}
#class-delete-dialog .class-delete-message[data-state=error] {
  color: #9a2440;
  font-weight: 700;
}
#class-delete-dialog .class-delete-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
#class-delete-dialog button {
  min-height: 44px;
  padding: 10px 16px;
  margin: 0;
  border-radius: 12px;
  font: inherit;
  font-weight: 750;
  flex: 1 1 140px;
}
#class-delete-confirm {
  background: #9b3051;
  color: #fff;
  border: 2px solid #7e2040;
}
@media (max-width: 540px) {
  .classes-page #class-settings-panel {
    padding: 14px;
  }
  .classes-page #class-settings-panel .class-card-actions button {
    flex: 1 1 140px;
  }
  .classes-page .deleted-class-card button {
    width: 100%;
  }
  #class-delete-dialog {
    padding: 18px;
  }
}

/* class-settings-phone-actions.css */
@media (max-width: 540px) {
  .classes-page #class-settings-panel .class-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .classes-page #class-settings-panel > button,
  .classes-page #class-settings-panel .class-card-actions > button {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* iep-goals.css */
.student-roster-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iep-flag-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d9c7ed;
  border-radius: 12px;
  background: #faf7ff;
  color: #432c61;
}
.iep-flag-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  cursor: pointer;
  min-height: 26px;
}
.iep-flag-label input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: #70439b;
}
.iep-flag-status {
  font-size: .78rem;
  overflow-wrap: anywhere;
}
.iep-roster-notice {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-left: 4px solid #c39931;
  background: #fff9e6;
  border-radius: 8px;
  font-size: .85rem;
}
.iep-goals-section {
  margin: 20px 0;
  padding: 22px;
  border: 2px solid #d6c2e9;
  border-radius: 20px;
  background: #fbf9ff;
  min-width: 0;
}
.iep-goals-section > h5 {
  font-size: 1.3rem;
  margin: 0 0 12px;
}
.iep-demo-warning {
  padding: 14px;
  border: 1px solid #dcb65d;
  border-radius: 12px;
  background: #fff6d9;
  color: #523c13;
  line-height: 1.5;
}
.iep-goals-section .iep-flag-control {
  max-width: 32rem;
}
.iep-retained-note {
  font-weight: 600;
  color: #5d4476;
}
.iep-goal-card {
  background: #fff;
  border: 1px solid #d4bee8;
  border-radius: 16px;
  padding: 18px;
  margin: 18px 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.iep-goal-card > h6 {
  font-size: 1.1rem;
  margin: 6px 0 16px;
}
.iep-goal-skill {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6e438e;
}
.iep-goal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.iep-goal-metrics > div {
  background: #f4eefb;
  border-radius: 10px;
  padding: 12px;
}
.iep-goal-metrics dt {
  font-size: .78rem;
  color: #715c87;
}
.iep-goal-metrics dd {
  margin: 3px 0 0;
  font-weight: 800;
}
.iep-goal-form,
.iep-entry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 0;
  min-width: 0;
}
.iep-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  min-width: 0;
  font-size: .88rem;
}
.iep-field input,
.iep-field select,
.iep-field textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #bfa9d8;
  border-radius: 8px;
  background: #fff;
  color: #432c61;
  font: inherit;
}
.iep-field textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}
.iep-form-intro,
.iep-form-actions,
.iep-counts,
.iep-arithmetic {
  grid-column: 1/-1;
}
.iep-form-intro h6 {
  font-size: 1.1rem;
  margin: 0;
}
.iep-form-intro p {
  margin-bottom: 0;
}
.iep-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.iep-counts[hidden],
.iep-field[hidden] {
  display: none !important;
}
.iep-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.iep-form-status {
  font-size: .86rem;
  margin: 0;
  max-width: 40rem;
}
.iep-form-status:not(:empty) {
  color: #8d2d2d;
}
.iep-section-status:empty {
  display: none;
}
.iep-new-goal,
.iep-entry-editor {
  border-top: 1px solid #dfd2ea;
  padding-top: 14px;
  margin-top: 18px;
}
.iep-new-goal > summary,
.iep-entry-editor > summary {
  font-weight: 700;
  color: #65408e;
  cursor: pointer;
  padding: 7px 0;
  min-height: 28px;
}
.iep-evidence h6 {
  font-size: 1rem;
  margin: 18px 0 4px;
}
.iep-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid #ded0e9;
  border-radius: 10px;
}
.iep-evidence-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  font-size: .82rem;
  background: #fff;
}
.iep-evidence-table caption {
  text-align: left;
  padding: 12px;
  background: #f4eefb;
  font-size: .78rem;
}
.iep-evidence-table th,
.iep-evidence-table td {
  text-align: left;
  vertical-align: top;
  padding: 12px;
  border-bottom: 1px solid #e9e0f0;
  max-width: 15rem;
  overflow-wrap: anywhere;
}
.iep-evidence-table th {
  background: #faf7ff;
}
.iep-evidence-table td:nth-child(2) {
  min-width: 8rem;
}
.iep-evidence-table .small-note {
  display: block;
  font-size: .75rem;
}
.iep-observation-bar {
  display: block;
  height: 6px;
  background: #ece4f4;
  border-radius: 4px;
  margin-top: 8px;
  overflow: hidden;
}
.iep-observation-bar > span {
  display: block;
  height: 100%;
  background: #8161a6;
}
.iep-goals-section :focus-visible,
.iep-flag-label input:focus-visible {
  outline: 3px solid #247b9b;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .iep-goals-section {
    padding: 14px;
  }
  .iep-goal-form,
  .iep-entry-form,
  .iep-counts {
    grid-template-columns: minmax(0, 1fr);
  }
  .iep-goal-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .iep-goal-card {
    padding: 14px;
  }
  .iep-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .iep-form-actions button {
    width: 100%;
  }
}
.resource-room-demo,
.student-my-goals {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 761px) {
  body[data-resource-room-view=true] .access-layout {
    grid-template-columns: 215px minmax(0, 1fr);
  }
  .resource-room-demo,
  .student-my-goals {
    grid-column: 2/-1;
  }
}
@media (min-width: 761px) and (max-width: 1250px) {
  body[data-resource-room-view=true] .access-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .resource-room-demo,
  .student-my-goals {
    grid-column: auto;
    width: 100%;
    margin: 0;
  }
}
body[data-profile-route=profile] .student-my-goals,
body[data-profile-route=settings] .student-my-goals,
body[data-profile-route=profile] .resource-room-demo,
body[data-profile-route=settings] .resource-room-demo {
  display: none !important;
}

/* teacher-sharing.css */
.teacher-sharing-request {
  margin: 16px 0;
  padding: 18px;
  border: 2px solid #c8b9e8;
  border-radius: 18px;
  background: #fbf8ff;
  min-width: 0;
}
.teacher-join-form,
.teacher-access-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}
.teacher-join-form label {
  display: grid;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
}
.teacher-join-form input,
.teacher-access-row select {
  font: inherit;
  padding: 10px;
  border: 1px solid #837198;
  border-radius: 10px;
  max-width: 100%;
  min-width: 0;
}
.teacher-request-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.teacher-request-card,
.teacher-access-row {
  background: #fff;
  border: 1px solid #d2c5e8;
  border-radius: 14px;
  padding: 14px;
  overflow-wrap: anywhere;
}
.teacher-request-card strong {
  display: block;
  margin-bottom: 8px;
}
.teacher-access-row {
  margin-top: 12px;
  align-items: center;
}
.teacher-access-row strong {
  flex: 1 1 180px;
}
.teacher-invite-code {
  display: grid;
  gap: 7px;
  padding: 12px 0;
}
.teacher-invite-code code {
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}
.teacher-access-panel button,
.teacher-access-panel select {
  min-height: 42px;
}
.teacher-workspaces {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.teacher-workspaces button {
  flex: 1 1 130px;
  white-space: normal;
}
.teacher-class-access {
  display: block;
  font-size: .8rem;
  line-height: 1.4;
  color: #4b3b69;
}
.assignment-revision-note {
  padding: 10px;
  border-left: 4px solid #7350a3;
  background: #f6f0ff;
}
@media (max-width: 650px) {
  .teacher-sharing-request {
    padding: 12px;
  }
  .teacher-join-form button {
    width: 100%;
  }
  .teacher-access-row > * {
    flex-basis: 100%;
  }
  .teacher-access-row select,
  .teacher-access-row button {
    width: 100%;
  }
}

/* school-directory.css */
.school-directory-search {
  margin: 20px 0 26px;
  padding: 22px;
  border: 3px solid #344a96;
  border-radius: 22px;
  background:
    linear-gradient(
      135deg,
      #f2f0ff,
      #e8f7ff);
  box-shadow: 0 6px 0 #d2d9f5;
  color: #172b68;
}
.school-demo-kicker {
  display: block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .09em;
  color: #485c9a;
}
.school-directory-search h3 {
  margin: 7px 0 8px;
}
.school-directory-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.school-directory-form label {
  flex: 1 1 260px;
  display: grid;
  gap: 7px;
  font-weight: 800;
}
.school-directory-form input,
.school-admin-school select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 2px solid #6f81bb;
  border-radius: 12px;
  background: #fff;
  color: #182c64;
  font: inherit;
}
.school-directory-form button {
  min-height: 46px;
}
.school-directory-status {
  font-weight: 750;
  min-height: 1.5em;
}
.school-directory-results,
.school-admin-teachers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.school-directory-result,
.school-admin-teacher {
  padding: 18px;
  border: 2px solid #687bc0;
  border-radius: 18px;
  background:
    linear-gradient(
      160deg,
      #fff,
      #edf2ff);
  box-shadow: 0 4px 0 #cbd5ee;
  overflow-wrap: anywhere;
}
.school-directory-result h4,
.school-admin-teacher h4 {
  margin: 10px 0 8px;
  font-size: 1.2rem;
}
.school-directory-result p,
.school-admin-teacher p {
  margin: 6px 0;
}
.school-demo-badge {
  display: inline-block;
  background: #ddf7e8;
  color: #225b3c;
  font-size: .74rem;
  font-weight: 850;
  padding: 6px 9px;
  border-radius: 999px;
}
.school-demo-id {
  font-size: .85rem;
  font-weight: 750;
  color: #455783;
}
.school-demo-boundary {
  margin: 18px 0 0;
  padding: 12px 15px;
  border-left: 4px solid #6479b8;
  background: #f3f5fc;
  font-size: .86rem;
  color: #354773;
  border-radius: 0 10px 10px 0;
}
.school-admin-demo {
  padding: 26px;
  border: 3px solid #344a96;
  background:
    linear-gradient(
      135deg,
      #f9f5ff,
      #eaf7ff);
  border-radius: 24px;
  box-shadow: 0 7px 0 #cbd5ee;
}
.school-admin-demo h2 {
  margin: 8px 0 15px;
}
.school-admin-school {
  max-width: 400px;
  display: grid;
  gap: 8px;
  font-weight: 850;
}
.school-demo-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.school-demo-stat {
  display: grid;
  gap: 5px;
  padding: 18px 15px;
  border: 2px solid #7987c1;
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #e6e1ff,
      #fff);
  text-align: center;
  box-shadow: 0 4px 0 #cbd5ee;
}
.school-demo-stat strong {
  font-size: 2rem;
  color: #344791;
}
.school-demo-stat span {
  font-size: .84rem;
  font-weight: 800;
}
.school-directory-search :focus-visible,
.school-admin-demo :focus-visible {
  outline: 3px solid #df9300;
  outline-offset: 3px;
}
@media (max-width: 620px) {
  .school-directory-search,
  .school-admin-demo {
    padding: 16px;
  }
  .school-directory-form {
    align-items: stretch;
  }
  .school-directory-form label {
    flex-basis: 100%;
  }
  .school-directory-form button {
    flex: 1;
  }
  .school-demo-summary {
    grid-template-columns: 1fr;
  }
  .school-demo-stat {
    grid-template-columns: 60px 1fr;
    align-items: center;
    text-align: left;
  }
  .school-directory-results,
  .school-admin-teachers {
    grid-template-columns: 1fr;
  }
}
.school-admin-demo {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.school-admin-teacher button {
  margin-top: 14px;
  min-height: 44px;
}
.school-admin-class-settings {
  font-weight: 800;
  color: #354773;
}
@media (min-width: 761px) {
  body[data-school-admin-view=true] .access-layout {
    grid-template-columns: 215px minmax(0, 1fr);
  }
  .school-admin-demo {
    grid-column: 2/-1;
  }
}
@media (max-width: 760px) {
  .school-admin-demo {
    grid-column: auto;
    width: 100%;
    margin: 0;
  }
}
body[data-profile-route=profile] .school-admin-demo,
body[data-profile-route=settings] .school-admin-demo {
  display: none !important;
}

/* iep-subject-game.css */
.iep-subject-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 8px;
  min-width: 0;
}
.iep-subject-filters button {
  min-height: 44px;
  margin: 0;
  border: 2px solid #8461ab;
  border-radius: 12px;
  background: #fffdf8;
  color: #40245f;
  font: inherit;
  font-weight: 750;
  padding: 10px 16px;
  box-shadow: 0 3px 0 #bda4d3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.iep-subject-filters button[aria-pressed=true] {
  background: linear-gradient(#fff2ab, #ffda63);
  border-color: #8a641b;
  box-shadow: 0 3px 0 #c28c22;
  color: #47300d;
}
.iep-subject-filters button:focus-visible {
  outline: 3px solid #156e95;
  outline-offset: 4px;
}
.iep-filter-status {
  margin: 8px 0 16px;
  line-height: 1.5;
}
.iep-subject-label {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #a78bc8;
  border-radius: 999px;
  background: #eee4fb;
  color: #493066;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
[data-iep-subject=math] > .iep-subject-label,
[data-goal-subject=math] > .iep-subject-label {
  background: #e2f4ff;
  border-color: #78a7c9;
  color: #244b68;
}
[data-iep-subject=ela] > .iep-subject-label,
[data-goal-subject=ela] > .iep-subject-label {
  background: #eee3ff;
  border-color: #aa8bcf;
  color: #50346d;
}
[data-iep-subject=unspecified] > .iep-subject-label,
[data-goal-subject=unspecified] > .iep-subject-label {
  background: #f1eee7;
  border-color: #a39b8d;
  color: #514b40;
}
.iep-subject-form-hint {
  grid-column: 1/-1;
  margin: 0;
  line-height: 1.5;
}
.iep-goal-card[hidden] {
  display: none !important;
}
#resource-room-demo {
  border: 3px solid #b49bd1;
  border-radius: 26px;
  background:
    linear-gradient(
      155deg,
      #fffaf0 0%,
      #f7f0ff 58%,
      #edf8ff 100%);
  box-shadow: 0 6px 0 #cbb8df, 0 14px 28px #40245f0e;
  color: #422c61;
  overflow-wrap: anywhere;
}
#resource-room-demo > h2 {
  padding: 18px 20px;
  border: 2px solid #b89bd4;
  border-radius: 18px;
  background:
    linear-gradient(
      115deg,
      #e9dcff,
      #def3ff);
  box-shadow: 0 4px 0 #d0bee2;
  color: #432c68;
  line-height: 1.3;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
#resource-room-demo .iep-goals-section,
#resource-room-demo .resource-class-results {
  border: 2px solid #b99cd9;
  border-radius: 22px;
  background:
    radial-gradient(#dac9ef66 .7px, transparent .7px),
    linear-gradient(
      145deg,
      #f8f2ff,
      #edf7ff);
  background-size: 15px 15px, auto;
  box-shadow: 0 5px 0 #d3c0e4;
  padding: clamp(14px, 2vw, 22px);
  margin: 20px 0;
  min-width: 0;
}
#resource-room-demo .iep-goals-section > h5,
#resource-room-demo .resource-class-results > h3 {
  display: block;
  color: #442d65;
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid #d9c7ed;
}
#resource-room-demo .iep-demo-warning {
  background: #fff8df;
  border: 1px solid #d6b971;
  border-left: 5px solid #d9b44c;
  border-radius: 12px;
  color: #5a421a;
  box-shadow: none;
  line-height: 1.55;
}
#resource-room-demo .iep-goal-card {
  border: 2px solid #ae8fcd;
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #fffefa,
      #fbf7ff);
  box-shadow: 0 4px 0 #d5c3e3;
  margin: 20px 0;
  padding: clamp(14px, 2vw, 20px);
  min-width: 0;
}
#resource-room-demo .iep-goal-card > h6 {
  color: #432b66;
  line-height: 1.45;
  font-size: 1.08rem;
}
#resource-room-demo .iep-goal-metrics > div {
  border: 1px solid #ccb5e3;
  background: linear-gradient(#f9f4ff, #f0e8fb);
  box-shadow: inset 0 1px 0 #fff;
  border-radius: 12px;
}
#resource-room-demo .iep-goal-metrics dt {
  color: #685277;
  font-weight: 650;
}
#resource-room-demo .iep-goal-metrics dd {
  color: #40255f;
  font-size: 1.12rem;
}
#resource-room-demo .iep-field input,
#resource-room-demo .iep-field select,
#resource-room-demo .iep-field textarea {
  border: 2px solid #b69ad0;
  background: #fffefa;
  border-radius: 10px;
  box-shadow: inset 0 2px 0 #e9e0f3;
  min-height: 44px;
  color: #432c61;
}
#resource-room-demo .iep-field textarea {
  min-height: 88px;
}
#resource-room-demo .iep-field :disabled {
  background: #f0edf4;
  color: #756a7f;
  border-color: #cec4d8;
  box-shadow: none;
}
#resource-room-demo .iep-field > span {
  color: #4a3269;
  font-weight: 750;
  line-height: 1.45;
}
#resource-room-demo .iep-flag-control {
  border: 2px solid #c4a9df;
  border-radius: 14px;
  background: #fff9e8;
  box-shadow: 0 3px 0 #e2d3bf;
}
#resource-room-demo .iep-new-goal,
#resource-room-demo .iep-edit-goal,
#resource-room-demo .iep-entry-editor {
  border-top: 2px solid #dfcfec;
  padding-top: 14px;
}
#resource-room-demo .iep-new-goal > summary,
#resource-room-demo .iep-edit-goal > summary,
#resource-room-demo .iep-entry-editor > summary,
#resource-room-demo .resource-class-results > .student-stat-assignment > summary {
  border: 2px solid #b89ad5;
  border-radius: 12px;
  background: linear-gradient(#fffdf7, #f3eafb);
  padding: 12px 14px;
  min-height: 44px;
  box-sizing: border-box;
  color: #513575;
  box-shadow: 0 3px 0 #d5c0e3;
  font-weight: 750;
  line-height: 1.45;
  cursor: pointer;
}
#resource-room-demo .iep-new-goal > summary {
  background: linear-gradient(#fff2b4, #ffe38b);
  border-color: #d2b263;
  color: #594018;
  box-shadow: 0 3px 0 #d7b55a;
}
#resource-room-demo .iep-goal-form,
#resource-room-demo .iep-entry-form {
  margin-top: 8px;
}
#resource-room-demo .primary-button {
  border: 2px solid #4f2e74;
  border-radius: 12px;
  background: linear-gradient(#8760b1, #68418f);
  color: #fff;
  box-shadow: 0 4px 0 #43265f;
  min-height: 44px;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
}
#resource-room-demo .secondary-button:not([data-iep-subject-filter]) {
  border: 2px solid #a084bf;
  border-radius: 12px;
  background: linear-gradient(#fffcf4, #f0e6fb);
  color: #4d316d;
  box-shadow: 0 3px 0 #c4add9;
  min-height: 44px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
#resource-room-demo button:disabled {
  box-shadow: none;
  opacity: .65;
}
#resource-room-demo button:focus-visible,
#resource-room-demo summary:focus-visible,
#resource-room-demo input:focus-visible,
#resource-room-demo select:focus-visible,
#resource-room-demo textarea:focus-visible {
  outline: 3px solid #156e95;
  outline-offset: 4px;
}
#resource-room-demo .iep-table-scroll {
  border: 2px solid #c1a6dc;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 0 #e2d5ed;
}
#resource-room-demo .iep-evidence-table caption,
#resource-room-demo .iep-evidence-table th {
  background: #efe6fa;
  color: #4b3268;
}
#resource-room-demo .iep-evidence-table td {
  color: #40324e;
}
#resource-room-demo .iep-observation-bar {
  background: #e8dff1;
}
#resource-room-demo .iep-observation-bar > span {
  background: #8163a3;
}
#resource-room-demo .resource-class-results .teacher-student-stats {
  margin-top: 14px;
}
@media (max-width: 600px) {
  .iep-subject-filters {
    gap: 8px;
  }
  .iep-subject-filters button {
    flex: 1 1 100px;
    padding: 10px;
    min-width: 0;
  }
  #resource-room-demo {
    border-width: 2px;
    border-radius: 20px;
  }
  #resource-room-demo > h2 {
    padding: 14px;
  }
  #resource-room-demo .iep-goals-section,
  #resource-room-demo .resource-class-results {
    padding: 12px;
    border-radius: 16px;
  }
  #resource-room-demo .iep-goal-card {
    padding: 12px;
  }
  #resource-room-demo .iep-form-actions button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #resource-room-demo button,
  #resource-room-demo summary {
    transition: none;
  }
}

/* read-aloud-accommodations.css */
.read-aloud-accommodations.iep-goals-section {
  margin: 18px 0;
  padding: 16px;
  border: 2px solid #bfa8d8;
  border-radius: 16px;
  background: #faf7ff;
  box-shadow: 0 4px 0 #dfd3eb;
  min-width: 0;
}
.read-aloud-accommodations h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  line-height: 1.3;
}
.read-aloud-accommodations .read-aloud-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  min-width: 0;
}
.read-aloud-accommodations .read-aloud-option {
  margin: 0;
  min-width: 0;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 9px;
  box-sizing: border-box;
}
.read-aloud-accommodations .read-aloud-option span {
  overflow-wrap: anywhere;
}
.read-aloud-accommodations .read-aloud-ela-options {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid #cdbade;
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 0;
  margin: 0;
}
.read-aloud-accommodations .read-aloud-ela-options legend {
  padding: 0 6px;
  font-size: .9rem;
  font-weight: 700;
}
.read-aloud-accommodations .iep-form-actions,
.read-aloud-accommodations [data-read-aloud-status] {
  grid-column: 1/-1;
  margin: 4px 0 0;
}
.read-aloud-accommodations .iep-form-actions {
  gap: 14px;
  padding-bottom: 6px;
}
.spark-lesson > .lesson-heading > [data-read-aloud-accommodation] {
  display: inline-flex;
  margin-top: 16px;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
}
@media (max-width: 600px) {
  .read-aloud-accommodations .read-aloud-form,
  .read-aloud-accommodations .read-aloud-ela-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .read-aloud-accommodations.iep-goals-section {
    padding: 12px;
  }
  .read-aloud-accommodations .iep-form-actions {
    flex-wrap: wrap;
  }
}

/* fluency.css */
.fluency-assessment {
  border: 2px solid #6452a1;
  border-radius: 16px;
  background: #fbf8ef;
  margin: 1rem 0;
  color: #2e2750;
  min-width: 0;
}
.fluency-assessment > summary {
  font-weight: 800;
  padding: 1rem;
  cursor: pointer;
  background: #eae3ff;
  border-radius: 14px;
}
.fluency-panel {
  padding: 1rem;
  min-width: 0;
}
.fluency-panel h6 {
  font-size: 1.15rem;
  margin: .3rem 0 .8rem;
}
.fluency-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: .8rem;
}
.fluency-paper-fields {
  display: contents;
}
.fluency-panel [hidden] {
  display: none !important;
}
.fluency-panel select,
.fluency-panel input {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
}
.fluency-panel input[type=checkbox] {
  width: 24px;
  height: 24px;
  min-height: 24px;
}
.fluency-actions,
.fluency-marking-modes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .8rem 0;
}
.fluency-panel button {
  min-height: 44px;
  white-space: normal;
}
.fluency-panel button:focus-visible {
  outline: 3px solid #b14b12;
  outline-offset: 3px;
}
.fluency-timer {
  font-size: 1.6rem;
  font-weight: 900;
  background: #352c62;
  color: #fff;
  border: 3px solid #ddc866;
  border-radius: 12px;
  padding: .7rem 1rem;
  display: inline-block;
}
.fluency-words {
  background: #fff;
  border: 2px solid #c4b9df;
  border-radius: 12px;
  padding: .8rem;
  line-height: 2.4;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.fluency-words button {
  font: inherit;
  display: inline;
  padding: .1rem .3rem;
  margin: .12rem .02rem;
  color: #26223b;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 5px;
  box-shadow: none;
}
.fluency-words button[data-error=true] {
  border-color: #ab2929;
  background: #fff0f0;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.fluency-words button[data-endpoint=true] {
  outline: 3px solid #245c9c;
  outline-offset: 0;
  background: #dfedff;
}
.fluency-words button[data-beyond=true] {
  color: #625d73;
  background: #f2f1f5;
}
.fluency-marking-modes button[aria-pressed=true] {
  background: #3e326f;
  color: white;
  border-color: #3e326f;
}
.fluency-score-preview,
.fluency-review {
  background: #edf4ff;
  border: 2px solid #b6cce7;
  border-radius: 12px;
  padding: 1rem;
}
.fluency-review button {
  margin: .4rem .5rem .4rem 0;
}
.fluency-status {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.fluency-evidence-details {
  max-width: 32rem;
}
.fluency-evidence-details pre {
  white-space: pre-wrap;
  font: inherit;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .fluency-panel {
    padding: .65rem;
  }
  .fluency-actions > button,
  .fluency-marking-modes > button {
    flex: 1 1 100%;
  }
  .fluency-words {
    padding: .45rem;
  }
  .fluency-timer {
    font-size: 1.3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fluency-panel * {
    transition: none !important;
  }
}
.fluency-reading-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas: "story controls";
  gap: 1rem;
  align-items: start;
  min-width: 0;
  margin: 1rem 0;
}
.fluency-reading-controls {
  grid-area: controls;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}
.fluency-reading-controls .fluency-timer {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 .65rem;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.fluency-reading-controls .fluency-paper-summary {
  margin: 0 0 .65rem;
  padding: .8rem;
  border: 2px solid #c4b9df;
  border-radius: 12px;
  background: #f1ebff;
  font-weight: 800;
  text-align: center;
}
.fluency-reading-controls .fluency-marking-modes {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 0;
}
.fluency-reading-controls .fluency-marking-modes > button {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: .7rem .5rem;
  border: 3px solid #6b4c98;
  border-radius: 13px;
  background: #fff;
  color: #49316e;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #d2c3e4;
  line-height: 1.3;
}
.fluency-reading-controls .fluency-marking-modes > button[aria-pressed=true] {
  background: #49316e;
  color: #fff;
  border-color: #e3cb75;
  box-shadow: 0 4px 0 #2f2149, inset 0 0 0 1px #e3cb75;
}
.fluency-reading-controls .fluency-marking-instruction {
  font-size: .95rem;
  line-height: 1.5;
  margin: 1rem 0;
  overflow-wrap: anywhere;
}
.fluency-reading-controls > [data-fluency-action=zero] {
  width: 100%;
  min-height: 44px;
}
.fluency-reading-workspace .fluency-words {
  grid-area: story;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  padding: 1.25rem 1.4rem;
  text-align: left;
  color: #26223b;
  font-size: 1.2rem;
  line-height: 2.2;
}
.fluency-words .fluency-story-title {
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 0 0 1rem;
  color: #302746;
}
.fluency-words .fluency-story-paragraph {
  margin: 0 0 1.1rem;
  max-width: 70ch;
  font: inherit;
}
.fluency-words .fluency-story-paragraph:last-child {
  margin-bottom: 0;
}
.fluency-words button {
  display: inline-block;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 0 .06em;
  border-width: 1px;
  font: inherit;
  line-height: 1.8;
  font-weight: 400;
  vertical-align: baseline;
  overflow-wrap: anywhere;
  letter-spacing: normal;
  text-transform: none;
}
.fluency-words button::before,
.fluency-words button::after {
  content: none;
}
.fluency-words button:hover {
  color: #26223b;
  text-decoration: underline;
  text-decoration-color: #8b6bb2;
}
.fluency-words button[data-error=true]:hover {
  text-decoration: line-through;
  text-decoration-color: #ab2929;
}
@media (max-width: 850px) {
  .fluency-reading-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "story";
    gap: .85rem;
  }
  .fluency-reading-controls .fluency-timer {
    font-size: 1.45rem;
  }
  .fluency-reading-controls .fluency-marking-modes {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fluency-reading-controls .fluency-marking-modes > button {
    flex: 1 1 130px;
    min-width: 0;
    width: auto;
  }
  .fluency-reading-controls .fluency-marking-instruction {
    margin: .8rem 0;
  }
  .fluency-reading-workspace .fluency-words {
    padding: 1rem;
    font-size: 1.1rem;
  }
}
@media (max-width: 420px) {
  .fluency-reading-workspace .fluency-words {
    padding: .8rem;
  }
  .fluency-reading-controls .fluency-marking-modes > button {
    flex-basis: 100%;
  }
}
.fluency-panel > .fluency-passage-note {
  margin: 0 0 .6rem;
  font-size: .9rem;
  color: #514566;
}
.fluency-panel > .fluency-passage-note > summary {
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  padding: .6rem 0;
  font-weight: 600;
}
.fluency-panel > .fluency-passage-note > p {
  margin: .15rem 0 .7rem;
  line-height: 1.5;
  max-width: 65ch;
}
.fluency-panel .fluency-setup {
  display: block;
}
.fluency-primary-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  min-width: 0;
}
.fluency-panel .fluency-primary-fields > .iep-field {
  display: grid;
  grid-template-rows: 1fr 48px;
  align-items: start;
  gap: .5rem;
  margin: 0;
  max-width: none;
  min-width: 0;
}
.fluency-panel .fluency-primary-fields > .iep-field > span {
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.fluency-panel .fluency-primary-fields > .iep-field > :is(select, input),
#resource-room-demo .fluency-primary-fields > .iep-field > select,
#resource-room-demo .fluency-primary-fields > .iep-field > input,
#resource-reading-tools .fluency-primary-fields > .iep-field > select,
#resource-reading-tools .fluency-primary-fields > .iep-field > input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  margin: 0;
  padding: .6rem .65rem;
  font: inherit;
  line-height: 1.2;
  border-width: 2px;
  border-radius: 10px;
  align-self: end;
}
.fluency-panel .fluency-paper-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  min-width: 0;
}
.fluency-panel .fluency-paper-fields > .iep-field {
  margin: 0;
  min-width: 0;
}
.fluency-panel .fluency-paper-fields > p {
  grid-column: 1/-1;
  margin: 0;
}
@media (max-width: 850px) {
  .fluency-primary-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .fluency-panel .fluency-paper-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fluency-reading-controls .fluency-timer-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: .7rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  margin: 0 auto .8rem;
  padding: .85rem;
  border: 3px solid #ddc866;
  border-radius: 16px;
  background: #352c62;
  color: #fff;
}
.fluency-reading-controls .fluency-timer-panel .fluency-timer {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  line-height: 1.2;
}
.fluency-timer-value {
  display: block;
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1.1;
}
.fluency-timer-caption {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: .5rem;
  overflow-wrap: anywhere;
}
.fluency-timer-controls {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  min-width: 0;
}
.fluency-panel .fluency-timer-controls > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: .45rem .2rem;
  font-size: .9rem;
  line-height: 1.2;
  white-space: normal;
}
.fluency-progress-report {
  background: #fffdf5;
  border: 2px solid #bba6d5;
  border-radius: 16px;
  padding: 1.1rem;
  margin: .8rem 0;
  color: #302746;
  min-width: 0;
}
.fluency-progress-report > h6 {
  font-size: 1.3rem;
  line-height: 1.35;
  margin: 0 0 .4rem;
}
.fluency-report-level {
  font-weight: 700;
  margin: .3rem 0;
  line-height: 1.4;
}
.fluency-report-meta {
  font-size: .92rem;
  margin: .3rem 0 .9rem;
  line-height: 1.5;
}
.fluency-report-result {
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.65;
  margin: .8rem 0;
  overflow-wrap: anywhere;
}
.fluency-report-timing-note {
  font-size: .95rem;
  line-height: 1.5;
  margin: .7rem 0 0;
}
.fluency-review-details {
  margin: .8rem 0;
  font-size: .92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.fluency-review-details > summary {
  cursor: pointer;
  min-height: 44px;
  padding: .6rem 0;
  box-sizing: border-box;
  font-weight: 700;
}
@media (max-width: 600px) {
  .fluency-progress-report {
    padding: .8rem;
  }
  .fluency-report-result {
    font-size: 1.05rem;
  }
}
@media (max-width: 600px) {
  .fluency-reading-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "story";
    gap: .75rem;
  }
  .fluency-reading-controls {
    position: static;
    min-width: 0;
  }
  .fluency-reading-controls .fluency-timer-panel {
    max-width: none;
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr);
    gap: .8rem;
    padding: .65rem .8rem;
    margin: 0 0 .65rem;
  }
  .fluency-timer-value {
    font-size: 2.5rem;
  }
  .fluency-timer-caption {
    margin-top: .15rem;
  }
  .fluency-timer-controls {
    flex-direction: row;
    gap: .6rem;
    align-items: center;
  }
  .fluency-panel .fluency-timer-controls > button {
    flex: 1 1 0;
    min-height: 48px;
  }
  .fluency-reading-controls .fluency-marking-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .fluency-reading-controls .fluency-marking-modes > button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: .55rem .35rem;
    font-size: 1rem;
  }
  .fluency-reading-controls .fluency-marking-instruction {
    margin: .65rem 0;
    line-height: 1.4;
    font-size: .9rem;
  }
  .fluency-reading-workspace .fluency-words {
    width: 100%;
    max-width: 100%;
    padding: .8rem;
    font-size: 1.1rem;
    line-height: 2.1;
  }
  .fluency-words button {
    min-height: 44px;
    padding: 0 .06em;
  }
}
@media (max-width: 950px) and (max-height: 500px) {
  .fluency-reading-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "controls" "story";
    gap: .75rem;
  }
  .fluency-reading-controls {
    position: static;
    min-width: 0;
  }
  .fluency-reading-controls .fluency-timer-panel {
    max-width: none;
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr);
    gap: .8rem;
    padding: .65rem .8rem;
    margin: 0 0 .65rem;
  }
  .fluency-timer-value {
    font-size: 2.5rem;
  }
  .fluency-timer-caption {
    margin-top: .15rem;
  }
  .fluency-timer-controls {
    flex-direction: row;
    gap: .6rem;
    align-items: center;
  }
  .fluency-panel .fluency-timer-controls > button {
    flex: 1 1 0;
    min-height: 48px;
  }
  .fluency-reading-controls .fluency-marking-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }
  .fluency-reading-controls .fluency-marking-modes > button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: .55rem .35rem;
    font-size: 1rem;
  }
  .fluency-reading-controls .fluency-marking-instruction {
    margin: .65rem 0;
    line-height: 1.4;
    font-size: .9rem;
  }
  .fluency-reading-workspace .fluency-words {
    width: 100%;
    max-width: 100%;
    padding: .8rem;
    font-size: 1.1rem;
    line-height: 2.1;
  }
  .fluency-words button {
    min-height: 44px;
    padding: 0 .06em;
  }
}
.fluency-grade-groups {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .5rem 0 1.1rem;
}
.fluency-grade-groups > button {
  min-height: 48px;
  padding: .7rem 1rem;
  flex: 1 1 120px;
}
.fluency-grade-groups > button[aria-pressed=true] {
  background: #49316e;
  color: #fff;
  border-color: #ddc866;
}
.fluency-grade-availability {
  font-size: .85rem;
  line-height: 1.45;
  margin: .8rem 0;
  color: #5b4a70;
}
.fluency-work-area > .fluency-passage-info {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  margin: 1rem 0;
  font-size: 1.08rem;
  font-weight: 750;
  line-height: 1.45;
}
.fluency-work-area > .fluency-actions {
  margin: 1rem 0;
}
.fluency-panel .fluency-timer-controls > button {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.fluency-timer-controls > button > span {
  display: block;
}
@media (max-width: 600px) {
  .fluency-grade-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .fluency-grade-groups > button {
    min-width: 0;
    padding: .6rem .4rem;
    font-size: .9rem;
  }
  .fluency-work-area > .fluency-passage-info {
    min-height: 3rem;
    margin: .85rem 0;
  }
}
.fluency-panel .fluency-primary-fields select[data-fluency-level] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding: .6rem 2rem .6rem .65rem;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}
#resource-room-demo .fluency-primary-fields select[data-fluency-level] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding: .6rem 2rem .6rem .65rem;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}
#resource-reading-tools .fluency-primary-fields select[data-fluency-level] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding: .6rem 2rem .6rem .65rem;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}

/* resource-reading-tools.css */
.resource-reading-tools {
  min-width: 0;
  background:
    linear-gradient(
      145deg,
      #f6f1ff,
      #eef6ff);
  border: 3px solid #6e58a2;
  border-radius: 22px;
  box-shadow: 0 6px 0 #d3c8e5;
  padding: 1.2rem;
}
.resource-reading-tools h2 {
  color: #44316e;
}
.reading-tools-card {
  margin: 1rem 0;
  max-width: 48rem;
  background: #fff9e9;
  border: 2px solid #a58ac2;
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 4px 0 #ddd1ed;
}
.reading-tools-card h3 {
  color: #44316e;
  margin: .4rem 0;
}
.resource-reading-tools .iep-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-width: 48rem;
  margin: 1rem 0;
}
.resource-reading-tools select,
.resource-reading-tools > button,
.reading-tools-card button {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
}
.resource-reading-tools select {
  width: 100%;
  padding: .65rem;
  border: 2px solid #927db1;
  border-radius: 10px;
  background: #fff;
  color: #302746;
}
.resource-reading-tools button:focus-visible,
.resource-reading-tools select:focus-visible {
  outline: 3px solid #b14b12;
  outline-offset: 3px;
}
.reading-tools-empty,
.reading-tools-selection {
  background: #fff9e9;
  border: 2px solid #d9c890;
  padding: 1rem;
  border-radius: 12px;
}
.reading-tools-status {
  font-weight: 700;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .resource-reading-tools {
    padding: .7rem;
  }
  .resource-reading-tools > button,
  .reading-tools-card button {
    width: 100%;
    margin: .35rem 0;
  }
  .resource-reading-tools select {
    font-size: 1rem;
  }
}
.resource-reading-tools .reading-tools-card [data-reading-tools-action=open],
#resource-room-demo .rr-reading-launch {
  min-height: 48px;
  padding: .8rem 1.2rem;
  background: #7950b5;
  color: #fff;
  border: 2px solid #51337f;
  border-radius: 14px;
  box-shadow: 0 4px 0 #51337f;
  font-weight: 800;
  font-size: 1.05rem;
}
.reading-history {
  margin-top: 1.25rem;
  max-width: 100%;
  min-width: 0;
}
.reading-history .fluency-evidence-details {
  background: #fffaf0;
  border: 2px solid #cbb6de;
  border-radius: 14px;
  padding: .8rem;
  margin: .6rem 0;
}
.reading-history summary {
  cursor: pointer;
  min-height: 44px;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.reading-history pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}
.reading-tools-goal-help {
  margin-top: 1rem;
  padding: .6rem;
  background: #fff9e9;
  border-radius: 12px;
}
.reading-tools-goal-help summary {
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
}
.fluency-review-context {
  font-weight: 800;
  padding: .8rem;
  background: #fff3cf;
  border: 2px solid #b99a53;
  border-radius: 10px;
}
@media (max-width: 600px) {
  #resource-room-demo .rr-reading-launch {
    width: 100%;
  }
  .reading-history .fluency-evidence-details {
    padding: .55rem;
  }
}
.resource-reading-tools .reading-tools-heading-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 1rem;
  min-width: 0;
  margin: 0 0 1rem;
}
.resource-reading-tools .reading-tools-heading-row > h2 {
  margin: 0;
  min-width: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.resource-reading-tools .reading-tools-heading-row > [data-reading-tools-action=back] {
  margin: 0;
  min-height: 44px;
  max-width: 100%;
  width: auto;
  white-space: normal;
  justify-self: start;
}
@media (max-width: 600px) {
  .resource-reading-tools .reading-tools-heading-row {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
  }
  .resource-reading-tools .reading-tools-heading-row > [data-reading-tools-action=back] {
    width: 100%;
    justify-self: stretch;
  }
}
.reading-history-entry {
  margin: 1rem 0;
  padding: 1rem;
  border: 2px solid #cbb6de;
  border-radius: 18px;
  background: #f8f4ff;
  min-width: 0;
}
.reading-history-entry > .fluency-progress-report {
  margin: 0 0 .6rem;
}
.reading-history-link {
  font-size: .92rem;
  line-height: 1.5;
  margin: .6rem 0;
  overflow-wrap: anywhere;
}
.reading-history-entry .fluency-evidence-details {
  max-width: 100%;
}
@media (max-width: 600px) {
  .reading-history-entry {
    padding: .7rem;
  }
}

/* resource-room-compact.css */
#resource-room-demo {
  padding: 18px;
  min-width: 0;
}
#resource-room-demo > .rr-screen-reader-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#resource-room-demo .rr-compact-search {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-width: 2px;
  border-radius: 17px;
  box-shadow: 0 4px 0 #d2d9f5;
}
#resource-room-demo .rr-compact-search h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 5px;
}
#resource-room-demo .rr-fictional-note {
  font-size: .8rem;
  line-height: 1.45;
  margin: 0 0 10px;
  color: #394875;
}
#resource-room-demo .rr-compact-search .school-directory-form {
  gap: 8px;
  align-items: flex-end;
}
#resource-room-demo .rr-compact-search .school-directory-form label {
  font-size: .85rem;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 0;
}
#resource-room-demo .rr-compact-search input {
  min-height: 44px;
  padding: 8px 10px;
  font-size: .95rem;
  box-sizing: border-box;
}
#resource-room-demo .rr-compact-search button {
  min-height: 44px;
  padding: 8px 12px;
  font-size: .85rem;
  margin: 0;
}
#resource-room-demo .rr-compact-search .school-directory-status {
  margin: 7px 0 0;
  font-size: .8rem;
  line-height: 1.4;
  min-height: 1.4em;
}
#resource-room-demo .rr-compact-search .school-directory-results {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 210px));
  gap: 10px;
}
#resource-room-demo .rr-compact-search .school-directory-results:empty {
  display: none;
}
#resource-room-demo .rr-compact-search .school-directory-result {
  padding: 12px;
  margin-top: 12px;
  border-radius: 14px;
}
#resource-room-demo .rr-compact-search .school-directory-result h4 {
  margin: 7px 0;
  font-size: 1rem;
}
#resource-room-demo .rr-caseload-heading {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: #44316e;
}
#resource-room-demo .rr-empty-caseload {
  font-size: .9rem;
  margin: 0 0 16px;
  max-width: 48rem;
}
#resource-room-demo[data-resource-mode=caseload] > .student-roster-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 174px), 190px));
  gap: 16px;
  justify-content: start;
  align-items: start;
  margin-top: 0;
}
#resource-room-demo[data-resource-mode=caseload] .student-roster-tile {
  width: 100%;
  max-width: 190px;
  min-width: 0;
}
#resource-room-demo[data-resource-mode=caseload] .student-game-card {
  height: 190px;
  min-height: 0;
  aspect-ratio: auto;
  max-width: 190px;
  padding: 10px;
  gap: 5px;
  border-radius: 18px;
}
#resource-room-demo[data-resource-mode=caseload] .student-game-avatar {
  width: 60px;
  height: 60px;
  border-radius: 18px;
}
#resource-room-demo[data-resource-mode=caseload] .student-game-avatar img {
  width: 46px;
  height: 54px;
}
#resource-room-demo[data-resource-mode=caseload] .student-game-name {
  font-size: 1.05rem;
}
#resource-room-demo[data-resource-mode=caseload] .student-game-progress {
  font-size: .78rem;
}
#resource-room-demo[data-resource-mode=caseload] .student-game-open {
  font-size: .75rem;
  padding: 6px 5px;
  border-radius: 9px;
}
#resource-room-demo[data-resource-mode=caseload] .iep-flag-control {
  margin: 0;
  padding: 0 8px;
  min-height: 44px;
  font-size: .85rem;
  box-sizing: border-box;
}
#resource-room-demo > .rr-secondary-info {
  margin-top: 22px;
  padding: 10px 12px;
  max-width: 720px;
  border: 1px solid #cbbbdd;
  border-radius: 12px;
  background: #faf7ff;
  box-sizing: border-box;
}
#resource-room-demo > .rr-secondary-info > summary {
  font-size: .85rem;
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  color: #5d4877;
}
#resource-room-demo > .rr-secondary-info p {
  font-size: .8rem;
  line-height: 1.5;
  margin: 10px 0;
}
#resource-room-demo > .rr-secondary-info [data-resource-reset] {
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
}
#resource-room-demo .rr-caseload-status {
  font-size: .85rem;
  margin: 0 0 12px;
}
body[data-resource-room-view=true] #rail-tools:not([hidden]) {
  display: flex;
}
@media (max-width: 600px) {
  #resource-room-demo {
    padding: 12px;
  }
  #resource-room-demo .rr-compact-search {
    padding: 12px;
    margin-bottom: 18px;
  }
  #resource-room-demo .rr-compact-search .school-directory-form label {
    flex-basis: 100%;
  }
  #resource-room-demo .rr-compact-search .school-directory-form button {
    flex: 1;
  }
  #resource-room-demo[data-resource-mode=caseload] > .student-roster-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 144px), 160px));
    gap: 12px;
  }
  #resource-room-demo[data-resource-mode=caseload] .student-roster-tile {
    max-width: 160px;
  }
  #resource-room-demo[data-resource-mode=caseload] .student-game-card {
    height: 174px;
    max-width: 160px;
    padding: 8px;
    gap: 4px;
  }
  #resource-room-demo[data-resource-mode=caseload] .student-game-avatar {
    width: 50px;
    height: 50px;
  }
  #resource-room-demo[data-resource-mode=caseload] .student-game-avatar img {
    width: 39px;
    height: 46px;
  }
  #resource-room-demo[data-resource-mode=caseload] .student-game-name {
    font-size: 1rem;
  }
  #resource-room-demo[data-resource-mode=caseload] .student-game-open {
    font-size: .7rem;
  }
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 190px;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-card {
  padding-bottom: 62px;
  gap: 3px;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-avatar img {
  width: 34px;
  height: 39px;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-name {
  font-size: 1rem;
  line-height: 1.2;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-progress {
  font-size: .74rem;
  line-height: 1.2;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-open {
  font-size: .7rem;
  line-height: 1.2;
  padding: 4px 5px;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front > .iep-flag-control {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 2px solid #c6afd9;
  background: #fff8e8;
  border-radius: 10px;
  justify-content: center;
}
#resource-room-demo[data-resource-mode=caseload] .rr-student-front .iep-flag-label {
  min-height: 40px;
  justify-content: center;
  font-size: .82rem;
  gap: 8px;
}
#resource-room-demo .rr-front-flag-status {
  font-size: .76rem;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}
#resource-room-demo .rr-front-flag-status:empty {
  display: none;
}
#resource-room-demo .rr-student-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 20px;
  margin: 0 0 24px;
  padding: 0 0 8px;
  min-width: 0;
}
#resource-room-demo .rr-student-topbar h2 {
  margin: 0;
  min-width: 0;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#resource-room-demo .rr-student-topbar button {
  margin: 0;
  min-height: 48px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
#resource-room-demo [data-resource-back] {
  justify-self: start;
}
#resource-room-demo .rr-remove-student {
  justify-self: end;
  font-size: .8rem;
  line-height: 1.35;
  padding: 10px 12px;
}
#resource-room-demo .rr-student-reading-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin: 24px 0;
  padding: 0 0 8px;
  min-width: 0;
}
#resource-room-demo .rr-student-reading-intro > .rr-reading-launch {
  margin: 0;
  max-width: 100%;
  min-height: 48px;
  white-space: normal;
  box-sizing: border-box;
}
#resource-room-demo .rr-student-reading-intro > .small-note {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 900px) {
  #resource-room-demo .rr-student-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #resource-room-demo .rr-student-topbar h2 {
    grid-column: 1/-1;
    grid-row: 2;
  }
  #resource-room-demo .rr-student-topbar [data-resource-back] {
    grid-column: 1;
    grid-row: 1;
  }
  #resource-room-demo .rr-student-topbar .rr-remove-student {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 600px) {
  #resource-room-demo[data-resource-mode=caseload] .rr-student-front {
    max-width: 160px;
  }
  #resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-card {
    padding-bottom: 58px;
  }
  #resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-avatar {
    width: 36px;
    height: 36px;
  }
  #resource-room-demo[data-resource-mode=caseload] .rr-student-front .student-game-avatar img {
    width: 29px;
    height: 34px;
  }
  #resource-room-demo[data-resource-mode=caseload] .rr-student-front > .iep-flag-control {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  #resource-room-demo .rr-student-topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 24px;
  }
  #resource-room-demo .rr-student-topbar [data-resource-back],
  #resource-room-demo .rr-student-topbar h2,
  #resource-room-demo .rr-student-topbar .rr-remove-student {
    grid-column: 1;
    grid-row: auto;
  }
  #resource-room-demo .rr-student-topbar .rr-remove-student {
    justify-self: start;
  }
  #resource-room-demo .rr-student-reading-intro {
    gap: 20px;
  }
  #resource-room-demo .rr-student-reading-intro > .rr-reading-launch {
    width: 100%;
  }
}

/* fluency-print.css */
#fluency-print-root {
  display: none;
}
@media print {
  body.fluency-printing {
    margin: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }
  body.fluency-printing > :not(#fluency-print-root) {
    display: none !important;
  }
  body.fluency-printing > #fluency-print-root {
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
    background: #fff !important;
    font-family:
      Arial,
      Helvetica,
      sans-serif !important;
    text-align: left !important;
  }
  #fluency-print-root * {
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
    color: #000 !important;
  }
  #fluency-print-root .fluency-print-page {
    display: block !important;
    break-after: page;
    page-break-after: always;
    padding: 0;
    max-width: none;
  }
  #fluency-print-root .fluency-print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  #fluency-print-root h1 {
    font-size: 20pt;
    line-height: 1.25;
    margin: 8pt 0;
  }
  #fluency-print-root .fluency-print-copy-label {
    font-size: 9pt;
    margin: 0 0 5pt;
  }
  #fluency-print-root .fluency-print-level,
  #fluency-print-root .fluency-print-focus {
    font-size: 10pt;
    margin: 5pt 0;
  }
  #fluency-print-root .fluency-print-notice {
    font-size: 8pt;
    line-height: 1.3;
    margin: 5pt 0 12pt;
  }
  #fluency-print-root .fluency-print-student-text {
    font-size: 16pt;
    line-height: 1.65;
  }
  #fluency-print-root .fluency-print-student-text p {
    margin: 0 0 12pt;
    orphans: 3;
    widows: 3;
  }
  #fluency-print-root .fluency-print-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4pt 12pt;
    margin: 10pt 0;
  }
  #fluency-print-root .fluency-print-fields p {
    font-size: 10pt;
    line-height: 1.5;
    margin: 0;
  }
  #fluency-print-root .fluency-print-instructions {
    font-size: 9pt;
    line-height: 1.4;
    margin: 8pt 0;
  }
  #fluency-print-root .fluency-print-word-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 10pt;
    line-height: 1.8;
    margin: 10pt 0;
    table-layout: auto;
  }
  #fluency-print-root .fluency-print-word-table caption {
    font-size: 9pt;
    text-align: left;
    margin-bottom: 5pt;
  }
  #fluency-print-root .fluency-print-word-table th,
  #fluency-print-root .fluency-print-word-table td {
    border: 1px solid #777;
    padding: 3pt 6pt;
    vertical-align: top;
  }
  #fluency-print-root .fluency-print-word-table th:first-child {
    width: 28pt;
    text-align: center;
  }
  #fluency-print-root .fluency-print-word-table td:last-child {
    width: 50pt;
    text-align: center;
  }
  #fluency-print-root .fluency-print-word-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #fluency-print-root .fluency-print-word-table thead {
    display: table-header-group;
  }
  #fluency-print-root [data-print-token] {
    white-space: nowrap;
  }
  #fluency-print-root .fluency-print-score-line,
  #fluency-print-root .fluency-print-notes {
    font-size: 10pt;
    line-height: 1.8;
    white-space: pre-wrap;
    margin: 10pt 0;
    break-inside: avoid;
  }
}
@media print {
  @page {
    size: auto;
    margin: 0.5in;
  }
  #fluency-print-root .fluency-print-page {
    margin: 0;
    min-height: 0;
    overflow: visible;
  }
  #fluency-print-root .fluency-print-teacher h1 {
    font-size: 16pt;
    line-height: 1.2;
    margin: 4pt 0;
  }
  #fluency-print-root .fluency-print-teacher .fluency-print-copy-label {
    font-size: 8pt;
    margin-bottom: 3pt;
  }
  #fluency-print-root .fluency-print-teacher .fluency-print-level,
  #fluency-print-root .fluency-print-teacher .fluency-print-focus {
    font-size: 9pt;
    line-height: 1.25;
    margin: 3pt 0;
  }
  #fluency-print-root .fluency-print-teacher .fluency-print-notice {
    font-size: 7.5pt;
    line-height: 1.25;
    margin: 3pt 0 6pt;
  }
  #fluency-print-root .fluency-print-fields {
    margin: 6pt 0;
    gap: 3pt 10pt;
  }
  #fluency-print-root .fluency-print-fields p {
    font-size: 9pt;
    line-height: 1.3;
  }
  #fluency-print-root .fluency-print-instructions {
    font-size: 8.5pt;
    line-height: 1.3;
    margin: 5pt 0;
  }
  #fluency-print-root .fluency-print-word-table {
    font-size: 10pt;
    line-height: 1.35;
    margin: 6pt 0;
  }
  #fluency-print-root .fluency-print-word-table caption {
    font-size: 8pt;
    margin-bottom: 4pt;
  }
  #fluency-print-root .fluency-print-word-table th,
  #fluency-print-root .fluency-print-word-table td {
    padding: 2pt 5pt;
  }
  #fluency-print-root .fluency-print-word-table th:first-child {
    width: 25pt;
  }
  #fluency-print-root .fluency-print-word-table td:last-child {
    width: 44pt;
  }
  #fluency-print-root .fluency-print-score-line,
  #fluency-print-root .fluency-print-notes {
    font-size: 9pt;
    line-height: 1.4;
    margin: 6pt 0;
  }
}

/* adventure/adventure.css */
.spark-adventure {
  --adventure-purple:#59338c;
  --adventure-ink:#302442;
  --adventure-sky:#dff3fb;
  --adventure-gold:#ffe18a;
  color: var(--adventure-ink);
  min-width: 0;
  max-width: 100%;
  padding: 8px 0 24px;
}
.spark-adventure * {
  box-sizing: border-box;
}
.spark-adventure h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin: 14px 0 18px;
  overflow-wrap: anywhere;
}
.spark-adventure h3 {
  margin: 0 0 9px;
}
.spark-adventure p {
  line-height: 1.55;
}
.spark-adventure button,
.spark-adventure input {
  font: inherit;
}
.spark-adventure button {
  cursor: pointer;
  min-height: 44px;
  border: 1px solid #c6b5da;
  border-radius: 12px;
  padding: 11px 15px;
  background: white;
  color: var(--adventure-purple);
}
.spark-adventure button:hover:not(:disabled) {
  background: #f2eafb;
}
.spark-adventure button:disabled {
  cursor: not-allowed;
  opacity: .6;
}
.spark-adventure button:focus-visible,
.spark-adventure input:focus-visible,
.spark-adventure summary:focus-visible {
  outline: 3px solid #007baf;
  outline-offset: 3px;
}
.spark-adventure input:not([type=radio]) {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px;
  border: 1px solid #ae9cbe;
  border-radius: 10px;
  margin: 6px 0 14px;
  background: white;
  color: var(--adventure-ink);
}
.spark-adventure label {
  font-weight: 700;
}
.spark-adventure .adventure-primary {
  background: var(--adventure-purple);
  color: white;
  border-color: var(--adventure-purple);
  font-weight: 700;
}
.spark-adventure .adventure-primary:hover:not(:disabled) {
  background: #7046a5;
}
.adventure-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.spark-adventure .adventure-back {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
}
.adventure-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  display: block;
  margin-bottom: 8px;
}
.adventure-note {
  font-size: 13px;
  color: #655570;
  line-height: 1.6;
}
.adventure-status {
  padding: 12px 15px;
  border-radius: 12px;
  background: #fff4c9;
  border: 1px solid #dfc974;
  color: #51411a;
  overflow-wrap: anywhere;
}
.adventure-create {
  padding: 26px;
  border: 2px solid #c5b2df;
  border-radius: 24px;
  background:
    linear-gradient(
      135deg,
      #f4edff,
      #e3f7fc);
}
.adventure-create form {
  max-width: 440px;
  margin-top: 22px;
}
.adventure-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 95px;
  gap: 22px;
  align-items: center;
  background:
    linear-gradient(
      120deg,
      #e8defb,
      #e0f4fb);
  padding: 22px;
  border-radius: 24px;
  border: 1px solid #cab8df;
}
.adventure-hero h3 {
  font-size: 25px;
}
.adventure-hero p {
  margin: 8px 0;
}
.adventure-hero img {
  height: 140px;
  width: 95px;
  object-fit: contain;
}
.adventure-hero progress {
  appearance: none;
  width: 100%;
  max-width: 480px;
  height: 15px;
  border-radius: 10px;
  overflow: hidden;
  accent-color: #7545b5;
  background: #fff;
}
.adventure-hero progress::-webkit-progress-bar {
  background: #fff;
}
.adventure-hero progress::-webkit-progress-value {
  background: #7545b5;
  border-radius: 10px;
}
.adventure-hero progress::-moz-progress-bar {
  background: #7545b5;
  border-radius: 10px;
}
.adventure-map-controls {
  max-width: 520px;
  margin-top: 24px;
}
.adventure-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
}
.spark-adventure .adventure-subjects button {
  padding: 9px 12px;
  border-radius: 99px;
  font-size: 13px;
}
.spark-adventure .adventure-subjects [aria-pressed=true] {
  background: var(--adventure-purple);
  color: white;
}
.adventure-map {
  background: linear-gradient(#faf7ff, #edf8fb);
  border: 1px solid #d1c4df;
  border-radius: 24px;
  padding: 24px;
  min-height: 200px;
}
.adventure-skill-path {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  position: relative;
}
.spark-adventure .adventure-skill-node {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 11px;
  min-height: 96px;
  padding: 16px;
  border: 2px solid #d8c8eb;
  border-radius: 20px;
  box-shadow: 0 4px 0 #cabbdb;
  background: #fff;
  min-width: 0;
}
.adventure-node-number {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--adventure-gold);
  color: #654919;
  font-size: 18px;
  font-weight: 800;
}
.adventure-node-text {
  min-width: 0;
  flex: 1;
}
.adventure-node-text strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.adventure-stage-count {
  display: block;
  font-size: 11px;
  color: #756381;
  margin-top: 7px;
  line-height: 1.5;
}
.adventure-node-arrow {
  font-size: 20px;
}
.adventure-rules {
  margin: 22px 0;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid #d9cfe3;
  border-radius: 14px;
  font-size: 13px;
}
.adventure-rules summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 32px;
}
.adventure-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.adventure-stages article {
  padding: 18px;
  border-radius: 17px;
  background: #f2ecfb;
  border: 1px solid #d6c8e6;
}
.adventure-stages article:nth-child(2) {
  background: #e5f5fc;
}
.adventure-stages article:nth-child(3) {
  background: #fff4d7;
}
.adventure-stages h3 {
  font-size: 16px;
}
.adventure-stages p {
  font-size: 13px;
  margin-bottom: 0;
}
.adventure-sets {
  margin: 25px 0;
}
.spark-adventure .adventure-set {
  width: 100%;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  margin: 10px 0;
  padding: 17px;
  background: #fff;
  border: 1px solid #d2c3df;
}
.adventure-set span {
  font-size: 13px;
}
.adventure-question {
  margin: 20px 0;
  padding: 24px;
  border: 1px solid #d0c0df;
  background: #fff;
  border-radius: 23px;
}
.adventure-question h3 {
  line-height: 1.5;
  font-size: 22px;
}
.adventure-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  align-items: start;
}
.adventure-question-grid:not(:has(.adventure-question-visual)) {
  grid-template-columns: minmax(0, 1fr);
}
.adventure-question-visual {
  min-width: 0;
}
.adventure-question-visual svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.adventure-question fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 15px;
}
.adventure-question fieldset label {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dacde6;
  border-radius: 11px;
  margin: 7px 0;
  font-weight: 400;
  min-height: 46px;
}
.adventure-question input[type=radio] {
  width: 19px;
  height: 19px;
  accent-color: #7047b0;
}
.adventure-question details {
  font-size: 13px;
  margin: 18px 0;
}
.adventure-question-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.spark-adventure .adventure-question-nav [aria-current=step] {
  background: #59338c;
  color: white;
}
.adventure-answer-status {
  font-weight: 700;
  line-height: 1.5;
}
.adventure-reward-list {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.adventure-reward {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d3c4df;
  border-radius: 16px;
  background: #fff;
  min-width: 0;
  flex-wrap: wrap;
}
.adventure-reward[data-unlocked=false] {
  background: #f3f1f6;
}
.adventure-reward > div {
  flex: 1;
  min-width: 130px;
}
.adventure-reward strong,
.adventure-reward div > span {
  display: block;
  overflow-wrap: anywhere;
}
.adventure-reward div > span {
  font-size: 12px;
  color: #6b5c77;
  margin-top: 5px;
}
.adventure-reward-swatch {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 2px solid #58466a;
  border-radius: 50%;
  color: #302442;
  font-size: 23px;
}
.adventure-launch-card {
  background:
    linear-gradient(
      145deg,
      #e8ddff,
      #cdeefa) !important;
  border-color: #a783d5 !important;
}
.adventure-launch-card .class-launch-spark {
  background: #ffdf76 !important;
  color: #56387b !important;
}
@media (max-width: 900px) {
  .adventure-skill-path,
  .adventure-reward-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .adventure-stages {
    grid-template-columns: minmax(0, 1fr);
  }
  .adventure-stages article {
    padding: 15px;
  }
  .adventure-question-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 540px) {
  .adventure-hero {
    padding: 17px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) 65px;
  }
  .adventure-hero img {
    width: 65px;
    height: 105px;
  }
  .adventure-hero h3 {
    font-size: 22px;
  }
  .adventure-map,
  .adventure-question,
  .adventure-create {
    padding: 17px;
  }
  .spark-adventure .adventure-skill-node {
    padding: 12px;
    gap: 9px;
  }
  .adventure-node-number {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
  .spark-adventure .adventure-set {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .adventure-subjects {
    gap: 6px;
  }
  .spark-adventure .adventure-subjects button {
    padding: 8px 10px;
  }
  .adventure-reward-list {
    gap: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spark-adventure * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* adventure/adventure-game-skin.css */
.spark-adventure .adventure-hero {
  background:
    linear-gradient(
      120deg,
      #e3d4ff 0%,
      #ede5ff 42%,
      #c5f0ff 100%);
  border-color: #79549c;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -4px 0 #71529314,
    0 4px 0 #b9a0d0;
}
.spark-adventure .adventure-hero h3 {
  color: #3e245f;
  text-shadow: 0 2px 0 #ffffffb3;
}
.spark-adventure .adventure-kicker {
  color: #513277;
}
.spark-adventure .adventure-hero progress {
  background: #38234f;
  accent-color: #ffc938;
  box-shadow:
    inset 0 2px 3px #170d2b66,
    0 0 0 2px #67458b,
    0 2px 0 #ffffff;
}
.spark-adventure .adventure-hero progress::-webkit-progress-bar {
  background: #38234f;
}
.spark-adventure .adventure-hero progress::-webkit-progress-value {
  background:
    repeating-linear-gradient(
      110deg,
      #ffd84d 0 13px,
      #ffc735 13px 26px);
  box-shadow: inset 0 2px 0 #fff1a8, inset 0 -2px 0 #d8901a;
}
.spark-adventure .adventure-hero progress::-moz-progress-bar {
  background:
    repeating-linear-gradient(
      110deg,
      #ffd84d 0 13px,
      #ffc735 13px 26px);
  box-shadow: inset 0 2px 0 #fff1a8, inset 0 -2px 0 #d8901a;
}
.spark-adventure .adventure-map-controls label {
  color: #422660;
}
.spark-adventure .adventure-map-controls input {
  background: #ffffff;
  border-color: #805ca4;
  box-shadow: inset 0 2px 0 #dcd0ed, 0 2px 0 #ffffff;
}
.spark-adventure :is(.adventure-button, .adventure-rewards-button, .adventure-back) {
  color: #472767;
  background: linear-gradient(#ffffff 0%, #f2e9ff 100%);
  border-color: #775095;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 0 #d8c4ec,
    0 3px 0 #75518d;
  text-shadow: 0 1px 0 #ffffff;
}
.spark-adventure .adventure-primary {
  color: #ffffff;
  background: linear-gradient(#8353bd 0%, #61348f 100%);
  border-color: #472363;
  box-shadow:
    inset 0 2px 0 #b38bdc,
    inset 0 -2px 0 #522478,
    0 3px 0 #43205f;
  text-shadow: 0 1px 0 #3f205e;
}
.spark-adventure .adventure-subjects button {
  color: #4a286b;
  background: linear-gradient(#ffffff 0%, #e8ddfa 100%);
  border-color: #76518f;
  border-radius: 12px;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 0 #cdb6e4,
    0 3px 0 #75508d;
  text-shadow: 0 1px 0 #ffffff;
}
.spark-adventure .adventure-subjects [aria-pressed=true] {
  color: #3d2459;
  background: linear-gradient(#ffe685 0%, #ffcb45 100%);
  border-color: #65427d;
  box-shadow:
    inset 0 2px 0 #fff6cd,
    inset 0 -2px 0 #df9b26,
    0 3px 0 #66417d;
  text-shadow: 0 1px 0 #fff3be;
}
.spark-adventure .adventure-map {
  background-color: #edf5ff;
  background-image:
    radial-gradient(
      circle at 1px 1px,
      #70558c12 1px,
      transparent 0),
    linear-gradient(
      155deg,
      #f5edff,
      #e6f6ff);
  background-size: 18px 18px, 100% 100%;
  border-color: #8a6ca7;
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -3px 0 #bba4d12b;
}
.spark-adventure .adventure-map > h3 {
  color: #40245e;
  text-shadow: 0 1px 0 #ffffff;
}
.spark-adventure .adventure-skill-node {
  color: #452364;
  background:
    linear-gradient(
      155deg,
      #ffffff 0%,
      #fbf8ff 62%,
      #eee4fb 100%);
  border-color: #795397;
  border-radius: 16px;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #d8c6e9,
    0 4px 0 #79568f;
}
.spark-adventure .adventure-skill-node:nth-child(3n+2) {
  background:
    linear-gradient(
      155deg,
      #ffffff 0%,
      #f3fcff 62%,
      #ddf0fb 100%);
}
.spark-adventure .adventure-node-number {
  color: #5b3513;
  background: linear-gradient(#ffe88a, #ffc644);
  box-shadow:
    inset 0 2px 0 #fff6cc,
    inset 0 -2px 0 #e4a333,
    0 0 0 1px #bc852d,
    0 2px 0 #9e6b26;
  text-shadow: 0 1px 0 #fff0b4;
}
.spark-adventure .adventure-stage-count {
  color: #584568;
}
.spark-adventure .adventure-node-arrow {
  color: #5b2d88;
  text-shadow: 0 1px 0 #ffffff;
}
.spark-adventure :is(.adventure-set, .adventure-question-nav button) {
  color: #452564;
  background: linear-gradient(#ffffff, #eee5fa);
  border-color: #805a9a;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 0 #d9c6e9,
    0 3px 0 #79568f;
}
.spark-adventure .adventure-question-nav [aria-current=step] {
  color: #3d2459;
  background: linear-gradient(#ffe685, #ffcb45);
  border-color: #65427d;
  box-shadow:
    inset 0 2px 0 #fff6cd,
    inset 0 -2px 0 #df9b26,
    0 3px 0 #66417d;
}
.spark-adventure :is(.adventure-stages article, .adventure-question, .adventure-create, .adventure-rules, .adventure-reward) {
  border-color: #9875b2;
  box-shadow: inset 0 2px 0 #ffffff, inset 0 -3px 0 #c7b4d921;
}
.spark-adventure :is(.adventure-button, .adventure-rewards-button, .adventure-back, .adventure-set):hover:not(:disabled),
.spark-adventure .adventure-subjects button:not([aria-pressed=true]):hover:not(:disabled),
.spark-adventure .adventure-question-nav button:not([aria-current=step]):hover:not(:disabled) {
  color: #3d205c;
  background: linear-gradient(#fff8db, #ffe9a1);
  border-color: #74508c;
}
.spark-adventure .adventure-primary:hover:not(:disabled) {
  background: linear-gradient(#8759bd, #70439e);
  border-color: #472363;
}
.spark-adventure .adventure-subjects [aria-pressed=true]:hover:not(:disabled),
.spark-adventure .adventure-question-nav [aria-current=step]:hover:not(:disabled) {
  background: linear-gradient(#ffeda3, #ffd462);
}
.spark-adventure .adventure-skill-node:hover:not(:disabled) {
  background:
    linear-gradient(
      155deg,
      #fffdf1,
      #fff1be);
  border-color: #6b438b;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #eac874,
    0 4px 0 #6b4585;
}
.spark-adventure :is(.adventure-button, .adventure-rewards-button, .adventure-back, .adventure-primary, .adventure-subjects button, .adventure-skill-node, .adventure-set, .adventure-question-nav button):active:not(:disabled) {
  box-shadow:
    inset 0 3px 0 #3b215829,
    inset 0 -1px 0 #ffffff66,
    0 1px 0 #64417c;
}
.spark-adventure button:focus-visible,
.spark-adventure input:focus-visible,
.spark-adventure summary:focus-visible {
  outline: 3px solid #007a9f;
  outline-offset: 3px;
}
.spark-adventure .adventure-stages article {
  background:
    linear-gradient(
      145deg,
      #f5ecff,
      #e8d9fa);
  border-color: #9270b0;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #cab1df,
    0 3px 0 #b298c8;
}
.spark-adventure .adventure-stages article:nth-child(2) {
  background:
    linear-gradient(
      145deg,
      #ecfbff,
      #d4f1fc);
  border-color: #608ca9;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #a5d5e8,
    0 3px 0 #82afc3;
}
.spark-adventure .adventure-stages article:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      #fff8dc,
      #ffe8a6);
  border-color: #b08b38;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -3px 0 #e7c46a,
    0 3px 0 #b99b52;
}
.spark-adventure .adventure-question {
  background:
    linear-gradient(
      160deg,
      #ffffff 0%,
      #ffffff 65%,
      #f5f0ff 100%);
  border-color: #83599e;
  box-shadow:
    inset 0 3px 0 #b8eafa,
    inset 0 -3px 0 #d3c2e5,
    0 4px 0 #b69bca;
}
.spark-adventure .adventure-question fieldset label {
  color: #39244f;
  background: linear-gradient(#ffffff, #f2eafa);
  border-color: #9475af;
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 0 #dccce9,
    0 3px 0 #ac92bf;
}
.spark-adventure .adventure-question fieldset label:hover {
  background: linear-gradient(#fffdf1, #fff1c2);
  border-color: #7c5197;
}
.spark-adventure .adventure-question fieldset label:has(input:checked) {
  color: #3c2456;
  background: linear-gradient(#ffec9a, #ffda6a);
  border-color: #6d4789;
  box-shadow:
    inset 0 2px 0 #fff7d3,
    inset 0 -2px 0 #dca837,
    0 3px 0 #79558f;
}
.spark-adventure .adventure-question fieldset label:focus-within {
  outline: 3px solid #007a9f;
  outline-offset: 3px;
}
.spark-adventure .adventure-question input[type=radio] {
  accent-color: #60328d;
}
.spark-adventure .adventure-question input:not([type=radio]) {
  color: #39244f;
  background: #fffdf5;
  border-color: #80599c;
  box-shadow: inset 0 2px 0 #dbceea, 0 2px 0 #ffffff;
}
.spark-adventure :is(.adventure-button, .adventure-primary, .adventure-rewards-button, .adventure-back, .adventure-subjects button, .adventure-skill-node, .adventure-set, .adventure-question-nav button):disabled,
.spark-adventure .adventure-question fieldset label:has(input:disabled) {
  color: #655472;
  background: #e8e1ef;
  border-color: #ad9dbb;
  box-shadow: inset 0 1px 0 #ffffff;
  text-shadow: none;
}

/* adventure/adventure-course.css */
.spark-adventure .adventure-course-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.spark-adventure .adventure-course-tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 60px;
}
.spark-adventure .adventure-course-tabs small {
  font-size: 11px;
  color: inherit;
}
.spark-adventure .adventure-subject-placeholder {
  margin: 20px 0;
}
.spark-adventure .adventure-look-progress {
  font-weight: 700;
  color: #4d326c;
}
.spark-adventure .adventure-migration-note {
  border-top: 1px solid #b599cf;
  padding-top: 10px;
  margin-top: 12px;
  max-width: 680px;
}
.spark-adventure .adventure-learn-help {
  margin-bottom: 18px;
}
.spark-adventure .adventure-mission-return {
  white-space: normal;
  text-align: left;
}
@media (max-width: 540px) {
  .spark-adventure .adventure-course-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .spark-adventure .adventure-learn-help {
    width: 100%;
  }
}

/* adventure/adventure-badges.css */
.adventure-badges {
  margin-top: 28px;
  padding: 20px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid #9975b5;
  border-radius: 20px;
  background:
    linear-gradient(
      145deg,
      #faf6ff,
      #eef8ff);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #cfbce0;
  color: #38234f;
}
.adventure-badges * {
  box-sizing: border-box;
}
.adventure-badges-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.adventure-badges h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}
.adventure-badges-earned-count {
  padding: 6px 10px;
  border: 1px solid #b99035;
  border-radius: 99px;
  background: #ffe58c;
  color: #533215;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.adventure-badges-note,
.adventure-badges-empty {
  font-size: 13px;
  line-height: 1.65;
  color: #5d4b6d;
}
.adventure-badges-empty {
  padding: 12px 14px;
  border: 1px dashed #b29ac5;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 16px;
}
.adventure-badges-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.adventure-badges-count {
  padding: 12px;
  border: 1px solid #bca7d0;
  border-radius: 13px;
  background: #fff;
  min-width: 0;
}
.adventure-badges-count dt {
  font-size: 12px;
  line-height: 1.5;
  color: #604a72;
  overflow-wrap: anywhere;
}
.adventure-badges-count dd {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #4c2b70;
}
.adventure-badges-count[data-kind=first] {
  background: #fff7d9;
  border-color: #c6a44f;
}
.adventure-badges-count[data-kind=practice] {
  background: #eaf8ff;
  border-color: #7ca9bd;
}
.adventure-badges details {
  border-top: 1px solid #d1c1df;
  margin-top: 14px;
  padding-top: 8px;
}
.adventure-badges summary {
  min-height: 44px;
  padding: 11px 2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #48266b;
}
.adventure-badges summary:focus-visible {
  outline: 3px solid #007a9f;
  outline-offset: 3px;
  border-radius: 8px;
}
.adventure-badges-grid {
  list-style: none;
  margin: 8px 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
}
.adventure-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid #a988c1;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 2px 0 #fff, 0 2px 0 #d2bfdc;
  min-width: 0;
}
.adventure-badge-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #8b60a6;
  border-radius: 50%;
  background: #eadcf7;
  color: #4f2673;
  font-size: 23px;
  font-weight: 800;
}
.adventure-badge[data-kind=first-try-perfect] .adventure-badge-icon {
  background: #ffe58c;
  border-color: #a77a28;
  color: #624019;
}
.adventure-badge[data-kind=practice-perfect] .adventure-badge-icon {
  background: #caf0ff;
  border-color: #4c8ba6;
  color: #245f78;
}
.adventure-badge-label {
  min-width: 0;
}
.adventure-badge-label strong {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.adventure-badge-label span {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
  color: #675075;
}
.adventure-badges-rules dl {
  margin: 8px 0;
}
.adventure-badges-rules dt {
  font-weight: 700;
  font-size: 13px;
  margin-top: 12px;
  color: #43285d;
}
.adventure-badges-rules dd {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: #5d4b6d;
}
@media (max-width: 540px) {
  .adventure-badges {
    padding: 16px;
    margin-top: 22px;
  }
  .adventure-badges-counts {
    grid-template-columns: minmax(0, 1fr);
  }
  .adventure-badges-count {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
  }
  .adventure-badges-count dd {
    margin: 0;
  }
  .adventure-badges-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .adventure-badges * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* adventure/adventure-activity-screen.css */
.spark-adventure[data-adventure-mode=question] {
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 26px);
  color: #29344c;
  background: #fffaf0;
  border: 3px solid #b9a8d4;
  border-radius: 32px;
  box-shadow: 0 8px 0 #d8cbe7, 0 14px 28px #422b7410;
  overflow-wrap: anywhere;
}
.spark-adventure[data-adventure-mode=question] .adventure-top {
  gap: 10px;
}
.spark-adventure[data-adventure-mode=question] h2 {
  color: #422b74;
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -.6px;
  margin: 18px 0 12px;
}
.spark-adventure[data-adventure-mode=question] .adventure-back {
  padding: 10px 14px;
  border: 1px solid #d7c8e7;
  border-radius: 14px;
  background: #f4eefb;
  color: #422b74;
  box-shadow: 0 3px 0 #d9cce8;
  font-weight: 650;
  text-shadow: none;
}
.spark-adventure[data-adventure-mode=question] .adventure-question {
  margin: 20px 0;
  padding: clamp(18px, 2.6vw, 26px);
  border: 2px solid #d7cbe5;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 0 #eee6f5;
}
.spark-adventure[data-adventure-mode=question] .adventure-question > .adventure-kicker {
  display: table;
  max-width: 100%;
  margin: 14px 0 12px;
  padding: 7px 12px;
  background: #fff2b1;
  border: 1px solid #e4cc70;
  border-radius: 16px;
  color: #654900;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 1.2px;
}
.spark-adventure[data-adventure-mode=question] .adventure-question > h3 {
  color: #422b74;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.35;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 2px dashed #e4d9ee;
}
.spark-adventure[data-adventure-mode=question] .adventure-learn-help {
  max-width: 100%;
  min-height: 48px;
  padding: 11px 16px;
  border: 2px solid #acc9df;
  border-radius: 17px;
  color: #24465f;
  background: #e8f5ff;
  box-shadow: 0 4px 0 #c7ddeb;
  font-weight: 750;
  text-align: left;
  white-space: normal;
  text-shadow: none;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-grid {
  gap: 20px;
  min-width: 0;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-visual {
  padding: 14px;
  background: #f7f4fc;
  border: 1px solid #e4daef;
  border-radius: 20px;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-visual svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.spark-adventure[data-adventure-mode=question] #adventure-answer-form {
  min-width: 0;
}
.spark-adventure[data-adventure-mode=question] .adventure-question fieldset {
  min-width: 0;
}
.spark-adventure[data-adventure-mode=question] .adventure-question legend,
.spark-adventure[data-adventure-mode=question] #adventure-answer-form > label {
  padding: 0;
  margin: 0 0 10px;
  color: #422b74;
  font-size: 18px;
  font-weight: 750;
}
.spark-adventure[data-adventure-mode=question] .adventure-question fieldset label {
  min-height: 54px;
  gap: 12px;
  padding: 13px 15px;
  margin: 10px 0;
  border: 2px solid #cbbddd;
  border-radius: 17px;
  background: #f5efff;
  box-shadow: 0 3px 0 #d9cce8;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
}
.spark-adventure[data-adventure-mode=question] .adventure-question input[type=radio] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #624282;
}
.spark-adventure[data-adventure-mode=question] .adventure-question fieldset label:has(input:checked) {
  color: #654900;
  background: #fff2b1;
  border-color: #b49438;
  box-shadow: 0 3px 0 #deca7d;
}
.spark-adventure[data-adventure-mode=question] .adventure-question input:not([type=radio]) {
  font-size: 23px;
  min-height: 52px;
  border: 2px solid #8b76aa;
  border-radius: 13px;
  background: #fffdf7;
  box-shadow: inset 0 2px 0 #ece3f4;
}
.spark-adventure[data-adventure-mode=question] .adventure-primary {
  min-height: 48px;
  padding: 11px 18px;
  border: 2px solid #422b74;
  border-radius: 15px;
  background: #624282;
  color: #fff;
  box-shadow: 0 3px 0 #422b74;
  font-weight: 750;
  text-shadow: none;
}
.spark-adventure[data-adventure-mode=question] #adventure-answer-form > .adventure-primary {
  width: 100%;
}
.spark-adventure[data-adventure-mode=question] .adventure-answer-status:not(:empty) {
  border: 1px solid #d9caea;
  border-radius: 16px;
  padding: 13px 15px;
  background: #f1ebfb;
  color: #422b74;
  font-size: 16px;
}
.spark-adventure[data-adventure-mode=question] .adventure-question details {
  padding: 10px 14px;
  border: 1px solid #e6d48a;
  border-radius: 16px;
  background: #fff8d9;
}
.spark-adventure[data-adventure-mode=question] .adventure-question summary {
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 700;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-nav {
  gap: 9px;
  margin: 20px 0;
  padding: 18px 0 0;
  border-top: 1px solid #e8e0f0;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-nav button {
  min-width: 46px;
  min-height: 46px;
  padding: 10px;
  border: 2px solid #cbbddd;
  border-radius: 14px;
  background: #f5efff;
  color: #422b74;
  box-shadow: 0 3px 0 #d9cce8;
  font-weight: 750;
  text-shadow: none;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-nav [aria-current=step] {
  background: #624282;
  color: #fff;
  border-color: #422b74;
  box-shadow: 0 3px 0 #422b74;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.spark-adventure[data-adventure-mode=question] button:hover:not(:disabled) {
  filter: brightness(.97);
}
.spark-adventure[data-adventure-mode=question] button:focus-visible,
.spark-adventure[data-adventure-mode=question] input:focus-visible,
.spark-adventure[data-adventure-mode=question] summary:focus-visible,
.spark-adventure[data-adventure-mode=question] fieldset label:focus-within {
  outline: 3px solid #2365bd;
  outline-offset: 3px;
}
@media (min-width: 1100px) {
  .spark-adventure[data-adventure-mode=question] {
    padding: 18px 22px;
    border-radius: 28px;
  }
  .spark-adventure[data-adventure-mode=question] h2 {
    font-size: 28px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question {
    padding: 20px;
    border-radius: 22px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question-grid:has(.adventure-question-visual) {
    grid-template-columns: minmax(0, 1.15fr) minmax(225px, .85fr);
  }
}
@media (max-width: 900px) {
  .spark-adventure[data-adventure-mode=question] .adventure-question-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .spark-adventure[data-adventure-mode=question] {
    padding: 14px;
    border-width: 2px;
    border-radius: 24px;
    box-shadow: 0 5px 0 #d8cbe7;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question {
    padding: 16px 13px;
    border-radius: 19px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question > .adventure-kicker {
    font-size: 10px;
    letter-spacing: .8px;
    padding: 7px 9px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question > h3 {
    font-size: 21px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question-visual {
    padding: 9px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-learn-help {
    width: 100%;
    font-size: 14px;
    padding: 11px 12px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question fieldset label {
    font-size: 16px;
    padding: 12px;
    gap: 9px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question-nav {
    gap: 8px;
  }
  .spark-adventure[data-adventure-mode=question] > .adventure-primary {
    width: 100%;
  }
}
@media (forced-colors: active) {
  .spark-adventure[data-adventure-mode=question] .adventure-question-nav [aria-current=step],
  .spark-adventure[data-adventure-mode=question] .adventure-question fieldset label:has(input:checked) {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* adventure/place-value-workboard.css */
.spark-adventure[data-adventure-mode=question] .adventure-question {
  border: 4px solid #6c4a97;
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      #fffaf0,
      #f4ecff);
  box-shadow: 0 7px 0 #4f326f, inset 0 2px 0 #fff;
}
.adventure-mission-stage-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.adventure-mission-stage-strip span {
  padding: 12px 8px;
  border: 2px solid #a68bc4;
  border-radius: 13px;
  background: #ece4fa;
  color: #563878;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 4px 0 #cebbe1;
}
.adventure-mission-stage-strip [aria-current=true] {
  background: #ffde80;
  color: #563e0c;
  border-color: #c49836;
  box-shadow: 0 4px 0 #a17b26;
}
.spark-adventure[data-adventure-mode=question] .adventure-question .adventure-question-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.spark-adventure[data-adventure-mode=question] .adventure-question-visual {
  padding: 14px;
  border: 3px solid #b69ad1;
  border-radius: 20px;
  background: #fffdf5;
  box-shadow: 0 5px 0 #d3bfe5;
}
.adventure-place-workboard {
  min-width: 0;
  max-width: 100%;
  color: #3d2b5b;
}
.adventure-place-workboard h4 {
  font-size: 1.05rem;
  margin: 0 0 14px;
  text-align: center;
}
.adventure-place-grid {
  display: grid;
  gap: 7px 5px;
  align-items: stretch;
  max-width: 520px;
  margin: auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.adventure-place-heading {
  padding: 7px 2px;
  border: 2px solid #c5afd9;
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.3;
  display: grid;
  place-items: center;
}
.adventure-place-operand,
.adventure-place-result {
  display: grid;
  place-items: center;
  min-height: 52px;
  min-width: 0;
  border: 2px solid #b49acd;
  border-radius: 10px;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-weight: 800;
  box-shadow: 0 4px 0 #d1bddf, inset 0 2px 0 #fff9;
}
.adventure-place-result {
  border-top: 4px solid #67468e;
  color: #75648b;
  box-shadow: 0 4px 0 #aa91c2;
}
.adventure-place-operation {
  display: grid;
  place-items: center;
  font-size: 1.8rem;
}
.adventure-place-note-label {
  font-size: .65rem;
  align-self: center;
  overflow-wrap: anywhere;
  font-weight: 800;
}
.adventure-place-empty {
  font-size: .8rem;
  text-align: center;
  align-self: center;
  color: #83718f;
}
.adventure-place-0 {
  background: #fff2b1;
  color: #654900;
}
.adventure-place-1 {
  background: #e8f5ff;
  color: #164c83;
}
.adventure-place-2 {
  background: #eee8fb;
  color: #49316e;
}
.spark-adventure[data-adventure-mode=question] .adventure-question .adventure-place-note {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  margin: 0;
  padding: 3px;
  border: 2px dashed #ae96c4;
  border-radius: 9px;
  box-shadow: none;
  font-size: 1rem;
  text-align: center;
}
.spark-adventure[data-adventure-mode=question] .adventure-question .adventure-place-answer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 58px;
  min-height: 58px;
  margin: 0;
  padding: 3px;
  border: 3px solid #70518d;
  border-top: 5px solid #5c3d7c;
  border-radius: 10px;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 4px 0 #ad91c6, inset 0 3px 0 #fff8;
}
.adventure-place-hint {
  font-size: .83rem;
  line-height: 1.45;
  margin: 15px 0 0;
}
.adventure-place-workboard input:focus-visible {
  outline: 3px solid #ad4b17;
  outline-offset: 3px;
}
.spark-adventure[data-adventure-mode=question] #adventure-answer-form {
  padding: 16px;
  border: 3px solid #b8a0cd;
  border-radius: 20px;
  background: #fffaf0;
  box-shadow: 0 5px 0 #d1bce0;
}
.spark-adventure[data-adventure-mode=question] .adventure-question fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.spark-adventure[data-adventure-mode=question] .adventure-question fieldset legend {
  margin-bottom: 12px;
}
.spark-adventure[data-adventure-mode=question] .adventure-question fieldset label {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 13px 10px;
  gap: 8px;
  justify-content: center;
  text-align: center;
  border: 3px solid #9271b2;
  border-radius: 15px;
  background: #f3eaff;
  box-shadow: 0 5px 0 #ae91c7;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}
.spark-adventure[data-adventure-mode=question] .adventure-question input#adventure-answer:not([type=hidden]) {
  display: block;
  width: 100%;
  max-width: 340px;
  border: 3px solid #82619f;
  border-radius: 12px;
  min-height: 56px;
  box-shadow: 0 4px 0 #c5b1d8;
  background: #fffdf5;
  margin: 0 0 14px;
}
.spark-adventure[data-adventure-mode=question] .math-equation {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  text-align: center;
  padding: 20px 10px;
  overflow-wrap: anywhere;
}
@media (max-width: 950px) {
  .spark-adventure[data-adventure-mode=question] .adventure-question .adventure-question-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .spark-adventure[data-adventure-mode=question] {
    padding: 12px;
    border-radius: 22px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question {
    padding: 12px;
    border-radius: 18px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question-visual {
    padding: 10px;
  }
  .adventure-place-grid {
    gap: 6px 4px;
  }
  .adventure-place-heading {
    font-size: .62rem;
    padding: 5px 1px;
  }
  .adventure-place-operand,
  .adventure-place-result {
    min-height: 44px;
    font-size: 1.4rem;
  }
  .adventure-mission-stage-strip {
    gap: 7px;
  }
  .adventure-mission-stage-strip span {
    padding: 10px 4px;
    font-size: .85rem;
  }
  .spark-adventure[data-adventure-mode=question] #adventure-answer-form {
    padding: 12px;
  }
  .spark-adventure[data-adventure-mode=question] .adventure-question fieldset label {
    padding: 12px 6px;
    font-size: 1rem;
  }
}

/* player-pause-hub.css */
body[data-player-profile=true] #profile-screen {
  max-width: 980px;
  border: 4px solid #715393;
  background:
    linear-gradient(
      135deg,
      #fff8dd,
      #eee5ff);
  box-shadow: 0 7px 0 #4f356e, 0 14px 28px #38245026;
  border-radius: 24px;
}
body[data-player-profile=true] #profile-screen .profile-panel {
  padding: 22px;
}
body[data-player-profile=true] #profile-screen-title {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.3;
  align-self: center;
}
body[data-player-profile=true] #profile-back {
  margin: 0;
  min-height: 48px;
}
body[data-player-profile=true] #profile-screen .profile-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px 24px;
}
body[data-player-profile=true] #profile-screen .profile-panel > :not(#profile-back):not(#profile-screen-title) {
  grid-column: 1/-1;
  min-width: 0;
}
body[data-player-profile=true] #profile-screen [hidden] {
  display: none !important;
}
.player-pause-intro {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 20px;
  background: #fffcf1;
  border: 3px solid #b59acb;
  border-radius: 20px;
  box-shadow: 0 4px 0 #dac8e5;
}
.player-pause-avatar {
  width: 150px;
  height: 150px;
  border: 3px solid #ddc779;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;
  background: #e8ddf6;
}
.player-pause-avatar .zappy-composite {
  border-radius: 0;
}
.player-pause-name {
  font-size: 1.45rem;
  margin: 0 0 .45rem;
}
.player-pause-summary h4 {
  font-size: 1.15rem;
  margin: .25rem 0;
}
.player-pause-summary p {
  margin: .25rem 0;
}
.player-pause-summary .player-total-xp {
  font-size: 1.2rem;
  font-weight: 800;
}
.player-pause-summary progress,
.player-rail-progress progress {
  width: 100%;
  height: 15px;
  accent-color: #8b5ac0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #e0d4ee;
}
.player-pause-summary details {
  font-size: .85rem;
  margin-top: .55rem;
}
.player-pause-summary summary,
.player-full-badges > summary,
.player-profile-info > summary {
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  padding: .65rem 0;
  font-weight: 750;
}
.player-pause-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.player-pause-actions button {
  min-height: 48px;
  flex: 1;
  padding: .8rem 1rem;
}
.player-badge-preview {
  padding: 15px 18px;
  border: 3px solid #c5a657;
  border-radius: 18px;
  background: #fff4c8;
  box-shadow: 0 4px 0 #e1cf91;
}
.player-badge-preview h4 {
  margin: 0;
  font-size: 1.1rem;
}
.player-badge-preview p {
  margin: .5rem 0 0;
}
.player-badge-preview ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  list-style: none;
  margin: .7rem 0 0;
}
.player-badge-preview li {
  padding: 8px 12px;
  background: #fffdf2;
  border: 2px solid #c5a657;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
}
.player-full-badges {
  margin: 14px 0 0;
}
.player-profile-info {
  font-size: .85rem;
  color: #60506e;
}
body[data-player-profile=true] .profile-preview-note,
body[data-player-profile=true] #profile-editor > p {
  display: none;
}
body[data-player-profile=true] .original-profile-body #original-profile-email,
body[data-player-profile=true] .original-profile-note,
body[data-player-profile=true] #original-profile-access {
  display: none;
}
.player-rail-progress {
  margin-top: 8px;
  text-align: left;
}
.player-rail-progress strong {
  font-size: .95rem;
}
.player-rail-progress p {
  font-size: .85rem;
  margin: 6px 0;
}
.player-rail-progress progress {
  height: 10px;
}
@media (max-width: 760px) {
  body[data-player-profile=true] #workspace-rail .original-profile {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    padding: 10px;
    gap: 12px;
  }
  body[data-player-profile=true] #workspace-rail .original-profile-cover {
    width: 70px;
    max-width: 70px;
    height: 70px;
    aspect-ratio: 1;
    border-radius: 14px;
  }
  body[data-player-profile=true] #workspace-rail .original-profile-body {
    padding: 0;
    min-width: 0;
  }
  body[data-player-profile=true] #workspace-rail .original-profile-body h2 {
    font-size: 1rem;
    margin: 0;
  }
  .player-rail-progress {
    margin-top: 4px;
  }
}
@media (max-width: 600px) {
  body[data-player-profile=true] #profile-screen {
    margin: 10px;
  }
  body[data-player-profile=true] #profile-screen .profile-panel {
    padding: 14px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-player-profile=true] #profile-screen .profile-panel > * {
    grid-column: 1;
  }
  body[data-player-profile=true] #profile-screen-title {
    font-size: 1.35rem;
  }
  .player-pause-intro {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .player-pause-avatar {
    width: 82px;
    height: 82px;
  }
  .player-pause-name {
    font-size: 1.1rem;
  }
  .player-pause-summary h4 {
    font-size: 1rem;
  }
  .player-pause-summary .player-total-xp {
    font-size: 1rem;
  }
  .player-pause-actions {
    gap: 10px;
    margin: 14px 0;
  }
  .player-pause-actions button {
    flex-basis: 100%;
  }
  .player-badge-preview {
    padding: 12px;
  }
  .player-pause-summary details {
    font-size: .8rem;
  }
}

/* demo-raised-buttons.css */
:is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button) {
  --spark-control-edge: #634480;
  box-shadow:
    inset 0 2px 0 #ffffff55,
    0 4px 0 var(--spark-control-edge),
    0 6px 10px #36214d16;
  transition: box-shadow .12s ease;
}
:is(#top, .studio-document) .secondary-button:not([data-fluency-word]):not(.fluency-words button):not([aria-pressed=true]):not([aria-current=page]):not([aria-current=true]):not(:disabled) {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #eee4fa);
  color: #4b306b;
  border-color: #9879b6;
}
:is(#top, .studio-document) :is(.danger-button, .danger):not([data-fluency-word]):not(.fluency-words button) {
  --spark-control-edge: #963b3b;
}
:is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button):hover:not(:disabled):not([aria-disabled=true]) {
  box-shadow:
    inset 0 2px 0 #ffffff66,
    0 4px 0 var(--spark-control-edge),
    0 7px 13px #36214d2b;
}
:is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button):is([aria-pressed=true], [aria-current=page], [aria-current=true]) {
  box-shadow: inset 0 2px 3px #28143e30, 0 2px 0 var(--spark-control-edge);
}
:is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button):active:not(:disabled):not([aria-disabled=true]) {
  box-shadow: inset 0 2px 3px #28143e30, 0 1px 0 var(--spark-control-edge);
}
:is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button):focus-visible {
  outline: 3px solid #007a9f;
  outline-offset: 4px;
}
:is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button):is(:disabled, [aria-disabled=true]) {
  --spark-control-edge: #a99eb5;
  box-shadow: inset 0 1px 0 #ffffff55, 0 2px 0 var(--spark-control-edge);
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  :is(#top, .studio-document) :is(button, a.primary-button, a.secondary-button, #workspace-rail nav a):not([data-fluency-word]):not(.fluency-words button) {
    transition: none;
  }
}

/* account-menu-cleanup.css */
#top .profile-account {
  z-index: 100;
}
#top #profile-menu {
  display: grid;
  gap: 12px;
  width: 248px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 14px 14px 18px;
  top: calc(100% + 14px);
  border: 3px solid #9170af;
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      #fff9e7,
      #f0e6fb);
  box-shadow: 0 5px 0 #5b3d78, 0 12px 24px #30213c33;
  z-index: 100;
}
#top #profile-menu[hidden] {
  display: none;
}
#top #profile-menu > button {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  font-weight: 750;
  line-height: 1.35;
  border: 2px solid #b59acb;
  border-radius: 11px;
  background: linear-gradient(#fff, #eee4fa);
  color: #4b306b;
}
#top #profile-menu > button:hover:not(:disabled) {
  background: linear-gradient(#fff9dc, #eadcf9);
}
#top #profile-menu > button:disabled {
  color: #71677d;
  background: #efebf2;
}
#top #player-pause-hub [data-player-customize] {
  flex: 0 1 360px;
  min-height: 60px;
  border: 3px solid #755093;
  border-radius: 16px;
  padding: 14px 20px;
  background:
    linear-gradient(
      180deg,
      #ffec9e,
      #edc961);
  color: #39234f;
  font-size: 1.1rem;
  font-weight: 850;
  box-shadow:
    inset 0 3px 0 #fff6ce,
    0 7px 0 #684183,
    0 10px 16px #3c24532b;
}
#top #player-pause-hub [data-player-customize]::before {
  content: "\2726";
  margin-right: 10px;
  color: #664080;
}
#top #player-pause-hub [data-player-customize]:hover {
  background:
    linear-gradient(
      180deg,
      #fff3bb,
      #f0d170);
}
#top #player-pause-hub [data-player-customize]:active {
  box-shadow: inset 0 2px 3px #7a551a33, 0 2px 0 #684183;
}
@media (max-width: 600px) {
  #top #player-pause-hub [data-player-customize] {
    flex-basis: 100%;
  }
  #top #profile-menu {
    width: 240px;
  }
}

/* reading-timer-square.css */
#top .fluency-panel .fluency-timer-controls {
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#top .fluency-panel .fluency-timer-controls > button {
  display: grid;
  place-items: center;
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  border-radius: 11px;
}
#top .fluency-panel .fluency-timer-controls > button > span {
  display: block;
  line-height: 1;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* reading-finalize-center.css */
#top .fluency-panel .fluency-work-area > [data-fluency-action=review] {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  margin: 1rem auto;
  padding: .65rem 1rem;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* sidebar-action-icons.css */
#workspace-rail nav [data-spark-nav-icon]::before {
  display: none;
  content: none;
}
#workspace-rail nav .spark-nav-icon {
  display: grid;
  align-items: center;
  justify-items: center;
  flex: 0 0 30px;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin-right: 9px;
  border: 1px solid #baa1d3;
  border-radius: 9px;
  background: #f4eafa;
  color: #563878;
}
#workspace-rail nav .spark-nav-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}
#workspace-rail nav .spark-nav-icon img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
}
#workspace-rail nav [aria-current=page] .spark-nav-icon {
  background: #ffe399;
  border-color: #e5c77b;
  color: #624137;
}
@media (max-width: 760px) {
  #workspace-rail nav .spark-nav-icon {
    margin-right: 7px;
  }
}

/* teacher-class-launch.css */
#teacher-sharing-requests.teacher-class-launch {
  width: 100%;
  max-width: 680px;
  box-sizing: border-box;
  margin: 14px 0 22px;
  padding: 18px;
  border: 3px solid #9a78b9;
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      #fff9df,
      #f0e5fb);
  box-shadow: 0 5px 0 #ceb7e0;
}
#teacher-sharing-requests.teacher-class-launch[hidden] {
  display: none;
}
.class-launch-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.class-launch-heading h3 {
  margin: 0;
  line-height: 1.3;
}
.class-launch-heading button {
  flex: 0 0 auto;
}
.class-launch-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 4px;
}
.class-launch-choices button {
  min-width: 0;
  min-height: 76px;
  padding: 14px;
  border: 3px solid #9674b2;
  border-radius: 16px;
  font-weight: 800;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}
.class-launch-requests > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 750;
}
.class-launch-requests .teacher-request-list {
  margin-top: 12px;
}
#teacher-sharing-requests[data-class-launcher-mode=closed] {
  padding: 8px 14px;
  border-width: 2px;
  box-shadow: none;
  background: #fbf7ff;
  margin: 8px 0 16px;
}
@media (max-width: 600px) {
  .class-launch-choices {
    grid-template-columns: minmax(0, 1fr);
  }
  #teacher-sharing-requests.teacher-class-launch {
    padding: 14px;
  }
  .class-launch-heading {
    gap: 10px;
  }
  .class-launch-heading h3 {
    font-size: 1.1rem;
  }
  .class-launch-choices button {
    min-height: 64px;
  }
}

/* Shared auto-height game screen; never enlarge the compact cards within it. */
body[data-classes-view=true] #classes.classes-page,
#resource-room-demo[data-resource-mode=caseload],
#resource-room-demo[data-resource-mode=student] {
 box-sizing: border-box;
 min-width: 0;
 max-width: 100%;
 height: auto;
 min-height: 0;
 max-height: none;
 border: 3px solid #9a7bc2;
 border-radius: 26px;
 background: linear-gradient(135deg, #eee4ff, #e6f3ff);
 box-shadow: 0 6px 0 #cbb8df, 0 14px 28px #40245f0e;
 color: #422c61;
 overflow: visible;
}
body[data-classes-view=true] #classes.classes-page { padding: 18px; margin-bottom: 12px; }
@media (max-width: 600px) {
 body[data-classes-view=true] #classes.classes-page,
 #resource-room-demo[data-resource-mode=caseload],
 #resource-room-demo[data-resource-mode=student] { border-radius: 20px; border-width: 2px; }
 body[data-classes-view=true] #classes.classes-page { padding: 12px; }
}

/* Reconstructed final Resource Room disclosure/tabs paint; no data or scoring changes. */
.read-aloud-accommodations .read-aloud-ela-options[hidden] { display: none; }
.read-aloud-accommodations .iep-form-actions {
 display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
 align-items: stretch; gap: 14px; width: 100%; max-width: 520px; padding-bottom: 6px;
}
.read-aloud-accommodations .iep-form-actions > button {
 display: flex; align-items: center; justify-content: center; min-height: 48px;
 width: 100%; min-width: 0; margin: 0; padding: 10px 16px; line-height: 1.25;
 box-sizing: border-box; text-align: center; white-space: normal; overflow-wrap: anywhere;
}
#resource-room-demo .read-aloud-accommodations .iep-form-actions > button {
 display: flex; align-items: center; justify-content: center; min-height: 48px;
 width: 100%; min-width: 0; margin: 0; padding: 10px 16px; line-height: 1.25;
 box-sizing: border-box; text-align: center; white-space: normal; overflow-wrap: anywhere;
}
.read-aloud-disclosure { min-width: 0; margin: 0 0 20px; }
.read-aloud-disclosure > .read-aloud-toggle { min-height: 48px; max-width: 100%; }
.read-aloud-disclosure > [data-read-aloud-panel][hidden] { display: none; }
#resource-room-demo .read-aloud-disclosure > .read-aloud-toggle {
 background: linear-gradient(#2d75ae, #245a90); border-color: #1c4d7b;
 color: #fff; --spark-control-edge: #1c4d7b;
}
#resource-room-demo .read-aloud-accommodations.iep-goals-section {
 background: #edf6ff; border: 2px solid #9cbce0;
}
#resource-room-demo .rr-detail-tabs {
 display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 20px; padding-bottom: 6px;
}
#resource-room-demo .rr-detail-tabs > button { min-height: 48px; margin: 0; }
#resource-room-demo .rr-detail-tabs > button[aria-selected=true] {
 background: #d7eaff; border-color: #245a90; color: #163b64;
}
#resource-room-demo [data-resource-panel][hidden] { display: none; }
#resource-room-demo [data-resource-tab-status]:empty { display: none; }
@media (max-width: 600px) {
 .read-aloud-accommodations .iep-form-actions { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
 #resource-room-demo .rr-detail-tabs > button { flex: 1 1 140px; }
}

.class-launch-frame .class-launch-open {
 display: flex; flex-direction: column; align-items: stretch; gap: 6px;
 width: 100%; min-height: 0; margin: 0; padding: 0;
 border: 0; border-radius: 0; color: inherit; font: inherit; text-align: inherit;
 background: transparent;
}
#top .class-launch-frame button.class-launch-open,
#top .class-launch-frame button.class-launch-open:hover,
#top .class-launch-frame button.class-launch-open:active {
 box-shadow: none !important; transform: none !important; background: transparent !important;
}
.class-launch-frame:has(.class-launch-open:focus-visible) { outline: 3px solid #1c5fba; outline-offset: 4px; }
.class-launch-frame .class-code-selectable { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; cursor: text; }
.class-code-selectable > span:first-child { grid-column: 1 / -1; }
.class-code-selectable .class-launch-code-value { grid-column: 1; grid-row: 2; min-width: 0; user-select: text; overflow-wrap: anywhere; }
.class-code-selectable .class-code-copy { grid-column: 2; grid-row: 2; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; background: #f4efff; color: #422c61; cursor: pointer; }
.class-code-copy:disabled { opacity: .6; cursor: default; }
.class-code-selectable .class-code-copy-status { grid-column: 1 / -1; font-size: 12px; line-height: 1.3; }
.class-code-copy-status[hidden] { display: none; }

/* Crisp vector Copy mark; keep the existing44px raised control. */
.class-code-selectable .class-code-copy { display: grid; place-items: center; line-height: 1; }
.class-code-copy > .class-code-copy-icon { display: block; width: 22px; height: 22px; flex: none; pointer-events: none; }


/* Open-class student code: compact header group, separate from teacher invites. */
.classes-page .class-control-top { column-gap: 20px; row-gap: 16px; }
.classes-page .class-control-top-actions {
 display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
 gap: 12px; margin-left: auto; min-width: 0; max-width: 100%;
}
.classes-page .class-control-top-actions #class-settings-open { margin-left: 0; flex: 0 0 auto; }
.class-header-code { min-width: 0; max-width: 100%; }
.class-header-code .class-header-code-box {
 display: grid; grid-template-columns: minmax(0, 1fr) 44px;
 align-items: center; column-gap: 12px; row-gap: 1px;
 padding: 6px 9px 9px 12px; border: 2px solid #c8b5e1; border-radius: 14px;
 background: #fff; color: #422c61; box-shadow: 0 3px 0 #e2d9ed;
 min-width: 0; max-width: 100%; cursor: text;
}
.class-header-code .class-header-code-box > span:first-child {
 grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 700; line-height: 1.25;
}
.class-header-code .class-launch-code-value {
 grid-column: 1; grid-row: 2; font-size: 18px; line-height: 1.2; letter-spacing: .08em;
 user-select: text; min-width: 0; overflow-wrap: anywhere;
}
.classes-page .class-control-top .class-header-code .class-code-copy {
 grid-column: 2; grid-row: 1 / 3; width: 44px; min-width: 44px; height: 44px;
 min-height: 44px; padding: 0; margin: 0; display: grid; place-items: center;
}
.class-header-code .class-code-copy-status { grid-column: 1 / -1; grid-row: 3; max-width: 240px; }
@media (max-width: 540px) {
 .classes-page .class-control-top-actions { justify-content: flex-start; margin-left: 0; width: 100%; }
}

/* Mission-only compact columns and checked success. No answer is inferred by CSS. */
.spark-adventure[data-adventure-mode=question] .adventure-place-grid { width: 100%; }
.spark-adventure[data-adventure-mode=question] .adventure-place-workboard { overflow-x: auto; padding-bottom: 8px; }
.spark-adventure[data-adventure-mode=question] .adventure-place-workboard:focus-visible { outline: 3px solid #174ea6; outline-offset: 2px; }
.spark-adventure[data-adventure-mode=question] .adventure-place-operand,
.spark-adventure[data-adventure-mode=question] .adventure-place-result { min-height: 48px; }
.spark-adventure[data-adventure-mode=question] .adventure-question .adventure-place-answer { height: 52px; min-height: 52px; }
.spark-adventure[data-adventure-mode=question] .adventure-question .adventure-place-note { height: 38px; min-height: 38px; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form .adventure-checked-correct {
 background: linear-gradient(180deg, #edfff0, #c4efd2) !important;
 border-color: #25834a; color: #14532d !important;
 box-shadow: 0 5px 0 #247342, inset 0 2px 0 #fff !important;
 font-weight: 800;
}
.adventure-success-check { width: 30px; height: 30px; flex: 0 0 30px; vertical-align: middle; margin-right: 8px; fill: none; stroke: #16733c; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#top .spark-adventure #adventure-answer-form .adventure-next-question {
 display: flex; justify-content: center; align-items: center;
 width: 100%; min-height: 54px; margin: 12px 0 18px;
 padding: 12px 16px; border: 3px solid #735211;
 background: linear-gradient(180deg, #ffe99c, #ffcf51) !important;
 color: #493307 !important; font-size: 1.15rem; font-weight: 850;
 box-shadow: 0 5px 0 #92701f, inset 0 2px 0 #fff8 !important;
}
#top .spark-adventure #adventure-answer-form .adventure-next-question:focus-visible { outline: 3px solid #174ea6; outline-offset: 4px; }
@media (max-width:600px) {
 .spark-adventure[data-adventure-mode=question] .adventure-question .adventure-question-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .spark-adventure[data-adventure-mode=question] .adventure-question-visual { padding: 10px; }
 .spark-adventure[data-adventure-mode=question] .adventure-place-grid { gap: 7px 5px; }
}

/* Active mission chrome only. Keep every navigation/help action without tall stacked rows. */
#top .spark-adventure[data-adventure-mode=question] { padding: 12px; border-radius: 22px; }
#top .spark-adventure[data-adventure-mode=question] > .adventure-mission-toolbar {
 display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
 gap: 8px; margin: 0 0 8px;
}
#top .spark-adventure[data-adventure-mode=question] > .adventure-mission-toolbar > button {
 width: auto; min-height: 44px; margin: 0; padding: 8px 12px;
 font-size: .9rem; line-height: 1.2; border-radius: 12px;
}
#top .spark-adventure[data-adventure-mode=question] > .adventure-mission-toolbar > .adventure-rewards-button { margin-left: auto; }
#top .spark-adventure[data-adventure-mode=question] > h2 { margin: 8px 0; font-size: 1.1rem; line-height: 1.25; letter-spacing: 0; }
#top .spark-adventure[data-adventure-mode=question] > .adventure-status { margin: 6px 0; padding: 8px 10px; font-size: .9rem; }
#top .spark-adventure[data-adventure-mode=question] > .adventure-question { margin: 8px 0 12px; padding: 12px; border-radius: 20px; }
#top .spark-adventure[data-adventure-mode=question] .adventure-question > .adventure-kicker { margin: 0 0 6px; padding: 4px 9px; font-size: .65rem; }
#top .spark-adventure[data-adventure-mode=question] .adventure-question > h3 { margin: 0 0 10px; padding: 0 0 8px; font-size: 1.5rem; line-height: 1.2; }
#top .spark-adventure[data-adventure-mode=question] .adventure-question-grid { gap: 16px; align-items: start; }
#top .spark-adventure[data-adventure-mode=question] .adventure-question-visual { padding: 10px; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form { padding: 10px; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form > label { margin: 0 0 8px; font-size: 1rem; line-height: 1.3; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form fieldset { gap: 8px; margin: 0 0 10px; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form fieldset legend { margin-bottom: 8px; font-size: 1rem; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form fieldset label { min-height: 44px; padding: 8px; font-size: 1.05rem; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form > button[type=submit] { min-height: 44px; padding: 8px 12px; font-size: 1rem; }
#top .spark-adventure[data-adventure-mode=question] .adventure-answer-status:empty { display: none; }
#top .spark-adventure[data-adventure-mode=question] .adventure-answer-status { margin: 8px 0; padding: 8px 10px; font-size: .95rem; line-height: 1.3; }
#top .spark-adventure[data-adventure-mode=question] .adventure-place-hint { margin: 8px 0 0; }
#top .spark-adventure[data-adventure-mode=question] #adventure-answer-form .adventure-note { margin: 8px 0 0; font-size: .75rem; line-height: 1.35; }
@media (max-width:600px) {
 #top .spark-adventure[data-adventure-mode=question] { padding: 8px; }
 #top .spark-adventure[data-adventure-mode=question] > .adventure-mission-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 #top .spark-adventure[data-adventure-mode=question] > .adventure-mission-toolbar > button { width: 100%; min-width: 0; padding: 8px; font-size: .8rem; }
 #top .spark-adventure[data-adventure-mode=question] > .adventure-mission-toolbar > .adventure-rewards-button { margin-left: 0; }
 #top .spark-adventure[data-adventure-mode=question] > .adventure-question { padding: 8px; }
}

/* Native disabled placeholders: no playback capability or implied readiness. */
#top .spark-adventure[data-adventure-mode=question] .adventure-audio-placeholder {
 display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
 margin: 0 0 10px; padding: 8px 10px; border: 1px solid #aeb4be;
 border-radius: 12px; background: #f0f1f3; color: #46505d;
 font-size: .8rem; line-height: 1.3;
}
#top .spark-adventure .adventure-audio-placeholder[hidden] { display: none; }
.adventure-audio-controls { display: flex; flex-wrap: wrap; gap: 8px; }
#top .spark-adventure .adventure-audio-controls > button:disabled {
 min-height: 44px; margin: 0; padding: 8px 12px;
 border: 2px solid #a9b0ba; border-radius: 10px;
 background: #e0e3e7 !important; color: #515b68 !important;
 box-shadow: none !important; transform: none !important;
 opacity: 1; cursor: not-allowed; font-size: .85rem;
}
.adventure-audio-explanation { flex: 1 1 190px; }
@media (max-width:600px) {
 #top .spark-adventure .adventure-audio-placeholder { gap: 6px 8px; }
 .adventure-audio-explanation { flex-basis: 100%; }
}

/* Current Math mission only: compact toolbar title and prompt-aligned audio icons. */
#top .spark-adventure[data-adventure-mode=question] .adventure-mission-toolbar > .adventure-toolbar-skill {
 flex: 1 1 180px; min-width: 0; margin: 0; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere;
}
#top .spark-adventure[data-adventure-mode=question] .adventure-question-heading {
 display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
 border-bottom: 2px dashed #ded2ec; padding-bottom: 10px; margin-bottom: 12px;
}
#top .spark-adventure[data-adventure-mode=question] .adventure-question-heading > .adventure-question-prompt {
 flex: 1 1 160px; min-width: 0; margin: 0; padding: 0; border: 0;
 font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.25; overflow-wrap: anywhere;
}
#top .spark-adventure[data-adventure-mode=question] .adventure-question-heading .adventure-audio-placeholder {
 display: flex; flex-direction: column; align-items: center; gap: 3px;
 flex: 0 0 auto; margin: 0; padding: 0; border: 0; background: transparent;
}
#top .spark-adventure .adventure-question-heading .adventure-audio-placeholder[hidden] { display: none; }
#top .spark-adventure .adventure-question-heading .adventure-audio-controls { gap: 6px; }
#top .spark-adventure .adventure-question-heading .adventure-audio-controls > .adventure-audio-icon {
 display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
 padding: 0; margin: 0; border-radius: 10px;
}
.adventure-audio-icon svg { display: block; width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.adventure-audio-icon[data-mission-audio-action=play] svg { fill: currentColor; stroke: none; }
#top .spark-adventure .adventure-question-heading #adventure-audio-coming-soon { font-size: .68rem; line-height: 1.2; font-weight: 600; }
#top .spark-adventure .adventure-question-heading .adventure-audio-status,
#top .spark-adventure .adventure-question-heading .adventure-audio-explanation {
 position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#player-rail-progress > .adventure-mission-rail-badge {
 display: block; margin: 10px 0 0; padding: 8px; border: 1px solid #d9b541;
 border-radius: 12px; background: #fff0b4; color: #6d4c00; font-size: .7rem; line-height: 1.45;
 font-weight: 800; letter-spacing: .03em; white-space: normal; overflow-wrap: anywhere;
}
@media(max-width:600px) {
 #top .spark-adventure[data-adventure-mode=question] .adventure-mission-toolbar > .adventure-toolbar-skill { grid-column: 1 / -1; font-size: .9rem; }
 #top .spark-adventure[data-adventure-mode=question] .adventure-question-heading { gap: 8px 10px; }
 #top .spark-adventure[data-adventure-mode=question] .adventure-question-heading > .adventure-question-prompt { flex-basis: 130px; }
}

/* Isolated ELA lesson/item layer. No Math selectors or global control overrides. */
.ela-lesson,.ela-item{--ela-ink:#352e54;--ela-border:#65518c;--ela-blue:#316dbe;--ela-shadow:#234775;--ela-paper:#fffdf6;color:var(--ela-ink);box-sizing:border-box;min-width:0;max-width:100%;font-family:inherit;line-height:1.5;overflow-wrap:anywhere}
.ela-lesson *,.ela-item *{box-sizing:border-box;min-width:0}
.ela-lesson [hidden],.ela-item [hidden]{display:none!important}
.ela-lesson{padding:clamp(12px,2vw,24px);border:3px solid #736099;border-radius:24px;background:linear-gradient(145deg,#e8f5ff,#eee5ff);box-shadow:0 7px 0 #c5bfd9,0 11px 22px #34304e14}
.ela-lesson h2,.ela-lesson h3,.ela-lesson h4,.ela-item h3,.ela-item h4{color:var(--ela-ink);line-height:1.3;margin:0 0 12px;overflow-wrap:anywhere}
.ela-lesson p,.ela-item p{margin:0 0 14px}
.ela-lesson-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;align-items:center;margin-bottom:20px}
.ela-lesson-header h2{margin:0;font-size:clamp(1.3rem,3vw,1.8rem)}
.ela-lesson-header>p{grid-column:2;margin:0}
.ela-button{font:inherit;font-weight:750;line-height:1.3;color:#40325f;background:linear-gradient(#fffdfb,#e9e2fa);border:2px solid #7c669b;border-radius:14px;box-shadow:0 4px 0 #68517f;min-height:46px;padding:10px 17px;text-align:center;max-width:100%;cursor:pointer;touch-action:manipulation;white-space:normal;overflow-wrap:anywhere;vertical-align:middle}
.ela-button:not(:disabled):hover{filter:brightness(1.035)}
.ela-button:not(:disabled):active{transform:translateY(2px);box-shadow:0 2px 0 #68517f}
.ela-button:focus-visible,.ela-item textarea:focus-visible,.ela-item input:focus-visible{outline:3px solid #b34010;outline-offset:4px}
.ela-button:disabled{cursor:default;opacity:.68;box-shadow:0 2px 0 #8b819d}
.ela-primary{background:linear-gradient(#4c8edf,#2864b6);color:#fff;border-color:#244f84;box-shadow:0 4px 0 #203e65}
.ela-secondary{background:linear-gradient(#fffdfb,#e9e2fa);color:#40325f}
.ela-lesson-tabs{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:4px}
.ela-lesson-tabs>.ela-button{flex:1 1 170px}
.ela-lesson-tabs>[aria-selected=true]{background:linear-gradient(#7d60b9,#60448f);border-color:#4d3579;box-shadow:0 4px 0 #422a69;color:#fff}
.ela-lesson-card{padding:clamp(14px,2.5vw,26px);background:var(--ela-paper);border:3px solid #9381b1;border-radius:20px;box-shadow:0 5px 0 #d1c4df}
.ela-step-count{font-size:.9rem;font-weight:750;color:#5b4a76;border-bottom:2px dashed #d9cbe6;padding-bottom:12px}
.ela-learn-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,280px);gap:0 24px;align-items:start}
.ela-learn-content>h3,.ela-learn-content>.ela-learn-text{grid-column:1}
.ela-learn-content>.ela-visual{grid-column:2;grid-row:1 / 4}
.ela-learn-content>.ela-audio-controls{grid-column:1 / -1}
.ela-learn-text,.ela-item-prompt{font-size:clamp(1.12rem,2vw,1.35rem);line-height:1.7;white-space:pre-wrap}
.ela-item-intro{display:flex;align-items:center;gap:18px;margin-bottom:12px}
.ela-item-intro>.ela-item-prompt{flex:1;margin:0}
.ela-item-intro>.ela-visual{flex:0 1 210px}
.ela-visual{margin:0 0 14px;width:100%;max-width:320px;text-align:center}
.ela-visual svg{width:100%;max-width:320px;height:auto;display:block}
.ela-visual figcaption{font-size:.9rem;line-height:1.5;margin-top:7px;color:#514a63}
.ela-reading-text{padding:clamp(14px,2vw,24px);margin:18px 0;border:2px solid #d6c7a4;border-radius:16px;background:#fff;box-shadow:0 3px 0 #ebe2cc;font-size:1.12rem;line-height:1.9;max-width:70ch;white-space:pre-wrap}
.ela-reading-text p:last-child{margin:0}
.ela-reading-text h4{font-size:1.2rem}
.ela-response{border:0;padding:0;margin:18px 0 20px;min-width:0}
.ela-response>legend{font-weight:750;margin-bottom:12px;padding:0}
.ela-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:5px}
.ela-choice{min-height:54px;text-align:left;background:linear-gradient(#fff,#eef5ff);border-color:#7491b4;box-shadow:0 4px 0 #b2c6df;font-weight:650;padding:13px 16px}
.ela-choice[aria-checked=true]{background:#d9e8ff;border-color:#254f87;box-shadow:0 4px 0 #254f87;outline:2px solid #254f87;outline-offset:1px}
.ela-choice[aria-checked=true]::before{content:'● ';color:#254f87}
.ela-choice.ela-letter-choice{font-family:Georgia,'Times New Roman',serif;font-size:2rem;font-weight:500;text-align:center}
.ela-response>label{display:block;font-weight:700;margin-bottom:8px}
.ela-response textarea{display:block;width:100%;max-width:100%;min-height:140px;font:inherit;font-size:1.12rem;line-height:1.65;padding:13px;border:2px solid #85739d;border-radius:12px;background:#fff;color:#302943;resize:vertical}
.ela-self-check{border:2px solid #d7cee4;border-radius:14px;padding:12px 14px;margin:18px 0 10px}
.ela-self-check legend{font-weight:750;padding:0 6px}
.ela-self-check label{display:flex;gap:10px;align-items:center;min-height:44px;padding:5px 0;cursor:pointer}
.ela-self-check input{width:22px;height:22px;flex:0 0 22px;accent-color:#634a97;margin:0}
.ela-audio-controls{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;margin:14px 0;padding-bottom:4px}
.ela-audio-option{display:flex;flex-direction:column;gap:7px;max-width:100%}
.ela-audio-unavailable{font-size:.85rem;color:#62586e;max-width:30ch}
.ela-audio-status{flex-basis:100%;font-size:.9rem}
.ela-audio-button{font-size:.95rem}
.ela-audio-button[aria-pressed=true]{background:#d8eacb;border-color:#446c35;box-shadow:0 4px 0 #446c35}
.ela-small,.ela-session-note{font-size:.9rem;color:#62586e;line-height:1.55}
.ela-session-note{margin:20px 2px 0!important}
.ela-feedback,.ela-notice,.ela-hint,.ela-item-message{padding:13px 16px;background:#edf3ff;border:2px solid #b6c9e6;border-radius:13px;line-height:1.6}
.ela-feedback[data-tone=success]{background:#e5f4df;border-color:#8bb27b;color:#294b21}
.ela-hint{margin:16px 0;background:#fff2cf;border-color:#d6b86a}
.ela-hint>p:last-child{margin-bottom:0}
.ela-item-message{margin-top:16px!important}
.ela-submit{margin:0 0 8px;min-width:160px}
.ela-lesson-navigation{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:24px;padding-top:20px;padding-bottom:5px;border-top:2px dashed #d9cbe6}
.ela-review-summary{font-weight:750;font-size:1.12rem;padding:14px;border:2px solid #c7b9dc;border-radius:12px;background:#f1eafb}
.ela-review-item{padding:16px;margin:16px 0;background:#fff;border:2px solid #d8cce6;border-radius:14px}
.ela-review-item p:last-child{margin:0}
.ela-writing-review{white-space:pre-wrap}
.ela-lesson-card>.ela-button{margin:8px 12px 8px 0}
@media (max-width:600px){
 .ela-lesson{padding:12px;border-radius:18px}
 .ela-lesson-card{padding:14px;border-radius:16px}
 .ela-lesson-header{grid-template-columns:1fr;gap:12px}
 .ela-lesson-header>.ela-button{justify-self:start}
 .ela-lesson-header>p{grid-column:1}
 .ela-lesson-tabs{gap:10px;margin-bottom:18px}
 .ela-lesson-tabs>.ela-button{flex-basis:100%;min-height:46px}
 .ela-learn-content{grid-template-columns:minmax(0,1fr)}
 .ela-learn-content>h3,.ela-learn-content>.ela-learn-text,.ela-learn-content>.ela-visual,.ela-learn-content>.ela-audio-controls{grid-column:1;grid-row:auto}
 .ela-learn-content>.ela-visual{max-width:240px;justify-self:center}
 .ela-item-intro{flex-direction:column;align-items:stretch}
 .ela-item-intro>.ela-visual{flex:auto;max-width:220px;align-self:center}
 .ela-choices{grid-template-columns:minmax(0,1fr)}
 .ela-choice.ela-letter-choice{min-height:56px}
 .ela-lesson-navigation>.ela-button{flex:1 1 130px}
 .ela-reading-text{font-size:1.05rem;padding:14px;line-height:1.85}
 .ela-audio-option,.ela-audio-button{width:100%}
 .ela-submit{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){.ela-lesson *,.ela-item *{scroll-behavior:auto;transition:none!important;animation:none!important}}
@media (forced-colors:active){.ela-button{border:2px solid ButtonText;box-shadow:none}.ela-choice[aria-checked=true],.ela-lesson-tabs>[aria-selected=true]{outline:3px solid Highlight}.ela-visual svg{forced-color-adjust:none}}

.ela-portal{color:#28334f;font:500 16px/1.55 system-ui,sans-serif;min-width:0;padding:18px;border:3px solid #8f91cb;border-radius:22px;background:linear-gradient(145deg,#edf8ff,#f2edff);box-shadow:0 5px 0 #cac5e5;margin:14px 0 20px}.ela-portal *{box-sizing:border-box}.ela-portal h2,.ela-portal h3,.ela-portal h4{margin:0 0 10px;line-height:1.3}.ela-portal p{margin:8px 0 14px}.ela-portal .ela-small{font-size:.88rem;color:#4b5571}.ela-catalog-layout{display:grid;grid-template-columns:minmax(165px,225px) minmax(0,1fr);gap:18px;margin:18px 0}.ela-category-menu{display:flex;flex-direction:column;align-self:start;gap:12px;min-width:0}.ela-category-menu button{text-align:left;white-space:normal}.ela-category-menu .subject-menu{margin:0 0 8px}.ela-skill-list{display:grid;gap:16px;min-width:0}.ela-skill-card{padding:18px;border:2px solid #b2add8;border-radius:18px;background:#fffdf7;box-shadow:0 4px 0 #d7d1e8;min-width:0;overflow-wrap:anywhere}.ela-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:14px 0 20px}.ela-action-row p{margin:0}.ela-portal label{display:block;font-weight:750}.ela-portal input[type=text],.ela-portal input[type=number]{min-height:44px;border:2px solid #a9afd0;border-radius:10px;background:white;padding:8px 12px;font:inherit;max-width:100%;color:inherit}.ela-portal input[type=text]{display:block;width:min(100%,540px);margin:8px 0}.ela-portal input[type=number]{width:90px;margin:0 12px 12px 0}.ela-portal input[type=checkbox]{width:20px;height:20px;vertical-align:middle;margin-right:10px;accent-color:#586eb5}.ela-portal .ela-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;gap:8px;border:2px solid #5266a9;border-radius:13px;background:linear-gradient(#eef6ff,#c2dcff);box-shadow:0 4px 0 #5266a9;color:#233968;font:750 15px/1.25 system-ui,sans-serif;cursor:pointer;max-width:100%}.ela-portal .ela-button[aria-pressed=true]{background:linear-gradient(#6d81d4,#5268b9);color:white;box-shadow:0 4px 0 #374b8e}.ela-portal .ela-button:disabled{opacity:.62;cursor:not-allowed}.ela-portal .ela-button:focus-visible,.ela-portal input:focus-visible{outline:3px solid #bd6a1d;outline-offset:4px}.ela-run-header{display:grid;gap:12px;margin-bottom:18px}.ela-run-header>.ela-button{justify-self:start}.ela-progress-summary,.ela-status{padding:10px 14px;border-radius:12px;background:#e5eefb}.ela-status:empty{display:none}.ela-recorded-response{border-top:1px solid #c4c9dd;padding:12px 0}.ela-class-progress details{margin:12px 0}.ela-class-progress summary{cursor:pointer;font-weight:700}.ela-lesson-preview{min-width:0}@media(max-width:650px){.ela-portal{padding:12px}.ela-catalog-layout{grid-template-columns:1fr}.ela-category-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ela-category-menu .subject-menu{grid-column:1/-1}.ela-category-menu button{font-size:14px}.ela-skill-card{padding:14px}.ela-action-row .ela-button{flex:1 1 140px}.ela-run-header .ela-button{width:auto}.ela-portal input[type=text]{width:100%}}@media(prefers-reduced-motion:reduce){.ela-portal *{animation:none!important;transition:none!important}}

#top .spark-adventure .adventure-audio-controls > button:not(:disabled) { min-height:44px; padding:8px 12px; border:2px solid #64448a; border-radius:10px; background:#eee4ff; color:#422b61; font-size:.85rem; font-weight:750; }
#top .spark-adventure .adventure-audio-controls > button:focus-visible { outline:3px solid #174ea6; outline-offset:3px; }
.adventure-audio-status { flex-basis:100%; font-size:.8rem; line-height:1.3; }
.adventure-audio-status:empty { display:none; }

/* Noninteractive mission emblem; the lifecycle-owned badge alone receives raised paint. */
#top [data-mission-badge] .adventure-mission-flag { display: inline-block; width: 30px; height: 30px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#top [data-mission-badge] .adventure-mission-label { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; }
#player-rail-progress > [data-mission-badge].adventure-mission-rail-badge,
#top .spark-adventure[data-adventure-mode=question] .adventure-question > [data-mission-badge] {
 display: flex; align-items: center; gap: 9px; box-sizing: border-box;
 min-width: 0; max-width: 100%; width: 100%; margin: 10px 0 4px; padding: 10px;
 border: 2px solid #7156a6; border-radius: 15px;
 background: linear-gradient(135deg, #f0e7ff, #dbeeff); color: #342356;
 box-shadow: 0 4px 0 #6d5596, inset 0 2px 0 #ffffffb3;
 white-space: normal; letter-spacing: 0; text-transform: none;
 font-weight: 700; line-height: 1.25; cursor: default;
}
#top [data-mission-badge] .adventure-mission-flag { flex: 0 0 30px; color: #57408c; fill: #b9d5ff; }
#top [data-mission-badge] .adventure-mission-label { min-width: 0; flex: 1 1 auto; gap: 3px; overflow-wrap: anywhere; }
#top [data-mission-badge] .adventure-mission-phase { font-size: .6rem; line-height: 1.2; color: #5b487d; letter-spacing: .06em; text-transform: uppercase; }
#top [data-mission-badge] .adventure-mission-number { font-size: .95rem; line-height: 1.2; font-weight: 850; }
#top [data-mission-badge] .adventure-mission-position { font-size: .72rem; line-height: 1.3; color: #403264; font-weight: 650; }
@media (max-width:600px) {
 #player-rail-progress > [data-mission-badge].adventure-mission-rail-badge,
#top .spark-adventure[data-adventure-mode=question] .adventure-question > [data-mission-badge] { padding: 8px; gap: 7px; margin-top: 8px; border-radius: 12px; }
 #top [data-mission-badge] .adventure-mission-flag { width: 26px; height: 26px; flex-basis: 26px; }
 #top [data-mission-badge] .adventure-mission-number { font-size: .85rem; }
}

#top .spark-adventure[data-adventure-mode=question] .adventure-question > [data-mission-badge] { width: max-content; max-width: 100%; margin-bottom: 12px; }

/* Math selection only: echo ELA's category sidebar, cream articles and explicit actions. */
#top .spark-adventure[data-adventure-mode=map] > .math-catalog-layout,
#top .spark-adventure[data-adventure-mode=skill] > .math-skill-selection {
 min-width: 0; padding: 18px; border: 3px solid #8f91cb; border-radius: 22px;
 background: linear-gradient(145deg,#edf8ff,#f2edff); box-shadow: 0 5px 0 #cac5e5;
 margin: 14px 0 20px; color: #28334f;
}
#top .spark-adventure[data-adventure-mode=map] > .math-catalog-layout { display: grid; grid-template-columns: minmax(165px,225px) minmax(0,1fr); gap: 18px; }
#top .spark-adventure[data-adventure-mode=map] .math-category-menu { display: flex; flex-direction: column; align-self: start; gap: 12px; min-width: 0; margin: 0; }
#top .spark-adventure[data-adventure-mode=map] .math-catalog-content { min-width: 0; }
#top .spark-adventure[data-adventure-mode=map] .math-catalog-content .adventure-map-controls { margin: 0 0 16px; padding: 0; }
#top .spark-adventure[data-adventure-mode=map] .math-catalog-content #adventure-search { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; }
#top .spark-adventure[data-adventure-mode=map] .math-skill-list { min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
#top .spark-adventure[data-adventure-mode=map] .math-skill-list .adventure-skill-path,
#top .spark-adventure[data-adventure-mode=skill] .math-skill-selection .adventure-sets { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin: 0; padding: 0; }
#top .spark-adventure[data-adventure-mode=map] .math-selection-card,
#top .spark-adventure[data-adventure-mode=skill] .math-selection-card,
#top .spark-adventure[data-adventure-mode=skill] .math-skill-selection .adventure-stages > article {
 min-width: 0; padding: 18px; border: 2px solid #b2add8; border-radius: 18px;
 background: #fffdf7; box-shadow: 0 4px 0 #d7d1e8; overflow-wrap: anywhere; text-align: left;
}
#top .spark-adventure[data-adventure-mode=map] .math-selection-card h4,
#top .spark-adventure[data-adventure-mode=skill] .math-selection-card h4 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 10px; }
#top .spark-adventure[data-adventure-mode=map] .math-selection-card p,
#top .spark-adventure[data-adventure-mode=skill] .math-selection-card p { margin: 8px 0 14px; line-height: 1.45; }
#top .spark-adventure[data-adventure-mode=map] .math-selection-note { font-size: .88rem; color: #4b5571; }
#top .spark-adventure[data-adventure-mode=map] .math-category-menu > button,
#top .spark-adventure[data-adventure-mode=map] .math-selection-action,
#top .spark-adventure[data-adventure-mode=skill] .math-selection-action {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 width: auto; max-width: 100%; min-height: 44px; margin: 0; padding: 10px 16px;
 border: 2px solid #5266a9; border-radius: 13px;
 background: linear-gradient(#eef6ff,#c2dcff) !important; color: #233968 !important;
 box-shadow: 0 4px 0 #5266a9 !important; font-size: .94rem; font-weight: 750; line-height: 1.25;
 white-space: normal; cursor: pointer; text-shadow: none;
}
#top .spark-adventure[data-adventure-mode=map] .math-category-menu > button { width: 100%; text-align: left; justify-content: flex-start; }
#top .spark-adventure[data-adventure-mode=map] .math-category-menu > button[aria-pressed=true] { background: linear-gradient(#6d81d4,#5268b9) !important; color: white !important; box-shadow: 0 4px 0 #374b8e !important; }
#top .spark-adventure[data-adventure-mode=map] .math-category-menu > button:focus-visible,
#top .spark-adventure[data-adventure-mode=map] .math-selection-action:focus-visible,
#top .spark-adventure[data-adventure-mode=skill] .math-selection-action:focus-visible { outline: 3px solid #bd6a1d; outline-offset: 4px; }
#top .spark-adventure[data-adventure-mode=skill] .math-skill-selection .adventure-stages { margin: 0 0 18px; gap: 14px; }
#top .spark-adventure[data-adventure-mode=skill] .math-skill-selection > .adventure-note { margin: 14px 0 20px; }
@media (max-width: 650px) {
 #top .spark-adventure[data-adventure-mode=map] > .math-catalog-layout { grid-template-columns: minmax(0,1fr); }
 #top .spark-adventure[data-adventure-mode=map] .math-category-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 #top .spark-adventure[data-adventure-mode=map] > .math-catalog-layout,
 #top .spark-adventure[data-adventure-mode=skill] > .math-skill-selection { padding: 12px; }
 #top .spark-adventure[data-adventure-mode=map] .math-selection-card,
 #top .spark-adventure[data-adventure-mode=skill] .math-selection-card { padding: 14px; }
 #top .spark-adventure[data-adventure-mode=skill] .math-skill-selection .adventure-stages { grid-template-columns: minmax(0,1fr); }
}

/* Adventure selection introductions only; never graded question or teacher cards. */
.ela-portal .ela-skill-card.ela-mission-intro-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,210px); align-items:center; gap:18px; }
.ela-mission-intro-card .ela-mission-intro-text { min-width:0; overflow-wrap:anywhere; }
.ela-mission-intro-card .ela-mission-intro-picture { width:100%; max-width:210px; min-width:0; margin:0; justify-self:end; }
.ela-mission-intro-card .ela-mission-intro-picture svg { display:block; width:100%; height:auto; }
@media (max-width:650px) { .ela-portal .ela-skill-card.ela-mission-intro-card { grid-template-columns:minmax(0,1fr); gap:12px; } .ela-mission-intro-card .ela-mission-intro-picture { width:min(100%,180px); justify-self:center; } }
/* Nested ELA work (and its Learn help) only: keep Exit/Zappy/XP and inner navigation. */
#top .spark-adventure[data-ela-activity-mode=active] > h2,
#top .spark-adventure[data-ela-activity-mode=active] > .adventure-course-tabs { display:none; }

/* Active ELA Adventure only. Same Math work-area palette/structure, no math widgets. */
#top [data-ela-adventure][data-ela-work-mode=work] { margin-top: 8px; padding: 12px; }
#top [data-ela-work-mode=work] .ela-game-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; padding-bottom: 4px; }
#top [data-ela-work-mode=work] .ela-game-toolbar > h2 { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 1rem; line-height: 1.3; }
#top [data-ela-work-mode=work] .ela-game-position { justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; font-size: .88rem; }
#top [data-ela-work-mode=work] .ela-game-position > p { margin: 0; }
#top [data-ela-work-mode=work] .ela-progress-summary { padding: 6px 10px; }
#top [data-ela-work-mode=work] .ela-game-question { padding: 12px; border: 4px solid #6c4a97; border-radius: 24px; background: linear-gradient(145deg,#fffaf0,#f4ecff); box-shadow: 0 7px 0 #4f326f,inset 0 2px 0 #fff; margin-bottom: 18px; }
#top [data-ela-work-mode=work] .ela-game-question-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px dashed #ded2ec; }
#top [data-ela-work-mode=work] .ela-game-question-heading > .ela-item-prompt { flex: 1 1 250px; margin: 0; font-size: clamp(1.2rem,2.4vw,1.6rem); line-height: 1.5; }
#top [data-ela-work-mode=work] .ela-game-question-heading > .ela-audio-controls { flex: 0 1 230px; margin: 0; gap: 8px; }
#top [data-ela-work-mode=work] .ela-game-question-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: start; gap: 18px; }
#top [data-ela-work-mode=work] .ela-game-question-grid:not(:has(.ela-game-visual)) { grid-template-columns: minmax(0,1fr); }
#top [data-ela-work-mode=work] .ela-game-visual { min-width: 0; padding: 14px; border: 3px solid #b69ad1; border-radius: 20px; background: #fffdf5; box-shadow: 0 5px 0 #d3bfe5; }
#top [data-ela-work-mode=work] .ela-game-visual > .ela-visual { margin: 0 auto; max-width: 280px; }
#top [data-ela-work-mode=work] .ela-game-visual .ela-reading-text { margin: 14px 0 0; max-width: none; padding: 14px; }
#top [data-ela-work-mode=work] .ela-game-answer-panel { min-width: 0; }
#top [data-ela-work-mode=work] .ela-game-answer-panel > .ela-response { margin: 0 0 16px; }
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choices { gap: 12px; }
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choice { border: 3px solid #9271b2; border-radius: 15px; background: #f3eaff; box-shadow: 0 5px 0 #ae91c7; min-height: 56px; padding: 13px 10px; justify-content: center; text-align: center; }
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choice[aria-checked=true] { color: #654900; background: #fff2b1; border-color: #b49438; box-shadow: 0 4px 0 #deca7d; outline-color: #b49438; }
#top [data-ela-work-mode=work] .ela-game-answer-panel > .ela-submit,
#top [data-ela-work-mode=work] .ela-game-answer-panel > .ela-game-next { display: flex; width: 100%; margin: 0 0 12px; min-height: 48px; border: 3px solid #69458c; border-radius: 15px; background: linear-gradient(#8064b7,#614191); color: #fff; box-shadow: 0 5px 0 #422b64,inset 0 2px 0 #ffffff50; }
#top [data-ela-work-mode=work] .ela-game-answer-panel > .ela-game-next { margin-top: 16px; background: linear-gradient(#5289cb,#3565a6); border-color: #35578f; box-shadow: 0 5px 0 #294673,inset 0 2px 0 #ffffff50; }
#top [data-ela-work-mode=work] .ela-game-answer-panel > .ela-feedback:empty { display: none; }
#top [data-ela-work-mode=work] .ela-game-answer-panel > .ela-feedback { margin: 14px 0 0; }
#top [data-ela-work-mode=work] .ela-game-secondary-nav { margin: 16px 0; gap: 12px; }
#top [data-ela-work-mode=work] .ela-game-question [hidden] { display: none!important; }
@media (max-width:900px) {
 #top [data-ela-work-mode=work] .ela-game-question-grid { grid-template-columns: minmax(0,1fr); }
 #top [data-ela-work-mode=work] .ela-game-visual > .ela-visual { max-width: 230px; }
}
@media (max-width:600px) {
 #top [data-ela-adventure][data-ela-work-mode=work] { padding: 10px; }
 #top [data-ela-work-mode=work] .ela-game-toolbar { gap: 10px; }
 #top [data-ela-work-mode=work] .ela-game-toolbar > h2 { flex-basis: 100%; }
 #top [data-ela-work-mode=work] .ela-game-toolbar > button { flex: 1 1 120px; }
 #top [data-ela-work-mode=work] .ela-game-question { padding: 10px; border-radius: 20px; }
 #top [data-ela-work-mode=work] .ela-game-question-heading > .ela-audio-controls { flex-basis: 100%; }
 #top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choices { grid-template-columns: minmax(0,1fr); }
 #top [data-ela-work-mode=work] .ela-game-visual { padding: 10px; }
}
@media (forced-colors:active) {
 #top [data-ela-work-mode=work] .ela-game-question { border-color: CanvasText; }
 #top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choice[aria-checked=true] { outline: 3px solid Highlight; }
}

/* Category-local Math skill tiles only: not player XP levels or question screens. */
#top .spark-adventure[data-adventure-mode=map] .math-skill-list .math-level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#top .spark-adventure[data-adventure-mode=map] .math-level-explanation { font-size:.85rem; line-height:1.45; margin:8px 0 16px; color:#4b5571; }
#top .spark-adventure[data-adventure-mode=map] .math-selection-card.math-level-card { display:flex; padding:0; border:0; box-shadow:none; background:transparent; min-width:0; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile { display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; max-width:100%; min-width:0; min-height:230px; box-sizing:border-box; padding:16px; border:3px solid #7160aa; border-radius:19px; background:linear-gradient(145deg,#f4eeff,#dceeff)!important; color:#30254e!important; box-shadow:0 6px 0 #514077,inset 0 2px 0 #fff!important; text-shadow:none; text-align:left; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile:focus-visible { outline:3px solid #bd6a1d; outline-offset:5px; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile .math-level-label { font-size:.75rem; font-weight:850; letter-spacing:.04em; color:#544185; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile .math-level-title { font-size:1rem; line-height:1.3; font-weight:850; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile .math-level-category { font-size:.75rem; color:#544185; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile .math-level-mission-count { font-size:.88rem; font-weight:750; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile .math-level-progress { font-size:.72rem; line-height:1.4; font-weight:600; }
#top .spark-adventure[data-adventure-mode=map] .math-level-tile .math-level-open { margin-top:auto; padding-top:4px; font-size:.82rem; font-weight:800; }
@media (max-width:1050px) { #top .spark-adventure[data-adventure-mode=map] .math-skill-list .math-level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) { #top .spark-adventure[data-adventure-mode=map] .math-skill-list .math-level-grid { grid-template-columns:minmax(0,1fr); } #top .spark-adventure[data-adventure-mode=map] .math-level-tile { min-height:180px; padding:14px; } }
@media (prefers-reduced-motion:reduce) { #top .spark-adventure[data-adventure-mode=map] .math-level-tile { animation:none!important; transition:none!important; } }

/* Sound settings sit outside the unchanged square timer, never in its narrow control column. */
.fluency-reading-controls .fluency-sound-settings { box-sizing:border-box; width:100%; max-width:260px; margin:0 auto .8rem; padding:8px 10px; border:1px solid #bda9d3; border-radius:10px; background:#f3ecff; color:#44375f; }
.fluency-reading-controls .fluency-sound-settings[hidden] { display:none; }
.fluency-sound-settings .fluency-sound-control { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.8rem; min-height:44px; margin:0; color:#44375f; }
.fluency-sound-settings .fluency-sound-control input { width:20px; height:20px; margin:0; }
.fluency-sound-settings .fluency-sound-note { font-size:.72rem; line-height:1.35; margin:4px 0 0; text-align:center; color:#44375f; }
@media (max-width:900px) { .fluency-reading-controls .fluency-sound-settings { max-width:none; } }

/* ELA nested mission selection; existing grade/category and active frames are preserved. */
#top [data-ela-adventure] .ela-level-header { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:0 0 18px; padding-bottom:4px; }
#top [data-ela-adventure] .ela-level-header > h2 { flex:1 1 200px; margin:0; }
#top [data-ela-adventure] .ela-level-label { font-size:.8rem; font-weight:800; color:#57457c; margin:0 0 8px; }
#top [data-ela-adventure] .ela-level-missions { margin:18px 0; }
@media (max-width:600px) { #top [data-ela-adventure] .ela-level-header > h2 { flex-basis:100%; } }

/* Student My Classes only: matching auto-height game screen; existing compact tiles unchanged. */
#adult-test .student-class-game-screen { box-sizing:border-box; min-width:0; max-width:100%; height:auto; min-height:0; border:3px solid #9a7bc2; border-radius:26px; background:linear-gradient(135deg,#eee4ff,#e6f3ff); box-shadow:0 6px 0 #cbb8df,0 14px 28px #40245f0e; color:#422c61; padding:18px; margin-bottom:18px; overflow:visible; }
#adult-test .student-class-game-screen > h3 { margin:0 0 12px; }
#adult-test .student-class-game-screen .student-class-list { margin:12px 0; }
#adult-test .student-class-game-screen .student-join-card { padding:16px; border:2px solid #a38abf; border-radius:18px; background:#fffdf7; box-shadow:0 4px 0 #d7c7e8; margin-top:18px; }
#adult-test .student-class-game-screen .student-join-card[hidden] { display:none; }
#adult-test .student-join-tile:focus-visible { outline:3px solid #a34e12; outline-offset:4px; }
#adult-test .student-class-game-screen .student-join-form { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#adult-test .student-class-game-screen .student-join-form input { min-width:0; max-width:100%; min-height:44px; }
#adult-test .student-class-game-screen .student-join-form button { min-height:44px; }
@media (max-width:600px) { #adult-test .student-class-game-screen { padding:12px; border-radius:20px; } #adult-test .student-class-game-screen .student-join-form { align-items:stretch; } #adult-test .student-class-game-screen .student-join-form input { flex:1 1 180px; } }

/* Existing raised paint and focus rules remain in force; button geometry is shared with the Studio shadow root. */
.instruction-audio-icon svg { display:block; flex:none; pointer-events:none; }

/* Adventure letter-choice tasks only: centered row above the existing Check action.
   Do not affect sentence answers, passages, teacher forms, or Math. */
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choices:has(> .ela-letter-choice):not(:has(> .ela-choice:not(.ela-letter-choice))) {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; width:100%;
}
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choices > .ela-letter-choice {
  display:grid; place-items:center; position:relative; flex:0 1 104px;
  width:clamp(64px,18vw,104px); min-width:64px; max-width:104px; min-height:80px;
  padding:12px; text-align:center; line-height:1.2;
}
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-letter-choice[aria-checked=true]::before {
  position:absolute; top:4px; right:6px; font-size:.65rem; line-height:1;
}

/* Approved G image only; keep the existing question frame/choice alignment. */
#top [data-ela-work-mode=work] .ela-target-letter-visual > img {
  display:block; width:100%; max-width:100%; height:auto; object-fit:contain;
}

/* ELA-only checked-correct presentation; no grading or answer inference. */
.ela-item .ela-choice[data-ela-checked-correct=true][aria-checked=true] {position:relative;overflow:visible!important;background:linear-gradient(#ecfff0,#c8efd1)!important;color:#174c2a!important;border-color:#287240!important;box-shadow:0 4px 0 #215f35!important;outline-color:#287240!important;}
.ela-item .ela-choice[data-ela-checked-correct=true][aria-checked=true]::before {content:none!important;}
.ela-item .ela-correct-mark {position:absolute;top:-8px;right:-6px;width:22px;height:22px;box-sizing:border-box;padding:3px;border:2px solid #287240;border-radius:50%;background:#f0fff3;color:#176335;pointer-events:none;display:block;}
.ela-item .ela-checked-note {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media(forced-colors:active){.ela-item .ela-choice[data-ela-checked-correct=true][aria-checked=true]{background:Canvas!important;color:CanvasText!important;border-color:Highlight!important;outline:3px solid Highlight!important;box-shadow:none!important;}.ela-item .ela-correct-mark{background:Canvas;color:CanvasText;border-color:CanvasText;forced-color-adjust:auto;}}

/* Exactly three single-letter choices: one compact centered row wherever targets fit.
   Pair/text answers retain the original layout. No stages, image or action moves. */
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choices[data-ela-letter-row=true] {
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px; width:100%; max-width:240px; min-width:0; margin:0 auto; padding:4px 0 5px; box-sizing:border-box;
}
#top [data-ela-work-mode=work] .ela-game-answer-panel .ela-choices[data-ela-letter-row=true] > .ela-letter-choice {
  display:grid; place-items:center; flex:1 1 44px; width:auto; min-width:44px; max-width:72px;
  height:56px; min-height:56px; padding:6px; margin:0; box-sizing:border-box;
  font-size:2rem; line-height:1; text-align:center;
}

/* Isolated mission award / refreshed-session preview UI. */
.spark-adventure .mission-session-gate{max-width:760px;margin:16px auto;padding:clamp(18px,3vw,30px);border:3px solid #8999cb;border-radius:22px;background:#fffdf5;box-shadow:0 5px 0 #c9d0e5;line-height:1.6}
.spark-adventure .mission-session-gate h3{margin-top:0;color:#263e70;font-size:1.4rem}
.spark-adventure .mission-session-gate ol{padding-left:24px}
.spark-adventure .mission-session-gate li{margin:8px 0}
.spark-adventure .mission-session-gate button{margin:10px 12px 8px 0}
.spark-adventure .mission-session-confirm{display:flex;gap:12px;align-items:center;margin:20px 0;padding:12px;border:2px solid #d3d9e9;border-radius:12px;background:#f1f5ff}
.spark-adventure .mission-session-confirm input{width:24px;height:24px;flex:0 0 24px}
.spark-adventure .mission-session-status{min-height:1.5em;color:#33456e}
.spark-adventure .mission-award-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:12px 0;min-height:66px}
.spark-adventure .mission-award-medal,.spark-adventure .mission-award-star{display:flex;align-items:center;gap:8px;color:#253c66;font-size:.95rem;line-height:1.35}
.spark-adventure .mission-award-medal img{width:64px;height:64px;object-fit:contain;flex:0 0 64px}
.spark-adventure .mission-award-star img{width:40px;height:40px;object-fit:contain;flex:0 0 40px}
.spark-adventure .mission-award-empty,.spark-adventure .mission-award-legacy{color:#54617a;font-size:.9rem}
.spark-adventure .mission-run-status{padding:12px 15px;border:2px solid #bdcae2;border-radius:14px;background:#f0f5ff;line-height:1.55}
.spark-adventure .mission-run-actions{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.spark-adventure .mission-run-pending{border-color:#d1a352;background:#fff5dc}
@media(max-width:600px){.spark-adventure .mission-session-gate{padding:16px}.spark-adventure .mission-session-gate button{width:100%;margin-right:0}.spark-adventure .mission-award-strip{gap:12px}.spark-adventure .mission-run-actions>button{flex:1 1 160px}}
@media(prefers-reduced-motion:reduce){.spark-adventure .mission-session-gate *,.spark-adventure .mission-award-strip *{animation:none!important;transition:none!important}}

.adventure-course-tabs.learning-lands{display:block;position:relative;width:100%;height:auto;isolation:isolate;margin:12px 0;padding:0;border:0;background:transparent;line-height:0;overflow:visible}
.learning-lands-art{display:block;width:100%;height:auto;border-radius:14px}
.learning-lands .learning-land{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;transform:none!important;cursor:pointer;touch-action:manipulation;appearance:none;z-index:2;outline:none}
.learning-lands .learning-land:disabled{cursor:default;opacity:1}
.learning-lands-outlines,.learning-lands-details{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.learning-lands-outlines{z-index:3}.learning-lands-details{z-index:1}
.learning-lands-outlines path{fill:none;stroke:transparent;stroke-width:7;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.learning-lands-outlines path.is-highlighted{stroke:#ffe43b;filter:drop-shadow(0 1px 2px #33204f)}
.learning-land-soon{position:absolute;z-index:4;transform:translate(-50%,-50%);font:bold clamp(10px,1.3vw,18px)/1.2 system-ui,sans-serif;background:#302449;color:#fff;border:2px solid #ffe18a;border-radius:7px;padding:4px 8px;pointer-events:none;white-space:nowrap}
@media (max-width:480px){.learning-land-soon{padding:2px 4px;border-width:1px}.learning-lands-outlines path{stroke-width:4}}
@media (forced-colors:active){.learning-lands-outlines path.is-highlighted{stroke:Highlight;filter:none}}
.learning-lands .learning-land{min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;color:transparent!important;line-height:normal!important;text-shadow:none!important;filter:none!important}
.learning-lands .learning-land::before,.learning-lands .learning-land::after{content:none!important;display:none!important}
.learning-land-current{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none}
/* Higher specificity defeats the existing portal's raised-button states without affecting other controls. */
#top .spark-adventure .adventure-course-tabs.learning-lands > button.learning-land,
#top .spark-adventure .adventure-course-tabs.learning-lands > button.learning-land:is(:hover,:focus-visible,:active,:disabled,[aria-pressed=true]){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;outline:none!important;filter:none!important;opacity:1!important}
/* Only this map screen: wrap the existing app-bar links on very narrow phones. */
@media (max-width:380px){body#top:not([data-profile-route]):has(.spark-adventure:not([hidden]):not([data-ela-activity-mode="active"]) > .learning-lands) .spark-navigation{flex-wrap:wrap;max-width:100%;min-width:0}}

.math-land{display:block;width:100%;box-sizing:border-box;container-type:inline-size;line-height:normal}
.math-land-scene{position:relative;isolation:isolate;width:100%;line-height:0}
.math-land-scene>img{display:block;width:100%;height:auto;border-radius:12px}
.math-land .math-land-hotspot,
#top .spark-adventure .math-land .math-land-hotspot:is(button,:hover,:active,:focus-visible,[aria-pressed=true]){position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;outline:none!important;filter:none!important;opacity:1!important;color:transparent!important;appearance:none;cursor:pointer;touch-action:manipulation;z-index:2}
.math-land .math-land-hotspot::before,.math-land .math-land-hotspot::after{content:none!important;display:none!important}
.math-land-outlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.math-land-outlines path{fill:none;stroke:transparent;stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.math-land-outlines path.is-highlighted{stroke:#ffea32;filter:drop-shadow(0 1px 2px #322049)}
.math-land-sign{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none;text-align:center;font:900 1.38cqw/1.1 system-ui,sans-serif;color:#28183c;text-shadow:0 1px 0 #fff6;white-space:nowrap;letter-spacing:-.025em}
.math-land-category-list{display:none;gap:8px;padding:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.math-land .math-land-alternative{min-height:44px;padding:8px 6px;white-space:normal;border:2px solid #bfa7ff;border-radius:10px;background:linear-gradient(#7657bd,#493080);box-shadow:0 3px 0 #261548;color:white;font:700 14px/1.2 system-ui,sans-serif;cursor:pointer}
.math-land .math-land-alternative[aria-pressed=true]{border-color:#ffe484}
.math-land .math-land-alternative:focus-visible{outline:3px solid #ffe832;outline-offset:2px}
@media (max-width:700px){.math-land-category-list{display:grid}.math-land-sign{font-size:1.38cqw}}
@media (forced-colors:active){.math-land-outlines path.is-highlighted{stroke:Highlight;filter:none}.math-land-sign{color:CanvasText;background:Canvas}.math-land .math-land-alternative{border:2px solid ButtonText}}

/* Longer sign names fit the approved blank plaques without spilling onto artwork. */
.math-land-sign[data-category="multiplication"],.math-land-sign[data-category="measurement"]{font-size:1.12cqw;letter-spacing:-.035em}

/* Shared opt-in frame; does not change the world selector's direct-child routing hooks. */
.spark-land-frame,
.adventure-course-tabs.learning-lands.spark-land-frame{box-sizing:border-box;border:5px solid #8253d5;border-radius:21px;background:#39215e;box-shadow:0 6px 0 #25103f,0 0 0 2px #c5a0ff,inset 0 0 0 2px #b88afa;padding:5px;overflow:visible;margin:14px 0 20px}
/* World overlay coordinates must retain the exact image box: use an outline-only frame. */
.adventure-course-tabs.learning-lands.spark-land-frame{padding:0;border:0;outline:5px solid #8253d5;outline-offset:0;box-shadow:0 6px 0 5px #25103f,0 0 0 7px #c5a0ff}
@media (max-width:700px){.spark-land-frame{border-width:3px;border-radius:15px;padding:3px}.adventure-course-tabs.learning-lands.spark-land-frame{padding:0;border:0;outline-width:3px;box-shadow:0 4px 0 3px #25103f,0 0 0 5px #c5a0ff}}

/* Map-only narrow app-bar wrapping; no activity layout changes. */
@media (max-width:380px){body#top:not([data-profile-route]):has(.spark-adventure:not([hidden]):not([data-ela-activity-mode="active"])[data-learning-land-screen]:not([data-learning-land-screen="activity"])) .spark-navigation{flex-wrap:wrap;max-width:100%;min-width:0}}
/* Active ELA has its own draft-aware Back; do not offer a second exit over it. */
#top .spark-adventure[data-ela-activity-mode="active"] > .adventure-top .adventure-back{display:none}

#top .spark-adventure[data-learning-land-screen="catalog"] .math-catalog-layout{grid-template-columns:minmax(0,1fr)}
/* Keep long category names fully inside44px phone alternatives at320px. */
@media(max-width:380px){.math-land .math-land-alternative{font-size:13px;padding-inline:4px}}

/* The control band lives inside the existing purple frame, never over the artwork. */
#top .spark-adventure .math-land-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;min-width:0;padding:8px 9px 12px;box-sizing:border-box}
#top .spark-adventure .math-land .math-land-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;width:auto;max-width:100%;margin:0;padding:9px 13px;box-sizing:border-box;font:700 14px/1.2 system-ui,sans-serif;white-space:normal;text-align:center;color:#fff;background:linear-gradient(#8960ce,#59318e);border:2px solid #d2b8ff;border-radius:12px;box-shadow:0 4px 0 #201032,inset 0 1px 0 #ffffff55;cursor:pointer}
#top .spark-adventure .math-land-back svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#top .spark-adventure .math-land .math-land-back:focus-visible{outline:3px solid #ffe832;outline-offset:3px}
/* Selected semantic state remains; yellow is only interaction feedback. */
#top .spark-adventure .math-land .math-land-alternative[aria-pressed=true]{border-color:#bfa7ff}
@media (max-width:380px){#top .spark-adventure .math-land-toolbar{padding:6px 5px 10px}#top .spark-adventure .math-land .math-land-back{font-size:13px;padding-inline:9px}}
@media (forced-colors:active){#top .spark-adventure .math-land .math-land-back{border:2px solid ButtonText}#top .spark-adventure .math-land .math-land-back:focus-visible{outline-color:Highlight}}

#top .spark-adventure .math-land-notice{flex-basis:100%;margin:2px 0 0;color:white;line-height:1.4}
/* Inline-size containment needs an explicit full-width flex item when external headings are absent. */
#top .spark-adventure[data-learning-land-screen="math-land"]{width:100%;min-width:0;box-sizing:border-box}

.spark-mission-carousel{box-sizing:border-box;width:100%;min-width:0;padding:16px;border:3px solid #9870d7;border-radius:22px;background:linear-gradient(145deg,#ede4ff,#e2f8ff);box-shadow:0 5px 0 #47306d;color:#2e2051}
.spark-mission-carousel .mission-carousel-status{margin:0 0 14px;text-align:center;font-weight:850;font-size:1rem;color:#463060}
.spark-mission-carousel .mission-carousel-row{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:14px;align-items:center}
.spark-mission-carousel .mission-carousel-stage{min-width:0;width:100%;max-width:760px;justify-self:center}
.spark-mission-carousel .mission-carousel-stage>[hidden]{display:none!important}
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected=true]{box-sizing:border-box;width:100%;max-width:none;margin:0;min-width:0}
.spark-mission-carousel .mission-carousel-arrow{width:52px;height:64px;min-width:44px;min-height:44px;padding:10px;border:2px solid #d5baff;border-radius:15px;background:linear-gradient(#8257c8,#56368b);color:#fff;box-shadow:0 5px 0 #33204f;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}
.spark-mission-carousel .mission-carousel-arrow svg{width:25px;height:30px;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.spark-mission-carousel .mission-carousel-arrow:disabled{opacity:.42;cursor:default;box-shadow:0 2px 0 #33204f}
.spark-mission-carousel .mission-carousel-arrow:not(:disabled):hover{background:linear-gradient(#9670d8,#65449a)}
.spark-mission-carousel:focus-visible,.spark-mission-carousel .mission-carousel-arrow:focus-visible{outline:3px solid #087d9a;outline-offset:4px}
.spark-mission-carousel .mission-carousel-arrow[hidden]{display:none!important}
.spark-mission-carousel .mission-carousel-row:has(>.mission-carousel-arrow[hidden]){grid-template-columns:minmax(0,1fr)}
@media (max-width:600px){.spark-mission-carousel{padding:10px;border-radius:16px}.spark-mission-carousel .mission-carousel-row{grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}.spark-mission-carousel .mission-carousel-arrow{width:44px;height:52px;padding:7px}.spark-mission-carousel .mission-carousel-status{margin-bottom:10px}}
@media (prefers-reduced-motion:reduce){.spark-mission-carousel *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Existing portal grids must not stretch the selected card or lay hidden siblings out. */
.spark-mission-carousel .mission-carousel-stage>.math-selection-card,
.spark-mission-carousel .mission-carousel-stage>.ela-skill-card,
.spark-mission-carousel .mission-carousel-stage>.ela-mission-intro-card{float:none;grid-column:auto;align-self:start;justify-self:stretch;flex:0 1 auto;min-height:0;height:auto;min-width:0;max-width:100%;overflow-wrap:anywhere}
@media (max-width:600px){.spark-mission-carousel .mission-carousel-stage{grid-column:1/-1;grid-row:1}.spark-mission-carousel .mission-carousel-arrow{grid-row:2}.spark-mission-carousel .mission-carousel-arrow[data-direction=previous]{grid-column:1}.spark-mission-carousel .mission-carousel-arrow[data-direction=next]{grid-column:3}}

/* Mission chooser only; existing question workspaces, maps and models unchanged. */
#top .math-skill-selection .adventure-sets{display:block;width:100%;min-width:0;padding:0;border:0;background:none}
#top .math-skill-selection .adventure-sets>h3{text-align:center;margin:4px 0 12px}
#top .math-skill-selection .mission-learning-access{margin-top:20px;padding:14px;border:1px solid #bca5dc;border-radius:16px;background:#f5f0ff}
#top .math-skill-selection .mission-learning-access .adventure-stages{margin:0 0 12px;gap:10px}
#top .math-skill-selection .mission-learning-access .adventure-stages article{padding:10px;min-height:0}
#top .math-skill-selection .mission-learning-access .adventure-stages h3{font-size:1rem;margin:4px 0}
#top .math-skill-selection .mission-learning-access .adventure-stages p{margin:4px 0;font-size:.88rem}
#top .math-skill-selection .mission-learning-access>.adventure-note{margin-bottom:0}
#top .ela-level-missions:has(>.spark-mission-carousel){display:block;width:100%;min-width:0}
#top .spark-mission-carousel .mission-carousel-stage>.math-selection-card{text-align:center;border:2px solid #9b83d2;background:linear-gradient(150deg,#f8f4ff,#e4f8ff);border-radius:20px;padding:22px}
#top .spark-mission-carousel .mission-carousel-stage>.math-selection-card h4{font-size:1.6rem;color:#422668;margin:0 0 12px}
#top .spark-mission-carousel .math-selection-action{justify-self:center;margin:12px auto;max-width:100%}
#top .spark-mission-carousel .mission-awards{justify-content:center}
#top .spark-mission-carousel .ela-mission-intro-card{background:linear-gradient(145deg,#f6f0ff,#e4f9ff);border-color:#aa8cda}
@media(max-width:600px){#top .spark-mission-carousel .mission-carousel-stage>.math-selection-card{padding:14px}#top .math-skill-selection .mission-learning-access .adventure-stages{grid-template-columns:1fr}#top .spark-mission-carousel .ela-mission-intro-card{grid-template-columns:1fr}}
#top .math-skill-selection .mission-learning-access>.adventure-note{margin-top:14px}
#top .spark-mission-carousel [data-mission-awards]{justify-content:center}
/* Keep the existing header inside a narrow mission-chooser viewport. */
@media(max-width:600px){body#top:not([data-profile-route]):has(.spark-adventure:not([hidden]):not([aria-hidden="true"]):not([data-ela-activity-mode="active"]):is([data-adventure-mode="skill"],[data-adventure-mode="map"]) .spark-mission-carousel:not([hidden]):not([inert])) .spark-navigation{flex-wrap:wrap;max-width:100%;min-width:0}}

/* Existing poster defines the exact 1672:941 coordinate surface. Native video is
   1672:942: width only, top aligned, last padding row clipped, never object-fit. */
.math-land-scene{overflow:hidden;border-radius:12px}
.math-land-scene>video.math-land-motion{position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:1672/942;pointer-events:none;z-index:1;border:0;margin:0;padding:0}
.math-land-scene>video.math-land-motion[hidden]{display:none!important}
.math-land-motion-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;color:#fff;font:600 13px/1.3 system-ui}
.math-land-motion-toggle{min-height:44px}
.math-land .math-land-sign{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:.16em;font-size:1.38cqw;line-height:1.05}
.math-land .math-land-sign[data-category=multiplication],.math-land .math-land-sign[data-category=measurement]{font-size:1.02cqw}
.math-category-symbol{display:inline-flex;align-items:center;justify-content:center;font-weight:900;line-height:1}
.math-land-sign .math-category-symbol{height:1em;font-size:1em}
.math-category-symbol svg{width:1.4em;height:1em;display:block}
.math-land .math-land-alternative{display:flex;align-items:center;justify-content:center;gap:8px}
.math-land-alternative .math-category-symbol{font-size:20px;min-width:30px}
@media (prefers-reduced-motion:reduce){.math-land-scene>video.math-land-motion{display:none!important}}

/* Pause/Resume shares the existing purple Back control's game treatment. */
#top .spark-adventure .math-land .math-land-motion-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;width:auto;max-width:100%;margin:0;padding:9px 13px;box-sizing:border-box;font:700 14px/1.2 system-ui,sans-serif;white-space:normal;text-align:center;color:#fff;background:linear-gradient(#8960ce,#59318e);border:2px solid #d2b8ff;border-radius:12px;box-shadow:0 4px 0 #201032,inset 0 1px 0 #ffffff55;cursor:pointer}
#top .spark-adventure .math-land .math-land-motion-toggle:focus-visible{outline:3px solid #ffe832;outline-offset:3px}
#top .spark-adventure .math-land .math-land-motion-toggle:disabled{cursor:default;opacity:.7}
#top .spark-adventure .math-land-toolbar .math-land-motion-bar{padding:0;min-width:0;max-width:100%}
#top .spark-adventure .math-land-motion-status:empty{display:none}
@media(max-width:380px){#top .spark-adventure .math-land .math-land-motion-toggle{font-size:13px;padding-inline:9px}}
@media(forced-colors:active){#top .spark-adventure .math-land .math-land-motion-toggle{border:2px solid ButtonText}#top .spark-adventure .math-land .math-land-motion-toggle:focus-visible{outline-color:Highlight}}
/* At the smallest phone widths keep full names and their new symbols inside
   comfortable native buttons, rather than squeezing a two-column grid. */
@media(max-width:360px){#top .spark-adventure .math-land .math-land-category-list{grid-template-columns:minmax(0,1fr)}#top .spark-adventure .math-land .math-land-alternative{min-width:0;width:100%;box-sizing:border-box}}

.spark-mission-carousel{box-sizing:border-box;width:100%;min-width:0;padding:16px;border:3px solid #9870d7;border-radius:22px;background:linear-gradient(145deg,#ede4ff,#e2f8ff);box-shadow:0 5px 0 #47306d;color:#2e2051}
.spark-mission-carousel .mission-carousel-status{margin:0 0 14px;text-align:center;font-weight:850;font-size:1rem;color:#463060}
.spark-mission-carousel .mission-carousel-row{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:14px;align-items:center}
.spark-mission-carousel .mission-carousel-stage{min-width:0;width:100%;max-width:760px;justify-self:center}
.spark-mission-carousel .mission-carousel-stage>[hidden]{display:none!important}
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected=true]{box-sizing:border-box;width:100%;max-width:none;margin:0;min-width:0}
.spark-mission-carousel .mission-carousel-arrow{width:52px;height:64px;min-width:44px;min-height:44px;padding:10px;border:2px solid #d5baff;border-radius:15px;background:linear-gradient(#8257c8,#56368b);color:#fff;box-shadow:0 5px 0 #33204f;cursor:pointer;display:grid;place-items:center;touch-action:manipulation}
.spark-mission-carousel .mission-carousel-arrow svg{width:25px;height:30px;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.spark-mission-carousel .mission-carousel-arrow:disabled{opacity:.42;cursor:default;box-shadow:0 2px 0 #33204f}
.spark-mission-carousel .mission-carousel-arrow:not(:disabled):hover{background:linear-gradient(#9670d8,#65449a)}
.spark-mission-carousel:focus-visible,.spark-mission-carousel .mission-carousel-arrow:focus-visible{outline:3px solid #087d9a;outline-offset:4px}
.spark-mission-carousel .mission-carousel-arrow[hidden]{display:none!important}
.spark-mission-carousel .mission-carousel-row:has(>.mission-carousel-arrow[hidden]){grid-template-columns:minmax(0,1fr)}
@media (max-width:600px){.spark-mission-carousel{padding:10px;border-radius:16px}.spark-mission-carousel .mission-carousel-row{grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}.spark-mission-carousel .mission-carousel-arrow{width:44px;height:52px;padding:7px}.spark-mission-carousel .mission-carousel-status{margin-bottom:10px}}
@media (prefers-reduced-motion:reduce){.spark-mission-carousel *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Existing portal grids must not stretch the selected card or lay hidden siblings out. */
.spark-mission-carousel .mission-carousel-stage>.math-selection-card,
.spark-mission-carousel .mission-carousel-stage>.ela-skill-card,
.spark-mission-carousel .mission-carousel-stage>.ela-mission-intro-card{float:none;grid-column:auto;align-self:start;justify-self:stretch;flex:0 1 auto;min-height:0;height:auto;min-width:0;max-width:100%;overflow-wrap:anywhere}
@media (max-width:600px){.spark-mission-carousel .mission-carousel-stage{grid-column:1/-1;grid-row:1}.spark-mission-carousel .mission-carousel-arrow{grid-row:2}.spark-mission-carousel .mission-carousel-arrow[data-direction=previous]{grid-column:1}.spark-mission-carousel .mission-carousel-arrow[data-direction=next]{grid-column:3}}
/* Sliding-game presentation. Existing card nodes and actions remain authoritative. */
.spark-mission-carousel{position:relative;isolation:isolate;border:3px solid #a580ed;background:linear-gradient(135deg,#402573,#285a79);box-shadow:0 7px 0 #25163d,inset 0 1px 0 #dfd0ff;padding:20px 14px;color:white;overflow:hidden}
.spark-mission-carousel[data-theme=math]{background-image:linear-gradient(#22124575,#27163c80),url('assets/math-land.png');background-size:cover;background-position:center}
.spark-mission-carousel .mission-carousel-status{position:relative;display:table;margin:0 auto 16px;padding:7px 22px;border:2px solid #a69bea;border-radius:999px;background:#302052;color:#fff;box-shadow:0 3px 0 #1b1236}
.spark-mission-carousel .mission-carousel-stage{position:relative;box-sizing:border-box;max-width:900px;padding:16px 34px 22px;overflow:hidden;perspective:1000px}
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected=true]{position:relative;z-index:2;border:3px solid #bca2f0;border-radius:20px;background:linear-gradient(150deg,#fff,#e8e7ff);color:#2e2051;box-shadow:0 7px 0 #291c4c,0 0 0 4px #65e3ff45,0 10px 28px #100b3a70;will-change:transform}
.spark-mission-carousel .mission-carousel-stage>[data-carousel-leaving=true]{display:block!important;position:absolute!important;left:34px;right:34px;top:16px;width:calc(100% - 68px)!important;margin:0;z-index:3;pointer-events:none;box-sizing:border-box;background:linear-gradient(150deg,#fff,#e8e7ff);color:#2e2051;border:3px solid #bca2f0;border-radius:20px;box-shadow:0 7px 0 #291c4c}
.spark-mission-carousel .mission-carousel-peek{position:absolute;top:34px;bottom:42px;width:54px;z-index:0;pointer-events:none;overflow:hidden;border:2px solid #b89aff;border-radius:16px;background:linear-gradient(140deg,#d1c0fc,#6d53a4);color:#30204e;box-shadow:0 5px 0 #23143f;padding:12px 5px;font:800 12px/1.3 system-ui;writing-mode:vertical-rl;text-align:center;opacity:.9}
.spark-mission-carousel .mission-carousel-peek[data-side=previous]{left:3px;transform:scale(.94)}
.spark-mission-carousel .mission-carousel-peek[data-side=next]{right:3px;transform:scale(.94)}
.spark-mission-carousel .mission-carousel-peek[hidden]{display:none!important}
.spark-mission-carousel .mission-carousel-arrow{position:relative;z-index:5;border-color:#8eeaff;box-shadow:0 5px 0 #211239,0 0 14px #66dfff45}
@media (max-width:600px){.spark-mission-carousel{padding:10px 4px}.spark-mission-carousel .mission-carousel-stage{padding:12px 18px 20px}.spark-mission-carousel .mission-carousel-stage>[data-carousel-leaving=true]{left:18px;right:18px;top:12px;width:calc(100% - 36px)!important}.spark-mission-carousel .mission-carousel-peek{width:28px;padding:8px 2px;font-size:10px;top:26px;bottom:34px}.spark-mission-carousel .mission-carousel-status{padding:6px 16px}}

/* Approved straight illustrated-card stage. No rotated card silhouettes. */
#top .spark-mission-carousel .mission-carousel-stage{max-width:1000px;padding:18px clamp(28px,18%,180px) 24px;perspective:none}
#top .spark-mission-carousel .mission-carousel-stage>[data-carousel-selected=true]{max-width:360px;margin-inline:auto}
#top .spark-mission-carousel .mission-carousel-stage>[data-carousel-leaving=true]{position:absolute!important;left:50%;right:auto;width:64%!important;max-width:360px!important;margin-left:0!important;translate:-50% 0}
#top .spark-mission-carousel .mission-carousel-peek{top:40px;bottom:45px;width:34%;max-width:320px;box-sizing:border-box;padding:0;writing-mode:horizontal-tb;border:3px solid #352147;border-radius:21px;background:#fff3d7;color:#352147;box-shadow:0 8px 0 #2d1b41;opacity:.65;transform:scale(.92);display:flex;flex-direction:column;text-align:center;overflow:hidden;font-size:16px}
#top .spark-mission-carousel .mission-carousel-peek[data-side=previous]{left:-4%}
#top .spark-mission-carousel .mission-carousel-peek[data-side=next]{right:-4%}
#top .spark-mission-carousel .mission-peek-tab{display:block;position:absolute;z-index:1;top:8px;left:12%;width:76%;box-sizing:border-box;border:3px solid #352147;border-radius:10px;background:#fff1cb;padding:10px 6px;font-size:18px;font-weight:900}
#top .spark-mission-carousel .mission-peek-art{display:block;width:100%;aspect-ratio:324/291;object-fit:cover;border-bottom:3px solid #352147}
#top .spark-mission-carousel .mission-peek-neutral{display:block;min-height:150px;background:linear-gradient(140deg,#7bd9e8,#bca3df);border-bottom:3px solid #352147}
#top .spark-mission-carousel .mission-peek-title{display:block;padding:16px 10px 8px;font-size:18px;line-height:1.2;overflow-wrap:anywhere}
#top .spark-mission-carousel .mission-peek-note{display:block;padding:8px 12px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
@media(max-width:600px){#top .spark-mission-carousel .mission-carousel-stage{padding:14px 16px 22px}#top .spark-mission-carousel .mission-carousel-stage>[data-carousel-selected=true]{max-width:100%}#top .spark-mission-carousel .mission-carousel-stage>[data-carousel-leaving=true]{position:absolute!important;left:50%;right:auto;width:calc(100% - 32px)!important;margin-left:0!important;translate:-50% 0}#top .spark-mission-carousel .mission-carousel-peek{width:50%;top:26px;bottom:34px;opacity:.45}#top .spark-mission-carousel .mission-carousel-peek[data-side=previous]{left:-33%}#top .spark-mission-carousel .mission-carousel-peek[data-side=next]{right:-33%}}

/* Category skill stages share the mission game frame; question workspaces stay untouched. */
#top .math-level-stage{display:block;min-width:0;width:100%}
#top .ela-catalog-layout>.ela-skill-list:has(>.spark-mission-carousel){display:block;min-width:0;width:100%}
#top .spark-mission-carousel .mission-carousel-stage>.math-level-card{padding:0;overflow:hidden}
#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-tile{width:100%;min-width:0;min-height:250px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px 20px;text-align:center;border:0;border-radius:17px;background:linear-gradient(145deg,#f8f3ff,#def8ff);color:#30214d;box-shadow:none}
#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-title{font-size:clamp(1.25rem,2.2vw,1.85rem);line-height:1.2}
#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-progress{font-size:.95rem;line-height:1.5}
#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-open{margin-top:8px;color:#493075;font-weight:850}
#top .spark-mission-carousel .mission-carousel-stage>.ela-skill-card{width:100%;min-width:0;box-sizing:border-box}
@media(max-width:600px){#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-tile{padding:18px 12px;min-height:220px;gap:10px}#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-title{font-size:1.25rem}#top .spark-adventure[data-adventure-mode=map] .spark-mission-carousel .math-level-progress{font-size:.9rem}}
/* The ELA side menu leaves a narrower stage; keep existing picture and full text readable. */
#top .ela-portal .spark-mission-carousel .ela-skill-card.ela-mission-intro-card{grid-template-columns:minmax(0,1fr);text-align:center;gap:12px}
#top .ela-portal .spark-mission-carousel .ela-mission-intro-text h3{font-size:1.45rem;line-height:1.2}
#top .ela-portal .spark-mission-carousel .ela-mission-intro-picture{width:min(100%,140px);justify-self:center}
#top .ela-portal .spark-mission-carousel .ela-mission-intro-text .ela-button{max-width:100%;white-space:normal}

/* Chooser-only paint: never applied to question forms or whole level tiles. */
.spark-mission-carousel .mission-carousel-arrow,
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile),
.spark-mission-carousel .math-level-open,
#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button{
 background:linear-gradient(180deg,#9872e1 0%,#7850bf 45%,#5e359d 49%,#6940aa 100%)!important;
 color:#fff!important;border:2px solid #92e9fa!important;border-bottom-color:#5fa5db!important;
 border-radius:14px!important;box-shadow:inset 0 2px 0 #e0c7ff,inset 0 -3px 0 #492676,0 6px 0 #2c174f,0 8px 14px #1a0d4538!important;
 font-weight:850!important;text-shadow:0 2px 0 #39215b;letter-spacing:.015em;position:relative;
}
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile),
.spark-mission-carousel .math-level-open,#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button{min-height:44px}
.spark-mission-carousel .math-level-open{display:inline-flex;justify-content:center;align-items:center;gap:9px;padding:12px 18px;align-self:center;box-sizing:border-box}
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile)::before,
.spark-mission-carousel .math-level-open::before{content:'';display:inline-block;width:.65em;height:.8em;margin-right:.5em;background:#c9f8ff;clip-path:polygon(0 0,100% 50%,0 100%);vertical-align:-.05em;filter:drop-shadow(0 1px 0 #271346)}
.spark-mission-carousel .mission-carousel-arrow svg{stroke-width:4.3;filter:drop-shadow(0 2px 0 #34204e)}
.spark-mission-carousel .mission-carousel-arrow:not(:disabled):hover,
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile):not(:disabled):hover,
#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back:not(:disabled):hover,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button:not(:disabled):hover{filter:brightness(1.1)}
.spark-mission-carousel .mission-carousel-arrow:not(:disabled):active,
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile):not(:disabled):active,
.spark-mission-carousel .math-level-tile:active .math-level-open,
#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back:not(:disabled):active,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button:not(:disabled):active{transform:translateY(3px);box-shadow:inset 0 2px 0 #bba2e1,inset 0 -2px 0 #492676,0 3px 0 #2c174f!important}
.spark-mission-carousel .mission-carousel-arrow:focus-visible,
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile):focus-visible,
#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back:focus-visible,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button:focus-visible{outline:3px solid #ffe985!important;outline-offset:4px!important}
.spark-mission-carousel .math-level-tile:focus-visible .math-level-open{outline:3px solid #ffe985;outline-offset:4px}
.spark-mission-carousel .mission-carousel-arrow:disabled,
.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile):disabled,
#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back:disabled,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button:disabled{opacity:.5;filter:saturate(.4);cursor:default;transform:none;box-shadow:inset 0 1px 0 #c7b5e4,0 2px 0 #362449!important}
@media (forced-colors:active){.spark-mission-carousel .mission-carousel-arrow,.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile),.spark-mission-carousel .math-level-open,#top .spark-adventure:has(.spark-mission-carousel) > .adventure-top > .adventure-back,#top .ela-portal:has(.spark-mission-carousel) .ela-level-header > .ela-button{background:ButtonFace!important;color:ButtonText!important;border-color:ButtonText!important;text-shadow:none;box-shadow:none!important}.spark-mission-carousel .math-level-open::before,.spark-mission-carousel .mission-carousel-stage>[data-carousel-selected] button:not(.math-level-tile)::before{background:ButtonText}}

/* Scoped collectible presentation: no activity or global button styling. */
#top .spark-collectible-card{--collectible-ink:#302348;--collectible-paper:#fff4d8;box-sizing:border-box!important;position:relative!important;display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;max-width:360px!important;min-width:0!important;padding:0 0 16px!important;border:3px solid var(--collectible-ink)!important;border-radius:23px!important;background:var(--collectible-paper)!important;color:var(--collectible-ink)!important;box-shadow:0 9px 0 #281b43!important;rotate:0deg!important;text-align:center!important;overflow:visible!important;isolation:isolate}
#top .spark-collectible-card .class-launch-open,#top .spark-collectible-card .math-level-tile{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-radius:19px!important;background:transparent!important;color:var(--collectible-ink)!important;box-shadow:none!important;transform:none!important;text-align:center!important;overflow:visible!important}
#top .spark-collectible-card .collectible-name-tab{position:relative!important;z-index:2!important;display:block!important;align-self:center!important;width:76%!important;box-sizing:border-box!important;margin:-9px auto -2px!important;padding:12px 10px!important;border:3px solid var(--collectible-ink)!important;border-radius:12px!important;background:#fff0c8!important;color:var(--collectible-ink)!important;font-size:clamp(15px,1.3vw,20px)!important;font-weight:950!important;line-height:1.2!important;letter-spacing:.02em!important;text-align:center!important;text-transform:uppercase!important;white-space:normal!important;transform:none!important}
#top .spark-collectible-card .collectible-art{display:block!important;flex:none!important;box-sizing:border-box!important;width:100%!important;height:auto!important;aspect-ratio:324/291!important;object-fit:cover!important;object-position:center!important;margin:-40px 0 0!important;border:0!important;border-bottom:3px solid var(--collectible-ink)!important;border-radius:18px 18px 0 0!important;pointer-events:none!important;user-select:none!important}
#top .spark-collectible-card :is(.class-launch-title,.math-level-title,.collectible-context-title){display:block!important;margin:16px 18px 9px!important;font-size:20px!important;line-height:1.25!important;color:var(--collectible-ink)!important;text-align:center!important}
#top .spark-collectible-card :is(.class-launch-count,.math-level-mission-count){display:block!important;margin:4px 14px 12px!important;font-weight:850!important;color:var(--collectible-ink)!important}
#top .spark-collectible-card :is(.math-level-progress,.math-level-category,.adventure-note){margin:8px 16px!important;color:#69527d!important;font-size:13px!important;line-height:1.5!important;text-align:center!important}
#top .spark-collectible-card[data-collectible-kind="mission"]>p{margin:15px 16px 8px!important;color:var(--collectible-ink)!important;line-height:1.45!important}
#top .spark-collectible-card[data-collectible-kind="mission"]>button[data-set]{order:20!important;align-self:center!important;width:82%!important;margin-top:16px!important}
#top .spark-collectible-card :is(.class-launch-spark,.class-launch-icon){position:absolute!important;z-index:3!important;top:48px!important;right:9px!important;display:grid!important;place-items:center!important;width:32px!important;height:32px!important;font-size:21px!important;background:var(--class-theme-accent,var(--class-color,#fff3c9))!important;border:2px solid var(--collectible-ink)!important;border-radius:9px!important;box-shadow:0 2px 0 #302348!important}
#top .spark-collectible-card :is(.class-code-selectable){box-sizing:border-box!important;max-width:84%!important;margin:9px auto!important;background:#fffdf5!important;color:var(--collectible-ink)!important;border:2px solid var(--collectible-ink)!important;border-radius:10px!important}
#top .spark-collectible-card :is(.class-launch-action,.math-level-open),#top .spark-adventure .spark-collectible-card>button[data-set]{box-sizing:border-box!important;display:block!important;min-height:46px!important;width:82%!important;margin:14px auto 6px!important;padding:11px 13px!important;border:3px solid #493066!important;border-radius:12px!important;background:linear-gradient(#a17dce 0 12%,#8e63ba 12% 100%)!important;color:white!important;box-shadow:0 5px 0 #302348!important;font-weight:900!important;font-size:16px!important;line-height:1.2!important;text-align:center!important;transform:none!important;text-shadow:0 1px 1px #543875!important}
#top .spark-collectible-card :is(button:focus-visible,.math-level-tile:focus-visible){outline:4px solid #14b9d6!important;outline-offset:4px!important}
#top .spark-collectible-card .math-level-tile:active .math-level-open,#top .spark-collectible-card>button[data-set]:active{box-shadow:0 2px 0 #302348!important;translate:0 3px}
#top .spark-collectible-card button:disabled{opacity:.55!important;cursor:not-allowed!important}
#top .spark-collectible-card .class-code-copy{min-width:44px!important;min-height:44px!important}
@media(max-width:480px){#top .spark-collectible-card{max-width:350px!important}#top .spark-collectible-card .collectible-name-tab{font-size:16px!important}#top .spark-collectible-card :is(.class-launch-title,.math-level-title,.collectible-context-title){font-size:18px!important}}
@media(prefers-reduced-motion:reduce){#top .spark-collectible-card *{transition:none!important}}

#top .spark-collectible-card[hidden]{display:none!important}
#top .spark-collectible-card:focus-visible{outline:4px solid #14b9d6!important;outline-offset:4px!important}
/* Exact native inherited-layout corrections, bounded to decorated cards. */
#top .spark-collectible-card{height:auto!important;aspect-ratio:auto!important;min-height:0!important;max-height:none!important}
#top .spark-collectible-card :is(.class-launch-spark,.class-launch-icon){color:#302348!important;background:#fff3c9!important;border-color:var(--class-theme-accent,#302348)!important;transform:none!important;rotate:0deg!important}
#top .spark-adventure .spark-mission-carousel .spark-collectible-card .math-level-tile{background:transparent!important;height:auto!important;aspect-ratio:auto!important;min-height:0!important;max-height:none!important}
/* Repeated scoped class intentionally exceeds every local display override. */
#top .spark-collectible-card.spark-collectible-card.spark-collectible-card [hidden]{display:none!important}

/* Teacher/resource-room withClassCodeCopy frames only. Owner opts in explicitly. */
#top .class-launch-frame.spark-collectible-card.spark-square-class-card{display:grid!important;grid-template-rows:minmax(0,1fr) auto 44px!important;gap:4px!important;width:100%!important;max-width:320px!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:1/1!important;padding:6px!important;box-sizing:border-box!important;border:3px solid var(--class-theme-border,#493066)!important;border-radius:22px!important;overflow:visible!important;background-color:var(--class-theme-start,#d9f5ed)!important;background-image:var(--class-background-image,url("assets/collectible-classroom.webp"))!important;background-position:center!important;background-size:cover!important;box-shadow:0 6px 0 #302348!important;isolation:isolate}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card>.class-launch-open{position:relative!important;display:flex!important;flex-direction:column!important;gap:2px!important;align-items:stretch!important;justify-content:flex-start!important;min-height:0!important;height:100%!important;max-height:100%!important;padding:5px 6px!important;border:1px solid #fff8!important;border-radius:13px!important;background:transparent!important;overflow:auto!important;scrollbar-width:thin;box-sizing:border-box!important;color:#302348!important;text-align:left!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .collectible-art{display:none!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .collectible-name-tab{position:static!important;align-self:stretch!important;width:auto!important;max-width:none!important;margin:0 35px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:11px!important;line-height:1.2!important;text-align:left!important;letter-spacing:.035em!important;transform:none!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-title{display:block!important;margin:1px 28px 0 0!important;font-size:clamp(15px,1.5vw,20px)!important;line-height:1.18!important;text-align:left!important;overflow-wrap:anywhere!important;white-space:normal!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-count{margin:0!important;font-size:11px!important;line-height:1.25!important;text-align:left!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-open>:is(.pill,.small-note,p){margin:0!important;padding:0!important;font-size:11px!important;line-height:1.25!important;color:#49375e!important;text-align:left!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-spark{position:absolute!important;top:6px!important;right:6px!important;width:28px!important;height:28px!important;font-size:18px!important;background:#fff5d6!important;color:#302348!important;border:2px solid var(--class-theme-accent,#7a4bb0)!important;border-radius:8px!important;transform:none!important;rotate:0deg!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card>.class-code-selectable{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;grid-template-rows:14px 30px!important;align-items:center!important;gap:0 8px!important;width:100%!important;max-width:none!important;margin:0!important;padding:2px 8px!important;min-height:0!important;border:2px solid #493066!important;border-radius:11px!important;background:#fffdf5f5!important;box-sizing:border-box!important;color:#302348!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card>.class-code-selectable>span:first-child{grid-column:1!important;font-size:10px!important;line-height:1.1!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-code-value{font-size:20px!important;letter-spacing:.08em!important;line-height:1.1!important;text-align:left!important;user-select:text!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-code-copy{grid-column:2!important;grid-row:1/3!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-code-copy-status{position:absolute!important;z-index:5!important;bottom:calc(100% + 5px)!important;left:0!important;right:0!important;padding:7px 9px!important;border:2px solid #493066!important;border-radius:9px!important;background:#fffdf5!important;color:#302348!important;font-size:12px!important;line-height:1.35!important;box-shadow:0 3px 8px #30234844!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card>.class-launch-action{display:grid!important;place-items:center!important;width:100%!important;min-height:44px!important;height:44px!important;margin:0!important;padding:6px 10px!important;font-size:15px!important;line-height:1.1!important;box-sizing:border-box!important;border-radius:11px!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card:has(.class-launch-open:focus-visible){outline:4px solid #14b9d6!important;outline-offset:3px!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card[hidden],#top .class-launch-frame.spark-collectible-card.spark-square-class-card [hidden]{display:none!important}

#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-open>:is(.collectible-name-tab,.class-launch-title,.class-launch-count,.pill,.small-note,p){background:#fff7e9eb!important;border-radius:5px!important;padding:2px 5px!important}

#top .class-launch-frame.spark-collectible-card.spark-square-class-card>.class-launch-action::after{display:none!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-title{font-size:15px!important}
#top .class-launch-frame.spark-collectible-card.spark-square-class-card .class-launch-open{background:#fff7e9d9!important}

/* Scoped existing appearance-editor extension. No unrelated card/workspace styles. */
#top .class-appearance-editor .class-background-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:360px;overflow:auto;padding:8px;overscroll-behavior:contain}
#top .class-appearance-editor .class-background-swatches>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:auto;min-height:108px;padding:5px;border:3px solid #76558d;border-radius:12px;background:#fff5d9;color:#352242;box-shadow:0 3px 0 #493255;font:700 12px/1.2 system-ui;white-space:normal}
#top .class-appearance-editor .class-background-swatches>button[aria-pressed=true]{border-color:#148b9d;outline:3px solid #ffe66c;outline-offset:0}
#top .class-appearance-editor .class-background-swatches>button:focus-visible{outline:4px solid #743bc1;outline-offset:3px}
#top .class-appearance-editor .class-background-swatches img{display:block;width:100%;height:70px;object-fit:cover;border-radius:7px;pointer-events:none}
#top .class-appearance-editor .class-background-choice-name{overflow-wrap:anywhere;text-align:center;display:block;padding:1px 3px}
#top .class-appearance-editor .class-background-choice-check{position:absolute;top:4px;right:4px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%;background:#176d48;color:#fff;width:22px;height:22px;font-weight:900}
#top .class-appearance-editor [data-appearance-current-name=background]{font-size:15px}
#top .class-appearance-editor .class-appearance-current-swatch{background-size:cover;background-position:center}
#top .class-appearance-editor .class-appearance-preview{background-image:linear-gradient(0deg,rgba(255,247,219,.92),rgba(255,247,219,.3)),var(--class-background-image,none);background-size:cover;background-position:center}
#top .class-appearance-editor .class-appearance-preview .class-launch-title,#top .class-appearance-editor .class-appearance-preview .class-launch-count{background:rgba(255,248,226,.92);border-radius:7px;color:#33223f;padding:4px 6px}
#top .class-appearance-editor [hidden]{display:none!important}
@media(max-width:450px){#top .class-appearance-editor .class-background-swatches{grid-template-columns:repeat(2,minmax(0,1fr));max-height:320px}}

/* Math Land only: the existing navigation control floats over the photo, not in a separate row. */
#top .spark-adventure .math-land .math-land-toolbar{position:absolute;inset:8px 8px auto auto;z-index:6;display:flex;align-items:center;justify-content:flex-end;gap:0;flex-wrap:nowrap;min-width:0;max-width:calc(100% - 16px);margin:0;padding:0;line-height:normal;pointer-events:none}
#top .spark-adventure .math-land .math-land-toolbar>.math-land-back{pointer-events:auto;min-height:44px;height:44px;width:auto;max-width:100%;margin:0;padding:8px 12px;gap:7px;line-height:1;white-space:nowrap;box-shadow:0 3px 0 #201032,inset 0 1px 0 #ffffff55}
#top .spark-adventure .math-land .math-land-back-short{display:none}
#top .spark-adventure .math-land>.math-land-motion-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#top .spark-adventure .math-land>.math-land-notice{margin:10px 8px;line-height:1.4}
@container (max-width:900px){#top .spark-adventure .math-land .math-land-back-full{display:none}#top .spark-adventure .math-land .math-land-back-short{display:inline}#top .spark-adventure .math-land .math-land-toolbar>.math-land-back{padding-inline:10px}}
@container (max-width:420px){#top .spark-adventure .math-land .math-land-toolbar{inset:4px 4px auto auto;max-width:calc(100% - 8px)}#top .spark-adventure .math-land .math-land-toolbar>.math-land-back{width:58px;min-width:58px;padding:6px;font-size:13px}#top .spark-adventure .math-land .math-land-back>svg{display:none}}
@container (max-width:420px){#top .spark-adventure .math-land .math-land-toolbar>.math-land-back:focus-visible{outline-offset:1px}}

/* Only the Math skill-level chooser; no mission/question/class/sidebar styling. */
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{position:relative;min-width:0;padding:12px!important;border:3px solid #8b62cf!important;border-radius:25px!important;background:linear-gradient(#22144355,#22144388),url("assets/math-land.png") center/cover!important;box-shadow:0 7px 0 #302348}
#top .math-skill-chooser-shell .math-skill-chooser-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative;z-index:5;margin:0 0 8px}
#top .math-skill-chooser-shell .math-skill-chooser-back,#top .math-skill-chooser-shell .math-skill-search-details>summary{box-sizing:border-box;min-height:44px;padding:10px 14px;border:2px solid #d7c5ff;border-radius:12px;background:linear-gradient(#8053ce,#4d228a);color:white;font-weight:850;line-height:1.2;box-shadow:0 4px 0 #281b43;cursor:pointer}
#top .math-skill-chooser-shell .math-skill-chooser-back{margin-left:auto;max-width:70%}
#top .math-skill-chooser-shell .math-skill-search-details{max-width:min(300px,60%);background:transparent;color:white}
#top .math-skill-chooser-shell .math-skill-search-details[open]{position:relative;z-index:8}
#top .math-skill-chooser-shell .adventure-map-controls{position:absolute;top:calc(100% + 8px);left:0;width:min(290px,75vw);display:grid;gap:5px;padding:10px!important;border:2px solid #8061b4;border-radius:12px;background:#fff7e9;color:#302348;box-shadow:0 5px 15px #21113366}
#top .math-skill-chooser-shell .adventure-map-controls input{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
#top .math-skill-chooser-shell .spark-mission-carousel{background:transparent!important;border:0!important;box-shadow:none!important;margin-top:0!important}
#top .math-skill-chooser-shell .math-chooser-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#top .math-skill-chooser-shell .math-skill-chooser-notice{background:#fff7e9;color:#302348;padding:8px;border-radius:8px}
#top .math-skill-chooser-shell :is(.math-skill-chooser-back,.math-skill-search-details>summary):focus-visible{outline:3px solid #ffe489;outline-offset:3px}
/* Reset intrinsic native-button content box, not a compensating left offset. */
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .spark-collectible-card>.math-level-tile{appearance:none!important;box-sizing:border-box!important;width:100%!important;min-inline-size:0!important;max-inline-size:100%!important;margin:0!important;padding:0!important;border:0!important;align-items:stretch!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-level-tile>.collectible-art{box-sizing:border-box!important;display:block!important;min-inline-size:0!important;max-inline-size:100%!important;inline-size:100%!important;align-self:stretch!important;padding:0!important;margin-inline:0!important;object-fit:cover!important}
#top .math-skill-chooser-shell [hidden]{display:none!important}
@media (max-width:480px){#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{padding:7px!important}#top .math-skill-chooser-shell .math-skill-chooser-back,#top .math-skill-chooser-shell .math-skill-search-details>summary{font-size:12px;padding:9px 8px}#top .math-skill-chooser-shell .math-skill-chooser-toolbar{gap:6px}}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-level-tile>.collectible-art[hidden]{display:none!important}

/* WORLD map only. The Math Land detail, cards and assessment controls are untouched. */
#top .learning-lands .learning-lands-treasure{position:absolute;left:36.65%;top:40.4%;z-index:5;width:clamp(44px,7%,92px);aspect-ratio:1;min-width:44px;min-height:44px;height:auto;margin:0;padding:0;border:0;border-radius:14px;background:transparent!important;box-shadow:none!important;transform:translate(-50%,-50%)!important;display:grid;place-items:center;cursor:pointer}
.learning-lands-treasure img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 2px #261b4d88)}
#top .learning-lands .learning-lands-treasure:focus-visible{outline:4px solid #fff;outline-offset:3px;background:#32205b99!important}
.spark-treasure-dialog{box-sizing:border-box;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;padding:22px;border:4px solid #513179;border-radius:24px;background:linear-gradient(145deg,#eef8ff,#f2e8ff);color:#241a40;box-shadow:0 8px 0 #261440,0 20px 60px #0008;font:inherit}
.spark-treasure-dialog::backdrop{background:#15132acc}
.spark-treasure-dialog h2{margin:0 0 14px}.spark-treasure-dialog h3{margin:18px 0 10px;font-size:1.15rem}
.spark-treasure-dialog .treasure-close{min-height:44px;padding:9px 22px;border:2px solid #412365;border-radius:12px;background:#7044b5;color:white;font:inherit;font-weight:800;box-shadow:0 4px 0 #351e57;cursor:pointer}
.spark-treasure-dialog .treasure-close:focus-visible{outline:3px solid #085c98;outline-offset:4px}
.treasure-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.treasure-counts>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:2px solid #b0a1d1;border-radius:12px;background:#fffdf5}.treasure-counts dt{font-weight:700;overflow-wrap:anywhere}.treasure-counts dd{margin:0;font-size:1.5rem;font-weight:900;color:#4c277d}.treasure-note{font-size:.9rem;line-height:1.45;margin:16px 0 0}
@media (max-width: 480px){.spark-treasure-dialog{padding:16px;width:calc(100vw - 24px)}.treasure-counts{grid-template-columns:1fr}}

/* Only the pictured Math Land category screen: preserve the inner purple frame and all other readable cards. */
#top #adult-test.spark-adventure[data-learning-land-screen="math-land"]{background:transparent;border:0;border-radius:0;box-shadow:none;padding:3px 3px 9px}
#top #adult-test.spark-adventure[data-learning-land-screen="math-land"]>.math-land.spark-land-frame{margin:0}
#top .spark-adventure[data-learning-land-screen="math-land"] .math-land .math-land-toolbar{inset:8px auto auto 8px;justify-content:flex-start}
@container(max-width:420px){#top .spark-adventure[data-learning-land-screen="math-land"] .math-land .math-land-toolbar{inset:4px auto auto 4px}}

/* Math skill-level chooser only. Keep real cards/actions and WAAPI transforms intact. */
#top .spark-adventure[data-adventure-mode=map] .math-catalog-layout:has(.math-skill-chooser-shell){container-type:inline-size}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;height:clamp(420px,calc(56.28cqw + 20px),620px)!important;max-height:calc(100svh - 150px)!important;min-height:0!important;overflow:hidden!important;gap:4px!important;padding:10px!important}
#top .math-skill-chooser-shell .math-skill-chooser-toolbar{flex:0 0 auto!important;margin:0!important;gap:8px!important}
#top .math-skill-chooser-shell .math-skill-chooser-toolbar :is(.math-skill-chooser-back,summary){margin-top:0!important;margin-bottom:4px!important}
#top .math-skill-chooser-shell .math-skill-chooser-notice{flex:0 0 auto;max-height:4em;overflow:auto;margin:0;font-size:12px}
#top .math-skill-chooser-shell>.math-skill-list{flex:1 1 0!important;min-height:0!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important}
#top .math-skill-chooser-shell .math-level-stage{flex:1 1 0!important;min-height:0!important;display:flex!important;flex-direction:column!important}
#top .math-skill-chooser-shell .spark-mission-carousel{flex:1 1 0!important;min-height:0!important;display:flex!important;flex-direction:column!important;padding:2px 4px 6px!important}
#top .math-skill-chooser-shell .mission-carousel-status{flex:none!important;margin:0 auto 3px!important;padding:4px 14px!important;font-size:14px!important;line-height:1.2!important}
#top .math-skill-chooser-shell .mission-carousel-row{flex:1 1 0!important;min-height:0!important;align-items:stretch!important;grid-template-columns:48px minmax(0,1fr) 48px!important;gap:5px!important}
#top .math-skill-chooser-shell .mission-carousel-arrow{align-self:center!important;margin:0!important;width:44px!important;height:52px!important;min-width:44px!important;min-height:44px!important;padding:6px!important}
#top .math-skill-chooser-shell .mission-carousel-stage{height:100%!important;min-height:0!important;padding:10px clamp(20px,14%,100px) 12px!important;box-sizing:border-box!important;overflow:hidden!important}
#top .math-skill-chooser-shell .mission-carousel-stage>.spark-collectible-card{max-height:100%!important;min-height:0!important;padding-bottom:6px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-block:8px}
#top .math-skill-chooser-shell .mission-carousel-stage>[data-carousel-leaving=true]{top:10px!important}
#top .math-skill-chooser-shell .spark-collectible-card>.math-level-tile{flex:0 0 auto!important;min-height:min-content!important;justify-content:flex-start!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-level-tile>.collectible-art{height:clamp(84px,18svh,150px)!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:center!important;margin-top:-28px!important}
#top .math-skill-chooser-shell .spark-collectible-card .collectible-name-tab{padding:7px 8px!important;font-size:14px!important;line-height:1.15!important;margin-top:0!important}
#top .math-skill-chooser-shell .spark-collectible-card .math-level-title{font-size:17px!important;line-height:1.2!important;margin:7px 12px 3px!important}
#top .math-skill-chooser-shell .spark-collectible-card .math-level-mission-count{font-size:14px!important;line-height:1.2!important;margin:3px 10px!important}
#top .math-skill-chooser-shell .spark-collectible-card :is(.math-level-progress,.math-level-category){font-size:12px!important;line-height:1.3!important;margin:4px 10px!important}
#top .math-skill-chooser-shell .spark-collectible-card .math-level-open{min-height:44px!important;padding:9px!important;font-size:14px!important;margin:7px auto 4px!important}
#top .math-skill-chooser-shell .mission-carousel-peek{top:20px!important;bottom:25px!important;max-height:calc(100% - 45px)!important}
#top .math-skill-chooser-shell .mission-peek-art{height:clamp(84px,18svh,150px)!important;aspect-ratio:auto!important;object-fit:cover!important}
#top .math-skill-chooser-shell .mission-peek-tab{font-size:13px!important;padding:5px!important}
#top .math-skill-chooser-shell .mission-peek-title{font-size:14px!important;padding:8px!important}
#top .math-skill-chooser-shell .mission-peek-note{font-size:12px!important;padding:4px 8px!important}
@media (max-width:600px){
 #top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{height:min(580px,calc(100svh - 110px))!important;max-height:calc(100svh - 110px)!important;padding:6px!important}
 #top .math-skill-chooser-shell .mission-carousel-row{grid-template-columns:44px minmax(0,1fr) 44px!important;grid-template-rows:minmax(0,1fr) 48px!important;gap:4px!important}
 #top .math-skill-chooser-shell .mission-carousel-stage{grid-column:1/-1!important;grid-row:1!important;padding:8px 14px 10px!important}
 #top .math-skill-chooser-shell .mission-carousel-arrow{grid-row:2!important;height:44px!important}
 #top .math-skill-chooser-shell .mission-carousel-stage>[data-carousel-leaving=true]{top:8px!important}
 #top .math-skill-chooser-shell .spark-collectible-card .math-level-title{font-size:16px!important}
}
@media (max-height:500px){#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{max-height:calc(100svh - 24px)!important;height:calc(100svh - 24px)!important}}
/* Do not reveal hidden siblings/art while setting display and compact dimensions. */
#top .math-skill-chooser-shell .mission-carousel-stage>.spark-collectible-card[hidden],#top .math-skill-chooser-shell .mission-carousel-arrow[hidden],#top .math-skill-chooser-shell .mission-carousel-peek[hidden],#top .math-skill-chooser-shell .math-skill-chooser-notice[hidden]{display:none!important}

/* Match category-map footprint: remove only this chooser's inherited outer chrome. */
#top .spark-adventure[data-adventure-mode=map]:has(.math-skill-chooser-shell){padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-width:0!important}
#top .spark-adventure[data-adventure-mode=map] .math-catalog-layout:has(.math-skill-chooser-shell){padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;gap:0!important}
#top .math-skill-chooser-shell>.adventure-rules{flex:0 0 auto!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:0!important;border:1px solid #baa0e8!important;border-radius:9px!important;background:#fff7e9f5!important;color:#302348!important;max-height:42%!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin}
#top .math-skill-chooser-shell>.adventure-rules>summary{box-sizing:border-box!important;min-height:44px!important;margin:0!important;padding:9px 12px!important;font-size:12px!important;line-height:1.3!important;cursor:pointer}
#top .math-skill-chooser-shell>.adventure-rules>p{margin:7px 12px!important;font-size:13px!important;line-height:1.4!important}
#top .math-skill-chooser-shell .mission-carousel-peek{height:auto!important;max-height:min(286px,calc(100% - 40px))!important;bottom:auto!important}
/* Hidden remains authoritative for every flex container and descendant in this chooser. */
#top .spark-adventure[data-adventure-mode=map]:has(.math-skill-chooser-shell)[hidden],
#top .spark-adventure[data-adventure-mode=map] .math-catalog-layout:has(.math-skill-chooser-shell)[hidden],
#top .spark-adventure[data-adventure-mode=map] .math-catalog-layout:has(.math-skill-chooser-shell) [hidden]{display:none!important}
/* Inline containment must not collapse an auto-sized phone grid item. */
#top .spark-adventure[data-adventure-mode=map]:has(.math-skill-chooser-shell),
#top .spark-adventure[data-adventure-mode=map] .math-catalog-layout:has(.math-skill-chooser-shell),
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{width:100%!important;inline-size:100%!important;max-width:100%!important;box-sizing:border-box!important;justify-self:stretch!important;align-self:stretch!important;margin-inline:0!important}
/* Sliding cards must not become page-scroll anchors when their art height changes. */
#top .spark-adventure[data-adventure-mode=map]:has(.math-skill-chooser-shell),
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{overflow-anchor:none!important}

/* World only: retain its routing section but remove the redundant white panel.
   The existing Learning Lands image and purple outline own the visible frame. */
#top #adult-test.spark-adventure[data-learning-land-screen="world"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 3px 3px 9px;
  overflow: visible;
}

/* Match the compact Math-map gutter; retain the purple outline/shadow. */
#top #adult-test.spark-adventure[data-learning-land-screen="world"] > .adventure-course-tabs.learning-lands.spark-land-frame {
  margin: 0;
}

/* World chest feedback is transient: pointer hover or keyboard focus, never a selected ring. */
@media (hover:hover) and (pointer:fine){#top .learning-lands .learning-lands-treasure:hover:not(:disabled)>img{filter:drop-shadow(0 0 5px #fff3a5) drop-shadow(0 0 12px #70eaff) drop-shadow(0 4px 3px #261b4d99)}}
#top .learning-lands .learning-lands-treasure:focus-visible:not([data-treasure-pointer-focus=true]){outline:3px solid #fff2a0;outline-offset:4px;background:transparent!important}
#top .learning-lands .learning-lands-treasure:focus-visible:not([data-treasure-pointer-focus=true])>img{filter:drop-shadow(0 0 5px #fff3a5) drop-shadow(0 0 12px #70eaff)}
#top .learning-lands .learning-lands-treasure[data-treasure-pointer-focus=true],#top .learning-lands .learning-lands-treasure:focus:not(:focus-visible){outline:none;background:transparent!important}
.spark-treasure-dialog.treasure-game-screen{position:fixed;inset:auto;left:var(--treasure-left,12px);top:var(--treasure-top,12px);width:var(--treasure-width,calc(100vw - 24px));height:var(--treasure-height,calc(100dvh - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:0;padding:0;overflow:hidden;border:5px solid #7d4dcb;border-radius:23px;background:linear-gradient(145deg,#e9f9ff,#eee1ff);box-shadow:0 6px 0 #281347,0 0 0 2px #bca1ef,inset 0 0 0 2px #d9c8ff,0 18px 55px #0008;color:#28183f;box-sizing:border-box}
.spark-treasure-dialog.treasure-game-screen[open]{display:flex;flex-direction:column}
.treasure-game-screen .treasure-game-header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:0 0 auto;min-width:0;padding:16px 22px 20px;background:linear-gradient(115deg,#4c2585,#7145b5);border-bottom:3px solid #bda2ef;color:#fff}
.treasure-game-screen .treasure-game-heading{min-width:0}.treasure-game-screen .treasure-game-eyebrow{margin:0 0 3px;font-size:.7rem;font-weight:850;letter-spacing:.16em;color:#c5f5ff}.treasure-game-screen h2{margin:0;line-height:1.15;font-size:clamp(1.3rem,2.2vw,2rem);color:#fff;overflow-wrap:anywhere}
.treasure-game-screen .treasure-close{flex:0 0 auto;margin:0;min-height:44px;padding:10px 22px;background:linear-gradient(#fff3c9,#ffe09c);color:#342047;border:2px solid #fff4cc;border-radius:12px;box-shadow:0 4px 0 #37204e,inset 0 1px 0 #fff}
.treasure-game-screen .treasure-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 22px 26px;scrollbar-gutter:stable}
.treasure-game-screen .treasure-collection{margin:0 0 22px;padding:17px;border:2px solid #b5a0d6;border-radius:18px;background:#fffbed;box-shadow:0 4px 0 #c8b9e2}
.treasure-game-screen h3{margin:0 0 6px;font-size:1.1rem;line-height:1.3;color:#452567}.treasure-game-screen .treasure-section-note{margin:0 0 15px;line-height:1.45;font-size:.88rem;color:#514062}
.treasure-game-screen .treasure-reward-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;min-width:0}
.treasure-game-screen .treasure-reward-card{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 12px;border:2px solid #b6a1d4;border-radius:16px;background:linear-gradient(145deg,#fffdf4,#e7f8ff);box-shadow:0 3px 0 #c7b7df}
.treasure-game-screen .treasure-reward-card[data-earned=true]{border-color:#7850b8;background:linear-gradient(145deg,#fff5d5,#e8f8ff)}
.treasure-game-screen .treasure-reward-art{flex:0 0 82px;width:82px;min-width:0;display:grid;place-items:center}.treasure-game-screen .treasure-reward-art img{display:block;width:82px;height:82px;max-width:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #3c255733)}
.treasure-game-screen .treasure-reward-info{min-width:0}.treasure-game-screen h4{margin:0 0 5px;line-height:1.25;font-size:.96rem;color:#3d225c;overflow-wrap:anywhere}
.treasure-game-screen .treasure-reward-count{display:inline-block;margin:0 0 7px;padding:3px 8px;border-radius:8px;background:#5e3597;color:#fff;font-size:.78rem;font-weight:850;line-height:1.3}.treasure-game-screen .treasure-reward-description{margin:0;font-size:.8rem;line-height:1.4;color:#51425f;overflow-wrap:anywhere}
.treasure-game-screen .treasure-profile-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr));gap:8px;margin:0 0 14px}.treasure-profile-counts>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;border:1px solid #bda9da;border-radius:11px;background:#f1eaff}.treasure-profile-counts dt{font-size:.78rem;font-weight:750;line-height:1.35}.treasure-profile-counts dd{margin:0;font-weight:900;font-size:1.1rem}
.treasure-game-screen .treasure-profile-icon{display:grid;place-items:center;width:64px;height:64px;border:3px solid #ceb3f2;border-radius:50%;background:linear-gradient(#8150c4,#503080);color:#fff3ad;font-size:2.1rem;box-shadow:0 4px 0 #38204f}
.treasure-game-screen .treasure-note{margin:12px 3px;line-height:1.5;font-size:.83rem}.treasure-game-screen .treasure-empty-banner{margin:0 0 17px;padding:12px 14px;border:2px solid #83b5cb;border-radius:13px;background:#e6f8ff;line-height:1.4}
@media(max-width:600px){.treasure-game-screen .treasure-game-header{padding:12px 13px 16px;gap:10px}.treasure-game-screen .treasure-close{padding:9px 14px}.treasure-game-screen .treasure-body{padding:13px 12px 20px}.treasure-game-screen .treasure-collection{padding:12px}.treasure-game-screen .treasure-reward-grid{grid-template-columns:1fr}.treasure-game-screen .treasure-reward-card{padding:12px 10px}.treasure-game-screen .treasure-reward-art{flex-basis:70px;width:70px}.treasure-game-screen .treasure-reward-art img{width:70px;height:70px}}
@media(max-height:500px){.treasure-game-screen .treasure-game-header{padding-block:9px 13px}.treasure-game-screen .treasure-game-eyebrow{display:none}}
@media(forced-colors:active){.spark-treasure-dialog.treasure-game-screen,.treasure-game-screen .treasure-reward-card{border-color:CanvasText}.treasure-game-screen .treasure-close{color:ButtonText;background:ButtonFace}.treasure-game-screen .treasure-reward-count{color:CanvasText;background:Canvas}}

/* Existing world frame/image supplies geometry; motion never takes pointer focus. */
#top .learning-lands>.world-motion-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;border-radius:inherit}
#top .learning-lands>.world-motion-layer[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){#top .learning-lands>.world-motion-layer{display:none!important}}

/* Geometry surface has no border/padding: percentages exactly track approved raster. */
#top .ela-land-scene{width:100%;min-width:0;margin:0;background:transparent;box-sizing:border-box}
#top .ela-land-surface{position:relative;isolation:isolate;container-type:inline-size;width:100%;padding:0;border:0;line-height:0;border-radius:18px;box-shadow:0 0 0 3px #9a70ef,0 0 0 6px #4e2785,0 7px 0 #2d1456;overflow:hidden}
#top .ela-land-art{display:block;width:100%;height:auto;margin:0;border:0;padding:0;pointer-events:none}
#top .ela-land-surface>.ela-land-hotspot{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important;filter:none!important;outline:0!important;opacity:1!important;z-index:2;cursor:pointer;appearance:none!important}
#top .ela-land-hotspot::before,#top .ela-land-hotspot::after{content:none!important}
#top .ela-land-outlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
#top .ela-land-outlines path{fill:none;stroke:transparent;stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
#top .ela-land-outlines path.is-highlighted{stroke:#ffe855;filter:drop-shadow(0 0 3px #362044)}
#top .ela-land-sign{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;text-align:center;color:#2d2040;font:900 1.22cqw/1.05 system-ui,sans-serif;pointer-events:none;text-wrap:balance;text-shadow:0 1px #fff4cc}
#top .ela-land-sign[data-ela-sign="sentences-conventions"],#top .ela-land-sign[data-ela-sign="informational-reading"]{font-size:1.05cqw}
#top .ela-land-alternatives{display:none;gap:8px;margin:14px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
#top .ela-land-alternatives>.ela-land-category{box-sizing:border-box;min-height:44px!important;min-width:0!important;width:100%;height:auto!important;margin:0!important;padding:9px 8px!important;background:linear-gradient(#8761df,#56319a)!important;color:#fff!important;border:2px solid #b8a0ed!important;border-radius:12px!important;box-shadow:0 4px #351a60!important;font:750 14px/1.2 system-ui!important;white-space:normal;text-wrap:balance;transform:none!important}
#top .ela-land-category:focus-visible{outline:3px solid #ffe855!important;outline-offset:3px}
#top .ela-land-scene[hidden],#top .ela-land-scene [hidden]{display:none!important}
@media (max-width:700px){#top .ela-land-alternatives{display:grid}}
@media (max-width:360px){#top .ela-land-alternatives{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){#top .ela-land-scene *{animation:none!important;transition:none!important}}

/* Student Adventure only; teacher assignment screens keep their original navigation. */
#top .spark-adventure:has(>[data-ela-navigation-view=bands]),#top .spark-adventure:has(>[data-ela-navigation-view=land]){padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;min-width:0}
#top [data-ela-adventure]:is([data-ela-navigation-view=bands],[data-ela-navigation-view=land],[data-ela-navigation-view=levels],[data-ela-navigation-view=missions]){min-width:0;width:100%;box-sizing:border-box;padding:0;margin:0}
#top .ela-map-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
#top .ela-band-chooser{--ela-band-map:none;position:relative;isolation:isolate;min-width:0;width:100%;height:clamp(460px,calc(100svh - 165px),620px);box-sizing:border-box;border-radius:24px;background:#4e2d83 var(--ela-band-map) center/cover no-repeat;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px 14px;transition:background-image 0s}
#top .ela-band-chooser:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1e0e4620,#1e0e4630 50%,#1e0e4660);pointer-events:none}
#top .ela-band-toolbar{display:flex;justify-content:flex-start;flex:0 0 auto;margin:0 0 4px;z-index:4}
#top .ela-band-chooser>.spark-mission-carousel{background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important;min-height:0!important;flex:1;display:flex;flex-direction:column;overflow:hidden}
#top .ela-band-chooser .mission-carousel-status{margin:2px auto 5px;padding:5px 16px;font-size:15px;flex:0 0 auto}
#top .ela-band-chooser .mission-carousel-row{flex:1;min-height:0;padding:0!important}
#top .ela-band-chooser .mission-carousel-stage{min-height:0!important;padding:4px 0!important;height:100%;display:flex;align-items:center}
#top .ela-band-chooser .ela-band-card{width:min(320px,100%);max-width:320px!important;height:auto;max-height:100%;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;border:3px solid #271c46;border-radius:20px;background:#fff7dc;box-shadow:0 7px 0 #251044,0 10px 22px #12052380;color:#271c46;padding:0!important;margin:0 auto!important;display:block;flex:none}
#top .ela-band-card>h3{position:relative;text-align:center;margin:0;padding:12px 8px;background:#fff2c7;border-bottom:3px solid #271c46;font-size:24px;line-height:1.15;color:#271c46}
#top .ela-band-card>img{display:block;width:100%;height:145px;min-height:0;object-fit:cover;border:0;border-radius:0}
#top .ela-band-card-info{padding:10px 12px 14px;text-align:center}
#top .ela-band-card-info p{margin:0 0 7px;font-weight:800;color:#271c46;line-height:1.25}
#top .ela-band-card-info .ela-band-description{font-size:14px;font-weight:600}
#top .ela-band-card-info button,#top .ela-land-back{min-height:44px!important;box-sizing:border-box;border:2px solid #a6edff!important;border-radius:14px!important;background:linear-gradient(#9953f5,#5b1ac8)!important;box-shadow:0 4px 0 #2b135e,inset 0 2px 0 #d7baff!important;color:white!important;font-weight:900!important;padding:9px 15px!important;line-height:1.2!important;text-align:center}
#top .ela-band-card-info button:hover,#top .ela-land-back:hover{filter:brightness(1.12)}
#top .ela-band-card-info button:focus-visible,#top .ela-land-back:focus-visible,#top .ela-land-grade-label select:focus-visible{outline:3px solid #ffe76b!important;outline-offset:3px}
#top .ela-land-shell{position:relative;width:100%;min-width:0;box-sizing:border-box}
#top .ela-land-toolbar{position:absolute;inset:8px 8px auto;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
#top .ela-land-toolbar>*{pointer-events:auto}
#top .ela-land-grade-label{display:flex;align-items:center;gap:7px;background:#fff2d4f5;color:#271c46;padding:2px 8px;border:2px solid #7145ad;border-radius:12px;font-weight:800;box-sizing:border-box}
#top .ela-land-grade-label select{min-height:44px;max-width:160px;border:0;background:#fff9e9;color:#271c46;font:inherit;margin:0;padding:6px;box-sizing:border-box}
#top .ela-level-context{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
#top .ela-level-context h2{font-size:20px;margin:0;color:#34205d}
#top [data-ela-navigation-view=levels]>.ela-catalog-layout{display:block}
#top [data-ela-navigation-view=levels]>.ela-catalog-layout>.ela-skill-list{width:100%;min-width:0}
#top [data-ela-adventure][hidden],#top [data-ela-adventure] [hidden]{display:none!important}
@media(max-width:700px){#top .ela-land-toolbar{position:relative;inset:auto;margin:0 0 8px;flex-wrap:wrap}#top .ela-land-back{font-size:13px;padding:8px 11px!important}#top .ela-land-grade-label{font-size:14px;flex:1;justify-content:space-between}#top .ela-band-chooser{height:460px;padding:8px}#top .ela-band-chooser .ela-band-card{max-width:260px!important}#top .ela-band-card>img{height:125px}#top .ela-band-card>h3{font-size:21px;padding:9px}#top .ela-band-card-info{padding:8px}#top .ela-band-chooser .mission-carousel-row{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:8px}#top .ela-band-chooser .mission-carousel-stage{order:0;flex:0 0 100%;height:calc(100% - 58px)}#top .ela-band-chooser .mission-carousel-arrow{order:1;min-height:44px;min-width:44px;margin:0 12px}#top .ela-level-context h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){#top .ela-band-chooser{transition:none}}

#top .ela-band-chooser .mission-carousel-stage>.ela-band-card[data-carousel-leaving=true]{left:50%!important;right:auto!important;top:50%!important;translate:-50% -50%;width:min(320px,100%)!important;max-width:320px!important}
@media(max-width:700px){#top .ela-band-chooser .mission-carousel-stage>.ela-band-card[data-carousel-leaving=true]{width:min(260px,100%)!important;max-width:260px!important}}
/* Keep the selected band card inside its stage despite inherited collectible rules. */
#top .ela-band-chooser .mission-carousel-stage>article.ela-band-card{display:block!important;max-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;min-height:0!important}
#top .ela-band-chooser .mission-carousel-stage>article.ela-band-card[hidden]{display:none!important}
@media(max-width:700px){#top .ela-band-chooser{height:480px}#top .ela-band-card>img{height:95px}}
/* Short landscape/zoom viewports retain readable controls with card-only scroll fallback. */
@media(max-height:520px){#top .ela-band-chooser{height:max(300px,calc(100svh - 26px));padding-top:6px;padding-bottom:8px}#top .ela-band-card>img{height:48px}#top .ela-band-card>h3{padding:7px;font-size:21px}#top .ela-band-card-info{padding:7px 10px}#top .ela-band-card-info p{margin-bottom:5px}#top .ela-band-chooser .mission-carousel-status{margin:0 auto 3px;padding:3px 12px}#top .ela-band-toolbar{margin-bottom:1px}}
#top [data-ela-adventure]:is([data-ela-navigation-view=bands],[data-ela-navigation-view=land]){padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
/* In-frame gutter keeps the purple outline inside the inherited clipped Adventure panel. */
#top .ela-land-shell{padding:7px}
#top .ela-land-toolbar{inset:15px 15px auto}
@media(max-width:700px){#top .ela-land-toolbar{inset:auto}}

/* Only Math's category-local skill chooser. Keep readable overflow fallback at zoom/short heights. */
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-skill-chooser-toolbar{justify-content:flex-start!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .mission-carousel-stage>.spark-collectible-card{height:100%!important;max-height:100%!important;overflow-y:auto!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .spark-collectible-card>.math-level-tile{height:100%!important;flex:1 0 auto!important;min-height:220px!important;justify-content:flex-start!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-level-tile>.collectible-art{flex:1 1 120px!important;height:auto!important;min-height:40px!important;max-height:150px!important;aspect-ratio:auto!important;object-fit:cover!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-level-tile>:not(.collectible-art){flex-shrink:0!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-level-tile>.math-level-open{margin-top:auto!important;margin-bottom:8px!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell [hidden]{display:none!important}
/* Remove the former right-alignment auto margin now this is the only toolbar item. */
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .math-skill-chooser-back{margin-left:0!important;margin-inline-start:0!important}

/* Match the source-map scale; menu content must never choose background cover zoom. */
#top .spark-adventure[data-adventure-mode=map]:has(.math-skill-chooser-shell){padding:3px 3px 9px!important}
#top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{border-width:5px!important;padding:5px!important;height:calc(56.2799043cqw + 8.744px)!important;max-height:none!important;background-color:#39215e!important;background-size:100% 100%,100% auto!important;background-position:top center!important;background-repeat:no-repeat!important;background-origin:content-box!important}
#top [data-ela-adventure][data-ela-navigation-view=bands]{container-type:inline-size;width:100%;min-width:0;box-sizing:border-box}
#top .ela-band-chooser{width:calc(100% - 14px)!important;margin:7px!important;border:0!important;outline:5px solid #8253d5;outline-offset:0;padding:5px!important;height:calc(56.2799043cqw - 7.879px)!important;max-height:none!important;background-size:100% auto!important;background-position:top center!important;background-origin:border-box!important;background-repeat:no-repeat!important}
/* Flexible art yields before labels/actions. Overflow stays available for extreme zoom/height. */
#top .ela-band-chooser .mission-carousel-stage>article.ela-band-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important}
#top .ela-band-chooser .ela-band-card>img{flex:1 1 120px!important;min-height:24px!important;max-height:145px!important;height:auto!important;object-fit:cover!important}
#top .ela-band-chooser .ela-band-card>h3,#top .ela-band-chooser .ela-band-card>.ela-band-card-info{flex-shrink:0!important}
#top .ela-band-chooser .ela-band-card>.ela-band-card-info{margin-top:auto}
/* Phone: keep the map at its original width/aspect at top; readable menu extends below,
   rather than enlarging/cropping the map to fill a tall phone card. */
@media (max-width:700px){
 #top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{border-width:3px!important;padding:3px!important;height:min(580px,calc(100svh - 110px))!important;max-height:calc(100svh - 110px)!important}
 #top .ela-band-chooser{border:0!important;outline-width:3px;padding:3px!important;height:480px!important}
}
@media (max-height:500px){
 #top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell{height:max(300px,calc(56.2799043cqw + 8.744px))!important;max-height:none!important}
 #top .ela-band-chooser{height:max(300px,calc(56.2799043cqw - 7.879px))!important}
}
#top .ela-band-chooser .mission-carousel-stage>article.ela-band-card[hidden]{display:none!important}
/* Inline-size containment needs an explicit stretched owner in the phone workspace grid. */
#top #adult-test.spark-adventure:has([data-ela-adventure][data-ela-navigation-view=bands]),
#top [data-ela-adventure][data-ela-navigation-view=bands]{width:100%!important;inline-size:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;justify-self:stretch!important;align-self:stretch!important}
@media (max-width:700px){
 #top .ela-band-chooser .mission-carousel-row{gap:4px!important}
 #top .ela-band-chooser .mission-carousel-stage{height:calc(100% - 52px)!important}
 #top .ela-band-chooser .mission-carousel-arrow{width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important;padding:6px!important;margin:0 12px!important}
}
@media (max-height:500px){
 #top .ela-band-chooser .ela-band-card>h3{padding:6px!important;font-size:20px!important}
 #top .ela-band-chooser .ela-band-card-info{padding:6px!important}
 #top .ela-band-chooser .ela-band-card-info p{font-size:13px!important;line-height:1.2!important;margin-bottom:4px!important}
 #top .ela-band-chooser .ela-band-card-info button{font-size:14px!important;line-height:1.2!important;padding:8px 10px!important}
}
@media (max-height:500px){
 #top .spark-adventure[data-adventure-mode=map] .math-skill-chooser-shell .spark-collectible-card>.math-level-tile{min-height:0!important}
}

/* Only joined student classroom buttons; native children/actions stay in place. */
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card{max-width:240px!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;min-height:min-content!important;max-height:none!important;padding:10px!important;gap:4px!important;align-items:stretch!important;justify-content:flex-start!important;border-radius:20px!important;overflow:visible!important;background:#fff4d8!important;text-align:left!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>.collectible-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:17px!important;object-fit:cover!important;z-index:0!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>:is(.collectible-name-tab,.class-launch-title,.class-launch-count,.class-launch-action){position:relative!important;z-index:1!important;flex:none!important;box-sizing:border-box!important;width:100%!important;max-width:none!important;align-self:stretch!important;margin:0!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:left!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>.collectible-name-tab{width:calc(100% - 36px)!important;padding:4px 6px!important;border:0!important;border-radius:6px!important;font-size:11px!important;line-height:1.25!important;background:#fff4d8f2!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>.class-launch-title{padding:5px 6px!important;border-radius:6px!important;font-size:16px!important;line-height:1.2!important;background:#fff4d8f2!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>.class-launch-count{padding:4px 6px!important;border-radius:6px!important;font-size:12px!important;line-height:1.3!important;background:#fff4d8f2!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>.class-launch-action{margin-top:auto!important;min-height:44px!important;padding:10px!important;font-size:14px!important;line-height:1.25!important;text-align:center!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card>.class-launch-spark{top:8px!important;right:8px!important;width:28px!important;height:28px!important;font-size:18px!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card:disabled{opacity:.55!important;cursor:not-allowed!important}
#top #adult-test .student-class-list button[data-student-class].spark-collectible-card[hidden],#top #adult-test .student-class-list button[data-student-class].spark-collectible-card [hidden]{display:none!important}

/* Only the two student learning entry buttons; no joined-class/lesson styling. */
#top #adult-test .student-class-list button.spark-learning-entry-card{position:relative!important;box-sizing:border-box!important;width:100%!important;max-width:240px!important;aspect-ratio:1/1!important;height:auto!important;min-height:min-content!important;padding:10px!important;border-radius:21px!important;isolation:isolate}
#top #adult-test .student-class-list button.spark-learning-entry-card>.learning-entry-decoration{display:none!important;pointer-events:none!important;user-select:none!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready{background:#03afe4!important;overflow:visible!important;display:flex!important;flex-direction:column!important;gap:6px!important;justify-content:flex-end!important;border:3px solid #67408d!important;box-shadow:0 7px #37204f!important;color:#37204f!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>.learning-entry-decoration{display:block!important;position:absolute!important;z-index:0!important;margin:0!important;border:0!important;padding:0!important;max-width:none!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>.learning-entry-map{left:0!important;top:25%!important;width:100%!important;height:auto!important;object-fit:contain!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>.learning-entry-title{left:3%!important;top:-2%!important;width:94%!important;height:53%!important;object-fit:contain!important;filter:drop-shadow(0 2px 2px #23174777)}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>.learning-entry-goals{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:18px!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>:is(.class-launch-title,.class-launch-kicker,.class-launch-spark){position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>.class-launch-count{position:relative!important;z-index:1!important;flex:none!important;display:block!important;width:100%!important;margin:auto 0 0!important;padding:3px 6px!important;background:#fff6d9ed!important;color:#37204f!important;border-radius:6px!important;font-size:11px!important;font-weight:800!important;line-height:1.3!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.learning-entry-art-ready>.class-launch-action{position:relative!important;z-index:1!important;flex:none!important;display:grid!important;place-items:center!important;width:100%!important;min-height:44px!important;margin:0!important;padding:8px!important;border:2px solid #3c205c!important;border-radius:12px!important;background:linear-gradient(#9764dc,#6027a6)!important;color:white!important;box-shadow:0 3px #321c4d!important;font-size:14px!important;font-weight:900!important;line-height:1.2!important;text-align:center!important}
#top #adult-test .student-class-list button.spark-learning-entry-card:focus-visible{outline:4px solid #14b9d6!important;outline-offset:4px!important}
#top #adult-test .student-class-list button.spark-learning-entry-card:disabled{opacity:.55!important;cursor:not-allowed!important}
#top #adult-test .student-class-list button.spark-learning-entry-card.spark-learning-entry-card[hidden],#top #adult-test .student-class-list button.spark-learning-entry-card.spark-learning-entry-card [hidden]{display:none!important}