@layer m3-components{.m3-appbar{--_lead:4px;z-index:var(--md-sys-z-sticky);box-sizing:border-box;inline-size:100%;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);padding-inline:var(--md-sys-page-margin) max(4px,-8px + var(--md-sys-page-margin));transition:background-color var(--md-sys-motion-t-fx-medium);position:sticky;top:0;container:m3-appbar/inline-size}.m3-appbar[data-lead]{padding-inline-start:var(--_lead)}.m3-appbar[data-scrolled]{background:var(--md-sys-color-surface-container)}.m3-appbar__row{align-items:center;gap:var(--md-sys-space-2);block-size:var(--md-sys-size-app-bar);display:flex}.m3-appbar__lead,.m3-appbar__trail{align-items:center;gap:var(--md-sys-space-1);flex:none;display:flex}.m3-appbar__title{text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:opacity var(--md-sys-motion-t-fx-medium);flex:0 auto;padding-inline-start:var(--md-sys-space-2);overflow:hidden}.m3-appbar:not([data-lead]) .m3-appbar__title{padding-inline-start:0}.m3-appbar__title[data-hidden]{opacity:0}.m3-appbar__center{flex:1;justify-content:center;min-width:0;display:flex}.m3-appbar__trail{margin-inline-start:auto}@container m3-appbar (width<520px){.m3-appbar__row:has(>.m3-appbar__center:not(:empty)){flex-wrap:wrap;row-gap:0;block-size:auto}.m3-appbar__row:has(>.m3-appbar__center:not(:empty))>:is(.m3-appbar__lead,.m3-appbar__trail){min-block-size:var(--md-sys-size-app-bar)}.m3-appbar__row:has(>.m3-appbar__center:not(:empty))>.m3-appbar__title{line-height:var(--md-sys-size-app-bar)}.m3-appbar__center:not(:empty){flex:100%;order:3;justify-content:stretch;padding-block-end:var(--md-sys-space-2)}.m3-appbar__center:not(:empty)>*{flex:1;inline-size:auto}}.m3-appbar__title{font:500 20px/28px var(--md-ref-typeface-brand);letter-spacing:-.1px}.m3-appbar__mark{border-radius:var(--md-sys-shape-corner-medium);background:var(--md-sys-color-primary);block-size:32px;inline-size:32px;color:var(--md-sys-color-on-primary);--m3-icon-size:20px;flex:none;place-items:center;display:grid}.m3-appbar__mark+.m3-appbar__title{padding-inline-start:var(--md-sys-space-1)}.m3-appbar:not([data-look=classic]){isolation:isolate;background:0 0}.m3-appbar[data-look=fade]:before{content:"";inset:0 0 calc(-1 * var(--md-sys-space-6));z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--md-sys-color-surface) 86%,transparent);-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);-webkit-mask-image:linear-gradient(#000 calc(100% - var(--md-sys-space-6)),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - var(--md-sys-space-6)),transparent);mask-image:linear-gradient(#000 calc(100% - var(--md-sys-space-6)),transparent);opacity:0;transition:opacity var(--md-sys-motion-t-fx-medium);position:absolute}.m3-appbar[data-look=fade][data-scrolled]:before{opacity:1}.m3-appbar[data-look=pill]{padding-block:var(--md-sys-space-2) 0;padding-inline:max(var(--md-sys-space-2),var(--md-sys-page-margin) - var(--md-sys-space-2))}.m3-appbar[data-look=pill] .m3-appbar__row{--_ph:calc(var(--md-sys-size-app-bar) - var(--md-sys-space-2));block-size:var(--_ph);padding-inline:var(--md-sys-space-1);border-radius:var(--md-sys-shape-corner-full);background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 88%,transparent);-webkit-backdrop-filter:blur(18px)saturate(1.5);backdrop-filter:blur(18px)saturate(1.5);transition:background-color var(--md-sys-motion-t-fx-medium)}.m3-appbar[data-look=pill][data-scrolled] .m3-appbar__row{background:color-mix(in srgb,var(--md-sys-color-surface-container-highest) 90%,transparent)}.m3-appbar[data-look=pill]:not([data-lead]) .m3-appbar__title{padding-inline-start:var(--md-sys-space-4)}.m3-appbar[data-look=pill]:not([data-lead]) .m3-appbar__mark{margin-inline-start:var(--md-sys-space-2)}.m3-appbar[data-look=pill]:not([data-lead]) .m3-appbar__mark+.m3-appbar__title{padding-inline-start:var(--md-sys-space-1)}.m3-appbar[data-look=pill][data-untitled] .m3-appbar__row{inline-size:fit-content;margin-inline-start:auto}.m3-appbar[data-look=pill][data-untitled] .m3-appbar__title{display:none}.m3-appbar[data-look=pill] .m3-appbar__big-inner{padding-block-start:var(--md-sys-space-3);padding-inline-start:var(--md-sys-space-4)}.m3-appbar[data-look=line]{background:var(--md-sys-color-surface);box-shadow:inset 0 calc(-1 * var(--md-sys-border-thin)) 0 transparent;transition:box-shadow var(--md-sys-motion-t-fx-medium)}.m3-appbar[data-look=line][data-scrolled]{box-shadow:inset 0 calc(-1 * var(--md-sys-border-thin)) 0 var(--md-sys-color-outline-variant)}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.m3-appbar[data-look=fade]:before{background:var(--md-sys-color-surface)}.m3-appbar[data-look=pill] .m3-appbar__row{background:var(--md-sys-color-surface-container-high)}}.m3-appbar__big{transition:grid-template-rows var(--md-sys-motion-t-medium),opacity var(--md-sys-motion-t-fx-medium);grid-template-rows:1fr;display:grid}.m3-appbar__big[data-collapsed]{opacity:0;transition:grid-template-rows var(--md-sys-motion-t-medium-out),opacity var(--md-sys-motion-fx-micro) linear;grid-template-rows:0fr}.m3-appbar__big-clip{min-block-size:0;overflow:hidden}.m3-appbar__big-inner{padding-block-end:var(--md-sys-space-3);padding-inline-start:var(--md-sys-space-1);font-weight:400}.m3-appbar[data-size=large] .m3-appbar__big-inner{padding-block-end:var(--md-sys-space-4)}.m3-appbar[data-lead] .m3-appbar__big-inner{padding-inline-start:var(--md-sys-space-3)}.m3-appbar:not([data-lead]) .m3-appbar__big-inner{padding-inline-start:0}}@layer m3-density{:root[data-density=compact] .m3-appbar__title{font-size:18px;line-height:24px}:root[data-density=compact] .m3-appbar__mark{--m3-icon-size:18px;block-size:28px;inline-size:28px}}