/* Studio — the finished piece on the workbench.
 * A warm fired-clay light ground (not the cream-and-serif cliché), warm near-black ink,
 * ember as the one hot accent. The kiln idea read through temperature, not darkness. */

:root {
  --kiln-ground: #F3EEE7;
  --kiln-raise:  #EAE3D9;
  --kiln-line:   #DBD1C4;
  --kiln-ink:    #221C17;
  --kiln-body:   #574E46;
  --kiln-faint:  #8C8175;
}

/* The marble sphere is light, so on a light ground the hero needs a stage to sit on. */
.stage {
  background: radial-gradient(120% 120% at 50% 42%, #FBF8F3 0%, #ECE4D9 62%, #E4DACC 100%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 3px rgba(60,45,30,.06);
}
.plate { box-shadow: 0 1px 3px rgba(60,45,30,.07); }
.angles img { box-shadow: 0 1px 3px rgba(60,45,30,.06); }
.swap-stage { background: radial-gradient(120% 120% at 50% 42%, #FBF8F3 0%, #EFE8DD 70%, #E7DED0 100%); border-radius: 16px; }

/* The heat line reads as a warm rule on light — no glow needed. */
.heat { opacity: 0.6; }

.btn-ghost { border-color: var(--fired-600); color: var(--kiln-body); }
.btn-ghost:hover { border-color: var(--kiln-ink); color: var(--kiln-ink); }
.wordmark em { color: var(--ember-600); }
.yes { color: var(--ember-600); }
.hero-3d { --poster-color: transparent; }

/* Studio ground is light, so the dark-theme code chip (amber on raise) vanishes.
 * Ink text on a slightly darker beige with the hairline border reads cleanly. */
code { color: var(--kiln-ink); background: #E7DFD3; border-color: var(--kiln-line); }