@layer m3-components{.m3-navbar{z-index:var(--md-sys-z-nav);box-sizing:border-box;block-size:calc(var(--md-sys-size-nav-bar) + env(safe-area-inset-bottom,0px));padding:0 var(--md-sys-space-2) env(safe-area-inset-bottom,0);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);justify-content:space-around;align-items:stretch;display:flex}.m3-navbar[data-fixed]{position:fixed;inset-block-end:0;inset-inline:0}.m3-navbar__item{--_fg:var(--md-sys-color-on-surface-variant);min-width:0;max-width:168px;padding-block:12px var(--_pb,12px);color:var(--_fg);-webkit-tap-highlight-color:transparent;cursor:pointer;transition:color var(--md-sys-motion-t-fx-small);outline:none;flex-direction:column;flex:1 1 0;align-items:center;gap:4px;margin-inline:auto;text-decoration:none;display:flex;position:relative}.m3-navbar__pill{isolation:isolate;border-radius:var(--md-sys-shape-corner-full);--m3-icon-size:var(--md-sys-size-icon);place-items:center;block-size:32px;inline-size:56px;display:grid;position:relative}.m3-navbar__pill:after,.m3-navbar__pill:before{content:"";z-index:-1;border-radius:inherit;position:absolute;inset:0}.m3-navbar__pill:before{background:var(--md-sys-color-secondary-container);opacity:0;scale:calc(1 - .5 * var(--md-sys-motion-travel)) 1;transition:scale var(--md-sys-motion-t-small),opacity var(--md-sys-motion-t-fx-small)}.m3-navbar__pill:after{background:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--md-sys-motion-t-state)}.m3-navbar__item[data-active] .m3-navbar__pill:before{opacity:1;scale:1}@media (hover:hover){.m3-navbar__item:hover .m3-navbar__pill:after{opacity:var(--md-sys-state-hover-opacity)}}.m3-navbar__item:active .m3-navbar__pill:after{opacity:var(--md-sys-state-pressed-opacity);transition-duration:0s}.m3-navbar__item:focus-visible .m3-navbar__pill{outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:var(--md-sys-focus-offset)}.m3-navbar__item[data-active] .m3-navbar__pill{color:var(--md-sys-color-on-secondary-container)}.m3-navbar__label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;font:500 12px/16px var(--md-ref-typeface-brand);letter-spacing:.5px;overflow:hidden}.m3-navbar__item[data-active] .m3-navbar__label{color:var(--md-sys-color-secondary)}.m3-navbar:not([data-floating]){border-block-start:var(--md-sys-border-thin) solid var(--md-sys-color-outline-variant)}.m3-navbar[data-floating]{--_gap:var(--md-sys-space-3);--_bg:color-mix(in srgb, var(--md-sys-color-surface-container) 84%, transparent);--_line:transparent;isolation:isolate;block-size:var(--md-sys-size-nav-bar-floating);padding:0 var(--md-sys-space-2);margin:var(--_gap);border-radius:var(--md-sys-shape-corner-full);background:0 0;position:relative}.m3-navbar[data-floating]:after{content:"";z-index:-1;border-radius:inherit;pointer-events:none;background:var(--_bg);box-shadow:inset 0 0 0 var(--md-sys-border-thin) var(--_line);-webkit-backdrop-filter:blur(18px)saturate(1.5);backdrop-filter:blur(18px)saturate(1.5);position:absolute;inset:0}.m3-navbar[data-floating][data-fixed]{max-inline-size:520px;inline-size:calc(100% - 2 * var(--_gap));margin-inline:auto;margin-block:var(--_gap);position:fixed;inset-block-end:max(0px,env(safe-area-inset-bottom,0px) - var(--_gap) + var(--md-sys-space-1));inset-inline:0}.m3-navbar[data-floating] .m3-navbar__item{gap:2px;padding-block:7px}.m3-navbar[data-look=outline]{--_line:var(--md-sys-color-outline-variant)}.m3-navbar[data-look=tonal]{--_bg:color-mix(in srgb, var(--md-sys-color-primary) 7%, var(--md-sys-color-surface-container-highest))}.m3-navbar[data-look=fade]{--_bg:color-mix(in srgb, var(--md-sys-color-surface-container-high) 92%, transparent)}.m3-navbar[data-look=fade]:before{content:"";z-index:-2;pointer-events:none;inset-inline:calc(-1 * var(--_gap));inset-block:calc(-1 * var(--md-sys-space-12)) calc(-64px + -1 * var(--_gap));background:linear-gradient(to bottom,transparent,var(--md-sys-color-surface) calc(var(--md-sys-space-12) + var(--md-sys-space-2)));position:absolute}.m3-navbar[data-look=fade][data-fixed]:before{inline-size:100vw;inset-inline:50% auto;translate:-50%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.m3-navbar[data-floating]{--_bg:var(--md-sys-color-surface-container)}}@media (prefers-reduced-transparency:reduce){.m3-navbar[data-floating]{--_bg:var(--md-sys-color-surface-container)}}@media (forced-colors:active){.m3-navbar{border-block-start:1px solid canvastext}.m3-navbar[data-floating]:after{border:1px solid canvastext}.m3-navbar__item[data-active] .m3-navbar__pill{outline:2px solid highlight}}}