.cmp-frame{border:1px solid var(--brand-border);border-radius:var(--brand-radius-card);background:var(--brand-canvas);overflow:hidden}.cmp-frame+.cmp-frame{margin-block-start:1rem}.cmp-frame__label{border-block-end:1px solid var(--brand-border);background:var(--brand-surface);color:var(--brand-text-muted);padding:.5rem .9rem;font-size:.8125rem;font-weight:600}.cmp-frame .ba-section{--brand-section-space-y:2.5rem}.cmp-frame .ba-hero{--brand-section-space-y:3rem}.cmp-pad{padding:1.25rem}.cmp-comp{gap:1rem;padding-block:2rem;scroll-margin-top:6rem;display:grid}.cmp-comp+.cmp-comp{border-block-start:1px solid var(--brand-border)}.cmp-comp>h3{font-size:1.375rem}.cmp-comp>h3 code{background:0 0;padding:0;font-size:.9em}.cmp-comp>p{max-width:46rem;color:var(--brand-text-muted)}.cmp-props>summary{cursor:pointer;padding-block:.4rem;font-weight:650}.cmp-props[open]>summary{margin-block-end:.5rem}.cmp-index{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem 2rem;font-size:.9375rem;display:grid}.cmp-index p{margin-block-end:.35rem;font-weight:650}.cmp-index ul{gap:.15rem;margin:0;padding-inline-start:1.1rem;display:grid}.cmp-width{gap:.5rem;padding-block:1rem;display:grid}.cmp-width__bar{border:1px dashed var(--brand-border-strong);border-radius:var(--brand-radius-xs);background:var(--brand-surface);padding:.6rem .8rem;font-size:.8125rem}.cmp-icons{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.cmp-icons li{border:1px solid var(--brand-border);border-radius:var(--brand-radius-sm);background:var(--brand-surface);justify-items:start;gap:.4rem;padding:.75rem;font-size:.8125rem;display:grid}.ud{border-block-start:1px solid var(--brand-border);gap:0;display:grid}.ud-row{border-block-end:1px solid var(--brand-border);gap:.6rem 1.5rem;padding-block:1rem;display:grid}@media (width>=52rem){.ud-row{grid-template-columns:11rem minmax(0,1fr);align-items:center}}.ud-row__label{color:var(--brand-text-muted);font-size:.8125rem;font-weight:600;font-family:var(--brand-font-mono)}.ud-row__items{flex-wrap:wrap;align-items:center;gap:.75rem;min-inline-size:0;display:flex}.ud-state{justify-items:center;gap:.35rem;display:inline-grid}.ud-state small{color:var(--brand-text-subtle);font-size:.75rem}.ud-grid{border:0;gap:1.25rem;display:grid}@media (width>=48rem){.ud-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.ud-stack{align-content:start;gap:.6rem;display:grid}.ud-wide{flex:100%;min-inline-size:0}.ud-inline{align-items:center;gap:.75rem;block-size:1.5rem;display:inline-flex}.ud-card{gap:.5rem;min-inline-size:13rem;padding:1rem;display:grid}.ud-progress{min-inline-size:12rem}.ud-frame{border:1px solid var(--brand-border);border-radius:var(--brand-radius-card);background:var(--brand-surface);padding:1rem}.ud-pop{max-inline-size:18rem}.ud-trigger{border:1px solid var(--brand-border-strong);border-radius:var(--brand-radius-control);background:var(--brand-surface);min-block-size:2.75rem;color:var(--brand-text);font:inherit;cursor:pointer;padding:.5rem 1rem;font-weight:600}.ud-trigger:hover{background:var(--brand-surface-muted)}[data-force=hover] .ba-button:not([data-appearance]),[data-force=hover] .ba-button[data-appearance=solid]{background:var(--ba-btn-flat-hover)}[data-force=hover] .ba-button[data-appearance=depth],:where([data-button-appearance=depth]) [data-force=hover] .ba-button:not([data-appearance]){background:radial-gradient(150% 100% at 50% 0%, var(--ba-btn-sheen) 0%, color-mix(in srgb, var(--ba-btn-sheen) 25%, transparent) 99%, transparent 100%) top / 100% 50% no-repeat, radial-gradient(65.28% var(--ba-btn-glow-reach) at 50% 100%, var(--ba-btn-glow), transparent), linear-gradient(var(--ba-btn-top), var(--ba-btn-bottom));box-shadow:var(--ba-btn-shadow-hover);filter:brightness(1.04)}[data-force=hover] .ba-button[data-appearance=outline]{box-shadow:inset 0 0 0 1px var(--ba-btn-line)}[data-force=hover] .ba-button[data-appearance=ghost]{background:color-mix(in srgb, var(--brand-text) 7%, transparent)}[data-force=focus] .ba-button{outline:3px solid var(--brand-focus);outline-offset:4px}[data-force=active] .ba-button{transform:scale(.96)}[data-force=hover] .brand-button{border-color:var(--brand-button-border-hover);background:var(--brand-button-bg-hover);box-shadow:var(--brand-button-shadow-hover);color:var(--brand-button-fg-hover);transform:translateY(-1px)}:where([data-button-appearance=depth]) [data-force=hover] .brand-button:not([data-appearance]),[data-force=hover] .brand-button[data-appearance=depth]{filter:brightness(1.04);transform:none}[data-force=focus] .brand-button{outline:2px solid var(--brand-focus);outline-offset:2px}[data-force=active] .brand-button{transform:scale(.95)}[data-force=focus] .brand-input,[data-force=focus] input{outline:2px solid var(--brand-focus);outline-offset:2px}