.md-appbar-demo{inline-size:28rem;max-inline-size:100%}.md-app-bar{--_elevation-level: var(--_appbar-elevation);--_shadow-color: var(--_appbar-shadow, var(--md-sys-color-shadow));position:relative;inline-size:100%;block-size:var(--_appbar-height);border-radius:var(--_appbar-shape);background:var(--_appbar-container);box-sizing:border-box;transition:background-color var(--_motion-fast-effects-duration) var(--_motion-fast-effects-easing),box-shadow var(--_motion-fast-effects-duration) var(--_motion-fast-effects-easing)}.md-appbar-row{display:flex;align-items:center;block-size:var(--md-comp-app-bar-small-container-height);padding-inline:var(--_appbar-leading, var(--md-sys-measurement-space50)) var(--_appbar-trailing, var(--md-sys-measurement-space50));gap:var(--_appbar-button-gap, var(--md-sys-measurement-space0));box-sizing:border-box}.md-appbar-copy{display:grid;min-inline-size:0;gap:var(--md-sys-measurement-space0);padding-inline:var(--md-sys-measurement-space100)}.md-appbar-title{margin:0;color:var(--_appbar-title-color);font:var(--_appbar-title-font);letter-spacing:var(--_appbar-title-tracking);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-appbar-subtitle{color:var(--_appbar-subtitle-color);font:var(--_appbar-subtitle-font);letter-spacing:var(--_appbar-subtitle-tracking)}.md-app-bar:where([data-variant^=baseline-]) .md-appbar-title{margin:0;font-family:var(--_appbar-title-font-family);font-size:var(--_appbar-title-font-size);font-weight:var(--_appbar-title-font-weight);line-height:var(--_appbar-title-line-height);letter-spacing:var(--_appbar-title-tracking)}.md-appbar-expanded{position:absolute;inset-inline:var(--md-sys-measurement-space200);inset-block-end:var(--md-sys-measurement-space200);padding:0}.md-appbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--_appbar-button-gap, var(--md-sys-measurement-space0))}.md-appbar-avatar-slot{display:grid;place-items:center;flex:none;inline-size:var(--md-comp-icon-button-small-container-height);block-size:var(--md-comp-icon-button-small-container-height)}.md-app-bar .md-appbar-actions .md-icon-button{color:var(--_appbar-trailing-icon, var(--md-sys-color-on-surface-variant));--_icon-icon: var( --_appbar-trailing-icon, var(--md-sys-color-on-surface-variant) );--_icon-icon-size: var( --_appbar-trailing-icon-size, var(--_appbar-icon-size, var(--md-comp-icon-button-small-icon-size)) )}.md-app-bar .md-appbar-row>.md-icon-button{color:var(--_appbar-leading-icon, var(--md-sys-color-on-surface));--_icon-icon: var(--_appbar-leading-icon, var(--md-sys-color-on-surface));--_icon-icon-size: var( --_appbar-leading-icon-size, var(--_appbar-icon-size, var(--md-comp-icon-button-small-icon-size)) )}.md-app-bar:where([data-variant=centered],[data-variant=baseline-centered]) .md-appbar-copy{position:absolute;inset-inline:25%;text-align:center;padding:0}.md-appbar-avatar{display:grid;place-items:center;inline-size:var(--_appbar-avatar-size);block-size:var(--_appbar-avatar-size);border-radius:min(var(--_appbar-avatar-shape, calc(var(--_appbar-avatar-size) / 2)),calc(var(--_appbar-avatar-size) / 2));background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);font:var(--md-sys-typescale-label-medium)}.md-appbar-search{flex:1;min-inline-size:0;display:flex;align-items:center;gap:var(--md-sys-measurement-space100);block-size:var(--_appbar-search-height);border-radius:var(--_appbar-search-shape);padding-inline:var(--_appbar-search-leading) var(--_appbar-search-trailing);color:var(--_appbar-search-label);background:var(--_appbar-search-container)}.md-appbar-search input{inline-size:100%;min-inline-size:0;padding:0;border:0;outline:0;background:transparent;color:inherit;font:var(--_appbar-search-font);letter-spacing:var(--_appbar-search-tracking)}.md-appbar-search input::placeholder{color:inherit;opacity:1}.md-appbar-search:focus-within{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}.md-app-bar:where([data-variant=bottom]) .md-appbar-row{block-size:100%;padding-inline:var(--md-sys-measurement-space50) var(--md-sys-measurement-space200)}.md-app-bar[data-variant=bottom] .md-icon-button{margin-inline:var(--md-sys-measurement-space50)}.md-appbar-demo:not(.md-search-demo)[data-interactive=true]:has(.md-appbar-content){max-block-size:20rem;overflow:auto}.md-appbar-demo[data-interactive=true] .md-app-bar{position:sticky;inset-block-start:0;z-index:1}.md-appbar-content{padding:var(--md-sys-measurement-space200);background:var(--md-sys-color-surface)}.md-appbar-content p{margin-block:var(--md-sys-measurement-space200)}.md-app-bar:is([data-variant=medium-flexible],[data-variant=large-flexible]){display:flex;flex-direction:column;min-block-size:var(--_appbar-height);block-size:auto}.md-app-bar:is([data-variant=medium-flexible],[data-variant=large-flexible]) .md-appbar-expanded{position:static;margin-block:auto var(--md-sys-measurement-space200);padding-inline:var(--md-sys-measurement-space200)}.md-app-bar:is([data-variant=medium-flexible],[data-variant=large-flexible]) .md-appbar-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}@media(min-width:1200px){.md-appbar-row,.md-app-bar:is([data-variant=medium-flexible],[data-variant=large-flexible]) .md-appbar-expanded{box-sizing:border-box;max-inline-size:75rem;inline-size:100%;margin-inline:auto}.md-appbar-expanded{inset-inline:max(var(--md-sys-measurement-space200),calc((100% - 75rem) / 2))}}.md-appbar-row:has(>.md-appbar-search){display:grid;grid-template-columns:max-content minmax(0,1fr) max-content}.md-appbar-search{box-sizing:border-box;inline-size:min(100%,max(312px,50%))}.md-appbar-demo.md-search-demo{inline-size:48rem;max-block-size:none;overflow:visible}.md-appbar-search-scene>.md-search-page{box-sizing:border-box;block-size:100%;padding:0;overflow:auto}.md-appbar-search-scene>.md-search-view[data-open=false]{visibility:hidden;pointer-events:none}button.md-appbar-search{--_button-rest-shape: var(--_appbar-search-shape);--_button-pressed-shape: var(--_appbar-search-shape);border:0;font:var(--_appbar-search-font);letter-spacing:var(--_appbar-search-tracking);text-align:start;cursor:pointer}.md-app-bar:where([data-modern]){--_appbar-avatar-size: var(--md-comp-app-bar-avatar-size);--_appbar-container: var(--md-comp-app-bar-container-color);--_appbar-elevation: var(--md-comp-app-bar-container-elevation);--_appbar-shape: var(--md-comp-app-bar-container-shape);--_appbar-icon-size: var(--md-comp-app-bar-icon-size);--_appbar-button-gap: var(--md-comp-app-bar-icon-button-space);--_appbar-leading-icon: var(--md-comp-app-bar-leading-icon-color);--_appbar-leading: var(--md-comp-app-bar-leading-space);--_appbar-search-container: var(--md-comp-app-bar-search-container-color);--_appbar-search-label: var(--md-comp-app-bar-search-label-color);--_appbar-search-leading: var(--md-comp-app-bar-search-leading-space);--_appbar-search-trailing: var(--md-comp-app-bar-search-trailing-space);--_appbar-subtitle-color: var(--md-comp-app-bar-subtitle-color);--_appbar-title-color: var(--md-comp-app-bar-title-color);--_appbar-trailing-icon: var(--md-comp-app-bar-trailing-icon-color);--_appbar-trailing: var(--md-comp-app-bar-trailing-space)}.md-app-bar:where([data-variant=large]){--_appbar-height: var(--md-comp-app-bar-large-container-height);--_appbar-icon-size: var(--md-comp-app-bar-large-icon-size);--_appbar-subtitle-font: var(--md-comp-app-bar-large-subtitle-font);--_appbar-subtitle-tracking: var(--md-comp-app-bar-large-subtitle-font-letter-spacing);--_appbar-title-font: var(--md-comp-app-bar-large-title-font);--_appbar-title-tracking: var(--md-comp-app-bar-large-title-font-letter-spacing)}.md-app-bar:where([data-variant=large-flexible]){--_appbar-height: var(--md-comp-app-bar-large-flexible-container-height);--_appbar-subtitle-font: var(--md-comp-app-bar-large-flexible-subtitle-font);--_appbar-subtitle-tracking: var(--md-comp-app-bar-large-flexible-subtitle-font-letter-spacing);--_appbar-title-font: var(--md-comp-app-bar-large-flexible-title-font);--_appbar-title-tracking: var(--md-comp-app-bar-large-flexible-title-font-letter-spacing)}.md-app-bar:where([data-variant=medium]){--_appbar-height: var(--md-comp-app-bar-medium-container-height);--_appbar-icon-size: var(--md-comp-app-bar-medium-icon-size);--_appbar-subtitle-font: var(--md-comp-app-bar-medium-subtitle-font);--_appbar-subtitle-tracking: var(--md-comp-app-bar-medium-subtitle-font-letter-spacing);--_appbar-title-font: var(--md-comp-app-bar-medium-title-font);--_appbar-title-tracking: var(--md-comp-app-bar-medium-title-font-letter-spacing)}.md-app-bar:where([data-variant=medium-flexible]){--_appbar-height: var(--md-comp-app-bar-medium-flexible-container-height);--_appbar-subtitle-font: var(--md-comp-app-bar-medium-flexible-subtitle-font);--_appbar-subtitle-tracking: var(--md-comp-app-bar-medium-flexible-subtitle-font-letter-spacing);--_appbar-title-font: var(--md-comp-app-bar-medium-flexible-title-font);--_appbar-title-tracking: var(--md-comp-app-bar-medium-flexible-title-font-letter-spacing)}.md-app-bar:where([data-variant=small],[data-variant=centered]){--_appbar-height: var(--md-comp-app-bar-small-container-height);--_appbar-icon-size: var(--md-comp-app-bar-small-icon-size);--_appbar-search-height: var(--md-comp-app-bar-small-search-container-height);--_appbar-search-shape: var(--md-comp-app-bar-small-search-container-shape);--_appbar-search-font: var(--md-comp-app-bar-small-search-label-text-font);--_appbar-search-tracking: var(--md-comp-app-bar-small-search-label-text-font-letter-spacing);--_appbar-subtitle-font: var(--md-comp-app-bar-small-subtitle-font);--_appbar-subtitle-tracking: var(--md-comp-app-bar-small-subtitle-font-letter-spacing);--_appbar-title-font: var(--md-comp-app-bar-small-title-font);--_appbar-title-tracking: var(--md-comp-app-bar-small-title-font-letter-spacing)}.md-app-bar:where([data-variant=bottom]){--_appbar-container: var(--md-comp-bottom-app-bar-container-color);--_appbar-elevation: var(--md-comp-bottom-app-bar-container-elevation);--_appbar-height: var(--md-comp-bottom-app-bar-container-height);--_appbar-shape: var(--md-comp-bottom-app-bar-container-shape)}.md-app-bar:where([data-variant=baseline-large]){--_appbar-container: var(--md-comp-top-app-bar-large-container-color);--_appbar-elevation: var(--md-comp-top-app-bar-large-container-elevation);--_appbar-height: var(--md-comp-top-app-bar-large-container-height);--_appbar-shape: var(--md-comp-top-app-bar-large-container-shape);--_appbar-title-color: var(--md-comp-top-app-bar-large-headline-color);--_appbar-title-font-family: var(--md-comp-top-app-bar-large-headline-font);--_appbar-title-line-height: var(--md-comp-top-app-bar-large-headline-line-height);--_appbar-title-font-size: var(--md-comp-top-app-bar-large-headline-size);--_appbar-title-tracking: var(--md-comp-top-app-bar-large-headline-tracking);--_appbar-title-font-weight: var(--md-comp-top-app-bar-large-headline-weight);--_appbar-leading-icon: var(--md-comp-top-app-bar-large-leading-icon-color);--_appbar-leading-icon-size: var(--md-comp-top-app-bar-large-leading-icon-size);--_appbar-trailing-icon: var(--md-comp-top-app-bar-large-trailing-icon-color);--_appbar-trailing-icon-size: var(--md-comp-top-app-bar-large-trailing-icon-size)}.md-app-bar:where([data-variant=baseline-medium]){--_appbar-container: var(--md-comp-top-app-bar-medium-container-color);--_appbar-elevation: var(--md-comp-top-app-bar-medium-container-elevation);--_appbar-height: var(--md-comp-top-app-bar-medium-container-height);--_appbar-shape: var(--md-comp-top-app-bar-medium-container-shape);--_appbar-title-color: var(--md-comp-top-app-bar-medium-headline-color);--_appbar-title-font-family: var(--md-comp-top-app-bar-medium-headline-font);--_appbar-title-line-height: var(--md-comp-top-app-bar-medium-headline-line-height);--_appbar-title-font-size: var(--md-comp-top-app-bar-medium-headline-size);--_appbar-title-tracking: var(--md-comp-top-app-bar-medium-headline-tracking);--_appbar-title-font-weight: var(--md-comp-top-app-bar-medium-headline-weight);--_appbar-leading-icon: var(--md-comp-top-app-bar-medium-leading-icon-color);--_appbar-leading-icon-size: var(--md-comp-top-app-bar-medium-leading-icon-size);--_appbar-trailing-icon: var(--md-comp-top-app-bar-medium-trailing-icon-color);--_appbar-trailing-icon-size: var(--md-comp-top-app-bar-medium-trailing-icon-size)}.md-app-bar:where([data-variant=baseline-centered]){--_appbar-avatar-shape: var(--md-comp-top-app-bar-small-centered-avatar-shape);--_appbar-avatar-size: var(--md-comp-top-app-bar-small-centered-avatar-size);--_appbar-container: var(--md-comp-top-app-bar-small-centered-container-color);--_appbar-elevation: var(--md-comp-top-app-bar-small-centered-container-elevation);--_appbar-height: var(--md-comp-top-app-bar-small-centered-container-height);--_appbar-shape: var(--md-comp-top-app-bar-small-centered-container-shape);--_appbar-title-color: var(--md-comp-top-app-bar-small-centered-headline-color);--_appbar-title-font-family: var(--md-comp-top-app-bar-small-centered-headline-font);--_appbar-title-line-height: var(--md-comp-top-app-bar-small-centered-headline-line-height);--_appbar-title-font-size: var(--md-comp-top-app-bar-small-centered-headline-size);--_appbar-title-tracking: var(--md-comp-top-app-bar-small-centered-headline-tracking);--_appbar-title-font-weight: var(--md-comp-top-app-bar-small-centered-headline-weight);--_appbar-leading-icon: var(--md-comp-top-app-bar-small-centered-leading-icon-color);--_appbar-leading-icon-size: var(--md-comp-top-app-bar-small-centered-leading-icon-size);--_appbar-trailing-icon: var(--md-comp-top-app-bar-small-centered-trailing-icon-color);--_appbar-trailing-icon-size: var(--md-comp-top-app-bar-small-centered-trailing-icon-size)}.md-app-bar:where([data-variant=baseline-small]){--_appbar-container: var(--md-comp-top-app-bar-small-container-color);--_appbar-elevation: var(--md-comp-top-app-bar-small-container-elevation);--_appbar-height: var(--md-comp-top-app-bar-small-container-height);--_appbar-shape: var(--md-comp-top-app-bar-small-container-shape);--_appbar-title-color: var(--md-comp-top-app-bar-small-headline-color);--_appbar-title-font-family: var(--md-comp-top-app-bar-small-headline-font);--_appbar-title-line-height: var(--md-comp-top-app-bar-small-headline-line-height);--_appbar-title-font-size: var(--md-comp-top-app-bar-small-headline-size);--_appbar-title-tracking: var(--md-comp-top-app-bar-small-headline-tracking);--_appbar-title-font-weight: var(--md-comp-top-app-bar-small-headline-weight);--_appbar-leading-icon: var(--md-comp-top-app-bar-small-leading-icon-color);--_appbar-leading-icon-size: var(--md-comp-top-app-bar-small-leading-icon-size);--_appbar-trailing-icon: var(--md-comp-top-app-bar-small-trailing-icon-color);--_appbar-trailing-icon-size: var(--md-comp-top-app-bar-small-trailing-icon-size)}.md-app-bar:where([data-variant=large-flexible]):where([data-control=subtitle]){--_appbar-height: var(--md-comp-app-bar-large-flexible-with-subtitle-container-height)}.md-app-bar:where([data-variant=medium-flexible]):where([data-control=subtitle]){--_appbar-height: var(--md-comp-app-bar-medium-flexible-with-subtitle-container-height)}.md-app-bar:where([data-variant=bottom]):where([data-control=fab]){--_appbar-height: var(--md-comp-bottom-app-bar-with-fab-container-height)}.md-app-bar:where([data-modern]):where([data-scrolled],[data-component-state=scrolled]){--_appbar-container: var(--md-comp-app-bar-on-scroll-container-color);--_appbar-elevation: var(--md-comp-app-bar-on-scroll-container-elevation);--_appbar-search-container: var(--md-comp-app-bar-search-on-scroll-container-color)}.md-app-bar:where([data-variant=baseline-centered]):where([data-scrolled],[data-component-state=scrolled]){--_appbar-container: var(--md-comp-top-app-bar-small-centered-on-scroll-container-color);--_appbar-elevation: var(--md-comp-top-app-bar-small-centered-on-scroll-container-elevation);--_appbar-shadow: var(--md-comp-top-app-bar-small-centered-on-scroll-container-shadow-color)}.md-app-bar:where([data-variant=baseline-small]):where([data-scrolled],[data-component-state=scrolled]){--_appbar-container: var(--md-comp-top-app-bar-small-on-scroll-container-color);--_appbar-elevation: var(--md-comp-top-app-bar-small-on-scroll-container-elevation);--_appbar-shadow: var(--md-comp-top-app-bar-small-on-scroll-container-shadow-color)}