.docs-example{--ex-fg:var(--ui-text-highlighted);--ex-muted:var(--ui-text-muted);--ex-faint:var(--ui-text-dimmed);--ex-line:var(--ui-border);--ex-soft:var(--ui-bg-elevated);--ex-raised:var(--ui-bg);margin:1.25rem 0}.dark .docs-example{--ex-raised:var(--ui-bg-accented)}.docs-example-bar{justify-content:flex-end;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.docs-example-play{color:var(--ex-faint);align-items:center;gap:.35rem;font-size:.75rem;font-weight:500;text-decoration:none;transition:color .15s;display:inline-flex}.docs-example-play:hover{color:var(--ex-fg)}.docs-seg{background:var(--ex-soft);border-radius:10px;padding:3px;display:inline-flex;position:relative}.docs-seg button{z-index:1;color:var(--ex-muted);cursor:pointer;border-radius:6px;padding:.2rem .65rem;font-size:.75rem;font-weight:500;line-height:1.5;transition:color .15s;position:relative}.docs-seg button:hover,.docs-seg [aria-pressed=true]{color:var(--ex-fg)}.docs-seg [aria-pressed=true],.docs-seg .indicator{background:var(--ex-raised);box-shadow:0 0 0 .5px #0000000f,0 1px 3px #0000001a}.docs-seg[data-indicator] [aria-pressed=true]{box-shadow:none;background:0 0}.docs-seg .indicator{pointer-events:none;border-radius:6px;transition:transform .2s cubic-bezier(.23,1,.32,1),width .2s cubic-bezier(.23,1,.32,1);position:absolute;top:3px;bottom:3px;left:0}.docs-seg .indicator[data-still]{transition:none}.docs-seg button:focus-visible{outline:2px solid var(--ex-fg);outline-offset:-2px}@media (pointer:coarse){.docs-seg button,.docs-example-play{min-height:2.5rem}}.docs-example[data-view=preview]>.docs-example-content>:not(.docs-example-preview),.docs-example[data-view=code]>.docs-example-content>.docs-example-preview{display:none}.docs-example[data-view=code]>.docs-example-content>*{margin:0}.docs-example-preview{box-shadow:0 0 0 1px var(--ex-line);border-radius:10px;padding:1.25rem 1.5rem}.docs-example-preview>:nth-child(1 of :not(style,script)){margin-top:0}.docs-example-preview>:nth-last-child(1 of :not(style,script)){margin-bottom:0}:is(.docs-example-preview:not(:has(>:not(style,script,[data-comark-frame],.comark-html))):not(:has(>.comark-html>:not(style,script,[data-comark-frame]))),.docs-example-preview:has(>p>:is(.cm-video,.cm-audio))){box-shadow:none;border-radius:0;flex-direction:column;gap:1rem;padding:0;display:flex}.docs-example-preview>[data-comark-frame],.docs-example-preview>.comark-html>[data-comark-frame],.docs-example-preview>.ck>pre{margin-block:0}