/* Studio skin: the Agentic AI course look. Warm, rounded, guided; every Learn
   section gets its own light colour world, drawn from the palette's four tones
   (accent, coral, info, ok). blocks.js maps a block's `hue` to the nearest tone.
   Applies to <html data-skin="studio">. */

:root[data-skin="studio"] .sec:not(:where(.sim-stage *)) { --sec-tone: var(--accent); }
:root[data-skin="studio"] .sec[data-tone="coral"]:not(:where(.sim-stage *)) { --sec-tone: var(--coral); }
:root[data-skin="studio"] .sec[data-tone="info"]:not(:where(.sim-stage *)) { --sec-tone: var(--info); }
:root[data-skin="studio"] .sec[data-tone="ok"]:not(:where(.sim-stage *)) { --sec-tone: var(--ok); }
:root[data-skin="studio"] .sec:not(:where(.sim-stage *)) {
  margin: 0 -18px 18px;
  padding: 4px 18px 6px;
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec-tone) 11%, transparent), transparent 85%);
}
:root[data-skin="studio"][data-theme="light"] .sec:not(:where(.sim-stage *)) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec-tone) 8%, transparent), transparent 85%);
}
:root[data-skin="studio"] .sec > h2:not(:where(.sim-stage *)) {
  display: flex; align-items: center; gap: 10px;
}
:root[data-skin="studio"] .sec > h2:not(:where(.sim-stage *))::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 99px;
  background: var(--sec-tone);
  box-shadow: 0 0 16px var(--sec-tone);
}
:root[data-skin="studio"][data-theme="light"] .sec > h2:not(:where(.sim-stage *))::before { box-shadow: none; }
:root[data-skin="studio"] .fig .art:not(:where(.sim-stage *)),
:root[data-skin="studio"] .sim-stage { border-radius: 20px; }
:root[data-skin="studio"] .ia:not(:where(.sim-stage *)) { border-radius: 20px; box-shadow: 0 16px 40px -28px var(--shadow); }
@media (max-width: 640px) {
  :root[data-skin="studio"] .sec:not(:where(.sim-stage *)) { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
}