/* The studio is scoped to the examples; it does not restyle the documentation UI. */
clab-customizer { display: block; container-type: inline-size; border: 1px solid var(--site-border); border-radius: 16px; overflow: hidden; margin: 24px 0 62px; box-shadow: 0 20px 70px #00000015; }
clab-customizer [hidden] { display: none !important; }
/* Playground: a control rail beside the live canvas; it stacks below the canvas when narrow. */
.studio-workbench { display: grid; grid-template-columns: minmax(236px, 268px) minmax(0, 1fr); }
.studio-form { contain: size; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0; padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 22px; background: var(--site-surface); border-right: 1px solid var(--site-border); font-size: 12px; }
.studio-group { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 11px; }
.studio-group legend { padding: 0; margin: 0 0 11px; color: var(--site-accent); font: 500 9.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.studio-field { display: grid; gap: 6px; color: var(--site-muted); font-size: 11px; }
.studio-field select { width: 100%; padding: 8px 10px; border: 1px solid var(--site-border); border-radius: 8px; background: var(--md-default-bg-color); color: var(--site-heading); font: 12.5px/1.4 Inter, sans-serif; cursor: pointer; }
.studio-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--site-border); border-radius: 9px; background: var(--md-default-bg-color); }
.studio-segmented label { position: relative; display: grid; place-items: center; min-height: 28px; padding: 4px 6px; border-radius: 6px; color: var(--site-muted); font-size: 11.5px; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color .15s, color .15s; }
.studio-segmented label:hover { color: var(--site-heading); }
.studio-segmented label:has(:checked) { background: var(--site-surface); color: var(--site-heading); font-weight: 600; box-shadow: 0 1px 3px #0000002a, inset 0 0 0 1px var(--site-border); }
.studio-segmented input, .studio-swatches input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.studio-segmented label:has(:focus-visible) { outline: 2px solid var(--site-accent); outline-offset: 1px; }
.studio-segmented label:has(:disabled) { opacity: .45; cursor: default; }
.studio-segmented label:has(:disabled) input { cursor: default; }
.studio-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.studio-swatches label { position: relative; display: grid; gap: 6px; color: var(--site-muted); font-size: 10px; line-height: 1.2; text-align: center; cursor: pointer; }
.studio-swatches i { display: block; aspect-ratio: 4 / 3; border-radius: 8px; border: 1px solid var(--studio-border); background: radial-gradient(circle at 72% 32%, var(--studio-accent) 0 17%, transparent 18%), linear-gradient(135deg, var(--studio-bg) 0 56%, var(--studio-edge) 56% 70%, var(--studio-raised) 70%); transition: transform .15s; }
.studio-swatches label:hover i { transform: translateY(-1px); }
.studio-swatches label:has(:checked) { color: var(--site-heading); font-weight: 600; }
.studio-swatches label:is(:has(:checked), :has(:focus-visible)) i { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.studio-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--site-heading); font-size: 12px; cursor: pointer; }
.studio-switch input { appearance: none; flex: none; position: relative; width: 30px; height: 18px; margin: 0; border-radius: 999px; background: var(--site-border); cursor: pointer; transition: background-color .15s; }
.studio-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #00000040; transition: transform .15s; }
.studio-switch input:checked { background: var(--site-accent); }
.studio-switch input:checked::after { transform: translateX(12px); }
.studio-range { display: grid; gap: 7px; color: var(--site-muted); font-size: 11px; }
.studio-range > span { display: flex; justify-content: space-between; gap: 8px; }
.studio-range output { color: var(--site-heading); font: 11px/1.4 "JetBrains Mono", monospace; }
.studio-range input { width: 100%; margin: 0; accent-color: var(--site-accent); cursor: pointer; }
.studio-form :is(select, input):focus-visible, .studio-form button:focus-visible, .studio-export :is(button, a, summary):focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.studio-form button[type="reset"] { align-self: flex-start; padding: 7px 12px; border: 1px solid var(--site-border); border-radius: 8px; background: transparent; color: var(--site-muted); font: 12px/1.4 Inter, sans-serif; cursor: pointer; }
.studio-form button[type="reset"]:hover { color: var(--site-heading); border-color: var(--site-muted); }
.studio-stage { display: flex; flex-direction: column; min-width: 0; }
.studio-preview { flex: 1; }
.studio-preview[data-updating] .studio-preview-label i { animation: studio-pulse .9s ease-in-out infinite; }
@keyframes studio-pulse { 50% { opacity: .3; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .studio-preview[data-updating] .studio-preview-label i { animation: none; } }
[data-palette="midnight"] { --studio-bg: #0b1a21; --studio-raised: #122a33; --studio-text: #e2eee8; --studio-muted: #91abae; --studio-accent: #d4f58a; --studio-edge: #568e91; --studio-border: #2a424b; }
[data-palette="paper"] { --studio-bg: #f5f5ed; --studio-raised: #ffffff; --studio-text: #294735; --studio-muted: #637665; --studio-accent: #19725b; --studio-edge: #8da896; --studio-border: #cfdbcc; }
[data-palette="sandstone"] { --studio-bg: #fcf6ec; --studio-raised: #fffaf3; --studio-text: #503d32; --studio-muted: #8a7162; --studio-accent: #986429; --studio-edge: #bba08c; --studio-border: #e1d0ba; }
[data-palette="violet"] { --studio-bg: #151326; --studio-raised: #231f39; --studio-text: #e8e0f5; --studio-muted: #afa4c7; --studio-accent: #c5b3f4; --studio-edge: #83739f; --studio-border: #3a3153; }
[data-palette="mint"] { --studio-bg: #f2f8ef; --studio-raised: #ffffff; --studio-text: #294b39; --studio-muted: #64816e; --studio-accent: #238265; --studio-edge: #7bab8d; --studio-border: #c7dcc8; }
[data-palette="blueprint"] { --studio-bg: #102d50; --studio-raised: #153b63; --studio-text: #ecf6ff; --studio-muted: #a2c5e5; --studio-accent: #8ae2ff; --studio-edge: #82b8e0; --studio-border: #2b5280; }
[data-palette="synthwave"] { --studio-bg: #190e2b; --studio-raised: #2c1744; --studio-text: #fff1ff; --studio-muted: #c5a4df; --studio-accent: #ff6ad5; --studio-edge: #a36cce; --studio-border: #653979; }
[data-palette="aurora"] { --studio-bg: #071f24; --studio-raised: #10333c; --studio-text: #e3fff3; --studio-muted: #9ac9c7; --studio-accent: #63e6be; --studio-edge: #518e97; --studio-border: #29505b; }
[data-palette="ember"] { --studio-bg: #251817; --studio-raised: #382322; --studio-text: #fff1e5; --studio-muted: #d5b3a1; --studio-accent: #ffb36b; --studio-edge: #b47d69; --studio-border: #68443a; }
[data-palette="porcelain"] { --studio-bg: #faf5f0; --studio-raised: #ffffff; --studio-text: #443b43; --studio-muted: #796570; --studio-accent: #a44255; --studio-edge: #a68996; --studio-border: #dccbd1; }
.studio-preview, .studio-art { background: var(--studio-bg); color: var(--studio-text); }
:is(.studio-preview, .studio-art) clab-topology { --clab-surface: var(--studio-bg); --clab-raised: var(--studio-raised); --clab-text: var(--studio-text); --clab-muted: var(--studio-muted); --clab-accent: var(--studio-accent); --clab-edge: var(--studio-edge); --clab-border: var(--studio-border); --clab-shadow: none; --clab-radius: 0; margin: 0; border: 0; }
.studio-preview[data-transparent="true"] { background: radial-gradient(ellipse at 80% 30%, color-mix(in srgb, var(--studio-accent) 20%, transparent), transparent 65%), var(--studio-bg); }
.studio-preview-label { display: flex; justify-content: space-between; gap: 10px; color: var(--studio-muted); padding: 18px 24px 0; font: 9px/1.5 "JetBrains Mono", monospace; letter-spacing: .09em; }
.studio-preview-label i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--studio-accent); margin-right: 7px; vertical-align: middle; }
.studio-export { padding: 18px 22px; border-top: 1px solid var(--site-border); background: var(--site-surface); }
.studio-export-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.studio-export-bar > div:first-child { display: grid; gap: 2px; }
.studio-export-bar strong { color: var(--site-heading); font-size: 13px; font-weight: 600; }
.studio-export-bar > div:first-child span { color: var(--site-muted); font-size: 11px; }
.studio-export-bar > div:last-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.studio-export-bar :is(button, a) { text-decoration: none; padding: 7px 12px; border: 1px solid var(--site-border); background: var(--md-default-bg-color); color: var(--site-heading); font: 12px/1.4 Inter, sans-serif; border-radius: 8px; cursor: pointer; }
.studio-export-bar :is(button, a):hover { border-color: var(--site-muted); }
.studio-export-bar [data-copy] { background: var(--site-accent); border-color: transparent; color: #10200f; font-weight: 600; }
.studio-export-bar :is(button:disabled, a:not([href])) { opacity: .5; cursor: not-allowed; }
.studio-export details { margin: 14px 0 0; border: 0; box-shadow: none; background: transparent; font-size: 11px; }
.studio-export details summary { margin: 0; padding: 6px 0; color: var(--site-muted); background: transparent; }
.studio-export details summary::before, .studio-export details summary::after { display: none; }
.studio-export details pre { max-height: 280px; overflow: auto; padding: 14px; }
.md-typeset .studio-export-help, .md-typeset .studio-status { color: var(--site-muted); font-size: 10px; margin: 10px 0 0; }
.studio-status:empty { display: none; }
.studio-status[data-error] { color: #d37c6b; }
.studio-collection { margin-top: 30px; }
.studio-example { margin: 0 0 52px; padding-top: 24px; border-top: 1px solid var(--site-border); scroll-margin-top: 90px; }
.studio-example-heading { display: flex; gap: 18px; align-items: center; }
.studio-number { color: var(--site-muted); font: 300 36px/1 "JetBrains Mono", monospace; letter-spacing: -.08em; opacity: .65; }
.md-typeset .studio-example-heading h3 { margin: 0; font-size: 24px; font-weight: 550; letter-spacing: -.04em; }
.studio-count { margin-left: auto; white-space: nowrap; font: 10px/1.6 "JetBrains Mono", monospace; color: var(--site-muted); }
.studio-example > p { max-width: 760px; color: var(--site-muted); font-size: 13px; margin: 20px 0; }
.studio-art { border: 1px solid color-mix(in srgb, var(--studio-edge) 35%, transparent); border-radius: 14px; overflow: hidden; }
.studio-example-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 14px; }
.studio-example-footer p { margin: 0; font-size: 10px; }
@container (max-width: 720px) {
  .studio-workbench { grid-template-columns: minmax(0, 1fr); }
  .studio-stage { order: -1; }
  .studio-form { contain: none; overflow: visible; border-right: 0; border-top: 1px solid var(--site-border); }
}
@media (max-width: 600px) {
  .studio-form, .studio-export { padding: 16px; }
  .studio-example-heading { flex-wrap: wrap; gap: 10px 14px; }
  .studio-count { width: 100%; margin-left: 46px; }
  .md-typeset .studio-example-heading h3 { font-size: 21px; }
  .studio-number { font-size: 30px; }
  .studio-preview-label { padding: 16px 12px 0; font-size: 8px; }
}
@media print {
  .studio-form, .studio-export, .studio-preview-label { display: none; }
  .studio-example { break-inside: avoid; }
}