.app-shell{flex-direction:column;min-height:100dvh;display:flex}.skip-link{z-index:100;background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border-radius:9999px;padding:12px 16px;text-decoration:none;position:absolute;top:-64px;left:16px}.skip-link:focus{top:8px}.top-bar{z-index:30;background:var(--md-sys-color-surface-container);height:64px;color:var(--md-sys-color-on-surface);border-bottom:1px solid var(--md-sys-color-outline-variant);align-items:center;gap:8px;padding-inline:8px 12px;display:flex;position:sticky;top:0}.top-bar-actions{align-items:center;gap:4px;margin-left:auto;display:flex}.demo-pill{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);border-radius:9999px;align-items:center;gap:6px;padding:4px 12px;display:none}.demo-pill md-icon{--md-icon-size:18px}.shell-body{flex:1;display:flex;position:relative}.shell-nav{z-index:25;background:var(--md-sys-color-surface-container-low);visibility:hidden;border-radius:0 16px 16px 0;width:min(320px,86vw);transition:transform .25s cubic-bezier(.2,0,0,1);position:fixed;top:64px;bottom:0;left:0;overflow-y:auto;transform:translate(-100%)}.shell-nav.is-open{visibility:visible;transform:translate(0)}.shell-scrim{z-index:20;background:var(--md-sys-color-scrim);opacity:.32;cursor:pointer;border:0;padding:0;position:fixed;inset:64px 0 0}.shell-main{flex:1;min-width:0}.nav-drawer{flex-direction:column;gap:2px;padding:12px;display:flex}.nav-heading{color:var(--md-sys-color-on-surface-variant);margin:12px 16px 8px}.nav-divider{margin-block:8px}.nav-item{height:56px;color:var(--md-sys-color-on-surface-variant);border-radius:9999px;align-items:center;gap:12px;padding-inline:16px 24px;text-decoration:none;display:flex}.nav-item:hover{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface)}.nav-item:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:-2px}.nav-item.is-active{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.nav-item.is-active md-icon{font-variation-settings:"FILL" 1}.nav-footer{color:var(--md-sys-color-on-surface-variant);gap:12px;padding:12px 16px;display:flex}.nav-footer md-icon{--md-icon-size:20px;color:var(--md-sys-color-tertiary);flex-shrink:0}@media (min-width:600px){.demo-pill{display:inline-flex}}@media (min-width:840px){.menu-button,.shell-scrim{display:none}.top-bar{padding-inline:16px}.shell-nav{visibility:visible;border-radius:0;flex-shrink:0;width:280px;height:calc(100dvh - 64px);transition:none;position:sticky;top:64px;transform:none}}