@import url(typo.mod.css);
   @import url(colors.palette.mod.css);
   @import url(theme.light-dark.mod.css);
   :root {
      --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); }

   /* -- Clear user agent style -- */
   div, p, span, footer, header, main, section, article, aside, figure, strong, h1, h2, h3, a, img, sup, ol, ul, li, button, canvas, svg { 
      -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; }

   strong { font:inherit; font-weight:600; font-family:inherit; font-size:inherit; font-style:inherit; }
   :any-link, a { text-decoration:none; color:inherit; }
   ol, ul { list-style:none; }
   :focus-visible { -webkit-appearance:initial; appearance:initial; }
   ::-webkit-scrollbar { background:transparent; height:0; width:0; } 

   /************ html: surface-container | main: surface ****************/
   html, body {   -webkit-appearance:initial; appearance:initial; font:var(--bodyM); letter-spacing:normal; color:var(--on-surface-alt); fill:var(--on-surface-alt); background:var(--surface); background-color:var(--surface); border-color:var(--outline);
                  margin-block:0; margin-inline:0; padding-block:0; padding-inline:0; outline:unset; border:unset; user-select:none; box-sizing:border-box; }
   body { --display-width:100vw; position:relative; overscroll-behavior:contain; min-height:100svh; height:100lvh; max-height:100lvh; min-width:360px; width:100%; max-width:var(--display-width); margin:0; padding:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }

   @media (min-width:640px) { 
      :root { background-color:var(--surface-variant)!important; }
      body { --display-width:360px; contain:layout; overflow:hidden; min-height:640px; /*max-height:max(640px,calc(100vh - 16px));*/ margin:auto; box-sizing:content-box; border:8px solid black; border-radius:28px; }
      body > :first-child { border-radius:20px 20px 0 0!important; }
      body > main { max-height:100%!important; border-radius:0 0 20px 20px!important; }
      body > main > :is(#items-collection, #items-album) { margin-block:64px 0!important; overflow-y:auto!important; }
   
      @media (min-height:768px) {   body { min-height:740px; height:calc(100vh - 16px); max-height:800px; } }
      @media (min-height:816px) {   body { margin-block-start:calc((100vh - 816px) * .25); } }
      @media (min-height:868px) {   body { --display-width:390px; min-height:844px; height:calc(100vh - 24px); max-height:874px; border-width:12px; border-radius:32px;  } }
      @media (min-height:898px) {   body { margin-block-start:calc((100vh - 898px) * .25); } }
      @media (min-height:928px) {   body { --display-width:412px; min-height:896px; height:calc(100vh - 32px); max-height:915px; border-width:16px; border-radius:36px;  } }
      @media (min-height:947px) {   body { margin-block-start:calc((100vh - 947px) * .25); } }
   }

   body > header { contain:content; position:sticky; height:64px; top:0; padding-block:8px; padding-inline:4px; color:var(--on-surface-alt); fill:var(--on-surface-alt); display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; transition:height 200ms var(--easing-emphasized), padding 250ms var(--easing-emphasized); }
   body > header > .icon-container { flex:none; height:48px; width:48px; transition:width 0ms var(--easing-emphasized); }
   body > header > .headline { flex:1; padding-inline:12px; font:var(--titleL); letter-spacing:var(--titleL-spacing); line-height:32px; transition:font 200ms var(--easing-emphasized); }

   body > header:is(.medium,.large) { transition:height 200ms var(--easing-emphasized), padding 250ms var(--easing-emphasized); }
   body > header:is(.medium,.large) > .icon-container { align-self:flex-start; width:var(--display-width); transition:width 75ms var(--easing-emphasized) 200ms; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }

   body > header.medium { height:112px; padding-block:8px 24px; }
   body > header.medium > .headline { align-self:flex-end; font:var(--headlineS); letter-spacing:var(--headlineS-spacing); }
   body > header.large { height:140px; padding-block:8px 28px; }
   body > header.large > .headline { align-self:flex-end; font:var(--headlineM); letter-spacing:var(--headlineM-spacing); }

   body > main { /*touch-action:pan-y!important;*/ z-index:1; contain:content; flex:1; padding-inline:12px; margin:0px; overflow-x:clip; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
   body > main > .container { background:var(--surface-container-high); background-color:var(--surface-container-high); color:var(--on-surface-container-variant); fill:var(--on-surface-container-variant); }

   #lvh { position:fixed; z-index:0; width:1px; height:100lvh; opacity:0; inset:0 100vw 0 auto; }
   body.standalone { overflow:hidden; height:100dvh; }
   body.standalone > main { overscroll-behavior:contain; overflow-y:auto; overflow-x:clip; }

   body.container { background:var(--surface-container-high); background-color:var(--surface-container-high); color:var(--on-surface-container-variant); fill:var(--on-surface-container-variant); }
   body.container > main > .container { background:var(--surface); background-color:var(--surface); color:var(--on-surface-alt); fill:var(--on-surface-alt); }

/*****************************************************************************************************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************************************************************************************************/
   :is(.touch-one,.touch-two) { position:fixed; z-index:10; opacity:.6; width:1px; height:1px; background-color:blue; transform:scale(3); transform-origin:center; border-radius:50%; box-shadow: 0 0 4px 4px blue }
   .touch-two { background-color:fuchsia; box-shadow: 0 0 10px 10px fuchsia }

   [data-svg]:empty { opacity:0; }
   [data-svg] { contain:strict; position:relative; flex:none; display:inline-block; aspect-ratio:1 / 1; width:24px; height:24px; margin:0; padding:0; stroke:inherit; fill:inherit; background-color:transparent; background:none; border:none; }
   [data-svg] > svg { pointer-events:none; position:absolute; inset:0; aspect-ratio:1 / 1; max-width:100%; max-height:100%; margin:auto; padding:0; fill:inherit; stroke:inherit; stroke-width:inherit; background-color:transparent; background:none; border:none; transition-property:fill, stroke, opacity, overlay, display; transition-duration:150ms; transition-behavior:allow-discrete;  transition-timing-function:var(--easing-emphasized); }
   div[data-svg].icon { width:40px; height:40px; padding:8px; }
   button[data-svg].icon { width:48px; height:48px; padding:12px; border-radius:50%; }
   button[data-svg].icon > svg { max-width:24px; max-height:24px; }
   button > [data-svg] { height:18px; width:18px; padding:0; }

   [data-svg][data-svg-alt] { position:relative; }
   [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 { position:relative; flex:none; padding-inline:24px; margin:4px; width:fit-content; height:40px; display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; border:none; border-radius:20px; font:var(--labelL); letter-spacing:var(--labelL-spacing); line-height:18px; white-space:nowrap; gap:8px; }
   button:has( > [data-svg]:first-child) { padding-inline:16px 24px; }
   button { background-color:var(--surface-container-low); color:var(--primary); fill:var(--primary); stroke:var(--primary); stroke-width:0; transition-property:fill, border-color, background-color, color; transition-duration:200ms; transition-timing-function:var(--easing-emphasized); }
   button.filled { background-color:var(--primary-container); color:var(--primary); fill:var(--primary); stroke:var(--primary); outline:1px solid var(--primary-container-variant); }
   button.tonal { background-color:var(--secondary-container); color:var(--primary); fill:var(--primary); stroke:var(--primary); outline:1px solid var(--secondary-container-variant); }
   button.tonal-variant { background-color:var(--surface-variant); color:var(--on-surface-variant); fill:var(--on-surface-variant); stroke:var(--on-surface-variant); outline:1px solid var(--outline-variant); }
   button.outlined { background-color:transparent; background:transparent; color:var(--primary); fill:var(--primary); stroke:var(--primary); outline:1px solid var(--primary); }
   button.text { background-color:transparent; color:var(--primary); fill:var(--primary); stroke:var(--primary); padding-inline:16px; }
   button.text-variant { background-color:transparent; color:var(--secondary); fill:var(--secondary); stroke:var(--secondary); padding-inline:16px; }
   button:not(.FAB):is(.submit,[type=submit],.filled,.tonal,.tonal-variant,.outlined,.text,.text-variant) { min-width:64px; }

   /***************   buttons :: FAB   **************/
   button.FAB { flex:none; min-width:unset; gap:unset; width:56px; height:56px; padding:16px; border-radius:16px; box-shadow:var(--shadow-3); 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 > [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(100vw - 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] { transform-origin:bottom right; transform:scale(0); transition:transform 200ms var(--accelerate-emphasized); }

   /**************   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; }

   /**************   scrim :: generic   **************/
   .scrim { position:fixed; contain:content; opacity:0; z-index:0; inset:0; backdrop-filter:saturate(0.32) brightness(0.44); display:flex; flex-flow:column; justify-content:center; align-items:center; transition:opacity 75ms var(--easing-emphasized) 300ms; }
   .scrim[aria-hidden=false] { opacity:1; z-index:4; transition:opacity 75ms var(--easing-emphasized); }
   body > .scrim[aria-hidden=false] ~ :is(header, footer, .FAB) { pointer-events:none; }
   body > .scrim[aria-hidden=false] ~ main { pointer-events:none; opacity:.48; transition:opacity 150ms var(--easing-emphasized); }

   /**************   dialog   **************/
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) { contain:content; flex:none; z-index:2; margin-block:40% 60%; min-width:280px; width:100%; max-width:calc(100% - 48px); max-height:fit-content; padding-inline:24px; padding-block:24px 16px; border-radius:28px; margin-inline:auto; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; transform-origin:top; transition:opacity 275ms var(--decelerate-emphasized), margin 375ms var(--decelerate-emphasized), transform 250ms var(--easing-emphasized) 100ms }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) { background-color:var(--surface-container-high); box-shadow:var(--shadow-3); color:var(--on-surface-alt); fill:var(--on-surface-alt); } 
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .icon { flex:none; height:40px; width:40px; padding:8px; margin-block:-8px 0; fill:inherit; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .headline { flex:none; width:fit-content; /*font:var(--titleL); letter-spacing:var(--titleL-spacing);*/ font:var(--headlineS); letter-spacing:var(--headlineS-spacing); line-height:28px; text-align:center; color:inherit; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .supportingText { flex:none; font:var(--bodyM); letter-spacing:var(--bodyM-spacing); /*margin-block:16px 0;*/ margin-block:24px 0; color:inherit; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .supportingText > div:not(:first-child) { margin-block:8px 0; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .actions { flex:none; align-self:flex-end; margin-block:16px 0; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; gap:16px; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .actions > button { pointer-events:all; margin-block:8px 0; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) .actions > button.text:only-child { margin-block:0; }

   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) [role=suggestion]:has( > .chip:is(selected,[aria-selected])) > .chip { pointer-events:none; opacity:.56; }
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) [role=suggestion]:has( > .chip:is(selected,[aria-selected])) > .chip:is(selected,[aria-selected]) { pointer-events:all; opacity:1; background-color:var(--secondary-container); outline-color:var(--secondary-container-variant); color:var(--secondary); fill:var(--secondary); }
   
   .scrim[aria-hidden] > :is([role=alertdialog],[role=dialog]) [role=suggestion] + .user-input { width:220px; margin-block:16px; margin-inline:auto; }

   .scrim[aria-hidden=false] > :is([role=alertdialog],[role=dialog]) { opacity:1; height:var(--dialog-height); transition:opacity 275ms var(--decelerate-emphasized), top 375ms var(--decelerate-emphasized), height 250ms var(--easing-emphasized) 125ms, padding 150ms var(--easing-emphasized), box-shadow 150ms var(--easing-emphasized); }*/
   .scrim[aria-hidden=true] > :is([role=alertdialog],[role=dialog]) { opacity:0; margin-block:-110% 60%; transform:scaleY(0); }

   /**************   snackBar   **************/
   aside.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(--elevation-3); will-change:transform, opacity, height; transition:transform 300ms var(--easing-emphasized), opacity 150ms var(--easing-emphasized), height 150ms var(--easing-emphasized); }
   aside.snackbar:not([inert])[aria-expanded=true] { height:48px; opacity:1; transform:translateY(-96px); }
   aside.snackbar[aria-expanded=false] { height:0; opacity:0; transform:translateY(0px); }