@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap);.bar-button>.color-square[data-v-f094c3d0]{width:15px;height:15px;border:1px solid rgba(0,0,0,.7);margin:0 3px}.bar-button.disabled>.color-square[data-v-f094c3d0]{border:solid 1px var(--bar-button-disabled-color,rgba(0,0,0,.3))}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;font-display:block;src:url(../fonts/material-icons.59322316.woff2) format("woff2"),url(../fonts/material-icons.4ad034d2.woff) format("woff")}.material-icons{font-family:Material Icons;font-feature-settings:"liga"}@font-face{font-family:Material Icons Outlined;font-style:normal;font-weight:400;font-display:block;src:url(../fonts/material-icons-outlined.f86cb7b0.woff2) format("woff2"),url(../fonts/material-icons-outlined.78a93b20.woff) format("woff")}.material-icons,.material-icons-outlined{font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.material-icons-outlined{font-family:Material Icons Outlined;font-feature-settings:"liga"}@font-face{font-family:Material Icons Round;font-style:normal;font-weight:400;font-display:block;src:url(../fonts/material-icons-round.b10ec9db.woff2) format("woff2"),url(../fonts/material-icons-round.92dc7ca2.woff) format("woff")}.material-icons-round{font-family:Material Icons Round;font-feature-settings:"liga"}@font-face{font-family:Material Icons Sharp;font-style:normal;font-weight:400;font-display:block;src:url(../fonts/material-icons-sharp.3885863e.woff2) format("woff2"),url(../fonts/material-icons-sharp.a71cb2bf.woff) format("woff")}.material-icons-round,.material-icons-sharp{font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.material-icons-sharp{font-family:Material Icons Sharp;font-feature-settings:"liga"}@font-face{font-family:Material Icons Two Tone;font-style:normal;font-weight:400;font-display:block;src:url(../fonts/material-icons-two-tone.675bd578.woff2) format("woff2"),url(../fonts/material-icons-two-tone.588d6313.woff) format("woff")}.material-icons-two-tone{font-family:Material Icons Two Tone;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}.bar[data-v-517fd311]{display:flex;align-items:stretch;justify-content:flex-start;flex-wrap:wrap;color:var(--bar-font-color,rgba(0,0,0,.7));font-family:var(--bar-font-family,Avenir,Helvetica,Arial,sans-serif);font-size:var(--bar-font-size,16px);font-weight:var(--bar-font-weight,500);font-style:var(--bar-font-style);letter-spacing:var(--bar-letter-spacing);margin:var(--bar-margin);padding:var(--bar-padding);border:var(--bar-border);border-radius:var(--bar-border-radius);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default}.bar[data-v-517fd311] ::-webkit-scrollbar{width:16px;height:16px}.bar[data-v-517fd311] ::-webkit-scrollbar-corner,.bar[data-v-517fd311] ::-webkit-scrollbar-track{display:none}.bar[data-v-517fd311] ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.5);border:5px solid transparent;border-radius:16px;background-clip:content-box}.bar[data-v-517fd311] ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.8)}.bar[data-v-517fd311] .ellipsis{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar[data-v-517fd311] .bar-button{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--bar-button-padding,7px);border-radius:var(--bar-button-radius,3px);white-space:nowrap}.bar[data-v-517fd311] .bar-button.active{color:var(--bar-button-active-color,#41b883);background:var(--bar-button-active-bkg,#eaf7f4)}.bar[data-v-517fd311] .bar-button.open:hover{color:var(--bar-button-open-color,#41b883);background:var(--bar-button-open-bkg,#eaf7f4)}.bar[data-v-517fd311] .bar-button.disabled{color:var(--bar-button-disabled-color,rgba(0,0,0,.3));background:var(--bar-button-disabled-bkg)}.bar[data-v-517fd311] .bar-button:not(.active):not(.open):not(.disabled):hover{color:var(--bar-button-hover-color);background:var(--bar-button-hover-bkg,#f1f3f4)}.bar[data-v-517fd311] .bar-button>.label{display:flex;align-items:center;padding:var(--bar-button-label-padding,0 3px)}.bar[data-v-517fd311] .bar-button>.emoji,.bar[data-v-517fd311] .bar-button>.icon{font-display:block;width:1em;font-size:var(--bar-button-icon-size,24px);margin:var(--bar-button-icon-margin)}.bar[data-v-517fd311] .bar-button>.chevron{font-display:block;width:1em;margin:var(--bar-button-chevron-margin,0 -5px 0 0)}.bar[data-v-517fd311] .bar-button>.menu{position:absolute;left:0;top:100%;display:none;z-index:1000}.bar[data-v-517fd311] .bar-button>.menu.align-left{left:0}.bar[data-v-517fd311] .bar-button>.menu.align-center{left:auto}.bar[data-v-517fd311] .bar-button>.menu.align-right{left:auto;right:0}.bar[data-v-517fd311] .bar-button.open:hover>.menu{display:block}.bar[data-v-517fd311] .bar-menu{position:relative;white-space:normal}.bar[data-v-517fd311] .bar-menu>.extended-hover-zone{position:absolute;top:0;left:-100px;right:-100px;bottom:-40px}.bar[data-v-517fd311] .bar-menu>.bar-menu-items{position:relative;min-width:var(--bar-menu-min-width,160px);color:var(--bar-menu-color,rgba(0,0,0,.7));background:var(--bar-menu-bkg,#fff);padding:var(--bar-menu-padding,5px 0);box-shadow:var(--bar-menu-shadow,rgba(60,64,67,.15) 0 2px 6px 2px);border:var(--bar-menu-border);border-radius:var(--bar-menu-border-radius)}@supports ((-webkit-backdrop-filter:var(--bar-menu-backdrop-filter )) or (backdrop-filter:var(--bar-menu-backdrop-filter ))){.bar[data-v-517fd311] .bar-menu>.bar-menu-items{-webkit-backdrop-filter:var(--bar-menu-backdrop-filter);backdrop-filter:var(--bar-menu-backdrop-filter);background:var(--bar-menu-backdrop-filter-bkg,var(--bar-menu-bkg,#fff))}}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item{position:relative;display:flex;align-items:center;justify-content:flex-start;font-size:var(--bar-menu-item-font-size);padding:var(--bar-menu-item-padding,8px 15px)}.bar[data-v-517fd311] .bar-men>.bar-menu-items>.bar-menu-item.active{color:var(--bar-menu-item-active-color);background:var(--bar-menu-item-active-bkg,#e7e8e9)}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item.disabled{color:var(--bar-menu-item-disabled-color,rgba(0,0,0,.3))}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item:not(.active):not(.disabled):hover{color:var(--bar-menu-item-hover-color);background:var(--bar-menu-item-hover-bkg,#f1f3f4)}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.label{display:flex;align-items:center;flex-grow:1}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.emoji,.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.icon{font-display:block;width:1em;font-size:var(--bar-menu-item-icon-size,24px);margin:var(--bar-menu-item-icon-margin,0 10px 0 0)}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.chevron{font-display:block;width:1em;margin:var(--bar-menu-item-chevron-margin,0 -6px 0 0)}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.menu{position:absolute;left:100%;top:0;display:none;z-index:1000}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item:hover>.menu{display:block}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.bar-menu{border-radius:var(--bar-sub-menu-border-radius)}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-item>.bar-menu>.extended-hover-zone{top:-100px;left:0;bottom:-100px}.bar[data-v-517fd311] .bar-menu>.bar-menu-items>.bar-menu-separator{height:var(--bar-menu-separator-height,1px);margin:var(--bar-menu-separator-margin,5px 0);background-color:var(--bar-menu-separator-color,rgba(0,0,0,.1))}.bar[data-v-517fd311] .bar-separator{width:var(--bar-separator-width,2px);margin:var(--bar-separator-margin,5px);background-color:var(--bar-separator-color,rgba(0,0,0,.1))}.bar[data-v-517fd311] .bar-spacer{flex-grow:1}.bar-button[data-v-17ab7ad4]{margin:auto 10px;border:1px solid #ccc;height:10px}.bar-button[data-v-17ab7ad4]:hover{background:linear-gradient(#000 60%,#666)!important}.bar-button>.label[data-v-17ab7ad4]{display:inline!important;font-size:12px;font-weight:700;animation:slide-17ab7ad4 3s linear infinite}.bar-button:hover>.label[data-v-17ab7ad4]{color:transparent;background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#2affdc,#7c92ff,#d2a7ff,#ff4dd8,#ff3131);background-size:200%;-webkit-background-clip:text;background-clip:text;transition:.2s linear}@keyframes slide-17ab7ad4{0%{background-position:0 0}to{background-position:200% 0}}.bar-menu-item[data-v-a87171f6]:hover{background:#222!important}.bar-menu-item>.label[data-v-a87171f6]{display:inline!important;background:linear-gradient(45deg,red,#db6300,#c0bd00,#3bcf00,#00ffd5,#7c92ff,#d2a7ff,#ff4dd8,#ff3131);background-size:200%;color:transparent;-webkit-background-clip:text;background-clip:text;animation:slide-a87171f6 3s linear infinite;animation-play-state:paused}.bar-menu-item:hover>.label[data-v-a87171f6]{animation-play-state:running}@keyframes slide-a87171f6{0%{background-position:0 0}to{background-position:200% 0}}:root{--demo-font-color:#4aeea4}html{height:100%;overflow-y:scroll;background-color:#4aeea4;transition-delay:.5s}body{margin:0;min-height:100%;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--demo-font-color);background-color:#242c29;box-shadow:inset 0 0 30vw 15vw #000;transition:color .3s,background-color .3s,box-shadow .5s}::-moz-selection{background-color:rgba(74,238,164,.2)}::selection{background-color:rgba(74,238,164,.2)}a[data-v-0572395a]{color:inherit}svg.github[data-v-0572395a]{fill:var(--demo-font-color);margin-right:5px}[contenteditable=true][data-v-0572395a],select[data-v-0572395a]{outline:none}.main[data-v-0572395a]{width:100%;height:100%}.title[data-v-0572395a]{text-align:center;font-size:50px;padding-top:30px}.subtitle[data-v-0572395a]{font-size:18px;display:flex;align-items:center;justify-content:center;padding-bottom:50px}.experiment[data-v-0572395a]{width:95%;margin:auto;max-width:1150px}.bars[data-v-0572395a]{background-color:var(--demo-bars-bkg,#fff);border-radius:var(--demo-bars-border-radius,5px);box-shadow:var(--demo-bars-shadow,0 0 20px #000);padding:var(--demo-bars-padding,8px);transition:.5s}[data-v-0572395a] .bars *{transition:font-size .1s linear,padding .1s linear,margin .1s linear}.styles[data-v-0572395a]{position:fixed;top:10px;right:10px;z-index:1}.text[data-v-0572395a]{font-family:var(--bar-font-family);width:90%;margin:30px auto;font-size:20px;min-height:250px;background-color:var(--demo-text-bkg-color);background-image:var(--demo-text-bkg-img,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23FFFFFF30' stroke-width='2' stroke-dasharray='15' stroke-linecap='square'/%3E%3C/svg%3E"));border:var(--demo-text-border);box-shadow:var(--demo-text-box-shadow);padding:10px 15px;transition:.5s}