/*
 * SCRATCH+.
 *
 * One entry at the foot of the block-category rail, and a view that opens
 * over the workspace. The look is the IDE's own tokens — charcoal, warm
 * neutrals, the one orange — so this reads as a room in the same house,
 * not a website pasted in.
 */

/* ---- the entry, pinned to the foot of the rail ---------------------- */
#workspace-view.xp-shell > .xp-palette-rail { display: flex; flex-direction: column; }
.xp-palette-rail[hidden] { display: none; }
.xp-palette-rail .xp-scratch-plus {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--xp-border);
}
.xp-palette-rail .xp-scratch-plus button {
  background: var(--xp-orange);
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: var(--xp-radius-md);
}
.xp-palette-rail .xp-scratch-plus button:hover,
.xp-palette-rail .xp-scratch-plus button:focus-visible { background: var(--xp-orange-strong); }
.xp-palette-rail .xp-scratch-plus .xp-cat-icon { font-weight: 900; }
/* Locked for a release: the entry stays, says so, and opens nothing. */
.xp-palette-rail .xp-scratch-plus button.is-coming-soon { background: var(--xp-muted, #6b6f76); cursor: default; opacity: 0.85; flex-wrap: wrap; }
.xp-palette-rail .xp-scratch-plus button.is-coming-soon:hover,
.xp-palette-rail .xp-scratch-plus button.is-coming-soon:focus-visible { background: var(--xp-muted, #6b6f76); }
.xp-palette-rail .xp-scratch-plus .xp-coming-soon { display: block; width: 100%; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; }
/* Locked for a guest: the entry keeps its colour and its click (it opens the
   sign-in dialog), and the badge takes a line of its own under the label. */
.xp-palette-rail .xp-scratch-plus button.is-locked { flex-wrap: wrap; }

/* ---- the view ------------------------------------------------------- */
/* In the flow, where the workspace was: the workspace is hidden while
   this shows, and shown again — re-measured — on the way back. */
#scratch-plus-view {
  overflow: auto;
  background: var(--xp-canvas, var(--xp-surface));
  color: var(--xp-text);
  z-index: 5;
}
#scratch-plus-view[hidden] { display: none; }
.sp-wrap { max-width: 1320px; margin: 0 auto; padding: 18px 28px 48px; display: grid; gap: 28px; }
.sp-wrap h1, .sp-wrap h2, .sp-wrap h3 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.sp-wrap h1 { font-size: 26px; }
.sp-wrap h1:focus { outline: none; }
.sp-wrap h2 { font-size: 18px; }
.sp-wrap p { margin: 0; color: var(--xp-muted); line-height: 1.45; max-width: 68ch; }
.sp-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.sp-new { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--xp-orange); color: #fff; font-size: 11px; }
.sp-meta, .sp-card-meta { font-size: 12px; color: var(--xp-muted); }

.sp-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--xp-muted); flex-wrap: wrap; }
.sp-crumb button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 4px 0; }
.sp-crumb button:hover { color: var(--xp-text); text-decoration: underline; }
.sp-crumb .sp-crumb-back { color: var(--xp-orange-strong, var(--xp-orange)); font-weight: 600; }
.sp-crumb strong { color: var(--xp-text); font-weight: 600; }

.sp-primary, .sp-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: var(--xp-radius-md);
  font: inherit; font-weight: 700; cursor: pointer; transition: var(--xp-transition);
}
.sp-primary { background: var(--xp-orange); color: #fff; border: 0; }
.sp-primary:hover, .sp-primary:focus-visible { background: var(--xp-orange-strong); }
.sp-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.sp-ghost { background: transparent; color: var(--xp-text); border: 1px solid var(--xp-border); }
.sp-ghost:hover { background: var(--xp-warm); }

/* ---- THE HOME (implementation spec, September 2026) ------------------ */
/* Tokens as the spec names them, scoped to the view. */
#scratch-plus-view {
  --sp-orange: #FF5A1F; --sp-charcoal: #20242C; --sp-ink: #171A20; --sp-muted: #656B76;
  --sp-canvas: #F7F5F2; --sp-surface: #FFFFFF; --sp-border: #E6E1DC;
  --sp-violet: #7347E8; --sp-teal: #00B7A2; --sp-blue: #1689DA; --sp-gold: #E7A400;
  --sp-shadow: 0 12px 32px rgba(25, 28, 33, 0.08); --sp-shadow-hover: 0 16px 40px rgba(25, 28, 33, 0.12);
  --sp-ease: 180ms ease-out;
  background: var(--sp-canvas); color: var(--sp-ink);
}
/* One column the width of the page, not of its widest child: a row of
   chips that does not wrap would otherwise size the whole page to itself. */
.sp-wrap { max-width: 1520px; padding: 20px 36px 48px; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.sp-wrap > * { min-width: 0; }
.sp-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* hero */
.sp-hero {
  display: grid; grid-template-columns: 42fr 58fr; gap: 20px; align-items: center;
  min-height: 268px; padding: 30px 36px; border-radius: 30px; overflow: hidden; position: relative;
  color: #F4EFE8;
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(255, 90, 31, 0.10), transparent 60%),
    radial-gradient(40% 60% at 20% 100%, rgba(115, 71, 232, 0.12), transparent 60%),
    linear-gradient(135deg, #20242C, #171A20);
}
.sp-hero-copy { max-width: 560px; min-width: 0; }
.sp-hero .sp-eyebrow { display: flex; align-items: center; gap: 12px; color: #FF8654; font-size: 13px; letter-spacing: 0.14em; }
.sp-hero .sp-eyebrow::after { content: ""; width: 40px; height: 2px; background: var(--sp-orange); border-radius: 2px; }
.sp-hero h1 { font-size: 46px; line-height: 50px; margin: 8px 0 10px; letter-spacing: -0.02em; }
.sp-hero-body { color: #CFC8BD; font-size: 17px; line-height: 1.45; max-width: 50ch; }
.sp-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.sp-primary-lg { min-height: 54px; padding: 0 24px; font-size: 17px; border-radius: 14px; gap: 12px; }
.sp-ghost-dark { min-height: 54px; padding: 0 24px; font-size: 17px; border-radius: 14px; color: #F4EFE8; border-color: rgba(255,255,255,0.3); }
.sp-ghost-dark:hover { background: rgba(255,255,255,0.08); }
.sp-hero-art { position: relative; min-height: 240px; height: 100%; }
.sp-hero-block {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px; border-radius: 16px 16px 16px 6px; font-size: 17px; font-weight: 700; color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.3); white-space: nowrap; transform: rotate(-2deg);
}
.sp-hero-block .sp-icon { width: 24px; height: 24px; }
.sp-hero-block-violet { background: var(--sp-violet); }
.sp-hero-block-teal { background: var(--sp-teal); }
.sp-hero-block-1 { left: 22%; top: 8%; }
.sp-hero-block-2 { left: 26%; top: 40%; }
.sp-hero-dash { position: absolute; left: 30%; top: 62%; width: 12%; height: auto; }
.sp-hero-robot {
  position: absolute; left: 40%; bottom: 0; width: 32%; max-width: 260px; aspect-ratio: 3 / 2;
  border-radius: 18px; overflow: hidden; box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}
.sp-hero-robot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.sp-hero-student { position: absolute; right: 9%; bottom: -6px; height: 104%; max-height: 270px; width: auto; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); }
.sp-hero-hand {
  position: absolute; font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 20px; line-height: 1.05; color: #F4EFE8; opacity: 0.9; transform: rotate(-12deg);
}
.sp-hero-hand-1 { left: 2%; top: 42%; }
.sp-hero-hand-2 { right: 0; top: 30%; text-align: center; }

/* filters */
.sp-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-filter-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sp-filter {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--sp-ease);
}
.sp-filter:hover { border-color: rgba(255, 90, 31, 0.4); }
.sp-filter[aria-pressed="true"] { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
.sp-filter:focus-visible { outline: 3px solid var(--sp-orange); outline-offset: 2px; }
.sp-filter-tagline { font-size: 13px; color: var(--sp-muted); }

/* the cards — the reference's anatomy: a tile and a title, a description,
   the status at the foot; the artwork edge to edge on the right, with the
   arrow sitting on it. One target: the whole card. */
.sp-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-tool {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 38%; gap: 12px;
  min-height: 152px; padding: 10px; text-align: left;
  border: 1px solid var(--sp-border); border-radius: 20px; background: var(--sp-surface); color: var(--sp-ink);
  font: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04);
  transition: transform var(--sp-ease), box-shadow var(--sp-ease), border-color var(--sp-ease);
}
.sp-tool:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow-hover); border-color: rgba(255, 90, 31, 0.25); }
.sp-tool:active { transform: translateY(0); box-shadow: var(--sp-shadow); }
.sp-tool:focus-visible { outline: 3px solid var(--sp-orange); outline-offset: 2px; }
.sp-tool.is-disabled { cursor: not-allowed; }
.sp-tool.is-disabled:hover { transform: none; box-shadow: none; border-color: var(--sp-border); }
.sp-tool.is-disabled .sp-tool-visual, .sp-tool.is-disabled .sp-tool-tile { opacity: 0.55; }
.sp-tool-main { display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 8px 4px 6px 8px; min-width: 0; }
.sp-tool-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.sp-tool-tile { width: 52px; height: 52px; flex: none; border-radius: 14px; }
.sp-tool-text { display: grid; gap: 5px; min-width: 0; }
.sp-tool-title { font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tool-blurb { font-size: 13.5px; line-height: 18px; color: var(--sp-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tool-visual { position: relative; border-radius: 16px; overflow: hidden; min-height: 130px; align-self: stretch; }
.sp-tool-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-status {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; height: 28px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: #E6F7EF; color: #0A7A52;
}
.sp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sp-status-beta { background: #FFF4D6; color: #9A6B00; }
.sp-status-soon { background: #EEECEA; color: var(--sp-muted); }
.sp-status-locked { background: #FFE9E0; color: #B54A00; }
.sp-status-on { background: #EEF2FF; color: #3B4CCA; }
.sp-tool-arrow {
  position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-ink);
  box-shadow: 0 4px 12px rgba(25, 28, 33, 0.12); transition: var(--sp-ease);
}
.sp-tool:hover .sp-tool-arrow { border-color: var(--sp-orange); color: var(--sp-orange); }

/* more tools */
.sp-more-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sp-more-head h2 { font-size: 22px; line-height: 28px; }
.sp-more-rule { width: 32px; height: 1px; background: var(--sp-border); }
.sp-more-head p { font-size: 13px; }
.sp-tool-compact { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; min-height: 92px; padding: 12px 14px 12px 16px; gap: 14px; }
.sp-tool-compact .sp-tool-tile { width: 52px; height: 52px; }
.sp-tool-compact .sp-tool-text { gap: 8px; }
.sp-tool-compact .sp-tool-title { font-size: 17px; line-height: 22px; }
.sp-tool-compact .sp-status { justify-self: start; }
.sp-tool-visual-small { width: 108px; height: 64px; min-height: 0; border-radius: 12px; }
.sp-tool-compact .sp-tool-arrow { position: static; box-shadow: none; }
.sp-empty { grid-column: 1 / -1; padding: 24px; text-align: center; border: 1px dashed var(--sp-border); border-radius: 14px; }

@media (max-width: 1279px) {
  .sp-hero { padding: 28px; }
  .sp-hero h1 { font-size: 38px; line-height: 42px; }
  .sp-hero-block { font-size: 14px; padding: 10px 14px; }
  .sp-hero-hand { display: none; }
  .sp-hero-block-1 { left: 4%; }
  .sp-hero-block-2 { left: 8%; }
}
@media (max-width: 1179px) {
  /* Three columns are allowed down to 1024 only while a card keeps 300px
     and its title two lines; below 1180 the text column loses that, so
     two columns, which the spec permits. */
  .sp-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sp-hero { grid-template-columns: 1fr 1fr; }
  .sp-hero-student { max-height: 220px; }
}
@media (max-width: 767px) {
  .sp-wrap { padding: 16px 20px 40px; }
  .sp-tool-grid { grid-template-columns: 1fr; }
  .sp-hero { grid-template-columns: 1fr; padding: 24px; }
  .sp-hero h1 { font-size: 32px; line-height: 36px; }
  /* Narrow: the art flows instead of floating — the blocks in a column,
     the robot under them, the learner beside, reduced but whole. */
  .sp-hero-art {
    min-height: 0; height: auto; display: grid; gap: 10px 14px; align-items: end;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b1 student" "b2 student" "robot student";
  }
  .sp-hero-block { position: static; width: fit-content; max-width: 100%; white-space: normal; transform: none; }
  .sp-hero-hand, .sp-hero-dash { display: none; }
  .sp-hero-block-1 { grid-area: b1; }
  .sp-hero-block-2 { grid-area: b2; margin-left: 20px; }
  .sp-hero-robot { position: static; grid-area: robot; width: 100%; max-width: 260px; }
  .sp-hero-student { position: static; grid-area: student; max-height: 200px; height: auto; align-self: end; }
  .sp-filters { display: block; }
  .sp-filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .sp-filter { flex: none; }
  .sp-filter-tagline { display: none; }
}
@media (max-width: 479px) {
  .sp-wrap { padding: 12px 16px 32px; }
  .sp-hero { padding: 20px; border-radius: 22px; }
  .sp-hero h1 { font-size: 28px; line-height: 32px; }
  .sp-hero-block { font-size: 13px; padding: 9px 12px; }
  .sp-hero-block-2 { margin-left: 12px; }
  .sp-hero-robot { max-width: 220px; }
  .sp-hero-student { max-height: 160px; }
  .sp-wrap, .sp-hero, .sp-hero-copy { min-width: 0; }
  .sp-tool { grid-template-columns: 1fr; }
  .sp-tool-visual { min-height: 110px; }
  .sp-tool-compact { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sp-tool-visual-small { display: none; }
}
[data-motion="reduced"] .sp-tool, [data-motion="reduced"] .sp-filter { transition: none; }
[data-motion="reduced"] .sp-tool:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .sp-tool:hover { transform: none; } }

/* ---- the pages behind the home keep their own grid ------------------- */
.sp-section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.sp-grid { display: grid; gap: 14px; }
.sp-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-story-card, .sp-select-card {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 16px; border: 1px solid var(--xp-border); border-radius: 14px;
  background: var(--xp-surface); color: var(--xp-text); font: inherit; cursor: pointer;
  transition: var(--xp-transition);
}
.sp-story-card:hover, .sp-select-card:hover { border-color: var(--xp-orange); transform: translateY(-1px); }
.sp-story-card:focus-visible, .sp-select-card:focus-visible { outline: 3px solid var(--xp-orange); outline-offset: 2px; }
.sp-story-body { display: grid; gap: 4px; flex: 1; min-width: 0; }
.sp-card-title { font-weight: 700; font-size: 15px; }
.sp-card-blurb { font-size: 13px; color: var(--xp-muted); line-height: 1.4; }
.sp-card-arrow { color: var(--xp-muted); align-self: center; }
.sp-card-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #fff; background: #6c757d;
}
.sp-tint-orange { background: var(--xp-orange); }
.sp-tint-purple { background: #6c5ce7; }
.sp-tint-blue { background: #0984e3; }
.sp-tint-green { background: #00a878; }
.sp-tint-teal { background: #0aa5a5; }
.sp-tint-red { background: #d63031; }
.sp-tint-yellow, .sp-tint-gold { background: #c99700; }
.sp-tint-pink { background: #d6337a; }
.sp-tint-slate { background: #4b5563; }

/* story studio */
.sp-sub-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.sp-sub-header h1 { margin-bottom: 6px; }
.sp-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-search { flex: 1 1 260px; min-height: 40px; padding: 0 14px; border: 1px solid var(--xp-border); border-radius: var(--xp-radius-md); font: inherit; background: var(--xp-surface); color: var(--xp-text); }
.sp-pill { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--xp-border); background: var(--xp-surface); color: var(--xp-text); font: inherit; font-weight: 600; cursor: pointer; }
.sp-pill[aria-pressed="true"] { background: var(--xp-text); color: var(--xp-surface); border-color: var(--xp-text); }
.sp-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr); gap: 24px; align-items: center;
  padding: 24px 28px; border-radius: 18px; background: var(--xp-warm); border: 1px solid var(--xp-border);
}
.sp-feature h2 { font-size: 24px; margin: 4px 0 8px; }
.sp-feature .sp-primary { margin-top: 14px; }
.sp-feature-art { position: relative; min-height: 180px; border-radius: 14px; background: #23272d; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.sp-feature-art span { position: absolute; top: 14px; left: 16px; color: #f4efe8; font-weight: 900; letter-spacing: 0.06em; font-size: 12px; opacity: 0.7; }
.sp-feature-art img { height: 150px; }
.sp-story-thumb { flex: none; width: 92px; height: 68px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 11px; letter-spacing: 0.06em; padding: 4px; text-align: center; }
.sp-story-thumb-environment { background: #00a878; }
.sp-story-thumb-community { background: #0984e3; }
.sp-story-thumb-culture { background: #b5651d; }
.sp-story-thumb-adventure { background: #6c5ce7; }
.sp-story-thumb-greeting { background: #FF5A1F; }
.sp-story-thumb-music { background: #7347E8; }
.sp-story-thumb-sport { background: #0A9A5B; }
.sp-story-thumb-story { background: #b5651d; }
.sp-empty { grid-column: 1 / -1; padding: 24px; text-align: center; border: 1px dashed var(--xp-border); border-radius: 14px; }
.sp-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr); gap: 28px; }
.sp-detail h2 { margin: 18px 0 8px; font-size: 16px; }
.sp-detail h2:first-child { margin-top: 0; }
.sp-scenes { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.sp-note { margin: 14px 0 16px; font-size: 13px; }
.sp-detail-side { padding: 18px; border: 1px solid var(--xp-border); border-radius: 14px; background: var(--xp-surface); }
.sp-detail-side h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--xp-muted); margin: 0 0 8px; }
.sp-detail-side h3 + ul + h3 { margin-top: 16px; }
.sp-cast { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-cast li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sp-cast img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--xp-warm); }

/* setup pages */
.sp-setup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.sp-setup-main { display: grid; gap: 22px; }
.sp-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; font-size: 13px; color: var(--xp-muted); }
.sp-stepper li { display: flex; align-items: center; gap: 8px; }
.sp-stepper b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--xp-warm); font-size: 12px; }
.sp-stepper li[aria-current] { color: var(--xp-text); font-weight: 700; }
.sp-stepper li[aria-current] b { background: var(--xp-orange); color: #fff; }
.sp-form-section { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--xp-border); border-radius: 14px; background: var(--xp-surface); }
.sp-form-section > p { font-size: 13px; }
.sp-select-card { align-items: center; }
.sp-select-card > span:nth-child(2) { display: grid; flex: 1; }
.sp-select-card > span:nth-child(2) > span { font-size: 12px; color: var(--xp-muted); }
.sp-select-card[aria-pressed="true"] { border-color: var(--xp-orange); box-shadow: inset 0 0 0 1px var(--xp-orange); }
.sp-check { color: var(--xp-orange); font-weight: 900; }
.sp-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-choice-wrap { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sp-choice { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--xp-border); border-radius: 12px; background: var(--xp-surface); color: var(--xp-text); font: inherit; cursor: pointer; }
.sp-choice span { font-size: 12px; color: var(--xp-muted); }
.sp-choice[aria-pressed="true"] { border-color: var(--xp-orange); box-shadow: inset 0 0 0 1px var(--xp-orange); }
.sp-switch-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid var(--xp-border); }
.sp-switch-row:first-of-type { border-top: 0; }
.sp-switch-row > span { display: grid; gap: 2px; }
.sp-switch-row > span > span { font-size: 12px; color: var(--xp-muted); }
.sp-toggle { flex: none; width: 44px; height: 26px; border-radius: 999px; border: 0; background: #c9c3ba; position: relative; cursor: pointer; }
.sp-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: var(--xp-transition); }
.sp-toggle[aria-checked="true"] { background: var(--xp-orange); }
.sp-toggle[aria-checked="true"]::after { left: 21px; }
.sp-range { display: grid; gap: 6px; font-size: 13px; padding-top: 8px; }
.sp-range input { accent-color: var(--xp-orange); }
.sp-rules { margin: 4px 0 0; padding-left: 20px; font-size: 13px; color: var(--xp-muted); display: grid; gap: 4px; }
.sp-radios { display: grid; gap: 6px; }
.sp-radio { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 6px 0; }
.sp-radio input { accent-color: var(--xp-orange); width: 18px; height: 18px; }
.sp-summary { position: sticky; top: 12px; display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: #23272d; color: #f4efe8; }
.sp-summary h2 { font-size: 15px; }
.sp-summary dl { margin: 0; display: grid; gap: 8px; }
.sp-summary dl div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 13px; }
.sp-summary dt { color: #a9a196; }
.sp-summary dd { margin: 0; }
.sp-summary p { color: #cfc8bd; font-size: 12px; }
.sp-summary .sp-adds strong { color: #f4efe8; }
.sp-locked-note { padding: 10px 14px; border-radius: 10px; background: var(--xp-warm); border: 1px solid var(--xp-border); font-weight: 600; color: var(--xp-text); }

/* accessibility preferences, honoured here and in the shell */
[data-contrast="high"] { --xp-border: #000; --xp-muted: #222; }
[data-contrast="high"] .sp-card, [data-contrast="high"] .sp-choice, [data-contrast="high"] .sp-form-section { border-width: 2px; }
[data-large-text="true"] body, [data-large-text="true"] .sp-wrap { font-size: 17px; }
[data-motion="reduced"] * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sp-card:hover, .sp-story-card:hover { transform: none; } }

/* the caption bar under the stage */
.xp-caption-bar {
  margin: 6px 0 0; padding: 8px 12px; border-radius: 8px;
  background: #23272d; color: #f4efe8; font-size: 15px; line-height: 1.35; min-height: 36px;
}
.xp-caption-bar[hidden] { display: none; }
.xp-caption-bar small { display: block; color: #a9a196; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

/* the box an "ask and wait" block opens under the stage */
.xp-stage-ask { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px 8px; border: 1.5px solid #4C97FF; border-radius: 8px; background: #fff; }
.xp-stage-ask[hidden] { display: none; }
.xp-stage-ask-question { flex: 0 1 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #444; }
.xp-stage-ask-question:empty { display: none; }
.xp-stage-ask input { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid #c9ced4; border-radius: 6px; font: inherit; }
.xp-stage-ask-go { flex: 0 0 auto; padding: 6px 12px; border: 0; border-radius: 6px; background: #4C97FF; color: #fff; font: inherit; cursor: pointer; }
.xp-stage-ask-go:focus-visible, .xp-stage-ask input:focus-visible { outline: 2px solid #171A20; outline-offset: 1px; }

@media (max-width: 1100px) {
  .sp-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-setup { grid-template-columns: 1fr; }
  .sp-summary { position: static; }
  .sp-hero, .sp-feature, .sp-detail { grid-template-columns: 1fr; }
  .sp-hero-art { min-height: 150px; }
}
@media (max-width: 700px) {
  .sp-wrap { padding: 14px 16px 40px; }
  .sp-grid-four, .sp-grid-three, .sp-grid-two, .sp-choice-row { grid-template-columns: 1fr; }
}

/* ---- the docks under the canvas ------------------------------------ */
/* The canvas gives up the dock's height; both sit in the canvas's cell. */
#workspace-view.xp-shell { --stage-dock-height: 0px; }
#workspace-view.xp-shell > #blockly-canvas { grid-row: 1; height: calc(100% - var(--stage-dock-height, 0px)); }
#workspace-view.xp-shell > #stage-docks {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  height: var(--stage-dock-height, 240px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--xp-surface);
  border-top: 1px solid var(--xp-border);
  z-index: 3;
  position: relative;
}
#workspace-view.xp-shell > #stage-docks[hidden] { display: none; }
#workspace-view.xp-workspace[data-view="simulator-focus"] #stage-docks { display: none; }
.dock-grip {
  position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: row-resize; z-index: 4;
}
.dock-grip:hover, .dock-grip:focus-visible, #stage-docks[data-dragging] .dock-grip { background: var(--xp-orange); opacity: 0.6; outline: none; }
.dock-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 0; border-bottom: 1px solid var(--xp-border); }
.dock-bar [role="tab"] {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; font: inherit; font-weight: 600;
  color: var(--xp-muted); cursor: pointer;
}
.dock-bar [role="tab"][aria-selected="true"] { color: var(--xp-text); border-bottom-color: var(--xp-orange); }
.dock-bar-space { flex: 1; }
.dock-close { background: none; border: 0; font: inherit; color: var(--xp-muted); cursor: pointer; padding: 4px 8px; }
.dock-close:hover { color: var(--xp-text); }
.dock-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 10px 10px; display: grid; gap: 6px; align-content: start; font-size: 13px; }
.dock-empty { margin: 0; padding: 18px; text-align: center; color: var(--xp-muted); }
.dock-note { margin: 0; color: var(--xp-muted); font-size: 12px; }
.dock-btn { min-height: 28px; padding: 0 10px; border: 1px solid var(--xp-border); border-radius: 6px; background: var(--xp-surface); color: var(--xp-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dock-btn:hover { background: var(--xp-warm); }
.dock-btn-primary { background: var(--xp-orange); border-color: var(--xp-orange); color: #fff; }
.dock-btn-primary:hover { background: var(--xp-orange-strong); }
.tl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.tl-toolbar select, .tl-head select { font: inherit; font-size: 12px; min-height: 26px; border: 1px solid var(--xp-border); border-radius: 6px; background: var(--xp-surface); color: var(--xp-text); max-width: 120px; }
.tl-sprite { font-weight: 700; }
.tl-meta { color: var(--xp-muted); font-size: 12px; }
.tl-ruler, .tl-cells { --cells: 16; display: grid; grid-template-columns: repeat(var(--cells, 16), minmax(28px, 1fr)); gap: 2px; min-width: 0; }
.tl-ruler { margin-left: 150px; font-size: 10px; color: var(--xp-muted); }
.tl-ruler span { border-left: 1px solid var(--xp-border); padding-left: 3px; min-height: 12px; }
.tl-row { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; }
.tl-head { display: grid; gap: 3px; }
.tl-head strong { font-size: 12px; }
.tl-cell, .tl-clip { height: 30px; border-radius: 5px; border: 1px dashed var(--xp-border); background: transparent; cursor: pointer; padding: 0; }
.tl-cell:hover { background: var(--xp-warm); border-style: solid; }
.tl-clip { --span: 1; grid-column: span var(--span, 1); border: 0; color: #fff; font: inherit; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.tl-clip-costume { background: #6c5ce7; }
.tl-clip-sound { background: #d6337a; }
.tl-clip-scene { background: #0aa5a5; }
.tl-clip:hover { opacity: 0.85; }
.dbg-list { display: grid; gap: 8px; }
.dbg-sprite { border: 1px solid var(--xp-border); border-radius: 8px; padding: 8px 10px; }
.dbg-sprite.is-watched { border-color: var(--xp-orange); }
.dbg-sprite header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dbg-time { color: var(--xp-muted); font-size: 12px; flex: 1; }
.dbg-cols { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; }
.dbg-cols h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--xp-muted); }
.dbg-now { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dbg-none { margin: 0; color: var(--xp-muted); }
.dbg-cols dl { margin: 0; display: grid; gap: 2px; }
.dbg-cols dl div { display: flex; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dbg-cols dt { color: var(--xp-muted); }
.dbg-cols dd { margin: 0; }
.dbg-cols ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 12px; }
.dbg-cols ol span { color: var(--xp-muted); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* ---- what the AI sees, in the corner of the stage --------------------- */
.stage-view { position: relative; }
.xp-stage-camera {
  position: absolute; top: 10px; right: 10px; width: 132px; z-index: 4;
  display: flex; flex-direction: column-reverse; gap: 4px;
  padding: 4px; border-radius: 10px; background: rgba(35, 39, 45, 0.92); color: #f4efe8;
}
.xp-stage-camera[hidden] { display: none; }
.xp-stage-camera video { width: 100%; border-radius: 6px; display: block; background: #000; }
.xp-stage-camera-readout { margin: 0; font-size: 11px; line-height: 1.3; padding: 0 2px; }

/* ---- THE PAGES BEHIND THE CARDS: one shell ----------------------------- */
.sp-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sp-page-head-main { display: grid; gap: 6px; min-width: 0; }
.sp-page-title { font-size: 44px; line-height: 48px; letter-spacing: -0.02em; margin: 6px 0 0; }
.sp-page-subtitle { font-size: 17px; color: var(--sp-muted); }
.sp-page-tagline { font-family: "Bradley Hand", "Segoe Script", "Comic Sans MS", "Chalkboard SE", cursive; font-size: 22px; line-height: 1.1; color: var(--sp-ink); transform: rotate(-6deg); text-align: center; padding: 10px 6px 0; border-bottom: 3px solid var(--sp-orange); border-radius: 0 0 50% 50% / 0 0 8px 8px; }
.sp-page-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sp-page { display: grid; gap: 18px; align-items: start; }
.sp-panel { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 20px; padding: 20px; min-width: 0; box-shadow: 0 2px 8px rgba(25, 28, 33, 0.04); }
.sp-panel-plain h2.sp-panel-title, .sp-panel-plain h1.sp-panel-title { font-size: 28px; line-height: 32px; margin: 0; }
.sp-panel-plain h1.sp-panel-title:focus { outline: none; }
.sp-panel-blurb { margin: 4px 0 16px; color: var(--sp-muted); font-size: 15px; }
.sp-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sp-panel-head h2 { font-size: 20px; line-height: 24px; }
.sp-panel-head p { font-size: 13px; color: var(--sp-muted); margin-top: 2px; }
.sp-panel-head-extra { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.sp-tile { flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; }
.sp-tile .sp-icon { width: 24px; height: 24px; }
.sp-tile-sm { width: 44px; height: 44px; border-radius: 12px; }
.sp-tile-orange { background: #FFE9E0; color: var(--sp-orange); }
.sp-tile-violet { background: #F0EBFF; color: var(--sp-violet); }
.sp-tile-pink { background: #FFE6F1; color: #D6337A; }
.sp-tile-blue { background: #E6F2FC; color: var(--sp-blue); }
.sp-tile-teal { background: #E0F7F3; color: var(--sp-teal); }
.sp-tile-green { background: #E6F7EF; color: #0A7A52; }
.sp-tile-gold { background: #FFF4D6; color: var(--sp-gold); }
.sp-side-nav { display: grid; gap: 8px; align-content: start; }
.sp-side-tab { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 1px solid var(--sp-border); border-radius: 14px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; }
.sp-side-tab span { flex: 1; }
.sp-side-tab .sp-icon:last-child { color: var(--sp-muted); }
.sp-side-tab[aria-current="page"] { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
.sp-side-tab[aria-current="page"] .sp-icon { color: #fff; }
.sp-side-tab:focus-visible, .sp-profile:focus-visible, .sp-toggle:focus-visible, .sp-select:focus-visible, .sp-slider:focus-visible { outline: 3px solid var(--sp-orange); outline-offset: 2px; }
.sp-control-list { display: grid; gap: 10px; }
.sp-control-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--sp-border); border-radius: 14px; }
.sp-control-text { display: grid; gap: 2px; min-width: 0; }
.sp-control-text strong { font-size: 16px; }
.sp-control-text span { font-size: 13px; color: var(--sp-muted); }
.sp-control-input { display: flex; align-items: center; gap: 10px; }
.sp-switch-wrap { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sp-muted); }
.sp-toggle { width: 52px; height: 30px; }
.sp-toggle::after { width: 24px; height: 24px; }
.sp-toggle[aria-checked="true"] { background: var(--sp-blue); }
.sp-toggle[aria-checked="true"]::after { left: 25px; }
.sp-select { min-height: 42px; padding: 0 36px 0 14px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 15px; font-weight: 600; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171A20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.sp-slider-wrap { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sp-muted); }
.sp-slider-wrap b { color: var(--sp-ink); font-size: 16px; min-width: 48px; text-align: center; }
.sp-slider { width: 140px; accent-color: var(--sp-blue); }
.sp-keys { margin: 18px 0 0; display: grid; gap: 8px; }
.sp-keys div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 14px; }
.sp-keys dt { color: var(--sp-muted); }
.sp-keys dd { margin: 0; }
.sp-preview-box { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--sp-canvas); }
.sp-tool-preview { cursor: default; }
.sp-tool-preview:hover { transform: none; box-shadow: none; }
.sp-preview-block { position: static; transform: none; width: fit-content; }
.sp-preview-block + .sp-preview-block { margin-left: 24px; }
.sp-profiles .sp-more-head { margin-bottom: 14px; }
.sp-profile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sp-profile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--sp-border); border-radius: 16px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; text-align: left; cursor: pointer; }
.sp-profile-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sp-profile-text strong { font-size: 16px; }
.sp-profile-text span { font-size: 13px; color: var(--sp-muted); }
.sp-radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sp-border); flex: none; }
.sp-profile[aria-checked="true"] { border-color: var(--sp-blue); background: #F4F9FE; box-shadow: inset 0 0 0 1px var(--sp-blue); }
.sp-profile[aria-checked="true"] .sp-radio-dot { border-color: var(--sp-blue); background: radial-gradient(circle, var(--sp-blue) 45%, transparent 50%); }
.sp-footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-radius: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); }
.sp-footer-note { display: inline-flex; align-items: center; gap: 10px; color: var(--sp-muted); font-size: 14px; }
.sp-footer-note .sp-icon { color: var(--sp-blue); }
.sp-footer-actions { display: flex; gap: 12px; }
.sp-footer-actions .sp-primary, .sp-footer-actions .sp-ghost { gap: 10px; }
.sp-page-a11y { grid-template-columns: 250px minmax(0, 1fr) 440px; }
@media (max-width: 1279px) { .sp-page-a11y { grid-template-columns: 240px minmax(0, 1fr); } .sp-page-a11y > aside { grid-column: 1 / -1; } .sp-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sp-page-a11y { grid-template-columns: 1fr; } .sp-side-nav { grid-template-columns: repeat(2, 1fr); } .sp-profile-grid { grid-template-columns: 1fr; } .sp-control-row { grid-template-columns: auto minmax(0, 1fr); } .sp-control-input { grid-column: 2; } .sp-page-tagline { display: none; } }

/* the preferences, honoured across the IDE */
[data-text-size="large"] body { font-size: 17px; }
[data-text-size="small"] body { font-size: 13px; }
[data-focus-indicators="true"] :focus-visible { outline: 3px solid var(--sp-orange, #FF5A1F) !important; outline-offset: 2px; }
[data-reduce-transparency="true"] .sp-hero, [data-reduce-transparency="true"] .xp-stage-camera { backdrop-filter: none; }
[data-colour-distinction="enhanced"] .sp-status-ready { background: #0A7A52; color: #fff; }
[data-colour-distinction="enhanced"] .sp-status-beta { background: #9A6B00; color: #fff; }

/* ---- Sounds & Costumes ---------------------------------------------- */
.sp-page-media { grid-template-columns: 300px minmax(0, 1fr) 430px; }
.sp-inline-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sp-muted); }
.sp-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sp-canvas); margin-bottom: 12px; }
.sp-segment [role="tab"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--sp-ink); font: inherit; font-weight: 700; cursor: pointer; }
.sp-segment [role="tab"][aria-selected="true"] { background: var(--sp-orange); color: #fff; }
.sp-search-row { margin-bottom: 12px; }
.sp-search-row .sp-search { width: 100%; box-sizing: border-box; }
.sp-folders { list-style: none; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--sp-border); display: grid; gap: 4px; }
.sp-folder { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--sp-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.sp-folder .sp-icon { color: var(--sp-muted); }
.sp-folder:hover { background: var(--sp-canvas); }
.sp-folder[aria-current="true"] { background: #FFE9E0; color: var(--sp-ink); }
.sp-folder[aria-current="true"] .sp-icon { color: var(--sp-orange); }
.sp-media-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; max-height: 420px; overflow: auto; }
.sp-media-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--sp-ink); font: inherit; cursor: pointer; text-align: left; }
.sp-media-item:hover { background: var(--sp-canvas); }
.sp-media-item:focus-visible { outline: 3px solid var(--sp-orange); outline-offset: -2px; }
.sp-media-glyph { color: #D6337A; display: grid; place-items: center; width: 28px; }
.sp-media-thumb { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: var(--sp-canvas); }
.sp-media-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-media-meta { font-size: 13px; color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-media-more { font-size: 12px; font-weight: 700; color: var(--sp-orange); min-width: 24px; text-align: right; }
.sp-media-none { padding: 14px; color: var(--sp-muted); font-size: 14px; }
.sp-primary-wide { width: 100%; justify-content: center; gap: 10px; min-height: 50px; font-size: 16px; }
.sp-media-centre, .sp-media-right { display: grid; gap: 18px; align-content: start; min-width: 0; }
/* The Stage's own sound panel, mounted here: the editor first, the clips under it with their own heading. */
.sp-sounds-host { display: grid; gap: 14px; }
.sp-sounds-host .xp-sound-editor-host { order: 0; }
.sp-sounds-host .xp-thumbs { order: 2; }
.sp-sounds-host .xp-thumbs::before { content: "Sound clips"; grid-column: 1 / -1; font-size: 18px; font-weight: 700; color: var(--sp-ink); padding-top: 8px; border-top: 1px solid var(--sp-border); }
.sp-sounds-host .xp-media-bar { order: 1; padding-top: 4px; }
.sp-sounds-host .xp-media-tools { order: 3; }
.sp-sounds-host .xp-sound-wave { height: 200px; border-radius: 14px; background: #F3EEFF; border-color: #E6DEFF; }
.sp-sounds-host .xp-sound-editor { gap: 12px; }
/* The Stage's costume panel, taken apart into the mockup's places: its
   buttons above, its thumbnails down the left, its name and tools below. */
.sp-costume-editor { display: grid; grid-template-columns: 104px minmax(0, 1fr) 150px; grid-template-areas: "bar bar bar" "thumbs preview actions" "tools tools tools"; gap: 12px; align-items: start; }
.sp-costumes-host { display: contents; }
.sp-costumes-host .xp-media-bar { grid-area: bar; }
.sp-costumes-host .xp-thumbs { grid-area: thumbs; display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 300px; overflow: auto; }
.sp-costumes-host .xp-media-tools { grid-area: tools; }
.sp-costume-preview { grid-area: preview; }
.sp-costume-actions { grid-area: actions; }
.sp-costume-preview { min-height: 300px; border-radius: 14px; border: 1px solid var(--sp-border); background-image: linear-gradient(45deg, #EEECEA 25%, transparent 25%), linear-gradient(-45deg, #EEECEA 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EEECEA 75%), linear-gradient(-45deg, transparent 75%, #EEECEA 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; display: grid; place-items: center; overflow: hidden; }
.sp-costume-preview img { max-width: 92%; max-height: 300px; object-fit: contain; }
.sp-costume-actions { display: grid; gap: 8px; }
.sp-costume-actions .sp-ghost { justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 14px; font-size: 14px; }
.sp-palette-row { margin: 14px 0; }
.sp-palette-label { display: block; font-weight: 700; margin-bottom: 8px; }
.sp-palette { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-swatch { --swatch: var(--sp-canvas); width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--sp-border); background: var(--swatch); cursor: pointer; }
.sp-swatch:first-child { border-color: var(--sp-orange); box-shadow: 0 0 0 2px #fff inset; }
.sp-asset-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-asset-count { display: inline-flex; align-items: center; gap: 10px; padding: 16px; border-radius: 14px; font-size: 16px; }
.sp-asset-count b { font-size: 22px; }
.sp-asset-count-pink { background: #FFE6F1; color: #B5265F; }
.sp-asset-count-violet { background: #F0EBFF; color: #4C2AB8; }
@media (max-width: 1279px) { .sp-page-media { grid-template-columns: 260px minmax(0, 1fr); } .sp-media-right { grid-column: 1 / -1; } }
@media (max-width: 767px) { .sp-page-media { grid-template-columns: 1fr; } .sp-costume-editor { grid-template-columns: 1fr; } }

/* ---- Multilingual Dialogue ------------------------------------------ */
.sp-page-dialogue { grid-template-columns: 380px minmax(0, 1fr) 360px; }
.sp-panel-title-md { font-size: 24px; line-height: 28px; margin: 0; }
.sp-panel-blurb.sp-tight { margin-bottom: 0; }
.sp-panel-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sp-icon-buttons { display: flex; gap: 8px; }
.sp-icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-ink); display: grid; place-items: center; cursor: pointer; }
.sp-icon-btn[aria-pressed="true"] { background: #FFE9E0; border-color: var(--sp-orange); color: var(--sp-orange); }
.sp-line-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 14px; }
.sp-line-form .sp-search { grid-column: 1 / -1; }
.sp-line-form .sp-search { min-height: 44px; }
.sp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 620px; overflow: auto; }
.sp-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; border: 1px solid var(--sp-border); border-radius: 16px; padding: 6px; }
.sp-line.is-selected { border-color: var(--sp-orange); background: #FFF6F1; }
.sp-line-pick { display: grid; grid-template-columns: auto 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; border: 0; background: transparent; color: var(--sp-ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.sp-line-n { font-size: 14px; color: var(--sp-muted); font-weight: 700; }
.sp-line-avatar { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--sp-canvas); }
.sp-line-text { display: grid; gap: 3px; min-width: 0; }
.sp-line-text strong { font-size: 15px; }
.sp-line-text span { font-size: 14px; color: var(--sp-muted); }
.sp-line-tools { display: grid; gap: 2px; }
.sp-mini { width: 28px; height: 26px; border: 1px solid var(--sp-border); border-radius: 8px; background: var(--sp-surface); color: var(--sp-muted); font: inherit; font-size: 13px; cursor: pointer; }
.sp-mini-danger:hover { color: #B00020; border-color: #B00020; }
.sp-dialogue-centre { display: grid; gap: 18px; min-width: 0; }
.sp-scene { position: relative; border-radius: 16px; overflow: hidden; background: #111; aspect-ratio: 4 / 3; max-height: 520px; }
.sp-scene-phone { aspect-ratio: 9 / 16; max-width: 300px; max-height: 520px; margin: 0 auto; }
.sp-scene-stage { position: absolute; inset: 0; }
.sp-scene-stage canvas { width: 100%; height: 100%; }
.sp-scene-caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; max-width: 88%; padding: 8px 14px; border-radius: 10px; text-align: center; line-height: 1.3; }
.sp-scene-caption[data-style="dark"], .xp-caption-bar[data-style="dark"] { background: rgba(23, 26, 32, var(--caption-opacity, 0.7)); color: #fff; }
.sp-scene-caption[data-style="light"], .xp-caption-bar[data-style="light"] { background: rgba(255, 255, 255, var(--caption-opacity, 0.7)); color: #171A20; }
.sp-scene-caption[data-style="yellow"], .xp-caption-bar[data-style="yellow"] { background: rgba(23, 26, 32, var(--caption-opacity, 0.7)); color: #FFD84D; }
.sp-scene-caption[data-style="outline"], .xp-caption-bar[data-style="outline"] { background: transparent; color: #fff; -webkit-text-stroke: 0.6px #171A20; text-shadow: 0 1px 2px #171A20; }
.sp-table-scroll { overflow-x: auto; }
.sp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--sp-border); color: var(--sp-ink); background: var(--sp-canvas); font-weight: 700; }
.sp-table td { padding: 6px 8px; border-bottom: 1px solid var(--sp-border); vertical-align: middle; }
.sp-table tr.is-selected td { background: #FFF6F1; }
.sp-cell { width: 100%; box-sizing: border-box; min-width: 140px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--sp-ink); }
.sp-cell:hover { border-color: var(--sp-border); }
.sp-cell:focus { border-color: var(--sp-orange); outline: none; background: var(--sp-surface); }
.sp-cell:focus-visible { box-shadow: 0 0 0 2px var(--sp-orange); }
.sp-check-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E6F7EF; color: #0A7A52; }
.sp-check-dot.is-off { background: #EEECEA; }
.sp-check-dot .sp-icon { width: 14px; height: 14px; }
.sp-lang-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.sp-lang-chips .sp-palette-label { margin: 0 6px 0 0; }
.sp-field-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sp-field-col { display: grid; gap: 6px; flex: 1; min-width: 0; font-weight: 700; }
.sp-field-col > span:first-child { font-size: 14px; }
.sp-field-inline { display: flex; gap: 8px; align-items: center; }
.sp-field-inline .sp-select { flex: 1; min-width: 0; }
.sp-record-note { margin: 8px 0 0; font-size: 13px; color: var(--sp-muted); }
/* A voice for each character: who they are, who they sound like, which voice reads them. */
.sp-voices { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 10px; }
.sp-voices-note { margin: 0 0 4px; }
.sp-voices .sp-voice-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "avatar name" "avatar kind" "avatar voice";
  gap: 6px 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  background: var(--sp-canvas);
}
.sp-voice-avatar { grid-area: avatar; width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--sp-surface); align-self: start; }
.sp-voice-name { grid-area: name; font-weight: 800; }
.sp-voice-field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sp-muted); min-width: 0; }
.sp-voice-field:nth-of-type(1) { grid-area: kind; }
.sp-voice-field:nth-of-type(2) { grid-area: voice; }
.sp-voice-field .sp-select { font-size: 13px; width: 100%; min-width: 0; }
/* A grid, not a flex row: a long voice name cannot push the select past the panel's edge. */
.sp-voice-field .sp-field-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.sp-voice-hint { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--sp-canvas); border: 1px dashed var(--sp-border); }
.sp-primary.is-recording { background: #B00020; }
.sp-divider { height: 1px; background: var(--sp-border); margin: 16px 0; }
.sp-caption-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 14px; }
.sp-caption-style { height: 48px; border-radius: 12px; border: 2px solid var(--sp-border); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; }
.sp-caption-style[data-style="dark"] { background: #171A20; color: #fff; }
.sp-caption-style[data-style="light"] { background: #fff; color: #171A20; }
.sp-caption-style[data-style="yellow"] { background: #171A20; color: #FFD84D; }
.sp-caption-style[data-style="outline"] { background: #fff; color: var(--sp-blue); -webkit-text-stroke: 0.5px var(--sp-blue); }
.sp-caption-style[aria-pressed="true"] { border-color: var(--sp-orange); box-shadow: 0 0 0 2px #fff inset; }
.sp-page-dialogue .sp-range { padding-top: 0; margin-bottom: 10px; }
.sp-page-dialogue .sp-radio { margin-bottom: 14px; }
@media (max-width: 1279px) { .sp-page-dialogue { grid-template-columns: 320px minmax(0, 1fr); } .sp-page-dialogue > section:last-child { grid-column: 1 / -1; } }
@media (max-width: 767px) { .sp-page-dialogue { grid-template-columns: 1fr; } .sp-line-form { grid-template-columns: 1fr; } }

/* ---- AI Models ------------------------------------------------------- */
.sp-page-ai { grid-template-columns: 400px minmax(0, 1fr) 400px; }
.sp-model-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-model { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px; border: 1px solid var(--sp-border); border-radius: 16px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; text-align: left; cursor: pointer; }
.sp-model[aria-pressed="true"] { border-color: var(--sp-violet); background: #F6F3FF; box-shadow: inset 0 0 0 1px var(--sp-violet); }
.sp-model-thumb { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; background: var(--sp-canvas); display: grid; place-items: center; color: var(--sp-violet); }
.sp-model-text { display: grid; gap: 4px; min-width: 0; }
.sp-model-text strong { font-size: 17px; }
.sp-model-text > span:not(.sp-status) { font-size: 13px; color: var(--sp-muted); }
.sp-model-text .sp-status { justify-self: start; }
.sp-model-arrow { position: static; box-shadow: none; }
.sp-ai-centre, .sp-ai-right { display: grid; gap: 18px; align-content: start; min-width: 0; }
.sp-segment-inline { grid-template-columns: auto auto; margin: 0; }
.sp-segment-inline [aria-pressed="true"] { background: var(--sp-violet); color: #fff; }
.sp-ai-view { position: relative; border-radius: 16px; overflow: hidden; background: #111; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.sp-ai-video { position: absolute; inset: 0; display: grid; place-items: center; }
.sp-ai-video video, .sp-ai-video .sp-ai-still { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-ai-view-note { position: relative; margin: 0; padding: 0 24px; text-align: center; color: #CFC8BD; font-size: 15px; }
.sp-ai-chip { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 8px; background: var(--sp-blue); color: #fff; font-weight: 700; font-size: 15px; }
.sp-ai-chip.is-sure { background: #0A7A52; }
.sp-ai-view-actions { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.sp-primary-danger { background: #B00020; }
.sp-icon-btn-light { background: #fff; }
.sp-bars { display: grid; gap: 10px; }
.sp-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; align-items: center; gap: 12px; font-size: 14px; }
.sp-bar { height: 12px; border-radius: 999px; background: var(--sp-canvas); overflow: hidden; }
.sp-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 200ms ease-out; }
.sp-bar-0 { background: var(--sp-blue); } .sp-bar-1 { background: #0A7A52; } .sp-bar-2 { background: var(--sp-gold); } .sp-bar-3 { background: var(--sp-violet); }
.sp-bar-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sp-event-form { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--sp-canvas); }
.sp-event-form label { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 15px; }
.sp-event-form .sp-search { min-height: 42px; }
.sp-page-ai .sp-primary-wide { margin-top: 12px; }
.sp-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-stat { display: grid; gap: 4px; padding: 14px 10px; border-radius: 14px; text-align: center; font-size: 13px; }
.sp-stat b { font-size: 24px; }
.sp-stat-teal { background: #E0F7F3; color: #0A6B62; }
.sp-stat-violet { background: #F0EBFF; color: #4C2AB8; }
.sp-stat-gold { background: #FFF4D6; color: #8A5A00; }
.sp-ghost-violet { background: #F0EBFF; border-color: #F0EBFF; color: #4C2AB8; }
@media (max-width: 1279px) { .sp-page-ai { grid-template-columns: 320px minmax(0, 1fr); } .sp-ai-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .sp-page-ai { grid-template-columns: 1fr; } .sp-ai-right { grid-template-columns: 1fr; } }

/* ---- Xplore Bot Sensors ---------------------------------------------- */
.sp-page-robot { grid-template-columns: 320px minmax(0, 1fr) 340px; }
.sp-robot-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; border-radius: 16px; display: block; }
.sp-conn { display: inline-flex; align-items: center; gap: 10px; margin: 14px auto 8px; padding: 0 18px; height: 44px; border-radius: 999px; background: #EEECEA; color: var(--sp-muted); font-weight: 700; justify-content: center; width: fit-content; }
.sp-conn.is-on { background: #E6F7EF; color: #0A7A52; }
.sp-battery { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 15px; }
.sp-battery-bar { flex: 1; height: 10px; border-radius: 999px; background: var(--sp-canvas); overflow: hidden; }
.sp-battery-bar span { display: block; height: 100%; background: #0A7A52; }
.sp-conn-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.sp-conn-buttons .sp-ghost { gap: 10px; }
.sp-ghost-blue { border-color: var(--sp-blue); color: var(--sp-blue); }
.sp-ghost-danger { border-color: #B00020; color: #B00020; gap: 10px; }
.sp-robot-centre, .sp-robot-right { display: grid; gap: 18px; align-content: start; min-width: 0; }
.sp-live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sp-muted); }
.sp-live.is-on { color: #0A7A52; }
.sp-sensor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sp-sensor { border-radius: 16px; padding: 14px; min-height: 240px; display: grid; align-content: start; gap: 12px; }
.sp-sensor-orange { background: #FFF1E8; } .sp-sensor-green { background: #E6F7EF; } .sp-sensor-violet { background: #F0EBFF; } .sp-sensor-blue { background: #E6F2FC; }
.sp-sensor-head { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.sp-sensor-none { margin: 0; font-size: 13px; color: var(--sp-muted); }
.sp-gauge { --pct: 0; width: 150px; aspect-ratio: 1; margin: 6px auto 0; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(from 225deg, var(--sp-orange) calc(var(--pct) * 270deg), #F3D9CB calc(var(--pct) * 270deg) 270deg, transparent 270deg); position: relative; }
.sp-gauge::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.sp-gauge b, .sp-gauge span { position: relative; }
.sp-gauge b { font-size: 34px; line-height: 1; }
.sp-gauge span { font-size: 13px; color: var(--sp-muted); }
.sp-gauge-blue { background: conic-gradient(from 225deg, var(--sp-blue) calc(var(--pct) * 270deg), #D4E6F7 calc(var(--pct) * 270deg) 270deg, transparent 270deg); }
.sp-gauge-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--sp-muted); padding: 0 12px; }
.sp-line-dots { display: flex; justify-content: space-between; gap: 6px; }
.sp-line-dot { width: 34px; height: 34px; border-radius: 50%; background: #C9CFCB; display: grid; place-items: center; color: #fff; font-size: 12px; }
.sp-line-dot.is-on { background: #0A7A52; }
.sp-line-dot.is-unknown { opacity: 0.5; }
.sp-road { height: 120px; border-radius: 12px; background: #2A2E33; position: relative; overflow: hidden; }
.sp-road span { position: absolute; bottom: 0; width: 34px; height: 100%; background: #F4F1EC; }
.sp-road span:first-child { left: 26%; transform: skewX(-8deg); } .sp-road span:last-child { right: 26%; transform: skewX(8deg); }
.sp-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-robot-button { display: grid; justify-items: center; gap: 8px; }
.sp-robot-button-cap { width: 56px; height: 56px; border-radius: 50%; background: #C9CFCB; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15); display: grid; place-items: center; font-weight: 800; color: #fff; }
.sp-robot-button.is-pressed .sp-robot-button-cap { background: var(--sp-orange); }
.sp-robot-button-state { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--sp-muted); }
.sp-motion-dir { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--sp-blue); font-weight: 700; }
.sp-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--sp-muted); margin-bottom: 8px; }
.sp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.sp-chart { width: 100%; height: auto; display: block; border-radius: 12px; background: var(--sp-surface); }
.sp-event-form-robot label { grid-template-columns: 90px minmax(0, 1fr); }
.sp-num { width: 90px; min-height: 42px; }
.sp-run-event { min-height: 64px; font-size: 17px; background: #F6F3FF; border-color: #F6F3FF; color: var(--sp-violet); gap: 12px; }
.sp-warn { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFF4D6; color: #8A5A00; font-size: 14px; }
@media (max-width: 1279px) { .sp-page-robot { grid-template-columns: 300px minmax(0, 1fr); } .sp-robot-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .sp-sensor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sp-page-robot { grid-template-columns: 1fr; } .sp-robot-right { grid-template-columns: 1fr; } .sp-sensor-grid { grid-template-columns: 1fr; } }

/* ---- African Story Studio ------------------------------------------- */
.sp-page-story { grid-template-columns: 400px minmax(0, 1fr) 380px; }
.sp-segment-three { grid-template-columns: 1fr 1fr 1fr; }
.sp-asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-height: 480px; overflow: auto; margin-bottom: 14px; }
.sp-asset { position: relative; display: grid; gap: 8px; padding: 8px; border: 2px solid var(--sp-border); border-radius: 16px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; }
.sp-asset img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--sp-canvas); }
.sp-asset.is-picked { border-color: var(--sp-orange); background: #FFF6F1; }
.sp-asset-tick { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--sp-orange); color: #fff; display: grid; place-items: center; }
.sp-asset-tick .sp-icon { width: 12px; height: 12px; }
.sp-story-centre, .sp-story-right { display: grid; gap: 18px; align-content: start; min-width: 0; }
.sp-panel-head-tight { margin-bottom: 0; }
.sp-icon-btn-play { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
.sp-icon-gap { width: 8px; }
.sp-scene-story { aspect-ratio: 4 / 3; max-height: 500px; margin-bottom: 14px; }
.sp-scene-strip { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 12px; overflow-x: auto; }
.sp-scene-card { position: relative; flex: none; width: 200px; }
.sp-scene-pick { display: grid; gap: 6px; width: 100%; padding: 6px; border: 2px solid var(--sp-border); border-radius: 14px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; cursor: pointer; text-align: left; }
.sp-scene-card.is-current .sp-scene-pick { border-color: var(--sp-orange); }
.sp-scene-pick img, .sp-scene-blank { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--sp-canvas); display: grid; place-items: center; color: var(--sp-muted); font-size: 13px; }
.sp-scene-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14px; padding: 0 4px 2px; }
.sp-scene-name small { font-weight: 500; color: var(--sp-muted); }
.sp-scene-remove { position: absolute; top: 8px; right: 8px; }
.sp-scene-add .sp-scene-pick { border-style: dashed; align-content: center; justify-items: center; min-height: 140px; color: var(--sp-muted); }
.sp-beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-beat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; border: 1px solid var(--sp-border); border-radius: 12px; padding: 4px 6px 4px 4px; }
.sp-beat.is-selected { border-color: var(--sp-orange); background: #FFF6F1; }
.sp-beat-pick { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; border: 0; background: transparent; color: var(--sp-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; padding: 4px; min-width: 0; }
.sp-beat-pick img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--sp-canvas); }
.sp-beat-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-settings { display: grid; gap: 12px; margin-bottom: 14px; }
.sp-setting { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.sp-setting-top { align-items: start; }
.sp-setting-field { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px; border: 1px solid var(--sp-border); border-radius: 14px; min-width: 0; }
.sp-setting-field img { width: 38px; height: 38px; object-fit: contain; border-radius: 8px; background: var(--sp-canvas); flex: none; }
.sp-setting-field .sp-icon { color: var(--sp-muted); margin-left: 6px; flex: none; }
.sp-setting-field .sp-select { flex: 1; min-width: 0; border: 0; padding-left: 6px; }
.sp-setting-text { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 10px; }
.sp-textarea { width: 100%; box-sizing: border-box; border: 0; font: inherit; font-weight: 500; font-size: 15px; resize: vertical; min-height: 64px; color: var(--sp-ink); background: transparent; }
.sp-textarea:focus { outline: none; }
/* The frame round the text is what shows where the typing goes. */
.sp-setting-field:focus-within { border-color: var(--sp-orange); box-shadow: 0 0 0 2px var(--sp-orange); }
.sp-setting-text small { align-self: flex-end; color: var(--sp-muted); font-weight: 500; }
.sp-panel-idea { background: #F6F3FF; border-color: #EAE3FF; }
.sp-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sp-idea { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #EAE3FF; border-radius: 14px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.sp-idea-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--sp-violet); }
.sp-idea .sp-icon { color: var(--sp-muted); }
@media (max-width: 1279px) { .sp-page-story { grid-template-columns: 300px minmax(0, 1fr); } .sp-story-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .sp-asset-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .sp-page-story { grid-template-columns: 1fr; } .sp-story-right { grid-template-columns: 1fr; } }

/* ---- Animation Timeline ---------------------------------------------- */
.sp-page-timeline { grid-template-columns: 380px minmax(0, 1fr) 340px; }
.sp-asset-audio { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: #E0F7F3; color: var(--sp-teal); }
.sp-tl-time { font-variant-numeric: tabular-nums; color: var(--sp-muted); font-weight: 600; }
.sp-scene-tl { aspect-ratio: 16 / 9; max-height: 420px; margin-bottom: 12px; }
.sp-tl-transport { display: flex; gap: 8px; align-items: center; }
.sp-clip-id { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sp-clip-id div { display: grid; }
.sp-clip-id strong { font-size: 18px; }
.sp-clip-id span { font-size: 13px; color: var(--sp-muted); }
.sp-clip-fields { display: grid; gap: 10px; margin-bottom: 12px; }
.sp-clip-fields label { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.sp-clip-fields .sp-search, .sp-clip-fields .sp-num { min-height: 42px; }
.sp-page-timeline .sp-ghost-danger { margin-top: 8px; }
.sp-tl-panel { margin-top: 0; }
.sp-tl-who { font-size: 14px; font-weight: 600; color: var(--sp-muted); margin-left: 8px; }
.sp-tl-scroll { overflow-x: auto; padding-bottom: 6px; }
.sp-tl-grid { --cells: 16; --zoom: 44px; display: grid; gap: 8px; min-width: max-content; }
.sp-tl-head-row, .sp-tl-row { display: grid; grid-template-columns: 170px auto; gap: 10px; align-items: center; }
.sp-tl-ruler { position: relative; display: grid; grid-template-columns: repeat(var(--cells, 16), var(--zoom, 44px)); gap: 2px; height: 26px; }
.sp-tl-tick { border: 0; border-left: 1px solid var(--sp-border); background: transparent; color: var(--sp-muted); font: inherit; font-size: 11px; text-align: left; padding: 0 3px; cursor: pointer; }
.sp-tl-tick.is-head { color: var(--sp-orange); font-weight: 700; }
.sp-tl-playhead { --at: 0; position: absolute; top: -26px; bottom: -220px; left: calc(var(--at) * (var(--zoom, 44px) + 2px)); width: 2px; background: var(--sp-orange); pointer-events: none; z-index: 2; }
.sp-tl-playhead b { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 6px; background: var(--sp-orange); color: #fff; font-size: 11px; white-space: nowrap; }
.sp-tl-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; height: 48px; padding: 0 8px; border: 1px solid var(--sp-border); border-radius: 12px; }
.sp-tl-cells { display: grid; grid-template-columns: repeat(var(--cells, 16), var(--zoom, 44px)); gap: 2px; height: 48px; }
.sp-tl-empty { border: 1px dashed var(--sp-border); border-radius: 8px; background: transparent; cursor: pointer; }
.sp-tl-empty:hover { background: var(--sp-canvas); border-style: solid; }
.sp-tl-clip { grid-column: span var(--span, 1); display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 2px solid transparent; border-radius: 10px; color: #fff; font: inherit; font-size: 13px; font-weight: 700; overflow: hidden; white-space: nowrap; cursor: pointer; text-align: left; }
.sp-tl-clip img { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,0.35); flex: none; }
.sp-tl-clip .sp-icon { flex: none; }
.sp-tl-clip span { overflow: hidden; text-overflow: ellipsis; }
.sp-tl-clip-costume { background: #A78BFA; } .sp-tl-clip-say { background: #7FB8EA; color: #0B3A63; } .sp-tl-clip-sound { background: #7FDBCB; color: #08423A; } .sp-tl-clip-scene { background: #F6D08A; color: #5B3B00; }
.sp-tl-clip.is-selected { border-color: var(--sp-orange); }
@media (max-width: 1279px) { .sp-page-timeline { grid-template-columns: 300px minmax(0, 1fr); } .sp-page-timeline > section:last-child { grid-column: 1 / -1; } }
@media (max-width: 767px) { .sp-page-timeline { grid-template-columns: 1fr; } }

/* ---- Live Debugging -------------------------------------------------- */
.sp-page-debug { grid-template-columns: 420px minmax(0, 1fr) 380px; }
.sp-pill-state { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 42px; border-radius: 999px; background: #EEECEA; color: var(--sp-muted); font-weight: 700; }
.sp-pill-state.is-ok { background: #E6F7EF; color: #0A7A52; } .sp-pill-state.is-warn { background: #FFF4D6; color: #8A5A00; } .sp-pill-state.is-run { background: #E6F7EF; color: #0A7A52; }
.sp-flow-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; max-height: 560px; overflow: auto; }
.sp-flow-line { --depth: 0; position: relative; display: flex; align-items: center; gap: 8px; margin-left: calc(var(--depth, 0) * 18px); padding: 10px 14px; border-radius: 12px; background: #7347E8; color: #fff; font-size: 14px; font-weight: 600; }
.sp-flow-line.is-hat { background: var(--sp-gold); color: #3B2A00; border-radius: 16px 16px 12px 12px; margin-top: 8px; }
.sp-flow-line.is-current { outline: 3px solid var(--sp-orange); outline-offset: 2px; background: var(--sp-orange); color: #fff; }
.sp-flow-now { position: absolute; left: -30px; width: 24px; height: 24px; border-radius: 50%; background: var(--sp-orange); color: #fff; display: grid; place-items: center; }
.sp-flow-now .sp-icon { width: 14px; height: 14px; }
.sp-flow-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.sp-flow-controls .sp-primary, .sp-flow-controls .sp-ghost { justify-content: center; gap: 8px; padding: 0 10px; }
.sp-btn-run { background: #0A9A5B; }
.sp-btn-pause { background: #FFF4D6; border-color: #FFF4D6; color: #8A5A00; }
.sp-speed-row { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.sp-speed-row .sp-segment { flex: 1; margin: 0; }
.sp-segment-quiet [role="tab"], .sp-segment-quiet button { min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--sp-muted); font: inherit; font-weight: 700; cursor: pointer; }
.sp-segment-quiet button[aria-selected="true"] { background: var(--sp-surface); color: var(--sp-orange); box-shadow: inset 0 0 0 2px var(--sp-orange); }
.sp-debug-centre, .sp-debug-right { display: grid; gap: 18px; align-content: start; min-width: 0; }
.sp-scene-debug { aspect-ratio: 16 / 9; max-height: 360px; }
.sp-lanes { display: grid; gap: 8px; }
.sp-lane, .sp-lane-ruler { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: center; }
.sp-lane > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.sp-lane > span i { width: 12px; height: 12px; border-radius: 50%; }
.sp-lane > div, .sp-lane-ruler > div { position: relative; height: 22px; border-radius: 6px; background: var(--sp-canvas); }
.sp-lane-ruler > div { background: transparent; height: 18px; }
.sp-lane-ruler i { --at: 0; position: absolute; left: calc(var(--at) / var(--span) * 100%); font-size: 11px; color: var(--sp-muted); font-style: normal; transform: translateX(-50%); }
.sp-lane b { --at: 0; --len: 0; position: absolute; top: 4px; height: 14px; left: calc(var(--at) / var(--span) * 100%); width: max(6px, calc(var(--len) / var(--span) * 100%)); border-radius: 999px; opacity: 0.85; }
.sp-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sp-problem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--sp-border); border-radius: 14px; }
.sp-problem-text { display: grid; gap: 2px; }
.sp-problem-text strong { font-size: 15px; }
.sp-problem-text span { font-size: 13px; color: var(--sp-muted); }
.sp-problem .sp-ghost { gap: 8px; color: var(--sp-orange); border-color: var(--sp-orange); }
.sp-table-vars td:first-child { font-weight: 600; }
.sp-var-value { display: inline-block; padding: 4px 12px; border-radius: 8px; background: #EEF2FF; color: #3B4CCA; font-weight: 700; }
.sp-dot-blue { display: inline-block; background: var(--sp-blue); margin-right: 8px; }
@media (max-width: 1279px) { .sp-page-debug { grid-template-columns: 340px minmax(0, 1fr); } .sp-debug-right { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .sp-page-debug { grid-template-columns: 1fr; } .sp-debug-right { grid-template-columns: 1fr; } .sp-flow-controls { grid-template-columns: 1fr 1fr; } }

/* ---- Xplore League --------------------------------------------------- */
.sp-hero-league { grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.9fr); min-height: 220px; padding: 26px 36px; }
.sp-hero-league .sp-crumb, .sp-hero-league .sp-crumb button, .sp-hero-league .sp-crumb strong { color: #CFC8BD; }
.sp-hero-league .sp-crumb .sp-crumb-back { color: #FF8654; }
.sp-hero-league h1 { font-size: 52px; line-height: 56px; margin: 8px 0 6px; }
.sp-league-stats { display: flex; align-items: center; gap: 18px; }
.sp-league-avatar { width: 120px; height: 120px; object-fit: contain; border-radius: 50%; background: #FF8654; border: 4px solid #fff; flex: none; }
.sp-league-stat-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; align-items: stretch; }
.sp-league-stat { display: grid; align-content: center; gap: 4px; min-width: 130px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,0.08); color: #CFC8BD; font-size: 13px; position: relative; }
.sp-league-stat b { color: #fff; font-size: 24px; line-height: 1; }
.sp-league-stat b small { font-size: 13px; color: #CFC8BD; }
.sp-league-stat i { --pct: 0; display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow: hidden; }
.sp-league-stat i::after { content: ""; display: block; height: 100%; width: calc(var(--pct) * 100%); background: var(--sp-orange); }
.sp-league-stat-grid .sp-primary { grid-column: 1 / -1; justify-content: space-between; }
.sp-hero-art-league { min-height: 180px; }
.sp-hero-robot-league { left: 6%; width: 44%; max-width: 240px; }
.sp-hero-hand-league { right: 0; top: 10%; text-align: left; font-size: 20px; }
.sp-page-league { grid-template-columns: minmax(0, 1fr) 460px; }
.sp-league-main, .sp-league-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
.sp-comp { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; border-radius: 16px; background: #FFF6EC; margin-bottom: 14px; }
.sp-comp-art { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(135deg, #FFB08A, #FF5A1F); color: #fff; }
.sp-comp-art .sp-icon { width: 64px; height: 64px; }
.sp-comp-copy h3 { margin: 0 0 6px; font-size: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-comp-copy p { font-size: 15px; margin-bottom: 12px; }
.sp-comp-meters { display: flex; gap: 12px; flex-wrap: wrap; }
.sp-meter { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; min-width: 220px; padding: 10px 14px; border-radius: 12px; background: var(--sp-surface); font-size: 14px; }
.sp-meter .sp-icon { color: var(--sp-orange); grid-row: span 2; }
.sp-meter i { --pct: 0; display: block; height: 8px; border-radius: 999px; background: var(--sp-canvas); overflow: hidden; }
.sp-meter i::after { content: ""; display: block; height: 100%; width: calc(var(--pct) * 100%); background: #0A9A5B; }
.sp-meter-plain { grid-template-columns: auto 1fr; min-width: 150px; }
.sp-meter-plain .sp-icon { grid-row: auto; }
.sp-mission-dots { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; position: relative; }
.sp-mission-dots::before { content: ""; position: absolute; left: 6%; right: 6%; top: 26px; height: 3px; background: var(--sp-border); }
.sp-mission-dots li { display: grid; justify-items: center; gap: 8px; position: relative; text-align: center; }
.sp-mission-dots button { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--sp-border); background: var(--sp-surface); color: var(--sp-muted); font: inherit; font-weight: 800; display: grid; place-items: center; cursor: pointer; }
.sp-mission-dots small { font-size: 12px; color: var(--sp-muted); font-weight: 600; }
.sp-mission-dots .is-done button { background: #0A9A5B; border-color: #0A9A5B; color: #fff; }
.sp-mission-dots .is-current button { border-color: var(--sp-orange); color: var(--sp-orange); box-shadow: 0 0 0 4px #FFE9E0; }
.sp-mission-dots .is-current small { color: var(--sp-orange); }
.sp-mission-dots .is-locked button { cursor: not-allowed; }
.sp-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--sp-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sp-link-strong { color: var(--sp-orange); font-weight: 700; }
.sp-mission-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sp-mission { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--sp-border); border-radius: 16px; }
.sp-mission-art { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 12px; color: #fff; }
.sp-mission-art .sp-icon { width: 44px; height: 44px; }
.sp-mission-art-1 { background: linear-gradient(135deg, #7FDBCB, #0A9A5B); } .sp-mission-art-2 { background: linear-gradient(135deg, #C7B8FF, #7347E8); } .sp-mission-art-3 { background: linear-gradient(135deg, #FFD08A, #FF5A1F); }
.sp-mission h3 { margin: 4px 4px 0; font-size: 16px; }
.sp-mission p { margin: 0 4px; font-size: 13px; }
.sp-mission-foot { display: flex; justify-content: space-between; align-items: center; padding: 4px; }
.sp-segment-small [role="tab"], .sp-segment-small button { min-height: 34px; font-size: 13px; padding: 0 12px; }
.sp-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-board li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.sp-board li.is-you { background: #FFF6F1; border: 1px solid #FFD1BD; }
.sp-board-gap { text-align: center; color: var(--sp-muted); }
.sp-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--sp-canvas); color: var(--sp-muted); }
.sp-rank-1 { background: var(--sp-gold); color: #fff; } .sp-rank-2 { background: #C9CFCB; color: #fff; } .sp-rank-3 { background: #C58A4A; color: #fff; }
.sp-board-name { display: grid; font-size: 15px; font-weight: 600; }
.sp-board-name small { font-weight: 500; color: var(--sp-muted); font-size: 12px; }
.sp-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-badge-card { display: grid; justify-items: center; gap: 4px; padding: 12px; text-align: center; font-size: 12px; color: var(--sp-muted); border-radius: 14px; opacity: 0.45; }
.sp-badge-card.is-earned { opacity: 1; }
.sp-badge-card strong { color: var(--sp-ink); font-size: 14px; }
.sp-badge-hex { width: 76px; height: 76px; display: grid; place-items: center; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.sp-badge-hex .sp-icon { width: 34px; height: 34px; }
@media (max-width: 1279px) { .sp-page-league { grid-template-columns: 1fr; } .sp-hero-league { grid-template-columns: 1fr 1fr; } .sp-hero-art-league { display: none; } .sp-mission-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .sp-hero-league { grid-template-columns: 1fr; } .sp-league-stat-grid { grid-template-columns: 1fr 1fr; } .sp-mission-grid { grid-template-columns: 1fr; } .sp-comp { grid-template-columns: 1fr; } }

/* ---- Story Studio: playback, timing, size, moments in place ---------- */
.sp-chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sp-chip-btn:hover { border-color: var(--sp-orange); color: var(--sp-orange); }
.sp-chip-btn-strong { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
.sp-chip-btn-strong:hover { color: #fff; filter: brightness(1.05); }
.sp-story-progress { --pct: 0; display: grid; gap: 6px; margin: -6px 0 6px; font-size: 13px; color: var(--sp-muted); font-weight: 600; }
.sp-story-progress i { display: block; height: 6px; border-radius: 999px; background: var(--sp-canvas); overflow: hidden; }
.sp-story-progress i::after { content: ""; display: block; height: 100%; width: calc(var(--pct) * 100%); background: var(--sp-orange); transition: width 80ms linear; }
.sp-story-hint { margin: 0 0 12px; font-size: 13px; color: var(--sp-muted); }
.sp-scene-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.sp-scene-tools .sp-mini { background: rgba(255,255,255,0.92); }
.sp-scene-transition { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(23,26,32,0.75); color: #fff; font-size: 11px; font-weight: 700; }
.sp-beat { grid-template-columns: minmax(0, 1fr) auto; }
.sp-beat-pick { grid-template-columns: 40px minmax(0, 1fr) auto; }
.sp-beat-pick small { color: var(--sp-muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.sp-beat-tools { display: flex; gap: 4px; }
.sp-beat.is-playing { border-color: var(--sp-orange); box-shadow: 0 0 0 3px #FFE9E0; }
.sp-mini-play { color: var(--sp-orange); border-color: #FFD1BD; margin-right: 4px; }
.sp-mini-play .sp-icon, .sp-beat-tools .sp-icon { width: 12px; height: 12px; }
.sp-setting-range { padding: 4px 12px; gap: 12px; }
.sp-setting-range .sp-slider { flex: 1; width: auto; accent-color: var(--sp-orange); }
.sp-setting-range output { min-width: 48px; text-align: right; font-weight: 700; font-size: 14px; }
.sp-number { width: 64px; min-height: 36px; border: 1px solid var(--sp-border); border-radius: 10px; padding: 0 8px; font: inherit; font-weight: 700; font-size: 14px; color: var(--sp-ink); background: var(--sp-surface); }
.sp-setting-field small { color: var(--sp-muted); font-weight: 500; font-size: 12px; white-space: nowrap; margin-right: 6px; }
.sp-setting-note { margin: -6px 0 0 110px; font-size: 12px; color: var(--sp-muted); }
.sp-button-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
@media (max-width: 767px) { .sp-setting-note { margin-left: 0; } }

/* ---- Story Studio: places, sounds, music, camera, narration ---------- */
.sp-setting-place, .sp-camera-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; }
.sp-setting-place label, .sp-camera-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--sp-muted); }
.sp-setting-place .sp-number, .sp-camera-row .sp-number { width: 60px; }
.sp-mini-wide { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-setting-camera { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 4px; }
.sp-camera-zoom { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-size: 13px; font-weight: 600; color: var(--sp-muted); }
.sp-camera-zoom .sp-slider { flex: 1; width: auto; accent-color: var(--sp-orange); }
.sp-camera-zoom output { min-width: 44px; text-align: right; font-weight: 700; color: var(--sp-ink); }
.sp-setting-narrate { gap: 12px; padding: 4px 10px; }
.sp-setting-narrate .sp-select { flex: 1; }

/* The stage's button row wraps rather than pushing Run on Stage off the panel. */
.sp-page-story .sp-icon-buttons { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.sp-page-story .sp-panel-row { align-items: center; }