.app{min-height:100dvh;background-color:var(--primary-bg-color);display:flex;flex-direction:column;overflow-x:hidden}.app-header,.app-footer{background-color:var(--secondary-bg-color)}.app-header{padding:1rem;display:flex;align-items:center}.app-footer{padding:.5rem;display:flex;justify-content:space-between;font-size:smaller;align-items:center;gap:1rem;@media (width < 25rem){gap:0;flex-direction:column;& span{margin-left:auto}}}.app-header__title{margin:0;margin-left:.5rem;font-weight:100;font-size:1.4rem}.app-header svg{height:2rem;fill:currentColor}.app-header__nav-button{border:0;margin-left:auto;color:currentColor;opacity:.7}.app-header__nav-button:where(:hover,:focus-visible){opacity:1;scale:1.1}.app-header__nav-button svg{height:1.4rem;vertical-align:middle}.app-main{flex:1;position:relative}.preview-indicator{text-align:center;display:flex;align-items:center;gap:.7rem;color:#ffdf52;& svg{min-width:.7rem;fill:currentColor}@media (width < 25rem){margin-block-start:.3rem;margin-block-end:.7rem}}.notifications{z-index:999;position:fixed;display:flex;flex-direction:column;width:100%;gap:1rem;align-items:center;margin-top:1.5rem;isolation:isolate}.notifications .notification{--z-index: 0;z-index:var(--z-index);background-color:var(--secondary-bg-color);padding:1.2rem 1rem;width:50ch;max-width:80vw;border-radius:5px;border:1px solid var(--primary-text-color)}.notifications .notification{animation:notification-enter .3s ease-in-out forwards}@keyframes notification-enter{0%{scale:.9;translate:0 -5rem;opacity:0}to{scale:1;translate:0 0;opacity:1}}.notifications .notification--exiting{animation:notification-exit .3s ease-in-out forwards}@keyframes notification-exit{0%{scale:1;opacity:1}to{scale:.5;opacity:0}}.lock-button{border:none;background-color:transparent}.lock-button--open{opacity:.5}.lock-button svg{height:1.1rem}.player-container{background-color:var(--secondary-bg-color);padding:1rem;border-radius:5px;box-sizing:border-box;width:80vw;animation:animation-player-container-enter .25s ease-in-out forwards}.player-container--saved-file{border:1px solid var(--primary-text-color-very-see-through)}@keyframes animation-player-container-enter{0%{scale:.4;opacity:0}to{scale:1;opacity:1}}.player-container--exiting{animation:animation-player-container-exit .25s ease-in-out forwards}@keyframes animation-player-container-exit{0%{scale:1;opacity:1}to{scale:.4;opacity:0}}.player-container svg{fill:var(--primary-text-color)}.player-container__header{display:flex;justify-content:end;align-items:center;border-bottom:1px solid currentColor;margin-bottom:1.5rem;padding-bottom:.7rem}.player-container__close-btn svg{height:1.3rem}.player-container__title{font-size:1rem;font-weight:100;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-block:.5rem;text-align:center;flex:1}.player-container__close-btn{border:none;background-color:transparent}.player-container--hidden{height:1rem;overflow:hidden;padding:0;.player-container__unhide-btn {display: block; width: 10ch; scale: 10; background-color: var(--tertiary-bg-color);}}.player-container__unhide-btn{display:none}.player-container__hide-btn{position:absolute;top:0;right:0;height:1rem;aspect-ratio:1/1;scale:2;opacity:0;border-radius:0}.player-progress{display:flex;justify-content:center}.player-progress__current-time,.player-progress__duration{flex:0 0 8ch;text-align:center}.player-progress__range{flex:1;width:100%;min-width:4rem}.audio-player__play-btn-wrapper{display:flex;justify-content:center;margin-block:.3rem .2rem}.audio-player__play-btn,.audio-player__repeat-btn{border:none;background-color:transparent}.audio-player__play-btn svg{height:3rem}.audio-player__controls-wrapper{display:flex;justify-content:space-evenly;flex-wrap:wrap}.audio-player__controls-divider{margin-inline:1rem 1.3rem;border:1px solid var(--primary-text-color);opacity:.5}.audio-player__repeat-btn svg{height:1.5rem}.volume-input{flex:1;display:flex;align-items:center}.volume-input__volume-control{flex:1;width:100%;min-width:2rem;margin-left:auto}.volume-input svg{height:1.4rem}.gestures-underlay{position:absolute;inset:0;z-index:-1}.vertical-indicator{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;opacity:.7;transition:opacity .15s cubic-bezier(.28,-.27,.4,1.31);pointer-events:none}.vertical-indicator--left{left:5%}.vertical-indicator--right{right:5%}.vertical-indicator--hidden{opacity:0}.vertical-indicator-container{border:2px solid var(--primary-text-color);width:1rem;flex:1;height:100%;max-height:min(10rem,50%);position:relative;overflow:hidden}.vertical-indicator-level{--height: 0;position:absolute;bottom:0;background-color:var(--primary-text-color);height:var(--height);width:150%;margin:-5%}.vertical-indicator svg{margin-top:.5rem;width:2rem}.video-player__video{width:100%;min-height:13rem;background-color:#000}.video-player__player-wrapper{position:relative;display:flex}.video-player__player-fast-back-btn,.video-player__player-fast-forward-btn{position:absolute;box-sizing:border-box;top:50%;width:30%;height:30%;translate:0 -50%;display:flex;align-items:center;cursor:pointer;z-index:10;opacity:.7;transition:opacity .15s cubic-bezier(.28,-.27,.4,1.31)}.video-player__player-fast-back-btn svg,.video-player__player-fast-forward-btn svg{--box-shadow: drop-shadow(0 0 1rem var(--secondary-bg-color));filter:var(--box-shadow) var(--box-shadow);height:2.5rem}.video-player__player-fast-back-btn--hidden,.video-player__player-fast-forward-btn--hidden{opacity:0}.video-player__player-fast-back-btn{left:0;justify-content:end;padding-right:1rem}.video-player__player-fast-forward-btn{right:0;justify-content:start;padding-left:1rem}.video-player__lock-button-wrapper{position:absolute;top:1rem;left:1rem;cursor:pointer;z-index:10;background-color:transparent}.video-player__lock-button-wrapper--hidden{opacity:0}.video-player__lock-button-wrapper svg{--box-shadow: drop-shadow(0 0 1rem var(--secondary-bg-color));filter:var(--box-shadow) var(--box-shadow) var(--box-shadow);height:1.1rem}.video-player__gesture-seek-wrapper{position:absolute;top:10%;left:50%;translate:-50%;z-index:10;background-color:var(--secondary-bg-color-slightly-see-through);padding:1rem;min-width:5rem;font-size:1.3rem;border-radius:5px;display:flex;justify-content:center}.video-player__gesture-seek-wrapper--hidden{opacity:0}.video-player__player-overlay{position:absolute;top:0;z-index:5;inset:0;background-color:transparent;border:none}.video-player__darken-overlay{position:absolute;inset:0;background:black;opacity:0}.video-player__darken-overlay.fullscreen{--fullscreen-opacity: 0;opacity:var(--fullscreen-opacity)}.video-player__player-controls-overlay{position:relative;height:100%;display:grid;cursor:pointer;place-items:center;transition:opacity .5s ease}.video-player__player-controls-overlay--hidden{opacity:0}.video-player__play-btn,.video-player__fullscreen-btn{border:none;background-color:transparent}.video-player__play-btn svg{height:3rem;border:none;background-color:transparent;--box-shadow: drop-shadow(0 0 1rem var(--secondary-bg-color));filter:var(--box-shadow) var(--box-shadow) var(--box-shadow)}.video-player__play-btn svg{height:3rem}.video-player__player-controls{position:absolute;bottom:-1px;left:-1px;right:-1px;background-color:var(--secondary-bg-color-see-through);padding:.5rem .25rem}.video-player__more-controls{display:flex;margin-inline:1rem}.video-player__fullscreen-btn{padding-right:0rem;& svg{height:1.5rem}}.players-page{display:flex;flex-direction:column;align-items:center}.players-page__player-wrapper{margin:2.5rem}.players-page__player-wrapper:has(.player-container--hidden){margin:.5rem}.players-page__arrangement-section{width:100%;padding:.5rem;display:flex;gap:.5rem;box-sizing:border-box;border-bottom:1px solid var(--primary-text-color);justify-content:center;flex-wrap:wrap}.players-page__arrangement-name{width:100%;padding:.5rem;flex:1;display:flex;justify-content:center}.players-page__arrangement-buttons{display:flex;gap:inherit;flex-wrap:wrap;justify-content:center;align-items:center}.files-picker{margin:2rem .5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.files-picker__btn{color:inherit;border:1px solid currentColor;cursor:pointer;border-radius:15px;padding:.5rem 1rem;background-color:var(--secondary-bg-color);transition:50ms ease;display:flex;gap:.5rem}.files-picker__btn:active{translate:0 2px}.files-picker__btn svg{fill:currentColor;height:1rem}.saved-file-picker{margin:2rem .5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.saved-file-picker__btn{color:inherit;border:1px solid currentColor;cursor:pointer;border-radius:15px;padding:.5rem 1rem;background-color:var(--secondary-bg-color);transition:50ms ease;display:flex;gap:.5rem}.saved-file-picker__btn:active{translate:0 2px}.saved-file-picker__btn svg{fill:currentColor;height:1rem}.saved-file-picker__dialog-wrapper{background-color:#00000053;backdrop-filter:blur(3px);position:fixed;inset:0;display:grid;place-items:center}.saved-file-picker__dialog{background-color:var(--secondary-bg-color);border:1px solid currentColor;border-radius:5px;color:inherit;max-height:70dvh;max-width:90vw;position:relative;margin:.5rem;overflow:auto}.saved-file-picker__dialog-list{list-style:none;padding:0;display:flex;flex-direction:column}.saved-file-picker__dialog-btn{width:100%;color:inherit;border:1px solid var(--primary-bg-color);cursor:pointer;padding:.5rem 1rem;background-color:var(--tertiary-bg-color)}.youtube-player__iframe{border:none;width:100%}.youtube-player__content{background-color:#000;display:flex;justify-content:center;min-height:15rem}.youtube-player__header-icon{margin-inline-end:1rem;display:grid;place-items:center}.youtube-player__header-icon-svg-background{content:"";height:.6rem;width:.6rem;background-color:#fff;grid-column:1;grid-row:1}.youtube-player__header-icon svg{height:1.1rem;fill:red;grid-column:1;grid-row:1}.add-youtube-button{margin:2rem .5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.add-youtube-button--hidden{display:none}.add-youtube-button__btn{color:inherit;border:1px solid currentColor;cursor:pointer;border-radius:15px;padding:.5rem 1rem;background-color:var(--secondary-bg-color);transition:50ms ease;display:flex;gap:.5rem}.add-youtube-button__btn:active{translate:0 2px}.add-youtube-button__btn svg{fill:currentColor;height:1rem}.settings-modal{display:block;inset:0;height:calc(100% - 3rem);width:calc(100% - 3rem);padding:0;border:1px solid var(--primary-text-color-see-through);box-sizing:border-box;color:inherit;background-color:var(--primary-bg-color);overflow:auto;animation:settings-modal-enter .25s ease-in-out forwards}@keyframes settings-modal-enter{0%{scale:.7;opacity:0}to{scale:1;opacity:1}}.settings-modal--closing{animation:settings-modal-exit .25s ease-in-out forwards}@keyframes settings-modal-exit{0%{scale:1;opacity:1}to{scale:.7;opacity:0}}.settings-modal__header{position:sticky;top:0;font-size:.8rem;padding:.5rem 1rem;background-color:var(--secondary-bg-color);border-bottom:1px solid var(--primary-text-color-very-see-through)}.settings-modal__header-title{font-weight:100;color:var(--primary-text-color-see-through);margin:0}.settings-modal__nav{padding:1rem}.settings-modal__nav-list{list-style:none;margin:0;padding:0;display:flex;gap:1rem;justify-content:space-evenly;align-items:center}.settings-modal__nav-link{color:var(--primary-text-color-see-through);text-decoration:none;outline:none}.settings-modal__nav-link--active{color:var(--primary-text-color);font-size:1.1rem}.settings-modal__nav-link:where(:hover,:focus-visible){color:var(--primary-text-color)}.settings-modal__panel{padding:1rem}*{-webkit-tap-highlight-color:transparent}body{margin:0;color:var(--primary-text-color)}:root{--primary-bg-color: #20202d;--secondary-bg-color: #2a2a3c;--secondary-bg-color-slightly-see-through: hsla(240, 18%, 20%, .892);--secondary-bg-color-see-through: hsla(240, 17%, 20%, .7);--secondary-bg-color-very-see-through: hsla(240, 18%, 20%, .327);--tertiary-bg-color: #4a4a60;--primary-text-color: #e9e9e9;--primary-text-color-see-through: #e9e9e9a0;--primary-text-color-very-see-through: #e9e9e950}button,input[type=range]{cursor:pointer}button{background-color:var(--secondary-bg-color);color:var(--primary-text-color);border:1px solid currentColor;padding:.3rem;border-radius:5px}button:active{color:var(--primary-text-color-see-through);translate:0 .1rem}.library-settings__saved-files-list,.library-settings__arrangements-list{list-style:none;padding:.5rem}.library-settings__saved-files-list-item,.library-settings__arrangements-list-item{padding:1rem .5rem;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:space-between;align-items:center}:is(.library-settings__saved-files-list-item,.library-settings__arrangements-list-item):not(:last-child){border-bottom:1px solid var(--primary-text-color)}.library-settings__arrangements-list-item-buttons{display:flex;flex-wrap:wrap;gap:.2rem;justify-content:center}