.dbdict-ui-demo {
    margin-block: clamp(2rem, 5vw, 4rem);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--db-border-muted, #e4e6eb);
    border-radius: var(--db-radius-l, 16px);
    background: var(--db-surface-base, #fff);
}

.dbdict-ui-demo__eyebrow {
    margin: 0 0 .35rem;
    color: var(--db-brand-primary, #315efb);
    font-size: .8125rem;
    font-weight: 700;
}

.dbdict-ui-demo__heading h2 {
    margin: 0;
    font-size: clamp(1.125rem, 2vw, 1.35rem);
}

.dbdict-ui-demo__heading p:last-child {
    margin: .5rem 0 0;
    color: var(--db-text-secondary, #525766);
}

.dbdict-ui-demo__stage {
    display: flex;
    min-height: 5rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--db-border-muted, #e4e6eb);
    border-radius: var(--db-radius-m, 12px);
    background: var(--db-surface-subtle, #f8f9fc);
}

.dbdict-ui-demo__stage > * { max-width: 100%; }
.dbdict-ui-demo__stage > .designbase-wc-modal { max-width: none; }
.dbdict-ui-demo__stage > .designbase-wc-range-slider { flex: 1 1 15rem; }
.dbdict-ui-demo__stage > .designbase-wc-input { flex: 1 1 16rem; }

.dbdict-demo-fieldset {
    display: grid;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.dbdict-demo-fieldset legend { margin-bottom: .75rem; font-weight: 700; }
.dbdict-chip-demo { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.dbdict-chip-demo [data-dbdict-chip-status] { flex-basis: 100%; color: var(--db-text-secondary, #525766); font-size: .875rem; }
.dbdict-demo-icon { width: 2rem; height: 2rem; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: help; }
.dbdict-carousel { width: 100%; }
.dbdict-carousel__slides { max-width: 32rem; margin-inline: auto; }
.dbdict-carousel__controls { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: 1rem; }
db-grid[data-dbdict-responsive-grid], db-grid[data-dbdict-mobile-first], db-grid[data-dbdict-adaptive-grid] { width: 100%; }
db-grid[data-dbdict-responsive-grid], db-grid[data-dbdict-mobile-first], db-grid[data-dbdict-adaptive-grid] { grid-template-columns: minmax(0, 1fr) !important; }
.dbdict-transition-demo db-button { transition: transform .18s ease, filter .18s ease; }
.dbdict-transition-demo db-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.dbdict-sticky-demo { display: grid; grid-template-columns: minmax(7rem, .35fr) 1fr; gap: 1rem; width: 100%; }
.dbdict-sticky-demo > strong { position: sticky; top: 1rem; align-self: start; }
.dbdict-sticky-demo__content { max-height: 12rem; overflow: auto; padding-inline: 1rem; border-inline-start: 1px solid var(--db-border-muted, #e4e6eb); }
.dbdict-chart { width: 100%; margin: 0; }
.dbdict-chart figcaption { margin-bottom: .75rem; font-weight: 700; }
.dbdict-chart > div { display: flex; align-items: end; gap: .75rem; min-height: 9rem; border-bottom: 1px solid var(--db-border-muted, #e4e6eb); }
.dbdict-chart__bar { display: flex; align-items: start; justify-content: center; flex: 1; min-height: 2rem; padding: .5rem .25rem; border-radius: .5rem .5rem 0 0; background: var(--db-brand-primary, #315efb); color: #fff; font-size: .75rem; }
.dbdict-chart__bar--40 { height: 40%; }
.dbdict-chart__bar--50 { height: 50%; }
.dbdict-chart__bar--65 { height: 65%; }
.dbdict-launcher-demo { display: flex; align-items: center; gap: 1rem; }
.dbdict-launcher-icon { display: grid; width: 4rem; aspect-ratio: 1; place-items: center; border-radius: 1rem; background: #315efb; color: #fff; font-weight: 800; }
.dbdict-dark-demo { display: grid; gap: 1rem; width: 100%; padding: 1rem; border-radius: .75rem; background: var(--db-surface-subtle, #f8f9fc); color: var(--db-text-primary, #202431); transition: background-color .2s ease, color .2s ease; }
.dbdict-dark-demo[data-theme="dark"] { background: #202431; color: #f7f8fc; }
.dbdict-dark-demo[data-theme="dark"] db-card { --db-surface-base: #292f3d; --db-text-primary: #f7f8fc; --db-text-secondary: #d3d7e0; }
.dbdict-divider-demo, .dbdict-label-demo, .dbdict-cta-demo, .dbdict-menu-demo { display: grid; gap: .75rem; width: 100%; }
.dbdict-direction-demo { width: 100%; }
.dbdict-ui-demo__stage > .designbase-wc-navbar,
.dbdict-ui-demo__stage > .designbase-wc-toolbar,
.dbdict-ui-demo__stage > .designbase-wc-table,
.dbdict-ui-demo__stage > .designbase-wc-list,
.dbdict-ui-demo__stage > .designbase-wc-breadcrumbs { flex: 1 1 100%; }

@media (min-width: 42rem) {
    db-grid[data-dbdict-responsive-grid], db-grid[data-dbdict-adaptive-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dbdict-mobile-first { max-width: 30rem; }
}

@media (max-width: 36rem) {
    .dbdict-sticky-demo { grid-template-columns: 1fr; }
    .dbdict-sticky-demo > strong { position: static; }
}

.dbdict-demo-icon:focus-visible { outline: 2px solid var(--db-border-focus, #315efb); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .dbdict-ui-demo *, .dbdict-ui-demo *::before, .dbdict-ui-demo *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}