/* Line 31454 (Michael, Sun 25 Oct 2026 ~3:0x PM PT: "we have dark mode. I can't be blinded by this day mode ... We only want to work
   with one agent at a time ... Just want to have a dropdown for all our characters"): the Shape your character page shell
   (bases.html) in the dark theme of his Studio references: a deep page, raised panels with quiet borders, a lit stage, and the
   one character picker in the header. Light stays the visitor's choice (the house key localStorage 'theme', data-bs-theme on
   <html>, set before the first paint by the shell's head script). Tokens only: every panel, the edit bay and the sliders read
   --ns-*, so the dark values are set here once for this page. */

:root[data-bs-theme="dark"] body.ns-stage-body.studio-shell {
  --ns-bg: #0e1014;
  --ns-surface: #171a20;
  --ns-surface-2: #1f232b;
  --ns-text: #e8eaed;
  --ns-text-2: #aab1bc;
  --ns-border: rgba(232, 234, 237, .08);
  --ns-border-strong: rgba(232, 234, 237, .16);
  --ns-focus: #8ab4f8;
  --ns-on-accent: #0e1014;
  --studio-raise: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 28px rgba(0, 0, 0, .45);
  --studio-stage-light: radial-gradient(ellipse 70% 58% at 50% 34%, #2a303b 0%, #1a1e25 46%, #101216 100%);
  --studio-floor: radial-gradient(ellipse 34% 7% at 50% 92%, rgba(138, 180, 248, .16), transparent 70%);
  color-scheme: dark;
}
:root[data-bs-theme="light"] body.ns-stage-body.studio-shell {
  --studio-raise: 0 1px 2px rgba(60, 64, 67, .12), 0 6px 18px rgba(60, 64, 67, .1);
  --studio-stage-light: radial-gradient(ellipse 70% 58% at 50% 34%, #ffffff 0%, #eef1f5 60%, #e3e7ed 100%);
  --studio-floor: radial-gradient(ellipse 34% 7% at 50% 92%, rgba(26, 115, 232, .1), transparent 70%);
  color-scheme: light;
}
body.ns-stage-body.studio-shell {background: var(--ns-bg); color: var(--ns-text);}

/* The header: brand, the one character picker, its loading line, the theme switch. */
body.studio-shell > header.studio-head {display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0;
  padding: 10px 24px; border-bottom: 1px solid var(--ns-border); background: var(--ns-surface);}
.studio-head .studio-brand {flex: none; color: var(--ns-text); font-weight: 600; text-decoration: none; white-space: nowrap;}
.studio-head .studio-cast {display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0;}
.studio-head .studio-cast > span {color: var(--ns-text-2); font-size: 14px;}
#studio-cast {min-height: 44px; min-width: 168px; max-width: 260px; padding: 4px 10px; border: 1px solid var(--ns-border-strong);
  border-radius: 12px; background: var(--ns-surface-2); color: var(--ns-text); font: inherit; box-shadow: var(--studio-raise); cursor: pointer;}
#studio-cast:focus-visible {outline: 2px solid var(--ns-focus); outline-offset: 2px;}
/* Line 31490 (CHANGES 1: Hugh's picture read as a dark blot): each picture sits on a lit plate, and the house stills (whole
   bodies on a clear ground, 512 px square) show the face, so every character reads on the dark menu. */
#studio-cast img {width: 32px; height: 32px; object-fit: cover; object-position: 50% 8%; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 38%, #f8f9fa 0%, #d7dbe0 58%, #a9b0b9 100%);}
#studio-cast img[src*="/artist-copies/"] {object-view-box: inset(6% 40% 75% 40%);}
#studio-cast .cast-initial {display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--ns-bg); color: var(--ns-text-2); font-weight: 600;}
/* Line 31637: the chip's letter comes from data-initial, so the option's text is the name once ("Boop", never "BBoop"). */
#studio-cast .cast-initial::before {content: attr(data-initial) / "";}
@supports (appearance: base-select) {
  #studio-cast, #studio-cast::picker(select) {appearance: base-select;}
  #studio-cast::picker(select) {padding: 6px; border: 1px solid var(--ns-border-strong); border-radius: 14px; background: var(--ns-surface);
    color: var(--ns-text); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); max-height: min(70vh, 520px);}
  #studio-cast option {display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 10px;}
  #studio-cast option:hover, #studio-cast option:focus-visible {background: var(--ns-surface-2);}
  #studio-cast option:checked {background: color-mix(in srgb, var(--ns-focus) 18%, transparent);}
  #studio-cast option::checkmark {order: 3; margin-left: auto; color: var(--ns-focus);}
  #studio-cast selectedcontent {display: flex; align-items: center; gap: 10px;}
}
.studio-head .studio-cast-status {flex: 1 1 auto; min-width: 0; color: var(--ns-text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.studio-head #studio-theme {flex: none; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ns-border-strong);
  border-radius: 12px; background: var(--ns-surface-2); color: var(--ns-text); font: inherit; cursor: pointer;}
.studio-head #studio-theme:focus-visible {outline: 2px solid var(--ns-focus); outline-offset: 2px;}

/* The lit stage: a soft key light behind the character, a faint floor pool, a quiet rim. */
body.studio-shell .stage {background: var(--studio-floor), var(--studio-stage-light); border: 1px solid var(--ns-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 16px 40px rgba(0, 0, 0, .35);}
body.studio-shell .viewer-frame {background: transparent;}
body.studio-shell #caption, body.studio-shell .viewer-help, body.studio-shell .viewer-note {color: var(--ns-text-2);}
body.studio-shell .viewer-loading {color: var(--ns-text);}

/* Raised cards for the controls column and the bay: deep surface, quiet border, soft lift. */
body.studio-shell .controls fieldset, body.studio-shell .controls details {
  background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: 14px; box-shadow: var(--studio-raise);}
body.studio-shell .controls :is(button, select, input[type="text"], input[type="search"], input[type="number"]) {
  background: var(--ns-surface-2); color: var(--ns-text); border-color: var(--ns-border-strong);}
body.studio-shell .controls input[type="range"], body.studio-shell #edit-bay input[type="range"] {accent-color: var(--ns-focus);}
body.studio-shell #menu {background: var(--ns-surface); color: var(--ns-text); border-color: var(--ns-border-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, .5);}
body.studio-shell .viewer-tools button, body.studio-shell #menu-button, body.studio-shell #menu :is(button, select) {
  background: var(--ns-surface-2); color: var(--ns-text); border-color: var(--ns-border-strong);}
body.studio-shell a {color: var(--ns-focus);}
/* Line 31770: the signed-out Sign in button's words win over the link colour above: white on blue in light, dark on light blue in dark. */
body.studio-shell .studio-signed-out a {background: var(--ns-focus); color: #fff;}
:root[data-bs-theme="dark"] body.studio-shell .studio-signed-out a {color: var(--ns-on-accent, #0e1014);}

/* One character at a time: the header picker is the one way to change who is on stage, so the older "Show both" menu goes. */
body.studio-shell label:has(> #show-bodies) {display: none;}

@media (max-width: 899.98px) {
  body.studio-shell > header.studio-head {padding: 8px 12px; gap: 8px;}
  .studio-head .studio-cast > span {display: none;}
  #studio-cast {min-width: 140px;}
}
@media (max-width: 560px) {
  /* Phone width: the brand mark goes before anything collides; the loading line stays under the picker's name. */
  .studio-head .studio-brand {display: none;}
  .studio-head .studio-cast-status {font-size: 12px;}
}

/* Load once (CHANGES 1): until the edit bay mounts, the older panels wait unseen and a quiet skeleton of the bay's sections
   holds the column, so the first editor a visitor sees is the bay. ?bay=off never sets bay-wait. */
html.bay-wait body.studio-shell #controls > #bases-panels {display: none;}
html.bay-wait body.studio-shell #controls::before {content: "Getting the editor ready…"; display: block; min-height: 520px; padding: 12px 14px;
  color: var(--ns-text-2); font-size: 14px; border-radius: 14px;
  background:
    linear-gradient(var(--ns-surface), var(--ns-surface)) 0 44px / 100% 64px no-repeat,
    linear-gradient(var(--ns-surface), var(--ns-surface)) 0 120px / 100% 64px no-repeat,
    linear-gradient(var(--ns-surface), var(--ns-surface)) 0 196px / 100% 64px no-repeat,
    linear-gradient(var(--ns-surface), var(--ns-surface)) 0 272px / 100% 64px no-repeat,
    linear-gradient(var(--ns-surface), var(--ns-surface)) 0 348px / 100% 64px no-repeat,
    linear-gradient(var(--ns-surface), var(--ns-surface)) 0 424px / 100% 64px no-repeat;
  animation: studio-wait 1.6s ease-in-out infinite alternate;}
@keyframes studio-wait {from {opacity: .55;} to {opacity: 1;}}
@media (prefers-reduced-motion: reduce) {html.bay-wait body.studio-shell #controls::before {animation: none;}}

/* The look picker and a look's own editor host (the bay's column). */
#studio-look {min-height: 44px; min-width: 120px; max-width: 220px; padding: 4px 10px; border: 1px solid var(--ns-border-strong);
  border-radius: 12px; background: var(--ns-surface-2); color: var(--ns-text); font: inherit; box-shadow: var(--studio-raise); cursor: pointer;}
#studio-look:focus-visible {outline: 2px solid var(--ns-focus); outline-offset: 2px;}
#studio-look .look-ico {display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--ns-bg); color: var(--ns-focus); flex: none;}
@supports (appearance: base-select) {
  #studio-look, #studio-look::picker(select) {appearance: base-select;}
  #studio-look::picker(select) {padding: 6px; border: 1px solid var(--ns-border-strong); border-radius: 14px; background: var(--ns-surface); color: var(--ns-text); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);}
  #studio-look option {display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 10px;}
  #studio-look option:hover, #studio-look option:focus-visible {background: var(--ns-surface-2);}
  #studio-look option:checked {background: color-mix(in srgb, var(--ns-focus) 18%, transparent);}
  #studio-look option::checkmark {order: 3; margin-left: auto; color: var(--ns-focus);}
  #studio-look selectedcontent {display: flex; align-items: center; gap: 8px;}
}
@media (min-width: 900px), (min-width: 600px) and (orientation: landscape) {
  .editor > .look-host {grid-column: 2; grid-row: 1; padding: 16px 8px 40px 0;}
}
.look-host .look-coming {margin: 16px 0; padding: 16px; border: 1px solid var(--ns-border); border-radius: 14px; background: var(--ns-surface); color: var(--ns-text); box-shadow: var(--studio-raise);}
@media (max-width: 899.98px) {
  .studio-look > span {display: none;}
  #studio-look {min-width: 0;}
  .studio-head .studio-cast-status {display: none;}
}
/* Line 31770: the header has no room for the cast line on a narrow screen, so the same line shows once, short, under the stage. */
.studio-stage-status {display: none;}
@media (max-width: 899.98px) {
  .studio-stage-status:not(:empty) {display: block; flex: none; margin: 6px 0 0; padding: 0 12px; color: var(--ns-text-2); font-size: 13px;
    line-height: 1.4; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
}
/* Line 31490: a drawn look's own stage covers the 3D viewer while its editor holds the bay's column; the caption and the
   character menu stay on top, and the 3D-only tools (turn, spin, reset, drag help, loading bar) step aside. */
body.studio-shell .stage > .look-stage {position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 8px 8px 0; border-radius: inherit; overflow: hidden; background: var(--studio-floor), var(--studio-stage-light);}
.look-stage > .look-canvas {position: relative; flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center;}
.look-stage > .look-canvas > * {max-width: 100%; max-height: 100%;}
:root[data-look-open] .stage > #caption {position: relative; z-index: 3;}
:root[data-look-open] .stage > :is(#menu-button, #menu) {z-index: 3;}
:root[data-look-open] .stage > .look-stage, .stage > .look-stage.look-next {padding-bottom: 56px;}
/* Line 31639: the next look mounts hidden beside the one on stage (laid out, so it draws at its real size) and the two trade
   places in one frame (studio-look-swap.js); from 3D its editor waits unseen in the bay's column. The Look menu shows it is
   opening (the header line says which; phones hide that line). */
body.studio-shell .stage > .look-stage.look-next {visibility: hidden; pointer-events: none;}
.look-host {position: relative;}
.look-host > .look-pane.look-next {position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none;}
.look-host[data-preparing] {pointer-events: none;}
:root[data-look-opening] #studio-look {outline: 2px solid color-mix(in srgb, var(--ns-focus) 55%, transparent); outline-offset: 2px; cursor: progress;}
:root[data-look-open] :is(.viewer-tools, #viewer-help, #viewer-loading, #viewer-note, #download-tier-loaded) {display: none;}
.look-host .look-opening {color: var(--ns-text-2);}
/* Line 31490 (CHANGES 1: the guide's "You can simply answer out" was cut at the clamp): her line reads whole; a very long one
   scrolls inside its own box instead of losing its end. */
body.studio-shell #caption {display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: 8.5em; overflow-y: auto; overscroll-behavior: contain;}

/* Line 31630: the chosen character, never Tia. While a character other than the page's own two is on its way (?c=robo), the
   slot under it stays unseen; a character the Studio cannot shape stands on the stage as itself (studio-own-body.js). */
html[data-cast-pending] .viewer .stage > :not(#viewer-loading, #caption, #menu-button, #menu),
html[data-own-body] .viewer .stage > :not(.own-body, #caption, #menu-button, #menu) {visibility: hidden;}
/* Line 31648 (test station 0159 item 3): the 3D tools under the stage leave the page as a drawn look's do (display, not
   visibility), so on a phone the stage keeps their room and the character stands at a readable size. */
html[data-own-body] .viewer :is(.viewer-tools, .viewer-help, .studio-build-line, #viewer-note) {display: none;}
/* The figure is opaque (the stage's own light), so no frame of the slot under it can show through, whatever the GPU paints. */
.viewer .stage > .own-body {position: absolute; inset: 0; z-index: 0; margin: 0; display: grid;
  place-items: center; padding: 16px 16px 72px; border-radius: inherit; pointer-events: none;
  background: var(--studio-floor), var(--studio-stage-light); container-type: size;}
html[data-own-body] .viewer .stage > :is(#caption, #menu-button, #menu) {position: relative; z-index: 1;}
html[data-own-body] .viewer .stage > #menu {position: absolute;}
/* The rows fill the stage at any size: the smaller of the width and the height each row count allows (a mono glyph is ~.6em wide). */
.own-body .own-body-ascii {margin: 0; overflow: hidden; color: var(--ns-text); background: none; white-space: pre;
  font: 600 min(calc(86cqw / (var(--cols, 24) * .6)), calc(80cqh / (var(--rows, 16) * 1.15)), 22px)/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.own-body .own-body-picture {max-width: min(100%, 320px); max-height: 100%; object-fit: contain;}
/* Line 31637: on a phone the guide's caption wraps to two lines; the figure keeps clear of it (the feet touched it at 390 px).
   Line 31648: the caption room (studio-caption-room.js) sets the figure's foot room from the caption's own top with clear space
   under the feet; these are the rooms before it measures. */
@media (max-width: 600px) {.viewer .stage > .own-body {padding-bottom: 108px;}}
/* Line 31648: Robo in his own ASCII, drawn by the kit's character engine (<alive-avatar>, looks/character-engine.js). */
.own-body .own-body-kit {width: min(86cqw, 75cqh); aspect-ratio: 3 / 4; max-height: 100%;}
/* Line 31648 (test station 0159 item 6): a 3D-only character in its kit 3D body (studio-own-body.js), on its picture's spot across
   the whole stage above the guide's line; unseen while it opens behind the picture, which it replaces in one step. */
.own-body > :is(.own-body-picture, .own-body-3d) {grid-area: 1 / 1;}
.own-body .own-body-3d {position: relative; width: 100%; height: 100%; min-height: 0; align-self: stretch; justify-self: stretch;}
.own-body .own-body-3d[data-body-loading] {visibility: hidden;}
#studio-cast .cast-tiers {color: var(--ns-text-2); font-size: 13px; white-space: nowrap;}
#studio-cast selectedcontent .cast-tiers {display: none;}
#studio-tier {min-height: 44px; padding: 4px 10px; border: 1px solid var(--ns-border-strong); border-radius: 12px; background: var(--ns-surface-2);
  color: var(--ns-text); font: inherit;}
.studio-head .studio-tier[hidden] {display: none;}
/* A phone holds the Character and Look pickers on one row; an owner's Version picker and Live stage link take a second row. */
@media (max-width: 599.98px) {
  body.studio-shell > header.studio-head:has(.studio-tier:not([hidden]), .studio-live-link:not([hidden])) {flex-wrap: wrap; row-gap: 8px;}
  .studio-head:has(.studio-tier:not([hidden]), .studio-live-link:not([hidden])) .studio-brand {display: none;}
  .studio-head:has(.studio-tier:not([hidden]), .studio-live-link:not([hidden])) .studio-cast-status {display: none;}
  .studio-head .studio-tier {order: 5;} .studio-head .studio-live-link {order: 6;}
}