/* Desktop learning workspace. Existing content and saved layouts remain compatible. */
:root {
  --ink: #263e4b;
  --teal: #237b72;
  --paper: #fffefb;
  --line: #dce5e1;
}
body {
  background: linear-gradient(135deg, #eef6f1 0%, #f8f4e9 48%, #edf1fa 100%);
  color: var(--ink);
}
.layout {
  max-width: 1640px;
  margin: auto;
  grid-template-columns: 220px minmax(0, 1fr);
}
.layout > aside {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding-bottom: 25px;
}
.layout > main {
  min-width: 0;
}
#nav button {
  padding: 10px 13px;
  margin: 3px 0;
  font-size: 14px;
  border-radius: 12px;
}
#nav button.active {
  background: #d7ebe4;
  box-shadow: inset 3px 0 #348975;
}
#content {
  max-width: 1300px;
  margin: auto;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #267eaa;
  outline-offset: 3px;
}
button {
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px #234b4b14;
}
button:active {
  transform: translateY(1px) scale(0.98);
}
button:disabled {
  transform: none;
  box-shadow: none;
}
[hidden] {
  display: none !important;
}
.studio-entry,
.studio-hero,
.discovery-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border: 1px solid #cfe1d8;
  border-radius: 24px;
  background: linear-gradient(120deg, #d9eee4, #f8ecd2);
  margin: 22px 0;
}
.studio-entry h3 {
  margin: 7px 0;
  font-size: 28px;
}
.studio-hero h2,
.discovery-hero h2 {
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.16;
  max-width: 700px;
  margin: 15px 0;
}
.studio-hero p,
.discovery-hero p {
  max-width: 720px;
  line-height: 1.65;
}
.studio-hero-symbol {
  font: 700 64px Georgia;
  color: #457a70;
  white-space: nowrap;
}
.studio-display {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0;
  background: #fff9;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.studio-display small {
  flex-basis: 100%;
  color: #617078;
}
.studio-display button,
.stage-filter button {
  padding: 8px 13px;
  font-size: 13px;
}
button[aria-pressed="true"] {
  background: #d5eae3;
  border-color: #408f78;
  color: #214f46;
}
.stage-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.studio-game-grid,
.studio-unit-grid,
.discovery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.studio-game-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 22px;
  background: #eaf0f7;
  border: 1px solid #d1dce9;
  border-radius: 16px;
  gap: 9px;
}
.studio-game-grid button:nth-child(3n + 2) {
  background: #fbefd8;
  border-color: #edd8b5;
}
.studio-game-grid button:nth-child(3n) {
  background: #eee8f5;
  border-color: #dbd0e8;
}
.studio-game-grid b {
  font-size: 18px;
}
.studio-game-grid small {
  line-height: 1.5;
  font-weight: 400;
}
.studio-unit,
.discovery-cards article {
  padding: 22px;
  text-align: left;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.studio-unit > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6f7c83;
}
.studio-unit h3,
.discovery-cards h3 {
  font-size: 21px;
  margin: 12px 0;
}
.studio-unit p,
.discovery-cards p {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}
.studio-unit small {
  color: #397c6c;
}
.studio-reading {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  margin: 20px 0;
}
.studio-reading > nav {
  background: #edf3f0;
  border-radius: 18px;
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 15px;
}
.studio-reading > nav button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  margin: 5px 0;
  padding: 11px;
  font-size: 14px;
}
.studio-reading > nav button[aria-current="step"] {
  background: #fff;
  box-shadow: 0 3px 10px #29443e14;
  color: #237b65;
}
.studio-lesson {
  padding: 36px !important;
  min-height: 440px;
}
.studio-lesson > p {
  font-size: 19px;
  line-height: 1.9;
  max-width: 75ch;
  margin: 23px 0;
}
.studio-lesson h2 {
  font-size: 32px;
}
.studio-lesson h3 {
  color: #477a6e;
  font-size: 22px;
}
.studio-lesson textarea,
.interactive-studio textarea,
.mock-session textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.7;
  font-size: 17px;
  padding: 15px;
  border: 1px solid #bacfc6;
  border-radius: 12px;
}
.worked-sequence {
  list-style: none;
  counter-reset: step;
  padding: 0;
}
.worked-sequence li {
  counter-increment: step;
  padding: 19px 20px 19px 64px;
  background: #f1f5f2;
  border-radius: 15px;
  margin: 12px 0;
  position: relative;
  font-size: 19px;
  line-height: 1.65;
}
.worked-sequence li:before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 20px;
  background: #397d6d;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 17px;
  line-height: 30px;
}
.word-model,
.math-model {
  background: #edf2f8;
  border: 1px solid #cbd9e7;
  border-radius: 15px;
  padding: 25px;
  line-height: 1.7;
  font-size: 22px;
}
.math-model {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 15px;
}
.geometry-model {
  max-height: 220px;
  width: 100%;
}
.interactive-studio {
  min-height: 390px;
  padding: 30px;
}
.studio-feedback {
  padding: 15px;
  border-radius: 12px;
  min-height: 50px;
  background: #f6ecd6;
}
.number-workbench {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.counter-tray,
.coin-tray {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 100px;
  align-items: center;
  padding: 20px;
  border: 2px dashed #a6beb3;
  border-radius: 18px;
  min-width: 200px;
}
.counter {
  font-size: 36px;
  color: #3b8f70;
  animation: pieceIn 0.2s ease-out;
}
.coin-token {
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  background: radial-gradient(circle at 35% 30%, #f7e8b0, #ccaa59);
  border: 3px double #9a7a36;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
}
.balance-pan {
  padding: 35px;
  background: #e5edf5;
  border-bottom: 7px solid #718da8;
  border-radius: 15px;
  font: 600 38px Georgia;
  min-width: 160px;
  text-align: center;
}
.paint-fraction {
  display: flex;
  max-width: 700px;
  margin: 35px 0;
  height: 105px;
  gap: 3px;
}
.paint-fraction button {
  flex: 1;
  border-radius: 0;
  border: 2px solid #487d70;
  background: white;
}
.paint-fraction button[aria-pressed="true"] {
  background: #e2ad61;
}
.coordinate-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: 430px;
  gap: 3px;
  margin: 25px 0;
  background: #a9beb9;
  padding: 3px;
}
.coordinate-grid button {
  aspect-ratio: 1;
  border-radius: 0;
  font-size: 13px;
  background: #f7faf8;
  padding: 6px;
}
.coordinate-grid .chosen {
  background: #ebc17d;
}
.word-slot {
  min-height: 75px;
  border: 2px dashed #bac7db;
  border-radius: 15px;
  padding: 20px;
  font-size: 25px;
  margin: 20px 0;
  line-height: 1.6;
}
.shape-question {
  max-width: 320px;
  max-height: 220px;
  display: block;
  margin: auto;
}
.pegboard {
  width: 400px;
  height: 400px;
  position: relative;
  background: #e6f0ec;
  border-radius: 20px;
  margin: 20px auto;
}
.pegboard svg,
.pegboard > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pegboard > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.pegboard button {
  background: transparent;
  border: 0;
  font-size: 37px;
  padding: 0;
  box-shadow: none;
  color: #416f60;
}
.mirror-grid {
  display: grid;
  grid-template-columns: repeat(6, 50px);
  gap: 2px;
  margin: 25px;
}
.mirror-grid button {
  height: 50px;
  padding: 0;
  border-radius: 2px;
  background: #f1f6f4;
  border: 1px solid #b7cec4;
  opacity: 1;
}
.mirror-grid .painted {
  background: #7b9bc5;
}
.mirror-grid .mirror-edge {
  border-right: 4px solid #d69848;
}
.angle-board {
  display: block;
  max-width: 440px;
  width: 100%;
  margin: auto;
}
.parent-setup-guide {
  padding: 26px;
  background: linear-gradient(130deg, #e3efe9, #eef0fa);
  border: 1px solid #cbded6;
  border-radius: 22px;
  margin: 20px 0;
}
.parent-setup-guide ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0;
}
.parent-setup-guide li {
  background: #fff9;
  padding: 20px;
  border-radius: 15px;
  line-height: 1.6;
}
.parent-setup-guide b {
  font-size: 20px;
  color: #367766;
}
.parent-grid {
  grid-template-columns: 1fr 1fr;
}
.skill-list {
  max-height: 320px;
  overflow: auto;
}
.mock-parent > .discovery-cards {
  max-height: 620px;
  overflow: auto;
  padding: 5px;
}
.component-palette {
  border: 1px solid #c9dad4;
  border-radius: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px;
}
.component-palette legend {
  font-weight: bold;
  padding: 0 7px;
}
.component-palette button {
  font-size: 13px;
  padding: 10px 13px;
  cursor: grab;
}
.circuit-hands {
  background: #eaf2ee;
  border-radius: 17px;
  padding: 16px;
}
.terminal-board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 20px 0;
}
.terminal-board button {
  font-size: 13px;
}
.terminal-board span {
  font-size: 20px;
  color: #bd8553;
}
.terminal-board .connected {
  color: #278967;
  text-shadow: 0 0 8px #87d5b7;
}
.logic-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #e2eaf5;
  border: 2px solid #8da9c5;
  padding: 25px;
  border-radius: 15px;
  cursor: pointer;
}
.logic-toggle input {
  width: 27px;
  height: 27px;
}
.discovery-hero > div:last-child {
  font-size: 75px;
}
.discovery-hero.space {
  background: linear-gradient(125deg, #243249, #4c5177);
  color: #fff;
}
.discovery-hero.space h2 {
  color: white;
}
.discovery-hero.nature {
  background: linear-gradient(125deg, #d4ead6, #f1efd2);
}
.discovery-hero.roads {
  background: linear-gradient(125deg, #f4dfae, #e7edf2);
}
.discovery-diagram {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 22px;
  border-radius: 18px;
  background: #f0f4f0;
}
.discovery-diagram > span {
  font-size: 70px;
}
.discovery-diagram p {
  font-size: 15px;
  line-height: 1.6;
}
.solar-system {
  background: radial-gradient(ellipse at 20% 20%, #394266, #152332);
  color: #f1f5fc;
  padding: 25px;
  border-radius: 24px;
  margin: 22px 0;
}
.solar-system h3 {
  color: white;
}
.planet-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  align-items: end;
}
.planet-row button {
  color: white;
  background: transparent;
  border: 0;
  padding: 18px 5px;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.planet-row small {
  font-size: 10px;
  color: #b7c5d8;
}
.orb {
  display: block;
  border-radius: 50%;
  width: 43px;
  height: 43px;
  background: radial-gradient(circle at 30% 25%, #dfb484, #52473d);
  box-shadow:
    inset -12px -8px 16px #0008,
    0 0 14px #ffffff12;
}
.orb-sun {
  width: 72px;
  height: 72px;
  background: #efbb59;
  box-shadow: 0 0 30px #e9ad5680;
}
.orb-earth {
  background: radial-gradient(
    ellipse at 30% 35%,
    #79a881 15%,
    #5183b9 35%,
    #6d9e7a 45%,
    #3d679e 65%
  );
}
.orb-mars {
  background: #b96a4d;
}
.orb-jupiter {
  width: 65px;
  height: 65px;
  background: repeating-linear-gradient(
    15deg,
    #c99f7c 0 7px,
    #e0c3a0 8px 14px,
    #98765e 15px 17px
  );
}
.orb-saturn {
  width: 58px;
  height: 58px;
  background: #d0b280;
  position: relative;
}
.orb-saturn:after,
.with-rings:after {
  content: "";
  position: absolute;
  inset: 37% -23%;
  border: 6px solid #c5b197aa;
  border-radius: 50%;
  transform: rotate(-20deg);
}
.orb-uranus {
  background: #8dcbd2;
}
.orb-neptune {
  background: #4f6fb9;
}
.orb-mercury {
  width: 31px;
  height: 31px;
  background: #9b9690;
}
.planet-illustration {
  background: radial-gradient(ellipse at 40% 20%, #3f4a67, #162332);
  height: 270px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #dae0ec;
  margin: 20px 0;
}
.planet-sphere {
  position: relative;
  display: block;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ffffff55, transparent 50%),
    var(--planet);
  box-shadow:
    inset -42px -20px 40px #0009,
    0 0 25px #ffffff15;
}
.power-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 25px 0;
}
.power-meter {
  font-size: 32px;
  padding: 30px;
  background: #e3eee9;
  border-radius: 15px;
  text-align: center;
}
.animal-specimen {
  font-size: 110px;
  text-align: center;
  margin: 25px;
}
.road-scene {
  height: 240px;
  background: linear-gradient(
    #d0e7ed 0 30%,
    #b4c7a4 30% 42%,
    #ddd2b8 42% 52%,
    #56616d 52% 86%,
    #ddd2b8 86%
  );
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  margin: 20px 0;
}
.pedestrian-signal {
  position: absolute;
  left: 15%;
  top: 45px;
  background: #26313a;
  padding: 10px;
  border-radius: 10px;
  font-size: 30px;
}
.pedestrian-signal.red {
  color: #f1766e;
}
.pedestrian-signal.green {
  color: #91e5a7;
}
.zebra-stripes {
  position: absolute;
  width: 100px;
  top: 52%;
  height: 34%;
  left: 55%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 12px,
    #f1eee2 12px 24px
  );
}
.road-car {
  position: absolute;
  left: 5%;
  top: 53%;
  font-size: 60px;
}
.road-car.moving {
  animation: traffic 7s linear infinite;
}
.waiting-person {
  position: absolute;
  left: 57%;
  top: 29%;
  font-size: 40px;
}
.orbit-scene {
  position: relative;
  width: 430px;
  height: 430px;
  background: radial-gradient(#35425c, #132438);
  border-radius: 50%;
  margin: 20px auto;
}
.orbit-sun {
  position: absolute;
  top: 185px;
  left: 185px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f2bc57;
  box-shadow: 0 0 35px #edb05688;
}
.earth-orbit {
  position: absolute;
  inset: 50px;
  border: 1px dashed #8391a655;
  border-radius: 50%;
}
.orbit-earth {
  position: absolute;
  top: 140px;
  left: -20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #5589b6;
}
.orbit-earth i {
  position: absolute;
  inset: -20px;
  border: 1px solid #ffffff22;
  border-radius: 50%;
}
.orbit-earth i:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c9cbd3;
  position: absolute;
  top: 28px;
  left: -6px;
}
.mock-clock {
  font:
    600 40px ui-monospace,
    monospace;
  padding: 25px;
  background: #e5edf5;
  border-radius: 15px;
  margin-bottom: 20px;
}
.mark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 15px;
  margin: 25px 0;
}
.mark-grid input {
  max-width: 95px;
}
.mock-parent a {
  font-size: 14px;
}
.mock-intro li {
  line-height: 1.8;
  margin: 8px 0;
}
body[data-learning-view="plain"] .studio-hero-symbol {
  font-family: Georgia, serif;
}
body[data-learning-view="plain"] .scene,
body[data-learning-view="plain"] .float {
  display: none;
}
body[data-learning-view="plain"] .hero {
  grid-template-columns: 1fr;
}
body[data-learning-view="plain"] .lesson-card .pill {
  letter-spacing: 0.04em;
}
body[data-learning-view="plain"] .picture-clue {
  display: none;
}
@keyframes pieceIn {
  from {
    transform: scale(0.5);
    opacity: 0.3;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes traffic {
  to {
    left: 110%;
  }
}
@media (min-width: 1200px) {
  .layout {
    padding: 25px 35px;
    gap: 30px;
  }
  header {
    max-width: 1640px;
    margin: auto;
  }
  .panel {
    border-radius: 20px;
  }
  .town-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
@media (max-width: 1000px) {
  .studio-reading {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  .planet-row {
    grid-template-columns: repeat(5, 1fr);
  }
  .studio-hero-symbol {
    font-size: 42px;
  }
}
@media (max-width: 760px) {
  .layout {
    min-width: 1040px;
  }
  .studio-reading {
    grid-template-columns: 230px minmax(0, 1fr);
  }
  body:before {
    content: "Desktop learning workspace — best on a computer or large screen";
    display: block;
    padding: 10px;
    background: #e7edf7;
    text-align: center;
    font-size: 13px;
    min-width: 1040px;
  }
  header {
    min-width: 1040px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.city-command {
  background: #f8faf6;
  border: 1px solid #c8d9cb;
  border-radius: 22px;
  padding: 25px;
  margin: 20px 0;
}
.city-command-top {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}
.city-command-top p {
  max-width: 650px;
  line-height: 1.65;
}
.city-command-top h3 {
  font-size: 26px;
  margin: 12px 0;
}
.city-services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 20px 0;
}
.city-services > div {
  background: #e6eee6;
  padding: 15px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.city-services b {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.city-services span {
  font-size: 15px;
}
.city-goals {
  padding: 18px;
  border: 1px solid #d5dfd0;
  border-radius: 14px;
  background: #fff9;
}
.city-goals summary {
  font-weight: 700;
  cursor: pointer;
}
.city-goals > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.city-goals article {
  padding: 15px;
  border-radius: 12px;
  background: #f0f2ed;
  border: 1px dashed #c6cfc0;
}
.city-goals article.met {
  background: #dfede0;
  border: 1px solid #8eaf90;
}
.city-goals p {
  font-size: 13px;
  line-height: 1.6;
}
.city-deluxe .town-layout {
  grid-template-columns: minmax(0, 1fr) 290px;
}
.city-deluxe .town-lawn {
  overflow: auto;
  max-height: 840px;
  background: linear-gradient(25deg, #adc59b, #c0d4a9);
  border: 1px solid #8da781;
  padding: 20px;
  border-radius: 0 0 20px 20px;
}
.city-deluxe .town-grid {
  gap: 4px;
  background: repeating-linear-gradient(
    45deg,
    #ffffff08 0 3px,
    transparent 3px 7px
  );
  padding: 10px;
  box-shadow: inset 0 0 40px #74956d33;
  border-radius: 12px;
}
.city-deluxe .town-cell {
  aspect-ratio: 1;
  min-height: 56px;
  border: 1px solid #89a27c55;
  border-radius: 5px;
  background: #edf5dc14;
  position: relative;
  overflow: visible;
}
.city-deluxe .town-cell.occupied {
  border-color: transparent;
  background: transparent;
}
.city-deluxe .town-cell svg {
  width: 110%;
  height: 110%;
  max-width: none;
  position: relative;
  left: -5%;
  filter: drop-shadow(3px 5px 2px #385f3633);
  transition: transform 0.18s;
}
.city-deluxe .town-cell:hover svg {
  transform: translateY(-5px);
}
.city-deluxe .town-cell.selected {
  outline: 3px solid #fff0ba;
  background: #e2e9b755;
}
.city-deluxe .town-cell.empty span {
  opacity: 0.15;
}
.city-deluxe .town-cell.can-place:hover,
.city-deluxe .placement-preview {
  background: #fff1bd77;
  border: 2px dashed #668961;
}
.city-panorama {
  height: 105px;
  background: linear-gradient(#b8dce5, #deead7);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
.city-panorama svg {
  width: 100%;
  height: 100%;
}
.city-map-key {
  font-size: 12px;
  line-height: 1.7;
  color: #586c60;
  background: #edf3e9;
  padding: 12px;
  border-radius: 10px;
}
.city-evening .town-lawn {
  background: linear-gradient(35deg, #526762, #7e8c70);
}
.city-evening .city-window {
  fill: #ffe49a;
  filter: drop-shadow(0 0 3px #ffe49a);
}
.city-evening .city-panorama {
  filter: brightness(0.6) saturate(0.7);
}
.city-deluxe .city-person {
  z-index: 4;
  filter: drop-shadow(1px 2px 1px #30423455);
}
.city-deluxe .town-shop-card svg {
  filter: drop-shadow(2px 4px 2px #3c594222);
}

.picture-arithmetic {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 650px;
  margin: 25px auto;
  font-size: 34px;
}
.picture-arithmetic .removed {
  opacity: 0.35;
  text-decoration: line-through;
  position: relative;
}
.picture-arithmetic .removed:after {
  content: "×";
  position: absolute;
  inset: 0;
  color: #924f56;
  font-size: 45px;
  text-align: center;
}

/* Keep explanatory text readable alongside decorative headings. */
.studio-game-grid small,
.studio-display small,
.studio-unit small,
.planet-row small {
  letter-spacing: normal;
  font-size: 13px;
  line-height: 1.5;
}
#studioSearch,
#discoverySearch {
  width: 280px;
  max-width: 100%;
}

.city-game-panel {
  background: linear-gradient(120deg, #e6f0ed, #fff3d3);
  border: 1px solid #cadbd2;
  border-radius: 24px;
  padding: 26px;
  margin: 20px 0;
}
.city-game-heading,
.clock-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.city-game-heading h3 {
  font-size: 27px;
  margin: 10px 0;
}
.city-score,
.clock-score {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  min-width: 150px;
  color: #356974;
}
.city-score small,
.clock-score small {
  display: block;
  font-size: 12px;
  letter-spacing: normal;
}
.city-network {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 0;
  color: #3d6870;
}
.city-tools button[aria-pressed="true"],
.clock-tabs button[aria-pressed="true"],
.clock-controls button[aria-pressed="true"] {
  background: #356d78;
  color: white;
}
.city-unlocks summary {
  font-weight: bold;
  cursor: pointer;
  padding: 16px 0;
}
.city-unlock-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.city-unlock-grid article {
  background: #fffcf5;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.city-unlock-grid article > div {
  background: linear-gradient(#d9ebed, #e4eed8);
  border-radius: 14px;
  text-align: center;
}
.city-unlock-grid svg {
  height: 105px;
  width: 120px;
}
.city-unlock-grid h4,
.city-unlock-grid p {
  margin: 0;
}
.city-unlock-grid p {
  font-size: 13px;
  line-height: 1.5;
  flex: 1;
}
.city-unlock-grid small {
  font-size: 12px;
  letter-spacing: normal;
}
.city-unlock-grid progress {
  width: 100%;
  accent-color: #4e9393;
}
.city-road-grid {
  position: relative !important;
  gap: 0 !important;
  padding: 0 !important;
}
.city-road-grid .town-cell {
  border-radius: 0 !important;
}
.city-road-grid .city-road {
  border: 0 !important;
  background: #a8c597 !important;
  padding: 0 !important;
}
.city-road-grid .city-road svg {
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
.city-traffic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.clock-hero {
  background: linear-gradient(115deg, #dcefeb, #fce9d7);
  padding: 28px;
  border-radius: 24px;
  margin: 18px 0;
}
.clock-hero h2 {
  font-size: 36px;
  margin: 10px 0;
}
.clock-hero p {
  max-width: 700px;
}
.clock-layout {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(350px, 1fr);
  gap: 35px;
}
.clock-dial {
  text-align: center;
}
.clock-dial svg {
  width: 100%;
  max-width: 440px;
  touch-action: none;
  user-select: none;
}
.clock-dial [data-clock-hand] {
  cursor: grab;
}
.clock-dial p {
  font-size: 14px;
  color: #55717a;
}
.clock-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clock-controls fieldset {
  border: 1px solid #ccdcd9;
  border-radius: 16px;
  padding: 12px;
}
.clock-controls fieldset button {
  margin: 4px;
}
.clock-controls label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clock-controls input[type="range"] {
  width: 100%;
}
.clock-controls input[type="text"],
#clockAnswer {
  width: 170px;
  font-size: 24px;
}
.clock-digital {
  font:
    bold 48px ui-monospace,
    monospace;
  color: #c2f2d7;
  background: #263f4f;
  padding: 20px;
  border-radius: 18px;
  text-align: center;
}
.clock-guide li {
  margin: 16px 0;
  line-height: 1.7;
}
.clock-success {
  background: #dff1df;
  border-radius: 12px;
  padding: 16px;
  color: #28583d;
}
@media (prefers-reduced-motion: reduce) {
  .city-car {
    animation: none !important;
  }
}

.life-tools {
  padding: 12px;
  border-radius: 14px;
  background: #f5efd9;
}
.life-tools p {
  font-size: 13px;
  flex-basis: 100%;
  margin: 5px;
}
.life-tools button[aria-pressed="true"] {
  background: #335d70;
  color: white;
}
.life-heading {
  display: flex;
  justify-content: space-between;
  gap: 22px;
}
.life-heading h3 {
  font-size: 28px;
}
.life-medals {
  font-size: 32px;
  min-width: 155px;
  text-align: center;
}
.life-medals small {
  display: block;
  font-size: 13px;
  letter-spacing: normal;
}
.city-life-panel summary {
  font-weight: bold;
  cursor: pointer;
  padding: 18px 0;
  font-size: 18px;
}
.life-workers,
.life-workplaces,
.life-task-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.life-workers button[aria-pressed="true"] {
  background: #356d78;
  color: white;
}
.life-workers small,
.life-workplaces small,
.life-task-cards small {
  display: block;
  letter-spacing: normal;
  font-size: 12px;
  margin-top: 6px;
}
.life-task {
  padding: 24px;
  background: #f3eedf;
  border-radius: 18px;
  border: 2px solid #c6dcd2;
  margin: 18px 0;
}
.life-mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.life-mission-grid article {
  background: #f1f5e9;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.life-mission-grid p {
  font-size: 14px;
  line-height: 1.6;
}
.life-mission-grid h4 {
  font-size: 18px;
  margin: 12px 0;
}
.mission-icon {
  font-size: 30px;
}
.life-mission-grid button {
  margin-top: auto;
}
.city-life-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 7;
}
.city-signal-status {
  background: #e3eef0;
  border: 1px solid #bdd5d7;
  border-radius: 18px;
  padding: 18px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.city-signal-status p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.city-signal-status button {
  align-self: flex-start;
}
.city-signal-status[data-phase="walk"] {
  background: #e2f2dd;
}
.worker-badge {
  position: absolute;
  left: 8px;
  top: -14px;
  font-size: 13px;
  white-space: nowrap;
}

.transit-panel{background:linear-gradient(120deg,#f3f6e9,#edf6f5);border:1px solid #c4dcd4}
.transit-hero{display:flex;justify-content:space-between;gap:24px}.transit-hero h3{font-size:30px;margin:12px 0}.transit-hero p{max-width:780px}
.transit-clock{background:#294d5f;color:#e6f6ce;border-radius:18px;padding:20px;font: bold 36px ui-monospace,monospace;text-align:center;align-self:flex-start}
.transit-clock small{display:block;font:13px/1.5 sans-serif;letter-spacing:normal;min-width:150px;margin-top:9px}
.transit-school{padding:18px;background:#fff7df;border-radius:18px;margin:18px 0}.transit-school b{font-size:21px}.transit-school button{margin-right:9px}
.transit-stages button[aria-pressed=true],.transit-tools button[aria-pressed=true]{background:#356e7b;color:white}
.transit-panel summary{font-weight:bold;padding:18px 0;cursor:pointer}
.transit-trip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.transit-trip-grid article{background:white;padding:14px;border-radius:14px;font-size:13px}.transit-trip-grid small{display:block;letter-spacing:normal;margin-top:6px}.transit-trip-grid span{font-weight:bold;color:#3a746b}
.transit-task-grid{display:flex;gap:12px;flex-wrap:wrap}.transit-task-grid small{display:block;font-size:12px;letter-spacing:normal;margin-top:8px}
.city-transit-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
.transit-route-summary{padding:12px;border-left:4px solid #548c80;background:#e3eee2}