*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--clr-lightest: hsl(0, 0%, 80%);--clr-light: hsl(0, 0%, 85%);--clr-medium: hsl(0, 0%, 65%);--clr-dark: hsl(0, 0%, 22%);--clr-darkest: hsl(0, 0%, 10%);--clr-accent: hsl(196, 99%, 49%)}main{height:100svh;min-height:-webkit-fill-available;width:100svw;overflow:hidden;display:grid;place-content:center;background:radial-gradient(var(--clr-medium),var(--clr-lightest));font-family:Kode Mono,monospace;font-optical-sizing:auto;font-style:normal;position:relative}.app-wrapper{border-radius:50px;height:max-content;display:grid;overflow:hidden;min-width:375px;max-width:450px;background:var(--clr-light)}.tooltip{visibility:hidden;position:absolute;width:5rem;background-color:var(--clr-darkest);color:var(--clr-accent);text-align:center;padding:.5rem .75rem;border-radius:.25rem;font-family:Kode Mono,monospace;font-optical-sizing:auto;font-style:normal}#bypass-btn:hover .tooltip,#bypass-btn:active .tooltip{visibility:visible;top:5%;right:20%}#play-pause-btn:hover .tooltip,#play-pause-btn:active .tooltip{visibility:visible;top:5%;left:20%}.header-wrapper{display:flex;background-color:var(--clr-darkest);color:var(--clr-light);border:none}input[type=file]{width:0px;height:0px;opacity:0;overflow:hidden;position:absolute;z-index:-1}input[type=file]+#file-label{font-weight:700;display:flex;height:min-content;padding:.25rem;width:100%;cursor:pointer;align-items:center;justify-content:center}input[type=file]:focus+#file-label,input[type=file]+#file-label:hover{background-color:var(--clr-accent);color:var(--clr-darkest)}#fileupload-icon{height:33px;width:33px}.waveform-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:.5;overflow:hidden;background:var(--clr-light);padding-block:1rem;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-box-shadow:1px 1px 0px #cfcfcf,-1px -1px 0px #d3d3d3;box-shadow:1px 1px #cfcfcf,-1px -1px #d3d3d3}.waveform{height:100%;width:95%;overflow:hidden;border-radius:39px;background-color:var(--clr-dark);box-shadow:8px 8px 16px #ccc,-8px -8px 16px #f4f4f4}.controls-UI{display:grid;padding-block:3rem;position:relative;grid-template-areas:"PLAY_BTN BYPASS_BTN" "FADER_INPUT FADER_INPUT";justify-content:space-evenly;gap:2rem 0}#play-pause-btn{display:flex;grid-area:PLAY_BTN;justify-content:center;align-items:center;aspect-ratio:1;border-radius:10rem;background:linear-gradient(145deg,#f0f0f0,#cacaca);border:none}.playing-on{background-color:var(--clr-dark);color:var(--clr-accent);outline:2px solid hsla(196,99%,49%,.199);outline-offset:.1rem;background:linear-gradient(145deg,#cacaca,#f0f0f0);box-shadow:inset 5px 5px 10px #d0d0d0,inset -5px -5px 10px #f0f0f0}.playing-off{background-color:var(--clr-light);color:var(--clr-darkest);outline:2px solid hsla(0,0%,49%,.082);outline-offset:.1rem;box-shadow:6px 6px 12px #c1c1c1,-6px -6px 12px #fff}#bypass-btn{display:flex;grid-area:BYPASS_BTN;justify-content:center;align-items:center;aspect-ratio:1;border-radius:10rem;background:linear-gradient(145deg,#f0f0f0,#cacaca);border:none;z-index:20;height:20%}.bypass-on{background-color:var(--clr-dark);color:#ff000059;outline:1px solid rgba(255,0,0,.349);outline-offset:.1rem;background:linear-gradient(145deg,#cacaca,#f0f0f0);box-shadow:inset 5px 5px 10px #d0d0d0,inset -5px -5px 10px #f0f0f0}.bypass-off{background-color:var(--clr-light);color:#292929;outline:1px solid hsla(0,0%,57%,.199);outline-offset:.1rem;box-shadow:6px 6px 12px #c1c1c1,-6px -6px 12px #fff}#fader-input{grid-area:FADER_INPUT;position:relative}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:grab;margin:0 auto;width:100%;border-radius:.25rem}input[type=range]::-webkit-slider-runnable-track{border-radius:5px;height:5rem;box-shadow:inset 10px 10px 18px #bcbcbc,inset -10px -10px 18px #fff}input[type=range]::-moz-range-track{border-radius:5px;height:5rem;box-shadow:inset 10px 10px 18px #bcbcbc,inset -10px -10px 18px #fff}input[type=range]::-moz-range-thumb{border-radius:5px;background:linear-gradient(145deg,#f0f0f0,#cacaca);box-shadow:9px 9px 18px #bebebe;border:1px solid var(--clr-light);width:2.5rem;height:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:5px;background:linear-gradient(145deg,#f0f0f0,#cacaca);box-shadow:9px 9px 18px #bebebe;border:1px solid var(--clr-light);width:2.5rem;height:100%}.title-wrapper{padding-block:1rem;display:flex;position:relative;align-items:center;padding-inline:2rem;flex:.25;align-content:center;gap:.5rem;background-color:var(--clr-darkest);color:var(--clr-lightest);-webkit-user-select:none!important;user-select:none!important;z-index:100}.title-wrapper strong{color:var(--clr-accent)}.title-logo{font-size:56px}.title-about{font-size:14px}.tooltip-wrapper{display:flex;align-items:center}.info-icon{height:1.5rem;width:1.5rem;margin:0 auto;position:absolute;right:2rem}.tooltip-wrapper .tooltip{visibility:hidden}.info-icon:hover+.tooltip{visibility:visible;background-color:var(--clr-darkest);color:var(--clr-light);z-index:100;bottom:6rem;padding-inline:1rem;display:grid;align-items:center;justify-content:center;position:absolute;margin:0 auto;right:0;width:100%;height:10rem;border:1px solid var(--clr-accent);list-style:none!important;text-align:left}.soundcloud-logo{position:absolute;bottom:0;left:0;height:55px;padding:.25rem}