:root{--background-color: hsl(0, 0%, 91%);--text-color: hsl(0, 0%, 12%);--card-shadow: hsla(0, 0%, 0%, .1);--chip-text-color: hsla(0, 0%, 100%, .87);--chip-regular: hsl(0, 0%, 45%);--chip-hover: hsl(0, 0%, 33.5%);--chip-select: hsl(0, 0%, 23%);--tick-color: hsl(0, 0%, 79.5%);--tick-text-color: hsl(0, 0%, 56.5%);--tick-text-accent-color: black;--bubble-background-color: #fff;--tune-label-color: hsl(0, 0%, 45%);--tuner-text-color: hsla(0, 0%, 100%, .87);--tuner-peg-background-color: hsl(0, 0%, 79.5%);--tuner-peg-active: hsl(0, 0%, 33.5%);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-color);background-color:var(--background-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dark-mode{--background-color: hsl(0, 0%, 12%);--text-color: hsl(0, 0%, 80%);--card-shadow: hsla(0, 0%, 91%, .1);--chip-text-color: hsla(0, 0%, 0%, .87);--chip-regular: hsl(0, 0%, 56%);--chip-hover: hsl(0, 0%, 67.5%);--chip-select: hsl(0, 0%, 78%);--tick-color: hsl(0, 0%, 23.5%);--tick-text-color: hsl(0, 0%, 45.5%);--tick-text-accent-color: hsl(0, 0%, 90%);--bubble-background-color: hsl(0, 0%, 10%);--tune-label-color: hsl(0, 0%, 56%);--tuner-text-color: hsla(0, 0%, 0%, .87);--tuner-peg-background-color: hsl(0, 0%, 23.5%);--tuner-peg-active: hsl(0, 0%, 67.5%)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:3px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#999eff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{width:100%;height:100%}.app-container{display:flex;width:100%;height:100%;align-items:stretch}.all-container{flex:0 1 550px;max-width:550px;min-width:320px;text-align:center;padding:1rem 0;order:2}.sidebar{flex:1 1 0px;min-width:0;overflow:hidden;display:flex;justify-content:center;align-items:center;height:100vh}.sidebar-left{order:1}.sidebar-right{order:3}.card{padding:1em;box-shadow:0 4px 35px var(--card-shadow);border-radius:40px;margin:2em;display:flex;flex-direction:column}@media (max-width: 1050px){.app-container{display:block}.sidebar{flex:none;width:100%;height:auto}.all-container{flex:none;margin-left:auto;margin-right:auto}}@media (max-width: 475px){.card{margin:.75rem}html{font-size:12px}}.pitch-wrapper{display:flex;align-items:baseline;justify-content:space-evenly;padding:0 2em}.pitch-label{font-size:3em;font-weight:700;font-variant:small-caps}.pitch-value{font-size:2em;font-weight:700;margin-left:auto}svg{width:100%;height:auto}.detail-toggle{margin-left:auto;margin-right:3%;color:var(--tune-label-color);cursor:pointer;align-self:flex-end}.waveform-label{font-size:1rem;font-weight:700;margin:5px;text-align:left}.unhighlightable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tuner-display-container{display:flex;flex-direction:column}.tuner-peg-container{display:flex;justify-content:space-evenly}.tuner-peg{color:#000;font-size:1.4rem;font-weight:700;margin:0 10px;border-radius:100%;background-color:#ccc;width:50px;height:50px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;transition:all .2s ease-in-out}.tuner-peg-activated{background-color:var(--chip-select);color:var(--tuner-text-color);transform:scale(1.2)}.tuner-peg-tuned{background-color:#84e184;color:#1e7b1e}.tuner-peg-container-svg{width:100%;height:auto;box-sizing:border-box}.tuner-peg-svg{fill:var(--tuner-peg-background-color);transition:all .2s ease-in-out}.tuner-peg-svg-text{fill:var(--text-color);transition:all .2s ease-in-out}.tuner-peg-activated-svg{fill:var(--tuner-peg-active);transform:scale(1.2)}.tuner-peg-activated-svg-text{fill:var(--tuner-text-color);transform:scale(1.2)}.tuner-peg-tuned-svg{fill:#84e184}.tuner-peg-tuned-svg-text{fill:#1e7b1e}.tuning-main{display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tuning-container-wrapper{position:relative;min-width:0;max-width:100%}.tuning-label{color:var(--tune-label-color);font-size:.75rem;font-weight:700;margin-left:5px;padding-bottom:2px}.tuning-container{display:flex;overflow-x:auto;overflow-y:hidden;width:100%}.tuning-chip{display:inline-block;padding:0 15px;margin-right:5px;font-size:16px;border-radius:25px;background-color:#f1f1f1}.tuning-chip-selected{background-color:gray}.tuning-chip-icon{display:inline-block}.tuning-chip-icon:hover{background-color:orange;color:red}.md-chip{color:var(--chip-text-color);display:inline-block;background:var(--chip-regular);padding:0 .75rem;border-radius:2rem;font-size:.8125rem;flex-shrink:0}.md-chip-hover:hover{background:var(--chip-hover)}.md-chip-clickable{cursor:pointer}.md-chip-selected{background:var(--chip-select)}.md-chip,.md-chip-icon{height:2rem;line-height:2rem}.md-chip-icon{display:block;float:left;background:#009587;width:32px;border-radius:50%;text-align:center;color:#fff;margin:0 8px 0 -12px}.md-chip-remove{display:inline-block;background:#aaa;border:0;height:20px;width:20px;border-radius:50%;padding:0;margin:0 -4px 0 4px;cursor:pointer;font:inherit;line-height:20px}.md-chip-remove:after{color:#e0e0e0;content:"x"}.md-chip-remove:hover{background:#999}.md-chip-remove:active{background:#777}.md-chips{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.md-chips .md-chip{margin:0 .315rem .19rem 0}.md-chip-raised{box-shadow:0 2px 2px #00000024,0 1px 5px #0000001f,0 3px 1px -2px #0003}.shadow{position:absolute;top:0;z-index:100;width:50px;height:100%;background:red;pointer-events:none}.shadow--left{left:0;background:-webkit-linear-gradient(90deg,var(--background-color),transparent);background:linear-gradient(90deg,var(--background-color),transparent);opacity:0}.shadow--right{right:0;background:-webkit-linear-gradient(270deg,var(--background-color),transparent);background:linear-gradient(270deg,var(--background-color),transparent)}.darkmode-float-wrapper{z-index:100;position:fixed;top:0;left:0;width:32px;height:32px;margin:5px 8px;padding:3px;box-sizing:border-box;border-bottom:1px solid var(--tick-color)}@media (max-width: 750px){.darkmode-float-wrapper{top:unset;bottom:0}}.darkmode-toggle{position:relative;width:100%;height:100%;overflow:hidden;cursor:pointer;will-change:filter;transition:filter .1s linear}.darkmode-toggle:hover{filter:drop-shadow(0 0 .5em var(--text-color))}.sun{position:absolute;top:0%;left:0%;transition:transform 1s linear}.sun-off{transform:translateY(200%)}.moon{position:absolute;top:0%;left:0%;transition:transform 1s linear}.moon-off{transform:translateY(200%)}.camping-scene{position:relative;flex:0 1 auto;width:100%;display:flex;justify-content:center;align-items:center}.camping-box{position:relative;width:100%;max-width:500px;aspect-ratio:1 / 1}.bear{position:absolute;top:0;left:0;max-width:75%;max-height:500px;will-change:filter;transition:filter .3s;object-fit:cover;cursor:help}.bear:hover{filter:drop-shadow(0 0 1em hsla(237,100%,30%,.667))}.campfire{position:absolute;bottom:0;right:0;width:45%;will-change:filter;transition:filter .3s}.campfire:hover{filter:drop-shadow(0 0 .5em hsl(40,99%,50%))}.soot{position:absolute;bottom:0;right:0;width:45%;pointer-events:none}.flame{width:100%;filter:brightness(90%) drop-shadow(0 -1em 1em hsl(40,99%,50%));transition:transform .5s ease,opacity 1.5s ease;transform-origin:bottom;animation:sway-animation 3s ease-in-out infinite,flicker-flame 5s linear infinite}.flame-container{position:absolute;bottom:10%;right:11%;width:23%;pointer-events:none;transform-origin:bottom;transition:transform 2.5s ease,opacity 1.5s ease}.flame-off{transform:scale(0);opacity:0}@keyframes sway-animation{0%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}to{transform:rotate(-1.5deg)}}@keyframes flicker-flame{0%{filter:brightness(90%) drop-shadow(0 -1em .75em hsl(40,99%,70%))}25%{filter:brightness(90%) drop-shadow(0em -1em 1em hsl(40,99%,90%))}50%{filter:brightness(90%) drop-shadow(0 -1em .65em hsl(40,99%,60%))}75%{filter:brightness(90%) drop-shadow(0 -1em .8em hsl(40,99%,80%))}to{filter:brightness(90%) drop-shadow(0 -1em .75em hsl(40,99%,70%))}}.smoke-container{transition:opacity 1.5s ease;pointer-events:none}.smoke-off{opacity:0}.smoke-particle{position:absolute;bottom:0%;right:16%;width:10%;height:50%;background-color:#1f292d40;border-radius:50%;filter:blur(5px);opacity:0;animation:smoke-animation 6s 10 linear}.sp0{animation-delay:0s}.sp1{animation-delay:1s}.sp2{animation-delay:2s}.sp3{animation-delay:3s}.sp4{animation-delay:4s}@keyframes smoke-animation{0%{transform:translateY(0) scale(.5);opacity:0}50%{opacity:.7}to{transform:translateY(-100px) rotate(20deg) scale(1.5);opacity:0}}