.metro-progress{--dots-duration:3s;--dots-gap:.18s;width:100%;height:4px;position:relative;overflow:hidden}.metro-progress:not(.metro-progress--indeterminate){background:var(--metro-control-bg-hover)}.metro-progress__fill{background:var(--metro-accent);transform-origin:0;transition:transform var(--metro-duration-enter) var(--metro-ease-out);position:absolute;inset:0}.metro-progress__dot{background:var(--metro-accent);opacity:0;width:4px;height:4px;animation:metro-dots-bar var(--dots-duration) linear infinite;position:absolute;top:0;left:0}@media (prefers-reduced-motion:reduce){.metro-progress__dot{animation-duration:calc(var(--dots-duration) * 3)}}:root[data-metro-motion=reduced] .metro-progress__dot{animation-duration:calc(var(--dots-duration) * 3)}.metro-ring{--ring-size:40px;--ring-dot:5px;--ring-duration:4.4s;--ring-gap:.2s;width:var(--ring-size);height:var(--ring-size);flex-shrink:0;position:relative}.metro-ring--small{--ring-size:20px;--ring-dot:3px}.metro-ring--large{--ring-size:64px;--ring-dot:7px}.metro-ring__orbit{opacity:0;animation:metro-dots-ring var(--ring-duration) infinite;position:absolute;inset:0}.metro-ring__dot{top:0;left:calc(50% - var(--ring-dot) / 2);width:var(--ring-dot);height:var(--ring-dot);background:var(--metro-accent);border-radius:50%;position:absolute}@media (prefers-reduced-motion:reduce){.metro-ring__orbit{animation-duration:calc(var(--ring-duration) * 2)}}:root[data-metro-motion=reduced] .metro-ring__orbit{animation-duration:calc(var(--ring-duration) * 2)}.metro-pano{--pano-section-w:min(420px, 85vw);--pano-height:420px;height:var(--pano-height);color:var(--metro-fg);font-family:var(--metro-font);position:relative;overflow:hidden}.metro-pano__bg{transform:translateX(var(--pano-bg-x,0));opacity:.45;will-change:transform;position:absolute;inset:0 -100% 0 0;background-size:cover!important}.metro-pano__title{top:0;left:var(--metro-space-3);white-space:nowrap;font:var(--metro-font-light) var(--metro-type-hero) / 1 var(--metro-font);letter-spacing:-.02em;transform:translateX(var(--pano-title-x,0));pointer-events:none;will-change:transform;position:absolute}.metro-pano__scroller{gap:var(--metro-space-5);padding:calc(var(--metro-type-hero) + var(--metro-space-3)) var(--metro-space-5) var(--metro-space-3) var(--metro-space-3);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;display:flex;position:absolute;inset:0;overflow:auto hidden}.metro-pano__scroller::-webkit-scrollbar{display:none}.metro-pano__sr-title{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.metro-pano__section{flex:0 0 var(--pano-section-w);scroll-snap-align:start;scroll-margin-left:var(--metro-space-3)}.metro-pano__section--wide{flex-basis:calc(var(--pano-section-w) * 1.6)}.metro-pano__header{margin:0 0 var(--metro-space-3);font:var(--metro-font-light) var(--metro-type-pivot) / 1.2 var(--metro-font)}.metro-pano__content{max-height:calc(var(--pano-height) - var(--metro-type-hero) - var(--metro-type-pivot) - 60px);overflow-y:auto}.metro-appbar-button{align-items:center;gap:var(--metro-space-1);width:72px;color:var(--metro-fg);font-family:var(--metro-font);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;flex-direction:column;padding:0;display:inline-flex}.metro-appbar-button__circle{border:var(--metro-border-width) solid currentColor;width:48px;height:48px;transition:background-color var(--metro-duration-fast) linear;border-radius:50%;place-items:center;display:grid}.metro-appbar-button__icon{width:24px;height:24px;-webkit-mask:var(--icon-url) center / contain no-repeat;mask:var(--icon-url) center / contain no-repeat;background-color:currentColor}.metro-appbar-button:active .metro-appbar-button__circle{background:var(--metro-fg)}.metro-appbar-button:active .metro-appbar-button__icon{background-color:var(--metro-chrome)}.metro-appbar-button:focus-visible .metro-appbar-button__circle{outline:1px dotted var(--metro-fg);outline-offset:3px}.metro-appbar-button:disabled{color:var(--metro-disabled);pointer-events:none}.metro-appbar-button__label{font-size:var(--metro-type-caption);text-transform:lowercase;white-space:nowrap}.metro-appbar{--appbar-collapsed-h:64px;z-index:var(--metro-z-appbar);background:var(--metro-chrome);color:var(--metro-fg);font-family:var(--metro-font);max-height:var(--appbar-collapsed-h);transition:max-height var(--metro-duration-enter) var(--metro-ease-out);position:absolute;bottom:0;left:0;right:0;overflow:hidden}.metro-appbar--fixed{position:fixed}.metro-appbar--expanded{max-height:360px}.metro-appbar__scrim{z-index:calc(var(--metro-z-appbar) - 1);position:fixed;inset:0}.metro-appbar__row{justify-content:center;padding-top:12px;display:flex;position:relative}.metro-appbar__commands{gap:var(--metro-space-2);display:flex}.metro-appbar__more{cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:4px;width:56px;height:28px;padding:0;display:flex;position:absolute;top:0;right:0}.metro-appbar__more span{background:var(--metro-fg);border-radius:50%;width:4px;height:4px}.metro-appbar__menu{padding:var(--metro-space-3) 0 var(--metro-space-4);margin:0;list-style:none}.metro-appbar__menu-item{width:100%;padding:var(--metro-space-2) var(--metro-space-4);color:var(--metro-fg);font:var(--metro-font-regular) var(--metro-type-title) / 1.3 var(--metro-font);text-align:left;text-transform:lowercase;cursor:pointer;background:0 0;border:0;display:block}.metro-appbar__menu-item:hover{background:var(--metro-chrome-alt)}.metro-appbar__menu-item:active{color:var(--metro-accent)}.uikit{min-height:100vh;padding-bottom:var(--metro-space-6);background:var(--metro-bg);color:var(--metro-fg);font-family:var(--metro-font);transition:background-color var(--metro-duration-enter) linear, color var(--metro-duration-enter) linear}.uikit-content{gap:var(--metro-space-6);max-width:1100px;padding:0 var(--metro-space-5) 0 var(--metro-page-margin);flex-direction:column;display:flex}.uikit-toolbar{gap:var(--metro-space-5);padding:var(--metro-space-4);background:var(--metro-chrome);flex-wrap:wrap;align-items:flex-start;display:flex}.uikit-accents{gap:var(--metro-space-2);flex-direction:column;display:flex}.uikit-accents__label{color:var(--metro-subtle);font-size:var(--metro-type-body)}.uikit-accents__swatches{grid-template-columns:repeat(10,28px);gap:4px;display:grid}.uikit-swatch{cursor:pointer;border:0;width:28px;height:28px;padding:0}.uikit-swatch--active{outline:var(--metro-border-width) solid var(--metro-fg);outline-offset:2px}.uikit-specimen{gap:var(--metro-space-3);scroll-margin-top:var(--metro-space-4);flex-direction:column;display:flex}.uikit-specimen__head{align-items:baseline;gap:var(--metro-space-2) var(--metro-space-4);flex-wrap:wrap;display:flex}.uikit-specimen__name{font:var(--metro-font-light) var(--metro-type-pivot) / 1.1 var(--metro-font);margin:0}.uikit-specimen__file{color:var(--metro-subtle);font-size:var(--metro-type-caption)}.uikit-specimen__guideline{max-width:62ch;color:var(--metro-subtle);font-size:var(--metro-type-body);margin:0;line-height:1.5}.uikit-specimen__demo{align-items:flex-start;gap:var(--metro-space-4);padding-top:var(--metro-space-3);flex-direction:column;display:flex}.uikit-row{align-items:center;gap:var(--metro-space-3);flex-wrap:wrap;display:flex}.uikit-row--top{align-items:flex-start;gap:var(--metro-space-6)}.uikit-column{gap:var(--metro-space-3);flex-direction:column;display:flex}.uikit-specimen__demo>.uikit-column{width:100%;max-width:360px}.uikit-specimen__demo>.uikit-column--wide{max-width:480px}.uikit-stack{align-items:flex-start;gap:var(--metro-space-3);flex-direction:column;display:flex}.uikit-type{gap:var(--metro-space-2);flex-direction:column;display:flex}.uikit-colors{gap:var(--metro-space-4);flex-wrap:wrap;display:flex}.uikit-color{gap:var(--metro-space-1);font-size:var(--metro-type-caption);flex-direction:column;display:flex}.uikit-color__chip{outline:1px solid var(--metro-subtle);width:96px;height:96px}.uikit-thumb-glyph{font-size:2rem}.uikit-phone{width:360px;max-width:100%;height:560px;padding-top:var(--metro-space-3);outline:1px solid var(--metro-subtle);background:var(--metro-bg);position:relative;overflow:hidden}.uikit-phone .metro-pano{--pano-height:540px;--pano-section-w:300px}.uikit-phone__body{padding:var(--metro-space-3)}.uikit-pano-links{gap:var(--metro-space-2);font:var(--metro-font-light) var(--metro-type-subheader) / 1.2 var(--metro-font);flex-direction:column;display:flex}.uikit-pano-grid{gap:var(--metro-space-2);grid-template-columns:repeat(3,1fr);display:grid}.uikit-pano-grid span{aspect-ratio:1;background:var(--metro-accent)}.uikit-pano-grid span:nth-child(2n){opacity:.6}.uikit-anims{align-self:stretch;gap:var(--metro-space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.uikit-anim{gap:var(--metro-space-1);padding:var(--metro-space-3);background:var(--metro-chrome);color:var(--metro-fg);font-family:var(--metro-font);text-align:left;cursor:pointer;border:0;flex-direction:column;display:flex}.uikit-anim:hover{background:var(--metro-chrome-alt)}.uikit-anim__stage{perspective:600px;place-items:center;height:90px;display:grid;overflow:hidden}.uikit-anim__box{background:var(--metro-accent);width:64px;height:64px}.uikit-anim__name{font-size:var(--metro-type-caption)}.uikit-anim__note{color:var(--metro-subtle);font-size:var(--metro-type-caption)}.uikit-stagger{gap:var(--metro-space-2);display:flex}.uikit-stagger__item{background:var(--metro-accent);width:48px;height:48px}@media (width<=640px){.uikit-content{padding:0 var(--metro-space-3);gap:var(--metro-space-5)}.uikit-accents__swatches{grid-template-columns:repeat(10,1fr)}.uikit-swatch{width:100%}.uikit-specimen__name{font-size:var(--metro-type-subheader)}}