@import url(module/typo.desktop.css);
   @import url(module/color-scheme.surface.css);
   @import url(module/color-scheme.color.css);
   :root { 
      /*Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.*/
      --sharp-easing:cubic-bezier(0.4, 0.0, 0.6, 1); --easing-standard:cubic-bezier(.2,0,0,1);
      --easing-legacy:cubic-bezier(.4,0,.2,1);     --decelerate-legacy:cubic-bezier(0,0,.2,1);   --accelerate-legacy:cubic-bezier(.4,0,1,1);
      --easing-emphasized:cubic-bezier(.2,0,0,1);  --decelerate-emphasized:cubic-bezier(.05,.7,.1,1);   --accelerate-emphasized:cubic-bezier(.3,0,.8,.15);
      --shadow-0:0 0 1px 0 rgba(0,0,0,.15), 0 0 2px 1px rgba(0,0,0,.08);   --shadow-1:0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
      --shadow-2:0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);   --shadow-3:0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); 
      --shadow-4:0 0 1px 0 rgba(0,0,0,.45), 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15); 
      
      margin:0; padding:0; background-color:var(--surface-dim); font:var(--bodyM); letter-spacing:normal; color:var(--on-surface-alt); fill:var(--on-surface-alt); border-color:var(--outline-alt);
   }

   /* -- Clear user agent style -- */
   html, body, div, p, span, footer, header, main, section, article, aside, figure, strong, a, img, sup, ol, ul, li, canvas, svg, button, input, textarea, select { 
      -webkit-appearance:initial; appearance:initial; margin:unset; margin-block:unset; margin-inline:unset; padding:unset; padding-block:unset; padding-inline:unset; 
      outline:unset; border:unset; font:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; font-style:inherit; color:inherit; fill:inherit; user-select:none; box-sizing:border-box; }

   h1, h2, h3, h4, h5, h6 { -webkit-appearance:unset; appearance:unset; margin-block:0; margin-inline:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
   h1 { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); }
   h2 { font:var(--titleL); letter-spacing:var(--titleL-spacing); }
   h3 { font:var(--titleM); letter-spacing:var(--titleM-spacing); }
   h4 { font:var(--titleS); letter-spacing:var(--titleS-spacing); }
   h5 { font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   ol, ul { list-style:none; }
   :any-link, a, [onclick], button { cursor:pointer; }
   :any-link, a { text-decoration:none; color:inherit; }
   :focus-visible { -webkit-appearance:initial; appearance:initial; }
   b, strong { font:inherit; font-weight:600; font-family:inherit; font-size:inherit; font-style:inherit; }
   strong { text-decoration:underline; }
   kbd { display:inline-block; padding:6px 8px; margin-inline:4px; font-family:monospace; font-weight:700; line-height:1; white-space:nowrap; color:var(--on-container); background-color:#eeeeee; border:1px solid #b4b4b4; border-radius:4px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; }
   img:not[src] { opacity:0; }

   /****************   scrollbar   ****************/
   ::-webkit-scrollbar{ width:16px; outline:6px solid var(--surface-container-high); outline-offset:-6px; background-color:var(--surface-container-highest); transition:outline 150ms var(--easing-legacy), background-color 150ms var(--easing-legacy); }
   ::-webkit-scrollbar:hover{ background-color:var(--surface-container); outline-color:var(--surface-container-high); }
   ::-webkit-scrollbar-thumb{ background-color:var(--surface); outline:7.5px solid var(--surface-container-high); outline-offset:-6px; box-shadow:none; border-radius:8px; transition:outline 150ms var(--easing-legacy), background-color 150ms var(--easing-legacy); }
   :hover::-webkit-scrollbar-thumb { background-color:var(--surface); outline-width:7.5px; outline-offset:-6px; }
   ::-webkit-scrollbar-thumb:hover { background-color:var(--surface); outline-width:5.5px; outline-offset:-4px; }
   ::-webkit-scrollbar-thumb:active { background-color:var(--surface); outline-width:4.5px; outline-offset:-3px; }
   @media only screen and (max-width:599px) { ::-webkit-scrollbar { display:none; } }

   .side-sheet::-webkit-scrollbar{ outline-color:var(--surface-dim); }
   .side-sheet::-webkit-scrollbar:hover{ outline-color:var(--surface-dim); }
   .side-sheet::-webkit-scrollbar-thumb{ outline-color:var(--surface-dim); }

/************************************************************************************************************************************************************************************************/
/************************************************************************************************************************************************************************************************/
   body > :is(.side-sheet,[role=document]) { transition:width 400ms var(--easing-emphasized), margin 400ms var(--easing-emphasized), padding 400ms var(--easing-emphasized), border-radius 300ms var(--easing-emphasized); transition-behavior:allow-discrete; }
   [role=document] > :is(header,main) { transition:width 400ms var(--easing-emphasized), margin 400ms var(--easing-emphasized), padding 400ms var(--easing-emphasized); transition-behavior:allow-discrete; }

   /************ html: surface-container | main: surface ****************/                 
   body { --display-width:100vw; position:relative; overscroll-behavior:contain; min-height:100dvh; max-height:100vh; min-width:360px; max-width:var(--display-width); overflow:hidden; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch;  }
   [role="document"] { min-height:100dvh; height:100%; max-height:100vh; background-color:var(--surface-container-high);  position:relative; z-index:1; contain:content; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; overflow-y:scroll; }

   body > .side-sheet { flex:none; position:relative; contain:content; width:0; }
   :is(body,[role="document"]) > header { contain:content; position:sticky; flex:none; height:64px; top:0; padding-inline:4px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; transition:height 200ms var(--easing-emphasized), padding 250ms var(--easing-emphasized); }
   :is(body,[role="document"]) > main { contain:content; position:relative; flex:1; padding-inline:8px; margin-inline:16px; overflow-x:clip; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
   @media only screen and (max-width:599px) { :is(body,[role="document"]) > main { padding-inline:8px; margin-inline:0; } }

   .container { background-color:var(--surface); color:var(--on-surface-alt); fill:var(--on-surface-alt); border:1.5px solid var(--outline-alt); }

   .toolbar { contain:content; position:absolute; z-index:10; inset:auto 24px 16px auto; flex:none; max-width:420px; height:64px; padding:8px; border-radius:999px; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; column-gap:4px; transform-origin:bottom right; }
   .toolbar { background-color:var(--surface-bright); box-shadow:var(--shadow-3); outline:1px solid var(--outline-alt); }
   .toolbar { transition:opacity 125ms var(--easing-emphasized), transform 250ms var(--decelerate-emphasized), max-width 400ms var(--decelerate-emphasized), height 400ms var(--decelerate-emphasized); }
   .toolbar[aria-hidden] { opacity:0; max-width:0; height:0; transform:translateY(36px); }
   .toolbar[aria-hidden] { transition:opacity 150ms var(--easing-emphasized) 50ms, transform 200ms var(--easing-emphasized) 150ms, max-width 300ms var(--easing-emphasized), height 300ms var(--easing-emphasized); }
   
   .toolbar > .segmented-btn > button { --outline-color:var(--outline);  }
   .toolbar > #tonality.segmented-btn > button[aria-selected] { --bg-color:var(--secondary-container); --color:white; }
   .toolbar > #theme-color.segmented-btn > button { --bg-color:var(--surface-container-lowest); --color:var(--primary-container); }
   .toolbar > #theme-color.segmented-btn > button:not([aria-selected]) { --bg-color:var(--surface-container); opacity:.56; }
   .toolbar > #color-scheme.segmented-btn > button[aria-selected] { --bg-color:var(--surface-container-lowest); --color:var(--on-surface-alt); }


   [data-svg]:empty { opacity:0; }
   [data-svg]:not(button) { user-select:none; contain:content; position:relative; flex:none; width:var(--svg-size); height:var(--svg-size); padding:0; margin:0; display:flex; justify-content:flex-start; align-items:center; column-gap:8px; }
   [data-svg]:not(button).icon { justify-content:center; gap:0; }
   [data-svg]:not(button) > svg { pointer-events:none; display:block; width:var(--svg-size); height:var(--svg-size); fill:inherit; stroke:none; background-color:transparent; background:none; border:none; transition:fill 150ms var(--easing-emphasized); }

   [data-svg].alt-svg > svg { position:absolute; z-index:0; opacity:0; transform:scale(0.5) rotate(270deg); top:0; right:0; bottom:0; left:0; margin:auto; fill:inherit; will-change:transform,opacity,fill; transition:transform 100ms var(--easing-emphasized), opacity 75ms var(--easing-emphasized), fill 75ms var(--easing-emphasized); }
   [data-svg].alt-svg:not([aria-selected=true],[aria-current],[aria-pressed]) > svg:not(.bg,.alt) { opacity:1; transform:scale(1) rotate(0deg); z-index:1; }
   [data-svg].alt-svg:is([aria-selected=true],[aria-current],[aria-pressed]) > svg.alt { opacity:1; transform:scale(1) rotate(0deg); z-index:1; }
   .alt-filled > [data-svg] > svg { position:absolute; z-index:0; opacity:0; transform:scale(0.5); top:0; right:0; bottom:0; left:0; margin:auto; fill:inherit; will-change:transform,opacity,fill; transition:transform 100ms var(--easing-emphasized), opacity 75ms var(--easing-emphasized), fill 75ms var(--easing-emphasized); }
   .alt-filled:not([aria-selected=true],[aria-current],[aria-pressed]) > [data-svg] > svg:not(.bg,.alt) { opacity:1; transform:scale(1); z-index:1; }
   .alt-filled:is([aria-selected=true],[aria-current],[aria-pressed]) > [data-svg] > svg.alt { opacity:1; transform:scale(1); z-index:1; }


/************************************************************************************   buttons :: generic   ************************************************************************************/
/************************************************************************************************************************************************************************************************/
   button, [role=button] { user-select:none; position:relative; flex:none; height:var(--height-btn); width:fit-content; padding-inline:var(--padding-btn); display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border-radius:var(--corner-btn); box-sizing:content-box; background-clip:padding-box; border:max(0px,calc((48px - var(--height-btn)) / 2)) solid transparent; font:var(--font-btn); letter-spacing:var(--font-spacing-btn); white-space:nowrap; gap:var(--spacer); }
   button, [role=button] { background-color:var(--bg-color); color:var(--color); fill:var(--color); outline:var(--outline-width) var(--outline-style) var(--outline-color); outline-offset:min(0px,calc(((var(--height-btn) - 48px) / 2) - 1px)); }
   button, [role=button] { transition-property:opacity, fill, background, color, width, height, padding, margin, border, outline; transition-duration:150ms; transition-timing-function:var(--easing-emphasized); }
   button > svg { pointer-events:none; display:block; width:var(--svg-size); height:var(--svg-size); padding:0; fill:inherit; stroke:none; background:none; border:none; transition:fill 150ms var(--easing-emphasized); }

   /** Size  **/  button, button.small { --height-btn:40px; --outline-width:1px; --padding-btn:16px; --svg-size:20px; --spacer:8px; --font-btn:var(--labelL); --font-spacing-btn:var(--labelL-spacing); }
                  button.medium { --height-btn:56px; --outline-width:1.5px; --padding-btn:24px; --svg-size:24px; --spacer:8px; --font-btn:var(--titleM); --font-spacing-btn:var(--titleM-spacing); outline-width:1.5px!important; outline-offset:-1.5px!important; }
                  button.large { --height-btn:96px; --outline-width:2px; --padding-btn:48px; --svg-size:32px; --spacer:12px; --font-btn:var(--headlineS); --font-spacing-btn:var(--headlineS-spacing); outline-width:2px!important; outline-offset:-2px!important; }
                  button.xlarge { --height-btn:136px; --outline-width:2.5px; --padding-btn:64px; --svg-size:40px; --spacer:16px; --font-btn:var(--headlineL); --font-spacing-btn:var(--headlineL-spacing); outline-width:2.5px!important; outline-offset:-2.5px!important; }

   /** Shape **/  button, button.round { --corner-btn:999px; }
                  button.square { --corner-btn:12px; }  button.square.medium { --corner-btn:16px; }  button.square:is(.large,.xlarge) { --corner-btn:28px; }
                  button.icon { --svg-size:24px; width:var(--height-btn); aspect-ratio:1; --padding-btn:unset; --corner-btn:50%; }

   /** Style **/  button { --bg-color:var(--surface-container-low); --color:var(--on-surface-variant); --outline-color:var(--outline); --outline-style:solid; }
                  button.icon { justify-content:center; --bg-color:transparent; --color:var(--on-surface-variant); --outline-style:none; }
                  button.filled { --bg-color:var(--primary); --color:var(--on-primary); --outline-style:none; }
                  button.tonal { --bg-color:var(--secondary-container); --color:var(--on-secondary-container); --outline-style:none; }
                  button.tonal.tertiary { --bg-color:var(--tertiary-container); --color:var(--on-tertiary-container); }
                  button.tonal-variant { --bg-color:var(--surface-container-variant-low); --color:var(--on-surface-variant); --outline-style:none; }
                  button.text { --bg-color:transparent; --color:var(--primary); --outline-style:none;  }
                  button.outlined { --bg-color:transparent; --color:var(--on-surface-variant); --outline-color:var(--outline-variant); --outline-style:solid; }
                  button.outlined-primary { --color:var(--primary-container); --outline-color:var(--primary-container); --outline-width:1.5px; }
                  /*button.outlined.tertiary { --color:var(--inverse-tertiary); --outline-color:var(--inverse-tertiary); }*/
                  button.outlined-primary:is(:hover,:active,[aria-selected]) { --color:white; --bg-color:var(--outline-color); }

/************************************************************************************   buttons :: chip   ************************************************************************************/
/************************************************************************************************************************************************************************************************/
   :is(button,[role=button]).chip { --height-btn:32px; --padding-btn:16px; --svg-size:18px; --spacer:8px; --corner-btn:12px; position:relative; z-index:3; border-width:4px; outline-offset:-5px; outline:1px solid var(--outline-variant); color:var(--on-surface-variant); fill:var(--on-surface-variant); --font-btn:var(--labelL); --font-spacing-btn:var(--labelL-spacing); }
   :is(button,[role=button]).chip-list[aria-label]:not([data-value])::before { content:attr(aria-label); }
   :is(button,[role=button]).chip-list[data-value]::before { content:attr(data-value); }
   :is(button,[role=button]).chip-list[data-value][data-label]::before { content:attr(data-label); }
   :is(button,[role=button]).chip-list[data-value] { background-color:var(--secondary-container); color:var(--primary); border-radius:var(--corner-btn) 0 0 var(--corner-btn); }
   :is(button,[role=button]).chip > [role=listbox] { contain:content; position:absolute; inset:0 auto 100% 0; min-width:fit-content; opacity:0; padding-inline:16px 16px; padding-block:0; border-radius:8px; outline:1px solid var(--outline-variant); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; transition:opacity 100ms var(--easing-emphasized), height 250ms var(--easing-emphasized), padding 250ms var(--easing-emphasized); }
   :is(button,[role=button]).chip > [role=listbox] > [role=option] { height:0; transition:opacity 100ms var(--easing-emphasized), height 250ms var(--easing-emphasized); }
   :is(button,[role=button]).chip[aria-selected] { background-color:var(--secondary-container)!important; color:var(--on-secondary-container)!important; fill:var(--on-secondary-container)!important; }
   :is(button,[role=button]).chip[aria-selected] > [role=listbox] { inset:32px auto auto 0; padding-block:4px; opacity:1; background-color:var(--surface); color:var(--on-surface-variant); font:var(--bodyM); }
   :is(button,[role=button]).chip[aria-selected] > [role=listbox] > [role=option] { height:32px; line-height:32px; }
   :is(button,[role=button]).chip:has([data-svg]:first-child) { --padding-btn:8px 16px; }
   :is(button,[role=button]).chip:has([data-svg*='drop-down']) { --padding-btn:16px 8px; }
   :is(button,[role=button]).chip:has([data-svg] ~ [data-svg]) { --padding-btn:8px; }
   :is(button,[role=button]).chip.color { justify-content:flex-start!important; column-gap:12px; }
   :is(button,[role=button]).chip.color > div:first-child { flex:none; width:24px; height:24px; border-radius:50%; outline:1px solid var(--outline); outline-offset:-1px; }

   :is(button,[role=button]).chip.clear { display:none; flex:none; padding-inline:8px; margin-inline:-4px 24px; border-width:4px; outline-offset:-5px; border-radius:0 var(--corner-btn) var(--corner-btn) 0; background-color:var(--secondary-container); color:var(--primary); fill:var(--primary); }
   :is(button,[role=button]).chip[data-value] + :is(button,[role=button]).chip.clear { display:inline-flex; }

/************************************************************************************   buttons :: segmented   ************************************************************************************/
/************************************************************************************************************************************************************************************************/
   .segmented-btn { position:relative; height:40px; border-radius:999px; border:4px solid transparent; display:inline-flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; column-gap:0; }
   .segmented-btn > button { padding-inline:4px; border:none; outline:1px solid var(--outline-color); outline-offset:-1px; border-radius:0; }
   .segmented-btn > button:first-child { padding-inline:8px 4px; border-radius:999px 0 0 999px; }
   .segmented-btn > button:last-child { padding-inline:4px 8px; border-radius:0 999px 999px 0; }
   .segmented-btn > button:not([aria-selected]) { z-index:1; --bg-color:var(--surface-container); --color:var(--on-surface-disabled); outline:1px solid var(--outline-alt); }
   .segmented-btn > button[aria-selected] { z-index:2 }

/************************************************************************************   buttons :: FAB   ************************************************************************************/
/************************************************************************************************************************************************************************************************/
   /*transition:max-width 250ms var(--easing-emphasized), top 200ms var(--easing-emphasized), margin-bottom 200ms var(--easing-emphasized), transform 200ms var(--decelerate-emphasized); }*/
   button.FAB { position:absolute; flex:none; display:block; inset:calc(min(100%,100dvh) - var(--height-btn) - 16px) 16px auto auto; box-shadow:var(--shadow-3); }
   button.FAB { --height-btn:56px; --svg-size:24px; --corner-btn:16px; }
   button.FAB.medium { --height-btn:80px; --svg-size:28px; --corner-btn:20px; }
   button.FAB.large { --svg-size:36px; --corner-btn:28px; }

   button.FAB.extended { --padding-btn:16px; --font-btn:var(--titleM); --font-spacing-btn:var(--titleM-spacing); }
   button.FAB.extended.medium { --padding-btn:26px; --spacer:12px; --font-btn:var(--titleL); --font-spacing-btn:var(--titleL-spacing); }
   button.FAB.extended.large { --padding-btn:28px; --spacer:16px; --font-btn:var(--headlineS); --font-spacing-btn:var(--headlineS-spacing); }

   button.FAB > [data-svg] { flex:none; fill:inherit; width:24px; height:24px; aspect-ratio:1; padding:0; margin:0; }
   button.FAB:is(:active,:focus) { box-shadow:var(--shadow-1); }
   button.FAB.extended { display:flex; /*min-width:80px;*/ max-width:calc(var(--display-width) - 32px); width:fit-content; flex-flow:row nowrap; justify-content:flex-start; align-items:center; gap:8px; }
   button.FAB.extended > :not([data-svg]) { flex:1; width:fit-content; padding:0; }
   button.FAB.small { width:40px; height:40px; padding:8px; border-radius:12px; }
   button.FAB.large { width:96px; height:96px; padding:28px; border-radius:28px; }
   button.FAB.large > [data-svg] { flex:none; fill:inherit; width:40px; height:40px; aspect-ratio:1; padding:0; margin:0; }
   button.FAB.large > [data-svg] > svg { width:100%; height:100%; }
   button.FAB[aria-hidden=true] { user-select:none!important; pointer-events:none!important; overflow:hidden!important; width:0!important; height:0!important; transform-origin:bottom right!important; transform:scale(0)!important; transition:transform 200ms var(--easing-emphasized), width 10ms var(--easing-emphasized) 200ms, height 10ms var(--easing-emphasized) 200ms!important; }

   /**************   badge :: small | labelled   **************/
   [data-svg][data-badge-label] { contain:layout; }
   [data-svg]:is(.badge-small, [data-badge-label])::after { z-index:3; position:absolute; display:block; inset:50%; background-color:var(--error); color:var(--on-error); }
   [data-svg].badge-small::after { content:''; width:6px; height:6px; border-radius:50%; }
   [data-svg][data-badge-label]::after { content:attr(data-badge-label); min-width:16px; width:fit-content; max-width:34px; height:16px; margin-top:-14px; padding-inline:4px; border-radius:8px; font:var(--labelS); font-size:10px; letter-spacing:var(--labelS-spacing); text-align:center; }


/* =======================----->>>   dialog   <<<-----======================= */
   .scrim { position:fixed; contain:content; inset:0; opacity:0; pointer-events:none; z-index:10; width:0; height:0; margin:auto; padding:0; backdrop-filter:blur(1px) contrast(60%) brightness(40%); 
                  transition:backdrop-filter 125ms var(--easing-emphasized) 125ms, opacity 75ms var(--easing-emphasized) 225ms, width 25ms var(--easing-emphasized) 300ms, height 25ms var(--easing-emphasized) 300ms; }
   .scrim:not([aria-hidden]) { pointer-events:all; opacity:1; z-index:10; width:100dvw; height:100dvh; transition:opacity 125ms var(--easing-emphasized), backdrop-filter 175ms var(--easing-emphasized); }
   .scrim:not([aria-hidden]) + [role=dialog] { z-index:11; pointer-events:all; transform:translateY(-5dvh); height:var(--dialog-height); padding:24px; 
                                                         transition:opacity 150ms var(--easing-emphasized) 100ms, transform 400ms var(--easing-emphasized) 100ms, height 350ms var(--sharp-easing) 125ms, padding 350ms var(--sharp-easing) 125ms; }
   body:has(.scrim:not([aria-hidden])) [role=document] { opacity:.38; transition:opacity 125ms var(--easing-emphasized); }
   [role=dialog] { font:var(--bodyL); z-index:11; pointer-events:none; position:absolute; inset:0; transform-origin:top; transform:translateY(calc(-50dvh - 50%)); min-width:280px; width:var(--dialog-width); max-width:600px; height:0; padding:0; margin:auto; contain:content; flex:none; display:block; border-radius:28px; background-color:var(--surface-container); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; row-gap:16px; 
                     transition:opacity 75ms var(--easing-emphasized) 200ms, transform 250ms var(--easing-emphasized), height 150ms var(--easing-emphasized), padding 100ms var(--easing-emphasized); }
   [role=dialog] > [data-svg] { flex:none; width:36px; height:36px; }
   [role=dialog] > [data-svg] > svg { width:36px; height:36px; }
   [role=dialog] > .headline { font:var(--headlineS); letter-spacing:var(--headlineS-spacing); text-align:center; }
   [role=dialog] > .text { font:var(--bodyL); letter-spacing:var(--bodyL-spacing); }
   [role=dialog] > .text > div:not(:first-child) { margin-block:16px 0; }
   [role=dialog] > form { margin-inline:24px; }
   [role=dialog] > .buttons { padding-block:8px 0; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:8px; }
   [role=dialog] > #shortcuts { margin-inline:auto; margin-block:16px auto; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; row-gap:16px; }
   [role=dialog] > #shortcuts > li { height:32px; }

   /**************   snackBar   **************/
   .snackbar { contain:content; position:fixed; z-index:8; bottom:-48px; left:16px; right:16px; border-radius:4px; transform:translateY(0px); width:auto; max-width:560px; height:0; opacity:0; padding-inline:16px 8px; overflow:hidden; background:var(--inverse-surface); color:var(--inverse-on-surface); font:var(--bodyM); letter-spacing:var(--bodyM-spacing); line-height:48px; box-shadow:var(--shadow-3); will-change:transform, opacity, height; transition:transform 300ms var(--easing-emphasized), opacity 150ms var(--easing-emphasized), height 150ms var(--easing-emphasized); }
   .snackbar:not([inert])[aria-expanded=true] { height:48px; opacity:1; transform:translateY(-96px); }
   .snackbar[aria-expanded=false] { height:0; opacity:0; transform:translateY(0px); }