@font-face{font-family:Montserrat;src:url(../../../fonts/montserrat.woff2) format("woff2 supports variations"),url(../../../fonts/montserrat.woff2) format("woff2-variations");font-weight:100 1000;font-stretch:25% 151%;font-display:swap}@font-face{font-family:Nunito;src:url(../../../fonts/nunito.woff2) format("woff2 supports variations"),url(../../../fonts/nunito.woff2) format("woff2-variations");font-weight:100 1000;font-stretch:25% 151%;font-display:swap}@font-face{font-family:Odachi;src:url(../../../fonts/odachi.woff2) format("woff2 supports variations"),url(../../../fonts/odachi.woff2) format("woff2-variations");font-weight:100 1000;font-stretch:25% 151%;font-display:swap}@font-face{font-family:Oswald;src:url(../../../fonts/oswald.woff2) format("truetype supports variations"),url(../../../fonts/oswald.woff2) format("truetype-variations");font-weight:1 999;font-stretch:25% 151%;font-display:swap}@font-face{font-family:Share Tech;src:url(../../../fonts/share-tech.woff2) format("truetype supports variations"),url(../../../fonts/share-tech.woff2) format("truetype-variations");font-weight:1 999;font-stretch:25% 151%;font-display:swap}@font-face{font-family:M Plus;src:url(../../../fonts/m-plus.woff2) format("truetype supports variations"),url(../../../fonts/m-plus.woff2) format("truetype-variations");font-weight:1 999;font-stretch:25% 151%;font-display:swap}@font-face{font-family:Dosis;src:url(../../../fonts/dosis.ttf) format("truetype supports variations"),url(../../../fonts/dosis.ttf) format("truetype-variations"),url(../../../fonts/dosis.ttf) format("truetype");font-weight:1 999;font-stretch:25% 151%;font-display:swap}@font-face{font-family:Aslina;src:url(../../../fonts/aslina.woff) format("woff");font-display:swap}@font-face{font-family:Rockabye;src:url(../../../fonts/rockabye.woff) format("woff");font-display:swap}@font-face{font-family:Village;src:url(../../../fonts/village.woff) format("woff");font-display:swap}@font-face{font-family:Ranille;src:url(../../../fonts/ranille.woff) format("woff");font-display:swap}@font-face{font-family:Bayshore;src:url(../../../fonts/bayshore.woff) format("woff");font-display:swap}:root{--music-font: "Share Tech", sans-serif;--border-color: hsla(0, 0%, 80%, 1);--text-color: hsla(0, 0%, 5%, 1);--icon-line: hsla(0, 0%, 0%, 1);--blue-0: hsla(215, 64%, 35%, 1);--blue-1: hsla(215, 64%, 50%, 1);--blue-2: hsla(215, 64%, 65%, 1);--blue-3: hsla(215, 64%, 80%, 1);--green-0: hsla(180, 100%, 20%, 1);--green-1: hsla(180, 100%, 30%, 1);--grey-1: hsla(0, 0%, 2.5%, 1);--grey-2: hsla(0, 0%, 5%, 1);--grey-3: hsla(0, 0%, 7.5%, 1);--grey-4: hsla(0, 0%, 10%, 1);--grey-5: hsla(0, 0%, 12.5%, 1);--grey-6: hsla(0, 0%, 15%, 1);--grey-7: hsla(0, 0%, 17.5%, 1);--grey-8: hsla(0, 0%, 20%, 1);--grey-9: hsla(0, 0%, 22.5%, 1);--grey-10: hsla(0, 0%, 25%, 1);--thickness: 2px;--thickness-2: 4px;--heading-font: "montserrat", sans-serif;--text-font: "open sans", sans-serif;--hue: 225;--sat: 10%;--font-1: "Odachi", sans-serif;--font-2: "Oswald", sans-serif;--font-3: "Avenir Next", sans-serif;--menu-bg: hsla(var(--hue), var(--sat), 10%, 1);--menu-bg-inset: hsla(var(--hue), var(--sat), 10%, 1);--menu-border: hsla(var(--hue), var(--sat), 20%, 1);--main-bg: hsla(var(--hue), var(--sat), 7.5%, 1);--main-bg: hsla(var(--hue), var(--sat), 0%, 1);--main-bg-image: none;--main-shadow: inset 0px 0px 32px hsla(0, 0%, 0%, .75);--box-shadow-4: 0px 0px 4px hsla(0, 0%, 0%, .5);--inset-box-shadow-4: inset 0px 0px 4px hsla(0, 0%, 0%, .5);--box-shadow-2: 0px 0px 2px hsla(0, 0%, 0%, .5);--inset-box-shadow-2: inset 0px 0px 2px hsla(0, 0%, 0%, .5);--play-button-fill: hsla(172, 100%, 20%, 1);--play-button-fill-playing: hsla(172, 100%, 30%, 1);--play-button-border: hsla(0, 0%, 100%, 1);--play-icon-fill: hsla(0, 0%, 100%, 1);--album-text-bg-playing: hsla(172, 100%, 20%, .5);--image-mask: linear-gradient( to top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .013) 8.1%, hsla(0, 0%, 0%, .049) 15.5%, hsla(0, 0%, 0%, .104) 22.5%, hsla(0, 0%, 0%, .175) 29%, hsla(0, 0%, 0%, .259) 35.3%, hsla(0, 0%, 0%, .352) 41.2%, hsla(0, 0%, 0%, .45) 47.1%, hsla(0, 0%, 0%, .55) 52.9%, hsla(0, 0%, 0%, .648) 58.8%, hsla(0, 0%, 0%, .741) 64.7%, hsla(0, 0%, 0%, .825) 71%, hsla(0, 0%, 0%, .896) 77.5%, hsla(0, 0%, 0%, .951) 84.5%, hsla(0, 0%, 0%, .987) 91.9%, hsl(0, 0%, 0%) 100% );--horizontal-image-mask: linear-gradient( to right, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .013) 8.1%, hsla(0, 0%, 100%, .049) 15.5%, hsla(0, 0%, 100%, .104) 22.5%, hsla(0, 0%, 100%, .175) 29%, hsla(0, 0%, 100%, .259) 35.3%, hsla(0, 0%, 100%, .352) 41.2%, hsla(0, 0%, 100%, .45) 47.1%, hsla(0, 0%, 100%, .55) 52.9%, hsla(0, 0%, 100%, .648) 58.8%, hsla(0, 0%, 100%, .741) 64.7%, hsla(0, 0%, 100%, .825) 71%, hsla(0, 0%, 100%, .896) 77.5%, hsla(0, 0%, 100%, .951) 84.5%, hsla(0, 0%, 100%, .987) 91.9%, hsl(0, 0%, 100%) 100% );--bg-1: hsla(var(--hue), var(--sat), 10%, 1);--bg-2: hsla(var(--hue), var(--sat), 15%, 1);--bg-3: hsla(var(--hue), var(--sat), 20%, 1);--bg-4: hsla(var(--hue), var(--sat), 25%, 1);--bg-5: hsla(var(--hue), var(--sat), 40%, 1);--bg-6: hsla(var(--hue), var(--sat), 50%, 1);--bg-7: hsla(var(--hue), var(--sat), 60%, 1);--bg-8: hsla(var(--hue), var(--sat), 70%, 1);--border-1: hsla(var(--hue), var(--sat), 20%, 1);--border-2: hsla(var(--hue), var(--sat), 25%, 1);--border-3: hsla(var(--hue), var(--sat), 30%, 1);--border-4: hsla(var(--hue), var(--sat), 35%, 1);--border-5: hsla(var(--hue), var(--sat), 30%, 1);--border-6: hsla(var(--hue), var(--sat), 35%, 1);--border-7: hsla(var(--hue), var(--sat), 40%, 1);--border-8: hsla(var(--hue), var(--sat), 45%, 1);--card-bg-color: none;--card-border: hsl(0, 0%, 0%);--card-shadow: rgba(0, 0, 0, .07) 0px 1px 2px, rgba(0, 0, 0, .07) 0px 2px 4px, rgba(0, 0, 0, .07) 0px 4px 8px, rgba(0, 0, 0, .07) 0px 8px 16px, rgba(0, 0, 0, .07) 0px 16px 32px, rgba(0, 0, 0, .07) 0px 32px 64px ;--card-color-1: hsla(172, 20%, 10%, 1);--card-color-2: hsla(172, 20%, 12.5%, 1);--card-color-3: hsla(172, 20%, 20%, 1);--card-color-4: hsla(172, 20%, 25%, 1);--card-color-5: hsla(172, 20%, 30%, 1);--card-color-6: hsla(172, 20%, 35%, 1);--title-font: var(--font-1);--title-color: hsla(0, 0%, 100%, 1);--title-shadow: 0px 0px 8px hsla(360, 100%, 100%, 1);--title-shadow-small: 0px 0px 4px hsla(360, 100%, 100%, 1);--subtitle-font: var(--font-2);--subtitle-color: hsla(0, 0%, 100%, 1);--banner-title-font: var(--font-2);--banner-title-color: hsla(0, 0%, 100%, 1);--text-font: var(--font-3);--text-color: hsla(0, 0%, 90%, 1);--h1-color: hsla(172, 75%, 50%, 1);--h2-color: hsla(172, 75%, 50%, 1);--h3-color: hsla(172, 75%, 50%, 1);--h4-color: hsla(172, 75%, 50%, 1);--h5-color: hsla(172, 75%, 50%, 1);--h6-color: hsla(172, 75%, 50%, 1);--icon-stroke: hsla(0, 0%, 90%, .75);--icon-fill: hsla(0, 0%, 90%, 0);--selected-fill-1: hsla(172, 100%, 30%, 1);--selected-fill-2: hsla(172, 100%, 25%, 1);--selected-fill-3: hsla(172, 100%, 20%, 1);--selected-stroke-1: hsla(172, 100%, 60%, 1);--selected-stroke-2: hsla(172, 100%, 30%, 1);--selected-stroke-3: hsla(172, 100%, 20%, 1);--slider-bg: hsla(0, 0%, 25%, 1);--slider-fill: hsla(0, 0%, 50%, 1);--button-fill: hsla(0, 0%, 75%, 1);--button-border: hsla(0, 0%, 100%, 1);--button-font: var(--font-2);--button-color: hsla(0, 0%, 0%, 1);--sequencer-bg: hsla(0, 0%, 0%, 1);--sequencer-empty: hsla(0, 0%, 10%, 1);--note-color: hsla(207, 45%, 33%, 1);--note-hue: 172;--note-saturation: 80%;--note-lightness: 30%;--note-border: hsla(var(--note-hue), var(--note-saturation), var(--note-lightness), 1);--note-inset: hsla(var(--note-hue), var(--note-saturation), 50%, 1);--full-mask: linear-gradient( to top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .013) 8.1%, hsla(0, 0%, 0%, .049) 15.5%, hsla(0, 0%, 0%, .104) 22.5%, hsla(0, 0%, 0%, .175) 29%, hsla(0, 0%, 0%, .259) 35.3%, hsla(0, 0%, 0%, .352) 41.2%, hsla(0, 0%, 0%, .45) 47.1%, hsla(0, 0%, 0%, .55) 52.9%, hsla(0, 0%, 0%, .648) 58.8%, hsla(0, 0%, 0%, .741) 64.7%, hsla(0, 0%, 0%, .825) 71%, hsla(0, 0%, 0%, .896) 77.5%, hsla(0, 0%, 0%, .951) 84.5%, hsla(0, 0%, 0%, .987) 91.9%, hsl(0, 0%, 0%) 100% );--definition-bg: hsl(175, 25%, 15%);--definition-border: hsla(175, 100%, 25%, 1)}:root{--hue: 225;--sat: 10%;--font-1: "Odachi", sans-serif;--font-2: "Oswald", sans-serif;--font-3: "Nunito", sans-serif;--cta-color: hsla(170, 100%, 20%, 1);--menu-bg: hsla(var(--hue), var(--sat), 5%, 1);--menu-bg-inset: hsla(var(--hue), var(--sat), 5%, 1);--menu-border: hsla(var(--hue), var(--sat), 20%, 1);--main-bg: hsla(var(--hue), var(--sat), 0%, 1);--main-bg-image: none;--main-shadow: inset 0px 0px 32px hsla(0, 0%, 0%, .75);--box-shadow-4: 0px 0px 4px hsla(0, 0%, 0%, .5);--inset-box-shadow-4: inset 0px 0px 4px hsla(0, 0%, 0%, .5);--box-shadow-2: 0px 0px 2px hsla(0, 0%, 0%, .5);--inset-box-shadow-2: inset 0px 0px 2px hsla(0, 0%, 0%, .5);--play-button-fill: hsla(172, 100%, 15%, 1);--play-button-fill-playing: hsla(172, 100%, 30%, 1);--play-button-border: hsla(0, 0%, 100%, 1);--play-icon-fill: hsla(0, 0%, 100%, 1);--album-text-bg-playing: hsla(172, 100%, 20%, .5);--image-mask: linear-gradient( to top, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .013) 8.1%, hsla(0, 0%, 100%, .049) 15.5%, hsla(0, 0%, 100%, .104) 22.5%, hsla(0, 0%, 100%, .175) 29%, hsla(0, 0%, 100%, .259) 35.3%, hsla(0, 0%, 100%, .352) 41.2%, hsla(0, 0%, 100%, .45) 47.1%, hsla(0, 0%, 100%, .55) 52.9%, hsla(0, 0%, 100%, .648) 58.8%, hsla(0, 0%, 100%, .741) 64.7%, hsla(0, 0%, 100%, .825) 71%, hsla(0, 0%, 100%, .896) 77.5%, hsla(0, 0%, 100%, .951) 84.5%, hsla(0, 0%, 100%, .987) 91.9%, hsl(0, 0%, 100%) 100% );--bg-0: hsla(var(--hue), var(--sat), 8%, 1);--bg-1: hsla(var(--hue), var(--sat), 10%, 1);--bg-2: hsla(var(--hue), var(--sat), 12.5%, 1);--bg-3: hsla(var(--hue), var(--sat), 15%, 1);--bg-4: hsla(var(--hue), var(--sat), 17.5%, 1);--bg-5: hsla(var(--hue), var(--sat), 20%, 1);--bg-6: hsla(var(--hue), var(--sat), 22.5%, 1);--bg-7: hsla(var(--hue), var(--sat), 25%, 1);--bg-8: hsla(var(--hue), var(--sat), 27.5%, 1);--border-1: hsla(var(--hue), var(--sat), 17.5%, 1);--border-2: hsla(var(--hue), var(--sat), 20%, 1);--border-3: hsla(var(--hue), var(--sat), 22.5%, 1);--border-4: hsla(var(--hue), var(--sat), 25%, 1);--border-5: hsla(var(--hue), var(--sat), 27.5%, 1);--border-6: hsla(var(--hue), var(--sat), 30%, 1);--border-7: hsla(var(--hue), var(--sat), 32.5%, 1);--border-8: hsla(var(--hue), var(--sat), 35%, 1);--card-bg-color: none;--card-bg: hsla(var(--hue), var(--sat), 15%, 1);--card-border: hsl(0, 0%, 0%);--card-shadow: rgba(0, 0, 0, .07) 0px 1px 2px, rgba(0, 0, 0, .07) 0px 2px 4px, rgba(0, 0, 0, .07) 0px 4px 8px, rgba(0, 0, 0, .07) 0px 8px 16px, rgba(0, 0, 0, .07) 0px 16px 32px, rgba(0, 0, 0, .07) 0px 32px 64px ;--title-font: var(--font-1);--title-color: hsla(0, 0%, 100%, 1);--title-shadow: 0px 0px 8px hsla(360, 100%, 100%, 1);--subtitle-font: var(--font-2);--heading-weight: 400;--subtitle-color: hsla(0, 0%, 100%, 1);--banner-title-font: var(--font-2);--banner-title-color: hsla(172, 75%, 50%, 1);--text-font: var(--font-3);--text-color: hsla(0, 0%, 90%, 1);--text-color-muted: hsla(0, 0%, 70%, 1);--h1-color: hsla(172, 75%, 50%, 1);--h2-color: hsla(172, 75%, 50%, 1);--h3-color: hsla(172, 75%, 50%, 1);--h4-color: hsla(172, 75%, 50%, 1);--h5-color: hsla(172, 75%, 50%, 1);--h6-color: hsla(172, 75%, 50%, 1);--card-color-1: hsla(172, 30%, 10%, 1);--card-color-2: hsla(172, 30%, 12.5%, 1);--card-color-3: hsla(172, 30%, 20%, 1);--card-color-4: hsla(172, 30%, 25%, 1);--card-color-5: hsla(172, 30%, 30%, 1);--card-color-6: hsla(172, 30%, 35%, 1);--icon-stroke: hsla(0, 0%, 90%, .75);--icon-fill: hsla(0, 0%, 90%, 0);--selected-fill-1: hsla(172, 100%, 30%, 1);--selected-fill-2: hsla(172, 100%, 25%, 1);--selected-fill-3: hsla(172, 100%, 20%, 1);--selected-stroke-1: hsla(172, 100%, 60%, 1);--selected-stroke-2: hsla(172, 100%, 30%, 1);--selected-stroke-3: hsla(172, 100%, 20%, 1);--slider-bg: hsla(0, 0%, 40%, 1);--slider-fill: hsla(172, 100%, 20%, 1);--slider-focus-fill: hsla(172, 100%, 30%, 1);--slider-handle-border: hsla(172, 100%, 20%, 1);--button-fill: hsla(0, 0%, 75%, 1);--button-border: hsla(0, 0%, 100%, 1);--button-font: var(--font-2);--button-color: hsla(0, 0%, 0%, 1);--sequencer-bg: hsla(0, 0%, 0%, 1);--sequencer-empty: hsla(0, 0%, 10%, 1);--note-color: hsla(180, 25%, 25%, 1);--note-hue: 172;--note-saturation: 80%;--note-lightness: 30%;--note-border: hsla(var(--note-hue), var(--note-saturation), var(--note-lightness), 1);--note-inset: hsla(var(--note-hue), var(--note-saturation), 50%, 1);--dim-hue: 265;--half-dim-hue: 255;--min-hue: 225;--dom-hue: 10;--maj-hue: 23;--aug-hue: 39;--keep-it-100: 100%;--dim: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);--dim-unselected: hsla(var(--dim-hue), var(--keep-it-100), 20%, 1);--dim-selected: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);--half-dim: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);--half-dim-unselected: hsla(var(--half-dim-hue), var(--keep-it-100), 20%, 1);--half-dim-selected: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);--min: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--min-unselected: hsla(var(--min-hue), var(--keep-it-100), 25%, 1);--min-selected: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--dom: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);--dom-unselected: hsla(var(--dom-hue), var(--keep-it-100), 25%, 1);--dom-selected: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);--maj: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);--maj-unselected: hsla(var(--maj-hue), var(--keep-it-100), 20%, 1);--maj-selected: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);--aug: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);--aug-unselected: hsla(var(--aug-hue), var(--keep-it-100), 20%, 1);--aug-selected: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);--svg-bg: hsla(240, 5%, 15%, 1);--theme-icon-bg: linear-gradient(hsl(240, 100%, 39%), hsl(259, 96%, 57%));--gear-bg: #555;--gear-border: #aaa;--toastContainerTop: auto;--toastContainerRight: 32px;--toastContainerBottom: 112px;--toastContainerLeft: auto;--toastBorderRadius: 8px;--toastFontFamily: var(--music-font);--toastBtnFont: var(--music-font)}*{scrollbar-width:thin;scrollbar-color:#666 var(--bg-0)}body{background-color:var(--main-bg);color:var(--text-color);padding:env(safe-area-inset-bottom,24px)}._toastMsg{font-family:var(--music-font),sans-serif}a{text-decoration:none;color:var(--text-color);display:grid}img{width:100%;height:auto}button{background-color:var(--bg-4);border:1px solid var(--border-4);color:var(--text-color)}table{border-collapse:collapse}td,th{border-collapse:collapse;border:1px solid white;padding:.5rem;text-align:left;font-family:var(--subtitle-font);width:48px;height:48px;display:inline-grid;place-content:center;background-color:#333;line-height:1;font-size:16px;color:#fff}.markdown-pre,pre{background-color:var(--bg-2);border:1px solid var(--border-2);border-radius:16px;padding:2rem;grid-column:2 / -2}code{font-size:18px;line-height:1.5;font-family:Source Code Pro}.markdown-h1,.markdown-h2,.markdown-h3,.markdown-h4,.markdown-h5,.markdown-h6{line-height:1;font-family:var(--subtitle-font);font-weight:var(--heading-weight);color:var(--h1-color);display:grid;justify-items:start;grid-column:2 / -2}.markdown-p{grid-column:2 / -2;font-family:var(--text-font);color:var(--text-color);font-size:20px;font-size:calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));line-height:2;font-weight:500}.markdown-table{grid-column:2 / -2;white-space:nowrap}.markdown-table td:first-child{width:256px;white-space:nowrap}.markdown-h1>a,.markdown-h2>a,.markdown-h3>a,.markdown-h4>a,.markdown-h5>a,.markdown-h6>a{justify-self:start;color:var(--h1-color)}.markdown-h1{font-size:40px}.markdown-h2{font-size:36px}.markdown-h3{font-size:32px}.markdown-h4{font-size:28px}.markdown-h5{font-size:24px}.markdown-h6{font-size:20px}.header-buffer{padding-top:2rem;margin-top:-2rem;-webkit-background-clip:content-box;background-clip:content-box}.markdown-section{width:100%;grid-column:1 / -1;display:grid;grid-template-rows:auto;grid-template-columns:minmax(1rem,1fr) minmax(1rem,80ch) minmax(1rem,1fr);row-gap:3rem}.markdown-ol{font-family:var(--text-font);color:var(--text-color);font-size:22px;line-height:2;font-weight:400;list-style:none;display:grid;row-gap:.5rem;border:1px solid var(--border-1);border-radius:12px;background-color:var(--bg-1);padding:.75rem;grid-column:2 / -2}.markdown-ol{counter-reset:orderedlist}.markdown-ol :global(li){display:grid;grid-auto-flow:column;grid-template-columns:min-content 1fr;height:min-content;align-items:center;column-gap:1rem;padding-left:.5rem}.markdown-ol :global(li:before){counter-increment:orderedlist;content:counter(orderedlist);line-height:1;width:2rem;height:2rem;border:1px solid var(--border-4);background-color:var(--bg-4);border-radius:6px;display:grid;place-items:center}@media screen and (orientation:portrait){.markdown-ol{padding:.5rem}}.markdown-ul{font-family:var(--text-font);color:var(--text-color);font-size:18px;list-style:none;display:grid;row-gap:.5rem;border:1px solid var(--border-1);border-radius:12px;background-color:var(--bg-1);padding:.5rem}.markdown-ul{grid-column:2 / -2}.markdown-ul li ul{background:var(--bg-2);border:1px solid var(--border-3);border:none;padding:.5rem 0 0;margin-left:2.5rem}.markdown-ul li ul li{background:var(--bg-3);border:1px solid var(--border-3);font-family:var(--text-font);color:var(--text-color);line-height:1.5;box-shadow:var(--box-shadow-4)}.markdown-li{font-family:var(--text-font);color:var(--text-color);font-size:18px;line-height:1.5;font-weight:400;background:var(--bg-2);border:1px solid var(--border-2);border-radius:8px;padding:.5rem;width:100%}@media screen and (orientation:portrait){.markdown-li{font-size:14px;line-height:1.5}}.markdown-blockquote{margin:0;padding:1rem;font-size:40px;line-height:1;font-family:var(--subtitle-font);color:var(--h1-color);background-color:var(--bg-3);border-left:8px solid var(--border-4);border-radius:0 16px 16px 0;grid-column:2 / -2}strong{color:#ffff80}.katex{font-size:2rem}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;border-radius:15px;height:6px;background:#ccc}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:15px;width:15px;background-color:#fff;border-radius:50%;border:none;transition:.2s ease-in-out}input[type=range]::-moz-range-thumb{height:15px;width:15px;background-color:#fff;border-radius:50%;border:none;transition:.2s ease-in-out}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 10px #ffffff1a}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 13px #ffffff1a}input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 13px #ffffff1a}input[type=range]::-moz-range-thumb:hover{box-shadow:0 0 0 10px #ffffff1a}input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 13px #ffffff1a}input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 13px #ffffff1a}.wrapper{color:#4b4949;background:#fff;max-width:400px;width:100%;height:300px;display:flex;justify-content:center;align-items:center;margin:0 auto}.range{display:flex;align-items:center;gap:1rem;max-width:500px;margin:0 auto;height:4rem;width:80%;background:#fff;padding:0 10px}:root.dark{--hue: 225;--sat: 10%;--font-1: "Odachi", sans-serif;--font-2: "Oswald", sans-serif;--font-3: "Nunito", sans-serif;--cta-color: hsla(170, 100%, 20%, 1);--menu-bg: hsla(var(--hue), var(--sat), 10%, 1);--menu-bg-inset: hsla(var(--hue), var(--sat), 10%, 1);--menu-border: hsla(var(--hue), var(--sat), 20%, 1);--main-bg: hsla(var(--hue), var(--sat), 7.5%, 1);--main-bg: hsla(var(--hue), var(--sat), 0%, 1);--main-bg-image: none;--main-shadow: inset 0px 0px 32px hsla(0, 0%, 0%, .75);--box-shadow-4: 0px 0px 4px hsla(0, 0%, 0%, .5);--inset-box-shadow-4: inset 0px 0px 4px hsla(0, 0%, 0%, .5);--box-shadow-2: 0px 0px 2px hsla(0, 0%, 0%, .5);--inset-box-shadow-2: inset 0px 0px 2px hsla(0, 0%, 0%, .5);--play-button-fill: hsla(172, 100%, 15%, 1);--play-button-fill-playing: hsla(172, 100%, 30%, 1);--play-button-border: hsla(0, 0%, 100%, 1);--play-icon-fill: hsla(0, 0%, 100%, 1);--album-text-bg-playing: hsla(172, 100%, 20%, .5);--image-mask: linear-gradient( to top, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, .013) 8.1%, hsla(0, 0%, 0%, .049) 15.5%, hsla(0, 0%, 0%, .104) 22.5%, hsla(0, 0%, 0%, .175) 29%, hsla(0, 0%, 0%, .259) 35.3%, hsla(0, 0%, 0%, .352) 41.2%, hsla(0, 0%, 0%, .45) 47.1%, hsla(0, 0%, 0%, .55) 52.9%, hsla(0, 0%, 0%, .648) 58.8%, hsla(0, 0%, 0%, .741) 64.7%, hsla(0, 0%, 0%, .825) 71%, hsla(0, 0%, 0%, .896) 77.5%, hsla(0, 0%, 0%, .951) 84.5%, hsla(0, 0%, 0%, .987) 91.9%, hsl(0, 0%, 0%) 100% );--bg-0: hsla(var(--hue), var(--sat), 8%, 1);--bg-1: hsla(var(--hue), var(--sat), 10%, 1);--bg-2: hsla(var(--hue), var(--sat), 12.5%, 1);--bg-3: hsla(var(--hue), var(--sat), 15%, 1);--bg-4: hsla(var(--hue), var(--sat), 17.5%, 1);--bg-5: hsla(var(--hue), var(--sat), 20%, 1);--bg-6: hsla(var(--hue), var(--sat), 22.5%, 1);--bg-7: hsla(var(--hue), var(--sat), 25%, 1);--bg-8: hsla(var(--hue), var(--sat), 27.5%, 1);--border-1: hsla(var(--hue), var(--sat), 17.5%, 1);--border-2: hsla(var(--hue), var(--sat), 20%, 1);--border-3: hsla(var(--hue), var(--sat), 22.5%, 1);--border-4: hsla(var(--hue), var(--sat), 25%, 1);--border-5: hsla(var(--hue), var(--sat), 27.5%, 1);--border-6: hsla(var(--hue), var(--sat), 30%, 1);--border-7: hsla(var(--hue), var(--sat), 32.5%, 1);--border-8: hsla(var(--hue), var(--sat), 35%, 1);--card-bg-color: none;--card-bg: hsla(var(--hue), var(--sat), 15%, 1);--card-border: hsl(0, 0%, 0%);--card-shadow: rgba(0, 0, 0, .07) 0px 1px 2px, rgba(0, 0, 0, .07) 0px 2px 4px, rgba(0, 0, 0, .07) 0px 4px 8px, rgba(0, 0, 0, .07) 0px 8px 16px, rgba(0, 0, 0, .07) 0px 16px 32px, rgba(0, 0, 0, .07) 0px 32px 64px ;--title-font: var(--font-1);--title-color: hsla(0, 0%, 100%, 1);--title-shadow: 0px 0px 8px hsla(360, 100%, 100%, 1);--subtitle-font: var(--font-2);--heading-weight: 400;--subtitle-color: hsla(0, 0%, 100%, 1);--banner-title-font: var(--font-2);--banner-title-color: hsla(172, 75%, 50%, 1);--text-font: var(--font-3);--text-color: hsla(0, 0%, 90%, 1);--text-color-muted: hsla(0, 0%, 70%, 1);--h1-color: hsla(172, 75%, 50%, 1);--h2-color: hsla(172, 75%, 50%, 1);--h3-color: hsla(172, 75%, 50%, 1);--h4-color: hsla(172, 75%, 50%, 1);--h5-color: hsla(172, 75%, 50%, 1);--h6-color: hsla(172, 75%, 50%, 1);--card-color-1: hsla(172, 30%, 10%, 1);--card-color-2: hsla(172, 30%, 12.5%, 1);--card-color-3: hsla(172, 30%, 20%, 1);--card-color-4: hsla(172, 30%, 25%, 1);--card-color-5: hsla(172, 30%, 30%, 1);--card-color-6: hsla(172, 30%, 35%, 1);--icon-stroke: hsla(0, 0%, 90%, .75);--icon-fill: hsla(0, 0%, 90%, 0);--selected-fill-1: hsla(172, 100%, 30%, 1);--selected-fill-2: hsla(172, 100%, 25%, 1);--selected-fill-3: hsla(172, 100%, 20%, 1);--selected-stroke-1: hsla(172, 100%, 60%, 1);--selected-stroke-2: hsla(172, 100%, 30%, 1);--selected-stroke-3: hsla(172, 100%, 20%, 1);--slider-bg: hsla(0, 0%, 40%, 1);--slider-fill: hsla(172, 100%, 20%, 1);--slider-focus-fill: hsla(172, 100%, 30%, 1);--slider-handle-border: hsla(172, 100%, 20%, 1);--button-fill: hsla(0, 0%, 75%, 1);--button-border: hsla(0, 0%, 100%, 1);--button-font: var(--font-2);--button-color: hsla(0, 0%, 0%, 1);--sequencer-bg: hsla(0, 0%, 0%, 1);--sequencer-empty: hsla(0, 0%, 10%, 1);--note-color: hsla(180, 25%, 25%, 1);--note-hue: 172;--note-saturation: 80%;--note-lightness: 30%;--note-border: hsla(var(--note-hue), var(--note-saturation), var(--note-lightness), 1);--note-inset: hsla(var(--note-hue), var(--note-saturation), 50%, 1);--dim-hue: 265;--half-dim-hue: 255;--min-hue: 225;--dom-hue: 10;--maj-hue: 23;--aug-hue: 39;--keep-it-100: 100%;--dim: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);--dim-unselected: hsla(var(--dim-hue), var(--keep-it-100), 20%, 1);--dim-selected: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);--half-dim: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);--half-dim-unselected: hsla(var(--half-dim-hue), var(--keep-it-100), 20%, 1);--half-dim-selected: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);--min: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--min-unselected: hsla(var(--min-hue), var(--keep-it-100), 25%, 1);--min-selected: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--dom: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);--dom-unselected: hsla(var(--dom-hue), var(--keep-it-100), 25%, 1);--dom-selected: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);--maj: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);--maj-unselected: hsla(var(--maj-hue), var(--keep-it-100), 20%, 1);--maj-selected: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);--aug: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);--aug-unselected: hsla(var(--aug-hue), var(--keep-it-100), 20%, 1);--aug-selected: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);--svg-bg: hsla(240, 5%, 15%, 1);--theme-icon-bg: linear-gradient(hsl(240, 100%, 39%), hsl(259, 96%, 57%));--gear-bg: #555;--gear-border: #aaa}:root.light{--hue: 0;--sat: 0%;--font-1: "Aslina", sans-serif;--font-2: "Dosis", sans-serif;--font-3: "Avenir Next", sans-serif;--cta-color: hsla(0, 100%, 25%, 1);--menu-bg: hsla(var(--hue), var(--sat), 95%, 1);--menu-bg-inset: hsla(var(--hue), var(--sat), 90%, 1);--menu-border: hsla(var(--hue), var(--sat), 80%, 1);--main-bg: hsla(var(--hue), var(--sat), 85%, 1);--main-bg-image: none;--main-shadow: inset 0px 0px 32px hsla(0, 0%, 0%, .1);--box-shadow-4: 0px 0px 4px hsla(0, 0%, 0%, .15);--inset-box-shadow-4: inset 0px 0px 4px hsla(0, 0%, 0%, .15);--box-shadow-2: 0px 0px 2px hsla(0, 0%, 0%, .15);--inset-box-shadow-2: inset 0px 0px 2px hsla(0, 0%, 0%, .15);--play-button-fill: hsla(0, 100%, 20%, 1);--play-button-fill-playing: hsla(0, 100%, 30%, 1);--play-button-border: hsla(0, 0%, 100%, 1);--play-icon-fill: hsla(0, 0%, 100%, 1);--album-text-bg-playing: hsla(0, 100%, 15%, 1);--image-mask: linear-gradient( to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, .996) 4.2%, hsla(0, 0%, 100%, .984) 10%, hsla(0, 0%, 100%, .964) 16.9%, hsla(0, 0%, 100%, .936) 24.9%, hsla(0, 0%, 100%, .902) 33.5%, hsla(0, 0%, 100%, .861) 42.5%, hsla(0, 0%, 100%, .814) 51.8%, hsla(0, 0%, 100%, .761) 60.9%, hsla(0, 0%, 100%, .702) 69.7%, hsla(0, 0%, 100%, .638) 77.9%, hsla(0, 0%, 100%, .569) 85.1%, hsla(0, 0%, 100%, .495) 91.2%, hsla(0, 0%, 100%, .417) 95.9%, hsla(0, 0%, 100%, .335) 98.9%, hsla(0, 0%, 100%, .25) 100% );--bg-1: hsla(var(--hue), var(--sat), 80%, 1);--bg-2: hsla(var(--hue), var(--sat), 85%, 1);--bg-3: hsla(var(--hue), var(--sat), 90%, 1);--bg-4: hsla(var(--hue), var(--sat), 95%, 1);--bg-5: hsla(var(--hue), var(--sat), 85%, 1);--bg-6: hsla(var(--hue), var(--sat), 90%, 1);--bg-7: hsla(var(--hue), var(--sat), 95%, 1);--bg-8: hsla(var(--hue), var(--sat), 100%, 1);--border-1: hsla(var(--hue), var(--sat), 65%, 1);--border-2: hsla(var(--hue), var(--sat), 68%, 1);--border-3: hsla(var(--hue), var(--sat), 71%, 1);--border-4: hsla(var(--hue), var(--sat), 72%, 1);--border-5: hsla(var(--hue), var(--sat), 80%, 1);--border-6: hsla(var(--hue), var(--sat), 85%, 1);--border-7: hsla(var(--hue), var(--sat), 90%, 1);--border-8: hsla(var(--hue), var(--sat), 95%, 1);--card-bg-color: hsla(0, 0%, 0%, 1);--card-bg: hsl(0, 0%, 90%);--card-border: hsl(0, 0%, 100%);--card-shadow: rgba(0, 0, 0, .07) 0px 1px 2px, rgba(0, 0, 0, .07) 0px 2px 4px, rgba(0, 0, 0, .07) 0px 4px 8px, rgba(0, 0, 0, .07) 0px 8px 16px, rgba(0, 0, 0, .07) 0px 16px 32px, rgba(0, 0, 0, .07) 0px 32px 64px ;--card-color-1: rgb(127, 0, 0);--card-color-2: rgb(166, 0, 0);--card-color-3: hsla(0, 100%, 15%, 1);--card-color-4: hsla(0, 100%, 20%, 1);--card-color-5: hsla(0, 100%, 25%, 1);--card-color-6: hsla(0, 100%, 30%, 1);--title-font: var(--font-1);--title-color: rgb(255, 255, 255);--subtitle-font: var(--font-2);--heading-weight: 500;--subtitle-color: rgb(255, 255, 255);--text-font: var(--font-3);--text-color: hsla(0, 0%, 0%, 1);--banner-title-font: var(--font-2);--banner-title-color: hsla(0, 100%, 30%, 1);--h1-color: hsla(0, 100%, 30%, 1);--h2-color: hsla(0, 100%, 30%, 1);--h3-color: hsla(0, 100%, 30%, 1);--h4-color: hsla(0, 100%, 30%, 1);--h5-color: hsla(0, 100%, 30%, 1);--h6-color: hsla(0, 100%, 30%, 1);--icon-stroke: hsla(0, 0%, 10%, 1);--icon-fill: hsla(0, 0%, 90%, 0);--selected-fill-1: hsla(0, 100%, 15%, 1);--selected-fill-2: hsla(0, 100%, 30%, 1);--selected-fill-3: hsla(0, 100%, 50%, 1);--selected-stroke-1: hsla(0, 0%, 10%, 1);--selected-stroke-2: hsla(0, 0%, 30%, 1);--selected-stroke-3: hsla(0, 0%, 50%, 1);--slider-bg: hsla(0, 0%, 75%, 1);--slider-fill: hsla(0, 100%, 25%, 1);--slider-focus-fill: hsla(0, 100%, 40%, 1);--slider-handle-border: hsla(0, 100%, 20%, 1);--button-fill: hsla(30, 30%, 20%, 1);--button-border: hsla(30, 30%, 30%, 1);--button-font: var(--font-2);--button-color: hsla(30, 30%, 80%, 1);--sequencer-bg: hsla(0, 0%, 75%, 1);--sequencer-empty: hsla(0, 0%, 90%, 1);--note-color: hsla(0, 50%, 50%, 1);--note-hue: 0;--note-saturation: 50%;--note-lightness: 50%;--note-border: hsla(var(--note-hue), var(--note-saturation), 20%, 1);--note-inset: hsla(var(--note-hue), var(--note-saturation), 20%, 1);--dim-hue: 265;--half-dim-hue: 255;--min-hue: 225;--dom-hue: 10;--maj-hue: 23;--aug-hue: 39;--keep-it-100: 100%;--dim: hsla(265, 100%, 50%, 1);--dim-unselected: rgb(175, 118, 255);--dim-selected: hsla(265, 100%, 50%, 1);--half-dim: hsla(255, 100%, 50%, 1);--half-dim-unselected: hsl(255, 100%, 75%);--half-dim-selected: hsla(255, 100%, 50%, 1);--min: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--min-unselected: hsla(var(--min-hue), var(--keep-it-100), 25%, 1);--min-unselected: hsl(225, 41%, 69%);--min-selected: hsl(225, 98%, 56%);--dom: hsla(10, 100%, 50%, 1);--dom-unselected: rgb(217, 129, 112);--dom-selected: hsla(10, 100%, 50%, 1);--maj: hsla(23, 100%, 45%, 1);--maj-unselected: rgb(226, 133, 76);--maj-selected: hsla(23, 100%, 45%, 1);--aug: hsla(39, 100%, 45%, 1);--aug-unselected: rgb(255, 199, 95);--aug-selected: rgb(255, 189, 67);--svg-bg: hsla(240, 5%, 15%, 1);--theme-icon-bg: linear-gradient(hsl(210, 100%, 60%), hsl(212, 100%, 86%));--gear-bg: #555;--gear-border: #aaa}:root.wave{--hue: 250;--sat: 25%;--font-1: "Bayshore", sans-serif;--font-2: "Oswald", sans-serif;--font-3: "Avenir Next", sans-serif;--cta-color: hsla(315, 100%, 50%, 1);--menu-bg: hsla(var(--hue), var(--sat), 15%, 1);--menu-bg-inset: hsla(var(--hue), var(--sat), 10%, 1);--menu-border: hsla(var(--hue), var(--sat), 30%, 1);--main-bg: hsla(var(--hue), var(--sat), 10%, 1);--main-bg-image: none;--main-shadow: inset 0px 0px 32px hsla(0, 0%, 0%, 1);--box-shadow-4: 0px 0px 4px hsla(0, 0%, 0%, .25);--inset-box-shadow-4: inset 0px 0px 4px hsla(0, 0%, 0%, .25);--box-shadow-2: 0px 0px 2px hsla(0, 0%, 0%, .25);--inset-box-shadow-2: inset 0px 0px 2px hsla(0, 0%, 0%, .25);--play-button-fill: hsla(313, 100%, 50%, 1);--play-button-fill-playing: hsla(185, 100%, 50%, 1);--play-button-border: hsla(0, 0%, 100%, 1);--play-icon-fill: hsla(0, 0%, 100%, 1);--album-text-bg-playing: hsla(313, 100%, 50%, .5);--image-mask: linear-gradient( to top, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .013) 8.1%, hsla(0, 0%, 100%, .049) 15.5%, hsla(0, 0%, 100%, .104) 22.5%, hsla(0, 0%, 100%, .175) 29%, hsla(0, 0%, 100%, .259) 35.3%, hsla(0, 0%, 100%, .352) 41.2%, hsla(0, 0%, 100%, .45) 47.1%, hsla(0, 0%, 100%, .55) 52.9%, hsla(0, 0%, 100%, .648) 58.8%, hsla(0, 0%, 100%, .741) 64.7%, hsla(0, 0%, 100%, .825) 71%, hsla(0, 0%, 100%, .896) 77.5%, hsla(0, 0%, 100%, .951) 84.5%, hsla(0, 0%, 100%, .987) 91.9%, hsl(0, 0%, 100%) 100% );--bg-1: hsla(var(--hue), var(--sat), 5%, 1);--bg-2: hsla(var(--hue), var(--sat), 10%, 1);--bg-3: hsla(var(--hue), var(--sat), 15%, 1);--bg-4: hsla(var(--hue), var(--sat), 20%, 1);--bg-5: hsla(var(--hue), var(--sat), 25%, 1);--bg-6: hsla(var(--hue), var(--sat), 30%, 1);--bg-7: hsla(var(--hue), var(--sat), 35%, 1);--bg-8: hsla(var(--hue), var(--sat), 40%, 1);--border-1: hsla(var(--hue), var(--sat), 17.5%, 1);--border-2: hsla(var(--hue), var(--sat), 20%, 1);--border-3: hsla(var(--hue), var(--sat), 25%, 1);--border-4: hsla(var(--hue), var(--sat), 30%, 1);--border-5: hsla(var(--hue), var(--sat), 30%, 1);--border-6: hsla(var(--hue), var(--sat), 35%, 1);--border-7: hsla(var(--hue), var(--sat), 40%, 1);--border-8: hsla(var(--hue), var(--sat), 45%, 1);--card-bg-color: none;--card-border: hsla(295, 100%, 90%, .7);--card-shadow: 0px 0px 8px hsla(293, 97%, 72%, .7);--title-font: var(--font-1);--title-color: hsla(0, 0%, 100%, 1);--title-shadow: 0px 0px 16px rgb(255, 132, 243);--subtitle-font: var(--font-2);--heading-weight: 400;--subtitle-color: hsla(0, 0%, 100%, 1);--banner-title-font: var(--font-2);--banner-title-color: hsl(298, 68%, 93%);--banner-title-shadow: 0px 0px 8px hsla(180, 100%, 75%, 1);--text-font: var(--font-3);--text-color: hsla(180, 100%, 90%, 1);--h1-color: hsla(313, 100%, 80%, 1);--h2-color: hsla(313, 100%, 80%, 1);--h3-color: hsla(313, 100%, 80%, 1);--h4-color: hsla(313, 100%, 80%, 1);--h5-color: hsla(313, 100%, 80%, 1);--h6-color: hsla(313, 100%, 80%, 1);--card-color-1: hsla(313, 100%, 10%, 1);--card-color-2: hsla(313, 100%, 15%, 1);--card-color-3: hsla(313, 100%, 20%, 1);--card-color-4: hsla(313, 100%, 25%, 1);--card-color-5: hsla(313, 100%, 30%, 1);--card-color-6: hsla(313, 100%, 35%, 1);--icon-stroke: hsla(313, 100%, 80%, .75);--icon-fill: hsla(0, 0%, 90%, 0);--selected-fill-1: hsla(190, 100%, 50%, 1);--selected-fill-2: hsla(170, 100%, 50%, 1);--selected-fill-3: hsl(286, 96%, 89%);--selected-stroke-1: hsla(313, 100%, 80%, 1);--selected-stroke-2: hsla(313, 100%, 80%, .6);--selected-stroke-3: hsla(313, 100%, 80%, .4);--slider-bg: hsla(var(--hue), var(--sat), 30%, 1);--slider-fill: hsla(var(--hue), var(--sat), 60%, 1);--slider-focus-fill: hsla(289, 100%, 50%, 1);--slider-handle-border: hsla(289, 100%, 25%, 1);--button-fill: hsla(30, 30%, 20%, 1);--button-border: hsla(30, 30%, 30%, 1);--button-font: var(--font-2);--button-color: hsla(30, 30%, 80%, 1);--sequencer-bg: hsla(var(--hue), var(--sat), 5%, 1);--sequencer-empty: hsla(var(--hue), var(--sat), 15%, 1);--note-color: hsla(289, 100%, 40%, 1);--note-hue: 289;--note-saturation: 100%;--note-lightness: 40%;--note-border: hsla(var(--note-hue), var(--note-saturation), var(--note-lightness), 1);--note-inset: hsla(var(--note-hue), var(--note-saturation), 80%, 1);--dim-hue: 265;--half-dim-hue: 255;--min-hue: 225;--dom-hue: 10;--maj-hue: 23;--aug-hue: 39;--keep-it-100: 100%;--dim: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);--dim-unselected: hsla(var(--dim-hue), var(--keep-it-100), 20%, 1);--dim-selected: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);--half-dim: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);--half-dim-unselected: hsla(var(--half-dim-hue), var(--keep-it-100), 20%, 1);--half-dim-selected: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);--min: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--min-unselected: hsla(var(--min-hue), var(--keep-it-100), 25%, 1);--min-selected: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--dom: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);--dom-unselected: hsla(var(--dom-hue), var(--keep-it-100), 25%, 1);--dom-selected: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);--maj: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);--maj-unselected: hsla(var(--maj-hue), var(--keep-it-100), 20%, 1);--maj-selected: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);--aug: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);--aug-unselected: hsla(var(--aug-hue), var(--keep-it-100), 20%, 1);--aug-selected: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);--svg-bg: hsla(250, 25%, 15%, 1);--theme-icon-bg: linear-gradient(hsl(269, 100%, 31%), hsl(259, 100%, 30%));--gear-bg: #555;--gear-border: #aaa}:root.soul{--hue: 30;--sat: 10%;--font-1: "Village", sans-serif;--font-2: "Vollkorn", sans-serif;--font-3: "Avenir Next", sans-serif;--cta-color: hsla(210, 45%, 35%, 1);--menu-bg: hsla(var(--hue), var(--sat), 70%, 1);--menu-bg-inset: hsla(var(--hue), var(--sat), 65%, 1);--menu-border: hsla(var(--hue), var(--sat), 50%, 1);--main-bg: hsla(var(--hue), var(--sat), 60%, 1);--main-bg-image: url(/static/images/soul-bg.jpg);--main-shadow: inset 0px 0px 24px hsla(0, 0%, 0%, .3);--box-shadow-4: 0px 0px 4px hsla(0, 0%, 0%, .25);--inset-box-shadow-4: inset 0px 0px 4px hsla(0, 0%, 0%, .25);--box-shadow-2: 0px 0px 2px hsla(0, 0%, 0%, .25);--inset-box-shadow-2: inset 0px 0px 2px hsla(0, 0%, 0%, .25);--accent-1: hsla(207, 45%, 33%, 1);--accent-2: hsla(200, 31%, 44%, 1);--play-button-fill: var(--accent-1);--play-button-fill-playing: var(--accent-2);--play-button-border: hsla(0, 0%, 100%, 1);--play-icon-fill: hsla(0, 0%, 100%, 1);--album-text-bg-playing: var(--accent-1);--image-mask: linear-gradient( to top, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, .013) 8.1%, hsla(0, 0%, 100%, .049) 15.5%, hsla(0, 0%, 100%, .104) 22.5%, hsla(0, 0%, 100%, .175) 29%, hsla(0, 0%, 100%, .259) 35.3%, hsla(0, 0%, 100%, .352) 41.2%, hsla(0, 0%, 100%, .45) 47.1%, hsla(0, 0%, 100%, .55) 52.9%, hsla(0, 0%, 100%, .648) 58.8%, hsla(0, 0%, 100%, .741) 64.7%, hsla(0, 0%, 100%, .825) 71%, hsla(0, 0%, 100%, .896) 77.5%, hsla(0, 0%, 100%, .951) 84.5%, hsla(0, 0%, 100%, .987) 91.9%, hsl(0, 0%, 100%) 100% );--bg-1: hsla(var(--hue), var(--sat), 55%, 1);--bg-2: hsla(var(--hue), var(--sat), 60%, 1);--bg-3: hsla(var(--hue), var(--sat), 65%, 1);--bg-4: hsla(var(--hue), var(--sat), 70%, 1);--bg-5: hsla(var(--hue), var(--sat), 85%, 1);--bg-6: hsla(var(--hue), var(--sat), 90%, 1);--bg-7: hsla(var(--hue), var(--sat), 95%, 1);--bg-8: hsla(var(--hue), var(--sat), 100%, 1);--border-1: hsla(var(--hue), var(--sat), 70%, 1);--border-2: hsla(var(--hue), var(--sat), 75%, 1);--border-3: hsla(var(--hue), var(--sat), 80%, 1);--border-4: hsla(var(--hue), var(--sat), 85%, 1);--border-5: hsla(var(--hue), var(--sat), 80%, 1);--border-6: hsla(var(--hue), var(--sat), 85%, 1);--border-7: hsla(var(--hue), var(--sat), 90%, 1);--border-8: hsla(var(--hue), var(--sat), 95%, 1);--card-bg-color: hsl(20, 10%, 20%);--card-bg: hsla(var(--hue), var(--sat), 65%, 1);--card-border: hsl(29, 60%, 90%);--card-shadow: rgba(0, 0, 0, .07) 0px 1px 2px, rgba(0, 0, 0, .07) 0px 2px 4px, rgba(0, 0, 0, .07) 0px 4px 8px, rgba(0, 0, 0, .07) 0px 8px 16px, rgba(0, 0, 0, .07) 0px 16px 32px, rgba(0, 0, 0, .07) 0px 32px 64px ;--card-color-1: hsla(207, 40%, 25%, .9);--card-color-2: hsla(207, 40%, 32.5%, .9);--card-color-3: hsla(207, 45%, 20%, 1);--card-color-4: hsla(207, 45%, 25%, 1);--card-color-5: hsla(207, 45%, 30%, 1);--card-color-6: hsla(207, 45%, 35%, 1);--title-font: var(--font-1);--title-color: hsla(0, 0%, 100%, 1);--title-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 4px 4px hsla(18, 74%, 38%, 1), 8px 8px hsla(28, 74%, 48%, 1), 12px 12px hsla(41, 71%, 47%, 1) ;--title-shadow-3: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 3px 3px hsla(18, 74%, 38%, 1), 6px 6px hsla(28, 74%, 48%, 1), 9px 9px hsla(41, 71%, 47%, 1) ;--title-shadow-2: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 2px 2px hsla(18, 74%, 38%, 1), 4px 4px hsla(28, 74%, 48%, 1), 6px 6px hsla(41, 71%, 47%, 1) ;--title-shadow-1: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 2px 2px hsla(18, 74%, 38%, 1), 3px 3px hsla(28, 74%, 48%, 1), 4px 4px hsla(41, 71%, 47%, 1) ;--subtitle-font: var(--font-2);--heading-weight: 400;--subtitle-color: hsla(0, 0%, 100%, 1);--subtitle-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 2px 2px hsl(219, 48%, 34%), 3px 3px hsl(200, 31%, 44%), 4px 4px rgb(138, 185, 168) ;--banner-title-font: var(--font-2);--banner-title-color: hsl(0, 0%, 100%);--banner-title-shadow: var(--title-shadow-2);--text-font: var(--font-3);--text-color: hsl(36, 48%, 16%);--h1-color: hsla(207, 45%, 33%, 1);--h2-color: hsla(207, 45%, 33%, 1);--h3-color: hsla(207, 45%, 33%, 1);--h4-color: hsla(29, 42%, 18%, 1);--h5-color: hsla(29, 42%, 18%, 1);--h6-color: hsla(29, 42%, 18%, 1);--icon-stroke: hsla(23, 10%, 25%, 1);--icon-fill: hsla(0, 0%, 90%, 0);--selected-fill-1: hsla(207, 45%, 33%, 1);--selected-fill-2: hsla(195, 40%, 44%, 1);--selected-fill-3: hsla(172, 42%, 50%, 1);--selected-stroke-1: hsla(29, 42%, 18%, 1);--selected-stroke-2: hsla(29, 42%, 28%, 1);--selected-stroke-3: hsla(29, 42%, 38%, 1);--slider-bg: hsla(30, 10%, 60%, 1);--slider-fill: hsla(207, 45%, 33%, 1);--slider-focus-fill: hsla(195, 40%, 44%, 1);--slider-handle-border: hsla(207, 45%, 33%, 1);--button-fill: hsla(30, 30%, 20%, 1);--button-border: hsla(30, 30%, 30%, 1);--button-font: var(--font-2);--button-color: hsla(30, 30%, 80%, 1);--sequencer-bg: hsla(30, 10%, 50%, 1);--sequencer-empty: hsla(30, 10%, 60%, 1);--note-color: hsla(207, 45%, 33%, 1);--note-hue: 207;--note-saturation: 45%;--note-lightness: 35%;--note-border: hsla(var(--note-hue), var(--note-saturation), var(--note-lightness), 1);--note-inset: hsla(var(--note-hue), var(--note-saturation), 20%, 1);--dim-hue: 265;--half-dim-hue: 255;--min-hue: 225;--dom-hue: 10;--maj-hue: 23;--aug-hue: 39;--keep-it-100: 100%;--dim: hsla(265, 100%, 50%, 1);--dim-unselected: rgb(175, 118, 255);--dim-selected: hsla(265, 100%, 50%, 1);--half-dim: hsla(255, 100%, 50%, 1);--half-dim-unselected: hsla(255, 100%, 20%, 1);--half-dim-selected: hsla(v255, 100%, 50%, 1);--min: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);--min-unselected: hsla(var(--min-hue), var(--keep-it-100), 25%, 1);--min-unselected: hsl(225, 45%, 68%);--min-selected: hsl(225, 100%, 61%);--dom: hsla(10, 100%, 50%, 1);--dom-unselected: rgb(217, 129, 112);--dom-selected: hsla(10, 100%, 50%, 1);--maj: hsla(23, 100%, 45%, 1);--maj-unselected: rgb(226, 133, 76);--maj-selected: hsla(23, 100%, 45%, 1);--aug: hsla(39, 100%, 45%, 1);--aug-unselected: rgb(255, 199, 95);--aug-selected: rgb(255, 189, 67);--svg-bg: hsla(0, 8%, 21%, 1);--theme-icon-bg: linear-gradient(hsl(32, 26%, 79%), hsl(31, 29%, 71%));--gear-bg: #555;--gear-border: #aaa}.container.svelte-12qhfyh{width:100vw;height:100vh;padding:0;display:grid;grid-template-rows:1fr;grid-template-columns:1fr}