.cargo-stage,
.sound-stage {
  width: min(100%, 720px);
  display: grid;
  justify-items: center;
  gap: clamp(.55rem, 1.6vw, 1rem);
  padding: clamp(.7rem, 2.6vw, 1.45rem);
  border: 1px solid #c7b1ff72;
  border-radius: 1.6rem;
  box-shadow: inset 0 1px 0 #fff2, 0 .7rem 1.8rem #12092746;
}

.cargo-stage {
  background: radial-gradient(ellipse at 50% 8%, #6551ac, transparent 70%), #251649;
}
.cargo-dashboard {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.cargo-ship {
  display: grid;
  place-content: center;
  width: clamp(3.25rem, 8vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #a893f345;
  color: #ffe275;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
}
.cargo-ship.is-ready { animation: cargo-launch .62s ease-out both; }
.cargo-gauge {
  min-width: 5rem;
  display: grid;
  gap: .16rem;
  padding: .4rem .75rem;
  border-radius: .8rem;
  background: #2b1c52;
}
.cargo-gauge small { color: #e9ddff; font-weight: 750; }
.cargo-gauge strong {
  color: #ffdf6f;
  font-size: clamp(1.4rem, 4vw, 2.5rem);
  line-height: 1.05;
}
.cargo-single,
.cargo-pair > section {
  display: grid;
  justify-items: center;
  gap: .4rem;
  min-width: 0;
  padding: clamp(.3rem, 1.5vw, .7rem);
  border: 1px solid #ddcaff55;
  background: #33235b;
  border-radius: 1rem;
}
.cargo-pair {
  width: 100%;
  display: grid;
  gap: clamp(.35rem, 1.5vw, .85rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cargo-rack,
.cargo-moons {
  display: grid;
  gap: clamp(.18rem, 1vw, .45rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.cargo-rack:has(> :last-child:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cargo-pair .cargo-rack { width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cargo-slot {
  appearance: none;
  display: grid;
  place-content: center;
  width: clamp(1.65rem, 7vw, 4.2rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1px dashed #c1a8f5;
  border-radius: .58rem;
  background: #271940;
  color: #e4d4ff;
  font-size: clamp(.96rem, 3.8vw, 2.3rem);
  font-weight: 850;
  cursor: pointer;
}
.cargo-pair .cargo-slot { width: 100%; }
.cargo-slot.is-full {
  border-color: #ffd95e;
  border-style: solid;
  background: #5b417e;
  color: #ffdc67;
}
.cargo-slot.is-base {
  border-color: #a6defa;
  color: #a6defa;
}
.cargo-slot.is-new > span { animation: cargo-collect .36s cubic-bezier(.2,.8,.2,1.3) both; }
.cargo-source {
  appearance: none;
  padding: .45rem .85rem;
  border: 1px solid #ffe275;
  border-radius: 999px;
  color: #351d52;
  background: #ffdf76;
  cursor: pointer;
}
.cargo-source > span { font-size: 1.15rem; }
.cargo-sum { margin: 0; color: #f7eaff; font-weight: 850; }
.cargo-moons {
  padding: .6rem;
  border-radius: 1rem;
  background: #27214b;
}
.cargo-moons span {
  width: clamp(1.65rem, 7vw, 4rem);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  color: #bdeaff;
  font-size: clamp(1.3rem, 4.8vw, 3rem);
  animation: cargo-collect .36s ease-out both;
  animation-delay: calc(var(--phase) * 35ms);
}

.sound-stage {
  background: radial-gradient(ellipse at 50% 0%, #a85f98, transparent 75%), #422159;
}
.sound-stage.is-weather {
  background: radial-gradient(ellipse at 50% 0%, #5974a5, transparent 75%), #291e56;
}
.sound-speakers {
  width: min(100%, 480px);
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(.5rem, 3vw, 1.6rem);
}
.sound-speakers > span {
  width: clamp(2.6rem, 10vw, 6.5rem);
  height: clamp(3.6rem, 12vw, 8rem);
  border: .32rem solid #716095;
  border-radius: .8rem;
  background:
    radial-gradient(circle at 50% 31%, #a896bc 0 7%, #554574 8% 17%, #1f1436 18% 22%, transparent 23%),
    radial-gradient(circle at 50% 70%, #8574a0 0 8%, #534370 9% 21%, #201539 22% 26%, transparent 27%),
    #24193e;
}
.sound-center {
  width: clamp(4rem, 17vw, 9.4rem);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  border: 1px solid #fff7;
  background: radial-gradient(circle, #ffbfe4 0, #bd83dd 64%, #7048a9);
  box-shadow: 0 0 1.7rem #ffbfe454;
  font-size: clamp(2.35rem, 8vw, 5.4rem);
}
.sound-center.is-playing { animation: sound-hit .31s ease-out both; }
.sound-beats { width: 100%; display: flex; justify-content: center; gap: clamp(.2rem, 1.25vw, .7rem); }
.studio-beat {
  min-width: 0;
  width: clamp(1.6rem, 8vw, 4.2rem);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: .62rem;
  border: 1px solid #dfbdff8a;
  background: #291c48;
  color: #e8d7ff;
  font-size: clamp(.95rem, 3.4vw, 2.2rem);
  font-weight: 900;
}
.studio-beat.is-recorded { background: #f1d3ff; color: #412068; }
.studio-beat.is-next { outline: 2px dashed #ffe275; outline-offset: 2px; }
.studio-beat.is-lit { background: #ffdf76; color: #4c2754; animation: sound-hit .32s ease-out both; }
.sound-stage.is-ready { box-shadow: inset 0 0 0 2px #ffe275, 0 0 2rem #ffe27540; }

.studio-prompt { text-align: center; margin: 0 auto .9rem; }
.art-studio { max-width: min(900px, 100%); }
.studio-page {
  position: relative;
  padding: 0;
  border: .3rem solid #a783d4;
  border-radius: 1rem;
  background: #fff7e7;
  box-shadow: 0 .8rem 1.5rem #1a102a72;
}
.studio-page canvas {
  border-radius: .7rem;
  cursor: crosshair;
  aspect-ratio: 840 / 340;
}
.studio-cursor {
  position: absolute;
  translate: -50% -50%;
  width: clamp(.85rem, 3vw, 1.85rem);
  aspect-ratio: 1;
  border: 2px dashed #62449c;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff7e7b3;
  pointer-events: none;
}
.studio-model,
.studio-tools,
.studio-actions,
.studio-goals {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  align-items: center;
}
.studio-model #drawing-model { display: flex; align-items: center; gap: .23rem; }
.studio-model #drawing-model span {
  display: grid;
  place-content: center;
  width: clamp(1.3rem, 5vw, 2.65rem);
  aspect-ratio: 1;
  border-radius: .5rem;
  background: #fff7e7;
  color: var(--swatch);
  font-size: clamp(.9rem, 3.3vw, 1.75rem);
  font-weight: 900;
}
.studio-model #drawing-model.is-hidden span { visibility: hidden; }
.studio-model #drawing-model.is-hidden { background: #7e5caa; border-radius: .5rem; }
.studio-tools .actions { justify-content: center; }
.studio-tool span { display: inline-block; min-width: 1em; }
.studio-goals span {
  padding: .32rem .58rem;
  border: 1px solid #bd9eea90;
  border-radius: 999px;
  background: #362552;
  color: #f1e6ff;
  font-size: .85rem;
  font-weight: 700;
}
.studio-goals span.is-done { border-color: #9be6b7; background: #224d45; color: #dbffea; }
.studio-goals span.is-new { animation: cargo-collect .32s ease-out both; }
.studio-goals i { font-style: normal; }
.studio-status { text-align: center; min-height: 1.3rem; margin: 0; color: #ffe275; font-weight: 800; }

@keyframes cargo-collect {
  from { transform: translateY(-.4em) scale(.64); opacity: .6; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cargo-launch {
  0% { transform: scale(.9); }
  55% { transform: translateY(-.2em) scale(1.16); }
  100% { transform: scale(1); }
}
@keyframes sound-hit {
  0% { transform: scale(.88); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (max-width: 500px) {
  .cargo-slot, .studio-beat { border-radius: .44rem; }
  .cargo-pair .cargo-slot { font-size: .85rem; }
  .studio-tools .quiet, .studio-actions .quiet { padding-inline: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cargo-stage *, .sound-stage *, .art-studio * { animation: none !important; }
}

.cargo-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 14% 24%, #dedbff94 0 1px, transparent 2px),
    radial-gradient(circle at 85% 44%, #d1bcffb3 0 1px, transparent 2px),
    radial-gradient(circle at 67% 18%, #dedbff82 0 2px, transparent 3px),
    radial-gradient(circle at 21% 75%, #b396ff87 0 1px, transparent 2px),
    radial-gradient(ellipse at 54% 88%, #57349a 0, transparent 67%),
    #1e174a;
}
.cargo-dashboard { position: relative; z-index: 1; }
.cargo-sky {
  width: min(100%, 525px);
  min-height: clamp(3rem, 7vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: center;
  gap: clamp(.05rem, .8vw, .4rem);
  padding-inline: .25rem;
}
.cargo-sky:has(> :last-child:nth-child(-n+6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cargo-star {
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  min-width: 0;
  aspect-ratio: 1;
  background: transparent;
  color: #ffe18a;
  font-size: clamp(1.35rem, 5vw, 3rem);
  line-height: 1;
  text-shadow: 0 0 .5em #ffc15990;
  touch-action: none;
  cursor: grab;
}
.cargo-star:not(.gone) {
  animation: sky-glow 2.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--phase) * -150ms);
}
.cargo-star:not(.gone):hover,
.cargo-star:not(.gone):focus-visible {
  background: #ffe5b622;
  color: #fff3c7;
}
.cargo-star.gone { color: #ccbfff55; text-shadow: none; cursor: default; }
.cargo-ghost {
  position: fixed;
  z-index: 100;
  translate: -50% -55%;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1;
  color: #ffe18a;
  pointer-events: none;
  text-shadow: 0 0 .35em #ffb058;
}
.cargo-rack { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cargo-slot:not(:disabled):hover { background: #544282; border-color: #fff4bf; }
.cargo-slot.is-base:disabled { opacity: 1; }
.cargo-pair > section { border: 2px solid #b6a5ed55; }
.cargo-pair > .cargo-selected {
  border-color: #ffdd7a;
  box-shadow: 0 0 1rem #ffe2a440;
}
.cargo-robot {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .26rem .6rem;
  border-radius: .6rem;
  background: #655193;
  color: #fff9f3;
  font-weight: 800;
}
.cargo-robot > span { font-size: clamp(1rem, 3vw, 1.6rem); }
.cargo-actions, .sound-transport {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .48rem;
}
.cargo-action, .sound-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .33rem;
  min-height: 2.6rem;
  padding: .32rem .65rem;
  border-radius: .75rem;
  border: 1px solid #e2d0ff8c;
  background: #483476;
  color: #fff9f5;
  font-size: clamp(.82rem, 2.3vw, 1rem);
}
.cargo-action:disabled, .sound-control:disabled, .sound-pad:disabled { opacity: .46; }
.cargo-action:first-child, .sound-control:first-child {
  border-color: #ffe4a2;
  background: #ffe291;
  color: #302145;
}

.sound-stage {
  width: min(100%, 760px);
  background:
    radial-gradient(ellipse at 35% 2%, #c074a485, transparent 57%),
    radial-gradient(ellipse at 77% 0%, #6764ceaa, transparent 63%),
    linear-gradient(170deg, #522b70, #351e53 76%);
}
.sound-stage.is-weather {
  background:
    radial-gradient(ellipse at 70% 12%, #6d9bcc80, transparent 68%),
    repeating-linear-gradient(120deg, #dcf2ff14 0 1px, transparent 1px 58px),
    #2e2757;
}
.sound-speakers { gap: clamp(.75rem, 4.5vw, 2.5rem); }
.sound-speakers > span {
  width: clamp(2.6rem, 10vw, 6.3rem);
  height: clamp(3.3rem, 10vw, 6.6rem);
}
.sound-center { width: clamp(3.5rem, 13vw, 7.4rem); font-size: clamp(1.9rem, 6.6vw, 4.8rem); }
.sound-pads { display: flex; justify-content: center; gap: clamp(.25rem, 1.6vw, .65rem); width: 100%; }
.sound-pad {
  appearance: none;
  width: clamp(4.3rem, 21vw, 9.25rem);
  display: grid;
  gap: .13rem;
  place-items: center;
  padding: .52rem .25rem .58rem;
  border: 1px solid #fff9;
  border-radius: .95rem;
  box-shadow: 0 .23rem 0 #261437aa, inset 0 .12rem .2rem #fff6;
  color: #2f1f48;
  background: #efb8ff;
  touch-action: manipulation;
}
.sound-pad-0 { background: #dfd4f4; }
.sound-pad-1 { background: #ffacbb; }
.sound-pad-2 { background: #9bdcfa; }
.sound-pad > span { font-size: clamp(1.32rem, 4.4vw, 2.65rem); line-height: 1; }
.sound-pad > b { font-size: clamp(.75rem, 2vw, 1.02rem); }
.sound-pad:not(:disabled):active { transform: translateY(.2rem); box-shadow: inset 0 .1rem .25rem #432d5675; }

.studio-mode-switch { display: flex; justify-content: center; gap: .45rem; }
.studio-mode-switch .quiet { padding: .42rem .68rem; }
.studio-mode-switch .quiet[aria-pressed="true"] { outline-color: #ffe17f; }
.studio-inks { min-width: 0; }
.studio-inks .swatch[data-paint="6"] { color: #fff; }
.studio-inks .swatch[data-paint="7"] { color: #271742; }
.studio-materials { margin-inline: auto; }
.ink-flourish {
  position: absolute;
  translate: -50% -50%;
  font-size: clamp(1.2rem, 4vw, 2.7rem);
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.ink-flourish.is-inking { animation: fresh-ink .45s cubic-bezier(.1,.75,.25,1) both; }

@keyframes sky-glow {
  from { text-shadow: 0 0 .35em #ffc15975; }
  to { text-shadow: 0 0 .75em #ffc159dc; }
}
@keyframes fresh-ink {
  0% { transform: scale(.55) rotate(-20deg); opacity: .8; }
  100% { transform: translateY(-.75em) scale(1.3) rotate(25deg); opacity: 0; }
}
@media (max-width: 500px) {
  .cargo-sky {
    width: min(100%, 280px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .cargo-star { min-height: 2.7rem; }
  .cargo-stage, .sound-stage { padding: .58rem; gap: .43rem; }
  .cargo-pair .cargo-rack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cargo-pair .cargo-slot { min-height: 1.4rem; }
  .sound-control { min-height: 2.55rem; }
  .studio-inks .swatch { min-width: 2.55rem; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cargo-star, .ink-flourish { animation: none !important; }
}
.scene-direct .cargo-star[data-star-id] { touch-action: none; }

.moon-cargo-heading {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #ffe6ac;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
}
.moon-cargo-heading > span {
  display: grid;
  width: clamp(2.8rem, 7vw, 4.1rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #baabf8;
  border-radius: 50%;
  background: #4d3d85;
  font-size: 1.8em;
}
.moon-cargo-model {
  display: grid;
  width: min(100%, 390px);
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  padding: .55rem;
  border: 1px solid #b0a8ff70;
  border-radius: 1rem;
  background: #28204f;
}
.moon-cargo-model i,
.moon-cargo-pack i {
  display: grid;
  place-items: center;
  color: #ffdc83;
  font-style: normal;
  font-size: clamp(1.35rem, 5vw, 2.4rem);
  line-height: 1.15;
}
.moon-cargo-model i:nth-child(odd) { transform: translateX(13%); }
.moon-cargo-packs {
  display: flex;
  min-height: 4.4rem;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.moon-cargo-pack {
  display: flex;
  gap: .16rem;
  padding: .42rem;
  border: 1px solid #b0a8ff;
  border-radius: .62rem;
  background: #473c83;
}
.moon-cargo-pack:last-child { animation: cargo-collect .36s cubic-bezier(.2,.8,.2,1.3) both; }
.moon-cargo-empty {
  min-width: 6.5rem;
  border: 1px dashed #aa95e8;
  border-radius: .75rem;
  color: #d1bffa;
  font-size: 2rem;
}

.ten-cargo-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  color: #f4e7ff;
  font-size: clamp(1.45rem, 4.1vw, 2.5rem);
  font-weight: 800;
}
.ten-cargo-equation > span,
.ten-cargo-equation > strong {
  min-width: 2.2rem;
  padding: .12rem .34rem;
  border-radius: .48rem;
}
.ten-cargo-equation small {
  font-size: clamp(.82rem, 2vw, 1rem);
  font-weight: 700;
  color: #f5d995;
}
.ten-cargo-base { background: #b7dcff; color: #223653; }
.ten-cargo-length { background: #ffc96a; color: #432b49; }
.ten-cargo-equation > strong { background: #e4d5ff; color: #382a6b; }
.ten-cargo-row,
.ten-cargo-ruler {
  display: grid;
  width: min(100%, 610px);
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(.05rem, .55vw, .31rem);
}
.ten-cargo-cell,
.ten-cargo-ruler > button {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border-radius: clamp(.24rem, 1vw, .6rem);
  font-size: clamp(.72rem, 3.4vw, 1.65rem);
}
.ten-cargo-cell { border: 1px dashed #beabe7; background: #2b1d57; }
.ten-cargo-cell.fixed { border-color: #92ccfd; background: #5374a8; color: #dcf1ff; }
.ten-cargo-cell.ghost { border-color: #ffcf77; background: #553755; color: #ffce77; }
.ten-cargo-cell.fitted { border-color: #ffcf77; background: #ffca70; color: #4c3555; }
.ten-cargo-ruler > button {
  border: 1px solid #a895da;
  background: #392964;
  color: #fff6e3;
  font-size: clamp(.7rem, 2.7vw, 1.25rem);
  font-weight: 820;
}
.ten-cargo-ruler > button.filled { background: #ffd479; color: #3c294d; border-color: #ffd479; }
.ten-cargo-ruler > button[aria-pressed="true"] { outline: 2px solid #fff9de; outline-offset: 1px; }
.ten-cargo-overflow { color: #ffcbaf; font-weight: 780; }
.cargo-balance {
  display: grid;
  width: min(65%, 250px);
  justify-items: center;
  gap: .12rem;
}
.cargo-balance i {
  width: 100%;
  height: .4rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #9fc8ff, #ffe08d 46% 54%, #9fc8ff);
  transform: rotate(var(--tilt));
  transform-origin: center;
}
.cargo-balance b {
  width: .8rem;
  height: .62rem;
  border-radius: .3rem .3rem .18rem .18rem;
  background: #d1c0f0;
}

.rhythm-lanes {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.1rem);
}
.rhythm-call,
.rhythm-reply {
  display: grid;
  min-width: 0;
  gap: .35rem;
  justify-items: center;
  padding: .42rem;
  color: #f5e6ff;
}
.rhythm-call {
  background: #372757;
  border: 1px solid #c8aafa;
  border-radius: .8rem;
}
.rhythm-rank-3 .rhythm-reply {
  background: #4c396b;
  border: 1px solid #ffcc9b;
  border-radius: .8rem;
}
.rhythm-call b,
.rhythm-reply b { font-size: clamp(.75rem, 2.4vw, .95rem); }
.rhythm-workshop .studio-beat { padding: 0; }
.rhythm-workshop .studio-beat.is-gap { border-style: dashed; border-color: #ffd992; }
.rhythm-workshop .studio-beat.rhythm-needs-fix {
  outline: 2px solid #ffe195;
  outline-offset: 2px;
}
.rhythm-rank-3 .studio-beat { width: clamp(1.5rem, 7vw, 3.65rem); }

@media (max-width: 500px) {
  .moon-cargo-pack { gap: .08rem; padding: .25rem; }
  .ten-cargo-equation { gap: .28rem; }
  .ten-cargo-ruler { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ten-cargo-ruler > button { min-height: 2.65rem; aspect-ratio: auto; }
  .rhythm-call, .rhythm-reply { padding: .28rem; }
}